diff --git a/src/components/App.js b/src/components/App.js
index 105e6ba..2696800 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,7 +5,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <div className="content ">
+            <div className="">
                 <Editor />
                 <Info/>
             </div>
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index faa7b9a..ca616de 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -15,8 +15,11 @@ class ComponentToImg extends React.Component {
 			<React.Fragment>
 				<div ref={this.componentRef}>{this.props.children}</div>
 				<button
-					className="border p-2 bg-gray-700 hover:bg-gray-800 text-white text-xl rounded m-4 px-4"
-					onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>Download</button>
+					className="border p-2 bg-gray-700 hover:bg-gray-800 flex items-center text-white text-xl rounded-lg m-4 px-4"
+					onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>
+					<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+					<span className="mx-2">Download</span>
+				</button>
 			</React.Fragment>
 		);
 	}
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 301f5c2..ade91dc 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -1,14 +1,10 @@
-.cover {
-    display: flex;
-    height: 420px;
-    width: 800px;
-    overflow-y: hidden;
+.dev {
+    height: 340px;
+    width: 860px;
 }
 
-@media screen and (max-width:600px) {
-    .cover {
-        width: 90vw;
-        height: 60vh;
-        padding: 4vh;
-    }
+.hashnode {
+    height: 420px;
+    width: 800px;
+
 }
\ No newline at end of file
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index f882341..fc01a5c 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -35,7 +35,7 @@ const CoverImage = (props) => {
 
 
 	return (
-		<div>
+		<div className="md:w-full md:scale-100 scale-50">
 			{selectTheme(theme)}		</div>
 	);
 
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 09f83c1..319d266 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -13,9 +13,10 @@ const defaultSettings = {
 	author: 'Rutik Wankhade',
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
-	font: 'font-sans',
+	font: 'font-Anek',
 	theme: 'modern',
-	customIcon: ''
+	customIcon: '',
+	platform:'hashnode'
 
 };
 
@@ -24,6 +25,7 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d
 // 	{ value: 'None', label: 'None' },
 // 	{ value: 'javascript', label: 'Javascript' },
 // 	{ value: 'python', label: 'Python' },
+// ]
 
 class Editor extends React.Component {
 
@@ -53,22 +55,6 @@ class Editor extends React.Component {
 	);
 
 
-	// customOption = props => {
-	// 	const { data, innerRef, innerProps } = props;
-
-	// 	return data.name === 'custom' ? (
-	// 		<div ref={innerRef} {...innerProps}>
-	// 			<input type="file"
-	// 				className="text-xl cursor-pointer mb-2 bg-white rounded border"
-	// 				onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
-	// 			/>
-	// 		</div>
-	// 	) : (
-	// 		<components.Option {...props} />
-	// 	);
-
-
-	// };
 
 
 	render() {
@@ -83,7 +69,7 @@ class Editor extends React.Component {
 							type="text"
 							value={this.state.title}
 							placeholder="Enter title here"
-							className="border text-gray-700 text-xl rounded  p-2 h-24"
+							className="focus:outline-none border text-gray-700 text-xl rounded  p-2 h-24"
 							onChange={(e) => this.setState({ title: e.target.value })}
 						/>
 					</div>
@@ -94,7 +80,7 @@ class Editor extends React.Component {
 							type="text"
 							value={this.state.author}
 							placeholder="Author"
-							className="border text-gray-700 text-xl rounded bg-white p-2"
+							className="focus:outline-none border text-gray-700 text-xl rounded bg-white p-2"
 							onChange={(e) => this.setState({ author: e.target.value })}
 						></input>
 					</div>
@@ -111,7 +97,7 @@ class Editor extends React.Component {
 
 								onChange={(e) => this.setState({ font: e.target.value })}
 
-								className=" text-gray-700 text-xl p-2 rounded border">
+								className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
 								<option>font-serif</option>
 								<option>font-sans</option>
 								<option>font-mono</option>
@@ -148,14 +134,14 @@ class Editor extends React.Component {
 							onChange={(selectedOption) => this.setState({ icon: selectedOption })}
 							options={this.state.devIconOptions}
 							formatOptionLabel={this.formatOptionLabel}
-							className="text-xl text-gray-700"
+							className="outline-none focus:outline-none text-xl text-gray-700"
 						/>
 					</div>
 
 					{this.state.icon.label === 'custom' ?
 						<div className="flex items-center justify-center m-2">
 							<input type="file"
-								className="text-lg cursor-pointer bg-white rounded border"
+								className="focus:outline-none text-lg cursor-pointer bg-white rounded border"
 								onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
 							/>
 						</div>
@@ -170,7 +156,7 @@ class Editor extends React.Component {
 							<span className="font-medium">Pattern</span>
 							<select
 								onChange={(e) => this.setState({ pattern: e.target.value })}
-								className="border text-xl p-2 rounded"
+								className="focus:outline-none border text-xl p-2 rounded"
 								value={this.state.pattern}>
 
 								<option>None</option>
@@ -202,7 +188,7 @@ class Editor extends React.Component {
 								onChange={(e) => this.setState({ theme: e.target.value })}
 								value={this.state.theme}
 
-								className="text-gray-700 text-xl p-2 rounded border">
+								className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
 								<option>basic</option>
 								<option>modern</option>
 								<option>outline</option>
@@ -214,8 +200,24 @@ class Editor extends React.Component {
 					</div>
 
 
+					<div className="flex flex-col m-2">
+							<span className="font-medium">Platform</span>
+
+							<select
+								onChange={(e) => this.setState({ platform: e.target.value })}
+								value={this.state.platform}
+
+								className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
+								<option>hashnode</option>
+								<option>dev</option>
+								
+
+							</select>
+						</div>
+
+
 					<span className="text-sm mt-4  text-center text-gray-400">Made with 💖 by <a href="https://rutikwankhade.dev"
-						target="_blank" rel="noopener  noreferrer" className="underline hover:text-green-500">Rutik Wankhade</a></span>
+						target="_blank" rel="noopener  noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
 
 
 
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index 2663aa6..30999f1 100644
--- a/src/components/Themes/BasicTheme.js
+++ b/src/components/Themes/BasicTheme.js
@@ -2,11 +2,11 @@ import React from 'react';
 
 
 const BasicTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
 
     return (
         <div className="p-4 bg-white border">
-            <div className={`cover flex  text-gray-800 items-center ${pattern} `}
+            <div className={`overflow-y-hidden flex  text-gray-800 items-center ${pattern} ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >
 
@@ -18,7 +18,7 @@ const BasicTheme = ({ config }) => {
                         </div>
                     </div>
 
-                    <div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white">
+                    <div className=" flex mx-4  p-4 rounded-xl items-center bg-white">
                         {
                             customIcon ?
                                 <div className="w-12 h-12  ">
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js
index d8a518b..edc1c83 100644
--- a/src/components/Themes/ModernTheme.js
+++ b/src/components/Themes/ModernTheme.js
@@ -3,19 +3,19 @@ import React from 'react';
 
 const ModernTheme = ({ config }) => {
 
-    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
 
     return (
-        <div className="p-4 bg-white border">
-            <div className=" cover  flex  items-center">
-                <div className={`  h-full rounded-xl  p-4 text-gray-800 flex  items-center ${pattern} `}
+        <div className="w-full p-4 bg-white border">
+            <div className=" overflow-y-hidden w-full flex  items-center">
+                <div className={`  h-full w-full rounded-xl  p-4 text-gray-800 flex  items-center ${pattern} ${platform}`}
                     style={{ backgroundColor: bgColor }}
                 >
 
                     {
                         customIcon ?
-                            <div className="w-28 h-28  mx-auto items-center justify-center flex">
-                                <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                            <div className="  mx-auto items-center justify-center flex">
+                                <img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
                             </div>
                             :
                             <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index 52e54b4..b287097 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -1,27 +1,21 @@
 import React from 'react';
 const OutlineTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
 
     return (
         <div className="p-4 bg-white border">
 
 
-            <div className={`cover rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} `}
+            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >
 
 
-                <div className={`${font} bg-white rounded-2xl md:w-10/12   m-auto flex flex-col py-12 px-6 `}>
-                    <div className="px-12">
-                        <div>
-                            <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
-                        </div>
-                    </div>
-
-
+                <div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col p-12 `}>
+                    <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
                 </div>
 
-                <div className={`${font} w-full  h-16 border-gray-800 border-t-4 flex  mt-10 p-2 px-6  items-center bg-white`}>
+                <div className={`${font} w-full h-16 border-gray-800 border-t-4 flex  mt-auto mb-0 p-2 px-6  items-center bg-white`}>
                     {
                         customIcon ?
                             <div className="w-12 h-12  ">
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index 63643a7..28e97f0 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const PreviewTheme = ({ config }) => {
-    const {bgColor } = config;
+    const {bgColor, platform } = config;
 
     const [image, setImage] = useState()
 
@@ -9,7 +9,7 @@ const PreviewTheme = ({ config }) => {
         <div className="p-4 bg-white border">
 
 
-            <div className={`cover flex flex-col rounded px-4 pt-4 `}
+            <div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}
                 style={{ backgroundColor: bgColor }}
             >
 
@@ -30,7 +30,7 @@ const PreviewTheme = ({ config }) => {
                                 className="text-xl cursor-pointer mb-2 bg-white rounded border"
                                 onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
                             />
-                            <span className=" text-center italic">Upload a screenshot of your app</span>
+                            <span className=" text-center italic">click to upload a screenshot</span>
                         </div>
 
                     }