diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 8dafd0c..ff5c7c6 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -39,9 +39,13 @@ const CoverImage = (props) => {
 		}
 	}
 
-
+	const {CoverImageWidth, CoverImageHeight, platform} = props
+	const isCustomSize = platform === 'custom'
 	return (
-		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${props.platform}`}>
+		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${platform}`} style={{
+			width: isCustomSize ? `${CoverImageWidth}px` : null,
+			height: isCustomSize ? `${CoverImageHeight}px` : null,
+		}}>
 			{selectTheme(theme)}
 		</div>
 	);
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 5796605..846b1d3 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -3,11 +3,11 @@ import CoverImage from "./CoverImage";
 import ComponentToImg from "./ComponentToImg";
 import Select from 'react-select';
 import RandomTheme from './RandomTheme';
-import { ImgProvider } from '../utils/ImgContext'
+import {ImgProvider} from '../utils/ImgContext'
 import Header from "./Header";
 
 
-import { THEMES } from "../utils/constants";
+import {THEMES} from "../utils/constants";
 
 const defaultIcon = { 'label': 'react', 'value': 'react' }
 
@@ -22,7 +22,9 @@ const defaultSettings = {
 	font: 'font-Anek',
 	theme: 'background',
 	customIcon: '',
-	platform: 'hashnode'
+	platform: 'hashnode',
+	CoverImageWidth: '750',
+	CoverImageHeight: '750',
 };
 
 const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
@@ -195,11 +197,39 @@ class Editor extends React.Component {
 														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
 														<option>hashnode</option>
 														<option>dev</option>
+														<option>custom</option>
 													</select>
 												</div>
-
 											</div>
-
+											{this.state.platform === 'custom' ? (
+												<div className="flex flex-col m-2 w-full">
+													<span className="font-medium text-sm pb-1">Platform</span>
+													<div>
+														<div>
+															<label>
+																<span
+																	className="font-medium text-sm pb-1">CoverImageWidth</span>
+																<input
+																	type="number"
+																	value={this.state.CoverImageWidth}
+																	className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+																	onChange={(e) => this.setState({CoverImageWidth: e.target.value})}
+																/>
+															</label>
+															<label>
+																<span
+																	className="font-medium text-sm pb-1">CoverImageHeight</span>
+																<input
+																	type="number"
+																	value={this.state.CoverImageHeight}
+																	className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+																	onChange={(e) => this.setState({CoverImageHeight: e.target.value})}
+																/>
+															</label>
+														</div>
+													</div>
+												</div>
+											) : null}
 											<button
 												className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
 												onClick={this.handleReset}>
diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 1725e9d..12698d3 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -8,21 +8,21 @@ const BackgroundTheme = ({ config }) => {
 
 
     return (
-        <div className=" bg-white ">
+        <div className="w-full h-full bg-white ">
 
 
-            <div className={` overflow-y-hidden flex flex-col`}
+            <div className={`w-full h-full overflow-y-hidden flex flex-col`}
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center ">
+                <div className="w-full h-full flex flex-row items-center bg-white justify-center ">
 
-                    <div className="w-full">
+                    <div className="w-full h-full">
 
                         {unsplashImage ?
-                            <div className='relative flex group'>
+                            <div className='w-full h-full relative flex group'>
 
-                                <div className="h-max w-full ">
+                                <div className="w-full h-full">
                                     <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-full w-full  " alt="preview" />
                                 </div>
 
@@ -35,7 +35,7 @@ const BackgroundTheme = ({ config }) => {
 
                                     </button>
 
-                                    <div className={`${font} px-10 pt-32  text-left rounded-xl h-full p-4 flex flex-col`}>
+                                    <div className={`${font} px-[10%] pt-[8%] text-left rounded-xl h-full flex flex-col items-center justify-center`}>
                                         <h1 className=" md:text-5xl text-center text-2xl font-bold text-white">{title}</h1>
                                         <div className="flex flex-col items-center py-10  ">
 
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 3cc81ff..bacc4b8 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -11,13 +11,13 @@ const StylishTheme = ({ config }) => {
         <div className=" bg-white w-full h-full">
 
 
-            <div className={` overflow-y-hidden flex flex-col`}
+            <div className={`w-full h-full overflow-y-hidden flex flex-col`}
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center">
+                <div className="w-full h-full flex flex-row items-center bg-white justify-center">
 
-                    <div className="h-full w-1/2  bg-white rounded-l-xl">
+                    <div className="h-full w-1/2 bg-white rounded-l-xl">
                         <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
                             <h1 className=" text-4xl font-bold text-gray-800">{title}</h1>
                             <div className="flex items-center mt-10 text-left">
@@ -41,7 +41,7 @@ const StylishTheme = ({ config }) => {
 
 
                         {unsplashImage ?
-                            <div className='relative w-full h-max flex group'>
+                            <div className='relative w-full h-full flex group'>
 
                                 <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full  " alt="preview" />
 
diff --git a/src/components/UnsplashSearch.js b/src/components/UnsplashSearch.js
index 5517c85..cb97afd 100644
--- a/src/components/UnsplashSearch.js
+++ b/src/components/UnsplashSearch.js
@@ -82,7 +82,7 @@ const UnsplashSearch = ({ largeImgPreview }) => {
                 </div>
 
 
-                <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden h-max justify-center flex flex-wrap">
+                <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden max-h-[70vh] justify-center flex flex-wrap">
                     {
                         imageList.map(image => {
                             return <div key={image.id}
diff --git a/src/index.css b/src/index.css
index 32ba69b..ab19c07 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,11 +13,6 @@
     height:36rem;
 }
 
-/* Solve the problem of poor display effect caused by the height of the cover image exceeding the range under the first theme */
-.h-max.w-full {
-    height: 420px;
-}
-
 .h-99{
     height:35rem;
 }