diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 5742cce..8dafd0c 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -41,13 +41,11 @@ const CoverImage = (props) => {
 
 
 	return (
-		<div className="md:w-full md:scale-100 scale-50">
-			{selectTheme(theme)}		</div>
+		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${props.platform}`}>
+			{selectTheme(theme)}
+		</div>
 	);
 
-
-
-
 }
 
 export default CoverImage;
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index f191212..b5e6041 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,platform } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
 
     return (
-        <div className="p-4 bg-white ">
-            <div className={`overflow-y-hidden flex  text-gray-800 items-center h-full ${platform} ${pattern} `}
+        <div className=" bg-white w-full h-full ">
+            <div className={`overflow-y-hidden flex  text-gray-800 items-center h-full ${pattern} `}
                 style={{ backgroundColor: bgColor }}
             >
 
@@ -33,8 +33,8 @@ const BasicTheme = ({ config }) => {
                         <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
 
                     </div>
-                    
-                    </div>
+
+                </div>
 
             </div>
 
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js
index a6578da..ec23940 100644
--- a/src/components/Themes/MobileMockupTheme.js
+++ b/src/components/Themes/MobileMockupTheme.js
@@ -1,22 +1,22 @@
 import React, { useState } from 'react';
 
 const MobileMockupTheme = ({ config }) => {
-    const { bgColor, platform, title,font } = config;
+    const { bgColor, title, font } = config;
 
     const [image, setImage] = useState()
 
     return (
-        <div className="p-4 bg-white">
+        <div className={`bg-white w-full h-full`}>
 
 
-            <div className={`overflow-y-hidden flex flex-row px-10 items-center justify-center rounded px-8 pt-4  ${platform}`}
+            <div className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
                 style={{ backgroundColor: bgColor }}
             >
 
 
                 <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
 
-                <div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
+                <div className="w-5/12 mx-auto m-4 mt-10 group h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
                     <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
 
                         <div className="flex mx-auto items-center">
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js
index 07b098d..35205f1 100644
--- a/src/components/Themes/ModernTheme.js
+++ b/src/components/Themes/ModernTheme.js
@@ -3,12 +3,12 @@ import React from 'react';
 
 const ModernTheme = ({ config }) => {
 
-    const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
 
     return (
-        <div className="w-full p-4 bg-white ">
-            <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}`}
+        <div className="w-full h-full bg-white ">
+            <div className=" overflow-y-hidden w-full h-full flex  items-center">
+                <div className={`  h-full w-full p-4 text-gray-800 flex  items-center ${pattern} `}
                     style={{ backgroundColor: bgColor }}
                 >
 
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index 676dbbd..c1f6866 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -1,12 +1,12 @@
 import React from 'react';
 const OutlineTheme = ({ config }) => {
-    const { title, bgColor, author, icon, font, customIcon, platform } = config;
+    const { title, bgColor, author, icon, font, customIcon } = config;
 
     return (
-        <div className="p-4 bg-white ">
+        <div className="w-full h-full bg-white ">
 
 
-            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10  ${platform} `}
+            <div className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
                 style={{ backgroundColor: bgColor }}
             >
 
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index ccfaafc..6e2279b 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
 
 const PreviewTheme = ({ config }) => {
-    const { bgColor, platform, title, font } = config;
+    const { bgColor, title, font } = config;
 
     const [image, setImage] = useState()
 
     return (
-        <div className="p-4 bg-white">
+        <div className="w-full h-full bg-white">
 
 
-            <div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}
+            <div className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
                 style={{ backgroundColor: bgColor }}
             >
 
-
                 <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
 
                 <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
@@ -30,7 +29,6 @@ const PreviewTheme = ({ config }) => {
                     </div>
 
 
-
                     {image ?
                         <div className="">
                             <img src={image && image} className="object-cover " alt="preview" />
@@ -48,13 +46,8 @@ const PreviewTheme = ({ config }) => {
                     }
                 </div>
 
-
-
-
-
             </div>
 
-
         </div>
     );
 }
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index f61f5e2..56615bf 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -3,7 +3,7 @@ import unsplash from "../../utils/unsplashConfig";
 import { ImgContext } from '../../utils/ImgContext';
 
 const StylishTheme = ({ config }) => {
-    const { title, author, font, icon, customIcon, platform,bgColor } = config;
+    const { title, author, font, icon, customIcon, bgColor } = config;
 
     // const [image, setImage] = useState({})
 
@@ -65,14 +65,14 @@ const StylishTheme = ({ config }) => {
 
 
     return (
-        <div className=" bg-white rounded">
+        <div className=" bg-white w-full h-full">
 
 
-            <div className={` overflow-y-hidden flex flex-col rounded ${platform}`}
-            style={{ backgroundColor: bgColor }}
+            <div className={` overflow-y-hidden flex flex-col`}
+                style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center m-4 ">
+                <div className="flex flex-row  items-center bg-white  justify-center">
 
                     <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`}>
@@ -101,11 +101,11 @@ const StylishTheme = ({ config }) => {
                             <div className='relative flex group'>
 
                                 <div className="h-96 w-96 ">
-                                    
-                              
+
+
                                     <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96  " alt="preview" />
- </div>
-                               
+                                </div>
+
                                 <button
                                     onClick={() => setUnsplashImage('')}
                                     className="absolute  top-4 right-2 cursor-pointer">