diff --git a/package-lock.json b/package-lock.json
index 8ca84f6..2f56e99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7375,6 +7375,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12433,6 +12441,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index acf2fc6..1169686 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.6",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
     "react-select": "^3.1.0",
     "unsplash-js": "^7.0.15"
diff --git a/public/logo.png b/public/logo.png
index 248fa7c..04b1204 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png
index 248fa7c..04b1204 100644
Binary files a/src/assets/icons/logo.png and b/src/assets/icons/logo.png differ
diff --git a/src/assets/images/cover1.png b/src/assets/images/cover1.png
new file mode 100644
index 0000000..ed2fd6d
Binary files /dev/null and b/src/assets/images/cover1.png differ
diff --git a/src/assets/images/cover2.png b/src/assets/images/cover2.png
new file mode 100644
index 0000000..1e8793f
Binary files /dev/null and b/src/assets/images/cover2.png differ
diff --git a/src/assets/images/cover3.png b/src/assets/images/cover3.png
new file mode 100644
index 0000000..2ce61a5
Binary files /dev/null and b/src/assets/images/cover3.png differ
diff --git a/src/assets/images/cover4.png b/src/assets/images/cover4.png
new file mode 100644
index 0000000..46c2d8a
Binary files /dev/null and b/src/assets/images/cover4.png differ
diff --git a/src/assets/images/cover5.png b/src/assets/images/cover5.png
new file mode 100644
index 0000000..0f95703
Binary files /dev/null and b/src/assets/images/cover5.png differ
diff --git a/src/components/App.js b/src/components/App.js
index 2cf0bf7..e168c61 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,17 +1,18 @@
 import React from 'react';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
 import Editor from './Editor';
-import Info from './Info'
-import { ImgProvider } from '../utils/ImgContext'
+import Home from './Home'
 
 const App = () => {
 
     return (
-        <ImgProvider>
-            <div>
-                <Editor />
-                <Info />
-            </div>
-        </ImgProvider>
+        <BrowserRouter>
+            <Routes>
+                <Route exact path="/" element={<Home />} />
+                <Route exact path="/editor" element={<Editor />} />
+            </Routes>
+        </BrowserRouter>
     );
 
 }
diff --git a/src/components/Editor.js b/src/components/Editor.js
index b343f54..98f19de 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -4,6 +4,9 @@ import ComponentToImg from "./ComponentToImg";
 import Select from 'react-select';
 import RandomTheme from './RandomTheme';
 // import resetIcon from '../assets/icons/reset.svg'
+import { ImgProvider } from '../utils/ImgContext'
+import logo from '../assets/icons/logo.png'
+import { Link } from "react-router-dom";
 
 const defaultSettings = {
 	title: "How I built my first project with react",
@@ -60,7 +63,22 @@ class Editor extends React.Component {
 
 	render() {
 		return (
-			<div className="flex md:flex-row flex-col bg-gray-50 ">
+			<div>
+				<div className="text-xl bg-white flex border-b border-gray-100 shadow-xl p-2">
+					<Link to="/" className="flex items-center">
+						<img src={logo} alt="logo" className="w-8 h-8 mx-2"/>
+					<h1 className="font-semibold">Coverview</h1>
+
+					</Link>
+
+					<a href="a" className="ml-auto mr-4 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+				</div>
+
+			<ImgProvider>
+				
+
+				<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">
 
 
@@ -70,7 +88,7 @@ class Editor extends React.Component {
 							type="text"
 							value={this.state.title}
 							placeholder="Enter title here"
-							className="focus:outline-none 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>
@@ -220,7 +238,7 @@ class Editor extends React.Component {
 					</div>
 
 
-					<span className="text-sm mt-4  text-center text-gray-400">Made with 💖 by <a href="https://rutikwankhade.dev"
+					<span className="text-sm mt-4  text-center text-gray-400">Made with 💖 by <a href="https://twitter.com/WankhadeRutik"
 						target="_blank" rel="noopener  noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
 
 
@@ -252,7 +270,7 @@ class Editor extends React.Component {
 				<div className="flex flex-col items-center justify-center ">
 
 
-					<div className="w-full  flex items-center  mb-4 ">
+					{/* <div className="w-full  flex items-center  mb-4 ">
 
 						<h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1>
 
@@ -263,19 +281,25 @@ class Editor extends React.Component {
 								<img src="https://img.shields.io/github/stars/rutikwankhade/Coverview.svg" alt="star" className="w-20" />
 							</a>
 
+
+
 							<a className="mx-2 p-2" href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer">
+								
 								<img src="https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#white" alt="sponsor" className="rounded" />
 
 							</a>
 						</div>
 
-					</div>
+					</div> */}
 					<ComponentToImg downloadAs={this.state.download}>
 						<CoverImage {...this.state} />
 					</ComponentToImg>
 				</div>
 
-			</div>
+				</div>
+				</ImgProvider>
+							</div>
+
 		);
 	}
 }
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..4a98035
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import logo from '../assets/icons/logo.png'
+import { Link } from 'react-router-dom';
+import cover1 from '../assets/images/cover5.png'
+import cover2 from '../assets/images/cover2.png'
+import cover3 from '../assets/images/cover3.png'
+
+
+const Home = () => {
+
+
+    return (
+        <div className="bg-gray-50">
+
+            <div className="text-xl  flex border-b border-gray-100  p-2 md:w-10/12 mx-auto">
+                <div className="flex items-center">
+                    <img src={logo} alt="logo" className="w-8 h-8 mx-2" />
+                    <h1 className="font-semibold font-Inter">Coverview</h1>
+                </div>
+
+                <Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl px-6 text-white text-lg ml-auto mr-4 font-Inter font-semibold p-2">
+                    <span className="">Go to editor &rarr;</span>
+                </Link>
+            </div>
+
+            <div className="  mx-auto px-20 py-6   flex flex-col items-center">
+                <h1 className="w-7/12 m-10 text-center md:text-5xl text-2xl font-extrabold text-gray-700 font-Anek">
+                    Creating cover images for your blogs is now super easy
+                </h1>
+            </div>
+
+
+
+
+            <div className=" temple flex flex-row items-center justify-center mx-auto md:w-10/12">
+
+                <div className="m-4 transform -translate-y-20 border animate  rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
+                    <img src={cover2} className="rounded mb-2" alt="cover1" />
+                    <p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-5 rounded mb-2"></p>
+
+                </div>
+
+                <div className="m-4 transform  border animate  -rotate-2  duration-100 bg-white p-4 shadow-sm w-1/3 rounded-lg flex flex-col ">
+                    <img src={cover1} className="rounded border border-gray-100 mb-2" alt="cover-2" />
+                    <p className="animate animate-pulse bg-gray-50 h-6 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-6 rounded mb-2"></p>
+
+                </div>
+
+                <div className="m-4 transform -translate-y-20 border animate  -rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
+                    <img src={cover3} className="rounded mb-2" alt="cover3" />
+                    <p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-5 rounded mb-2"></p>
+
+                </div>
+
+            </div>
+
+        </div>
+    );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Info.js b/src/components/Info.js
deleted file mode 100644
index dc82845..0000000
--- a/src/components/Info.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import logo from '../assets/icons/logo.png'
-
-const Info = () => {
-
-
-    const fbMeta = `     <meta property="og:image" content="url of your image">`
-    const twitterMeta = `<meta property="twitter:image" content="url of your image">
-`
-
-    return (
-        <div className="md:p-20 bg-gray-100">
-
-
-
-            <div className="flex md:flex-row flex-col justify-center">
-                <div className="m-4 bg-white p-10 rounded-xl shadow-sm">
-                    <h2 className="text-2xl my-2 font-semibold">How to use it with meta tags?</h2>
-                    <p>Add this code in the head tag of your site.</p>
-
-                    <div className="bg-purple-100 border-2 border-gray-700 my-4 p-6 rounded text-gray-700 ">
-                        <p>{fbMeta}</p>
-                        <p>{twitterMeta}</p>
-                    </div>
-
-                    <span className="text-sm italic">Don't forget to replace content with your image url</span>
-
-                </div>
-
-
-
-
-                <div className=" md:w-1/3 m-4 bg-white p-10 rounded-xl shadow-sm">
-                    <h2 className="text-2xl my-2 font-semibold">Can I upload a custom icon or my own Image?</h2>
-                    <p className="">Yes. Search <span className="text-purple-400 font-semibold ">custom</span> in the icon option and select it. Now you can upload a custom logo or your own image.</p>
-                    <p className="text-sm my-2 italic">Make sure to upload an icon/image with 1:1 ratio</p>
-                </div>
-
-
-
-
-            </div>
-
-
-            <div className=" p-20 ">
-                <div className="flex flex-col items-center">
-                    <img src={logo} className="" alt="logo" />
-                    <h1 className="text-2xl text-purple-400 ">coverview</h1>
-                </div>
-
-                <h1 className="text-center md:text-6xl text-3xl font-extrabold text-gray-700 ">Creating cover images for your blogs is now super easy</h1>
-                <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="bg-gray-700 text-white p-2 px-6 rounded text-xl flex my-10 hover:bg-gray-800 mx-auto w-max">⭐ Star on Github</a>
-            </div>
-
-        </div>
-    );
-}
-
-export default Info;
\ No newline at end of file
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 6bd9d9b..1ba6d55 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -74,8 +74,8 @@ const StylishTheme = ({ config }) => {
                             <div className="flex items-center mt-10 text-left">
                                 {
                                     customIcon ?
-                                        <div className="w-12 h-12  ">
-                                            <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                                        <div className=" ">
+                                            <img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
                                         </div>
                                         :
                                         <div className="mr-2 items-center justify-center flex">