diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index c9d9665..78cabff 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -6,5 +6,10 @@
     overflow-y: hidden;
 }
 
-
-
+@media screen and (max-width:600px) {
+    .cover {
+        width: 90vw;
+        height: 60vh;
+        padding: 4vh;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 7fc5813..2a10158 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -43,7 +43,7 @@ class Editor extends React.Component {
 
 	render() {
 		return (
-			<div className="flex bg-gray-50 ">
+			<div className="flex md:flex-row flex-col bg-gray-50 ">
 				<div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
 					{/* <p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> */}
 
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index 2de2d87..f358015 100644
--- a/src/components/Themes/BasicTheme.js
+++ b/src/components/Themes/BasicTheme.js
@@ -14,7 +14,7 @@ const BasicTheme = ({ config }) => {
                 <div className={`${font} bg-white md:w-10/12  m-auto flex flex-col pt-12 rounded-xl`}>
                     <div className="px-12">
                         <div>
-                            <h1 className="text-5xl font-bold text-center">{title}</h1>
+                            <h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
                         </div>
                     </div>