diff --git a/src/components/App.js b/src/components/App.js
index e168c61..3bebd83 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import Editor from './Editor';
 import Home from './Home'
+import Faq from './Faq';
 
 const App = () => {
 
@@ -11,6 +12,7 @@ const App = () => {
             <Routes>
                 <Route exact path="/" element={<Home />} />
                 <Route exact path="/editor" element={<Editor />} />
+                <Route exact path="/faq" element={<Faq />} />
             </Routes>
         </BrowserRouter>
     );
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 98f19de..1a2762d 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -66,185 +66,190 @@ class Editor extends React.Component {
 			<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>
+						<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
+						<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 className="ml-auto mr-4 ">
+						<a href="a" className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+
+						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
+
+					</div>
+
 				</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">
+				<ImgProvider>
 
 
-					<div className="m-2 flex flex-col">
-						<span className="font-medium">Blog Title</span>
-						<textarea
-							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"
-							onChange={(e) => this.setState({ title: e.target.value })}
-						/>
-					</div>
+					<div className="flex md:flex-row flex-col bg-gray-50 ">
 
-					<div className="flex flex-col m-2 ">
-						<span className="font-medium">Author</span>
-						<input
-							type="text"
-							value={this.state.author}
-							placeholder="Author"
-							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>
+						<div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
 
 
-
-					<div className="flex items-center">
-
-						<div className="flex flex-col m-2 w-1/2">
-							<span className="font-medium">Font</span>
-
-							<select
-								value={this.state.font}
-
-								onChange={(e) => this.setState({ font: e.target.value })}
-
-								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>
-								<option>font-Inter</option>
-								<option>font-Poppins</option>
-								<option>font-Anek</option>
-								<option>font-Nunito</option>
-
-
-							</select>
-						</div>
-						<div className="flex flex-col m-2 ">
-							<span className="font-medium">Color</span>
-							<div className="border rounded flex items-center p-2">
-
-								<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
-								<input type="color" value={this.state.bgColor}
-									onChange={(e) => this.setState({ bgColor: e.target.value })}
-									className="h-8 w-8  rounded"
+							<div className="m-2 flex flex-col">
+								<span className="font-medium">Blog Title</span>
+								<textarea
+									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"
+									onChange={(e) => this.setState({ title: e.target.value })}
 								/>
 							</div>
-						</div>
 
-					</div>
+							<div className="flex flex-col m-2 ">
+								<span className="font-medium">Author</span>
+								<input
+									type="text"
+									value={this.state.author}
+									placeholder="Author"
+									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>
+
+
+
+							<div className="flex items-center">
+
+								<div className="flex flex-col m-2 w-1/2">
+									<span className="font-medium">Font</span>
+
+									<select
+										value={this.state.font}
+
+										onChange={(e) => this.setState({ font: e.target.value })}
+
+										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>
+										<option>font-Inter</option>
+										<option>font-Poppins</option>
+										<option>font-Anek</option>
+										<option>font-Nunito</option>
+
+
+									</select>
+								</div>
+								<div className="flex flex-col m-2 ">
+									<span className="font-medium">Color</span>
+									<div className="border rounded flex items-center p-2">
+
+										<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
+										<input type="color" value={this.state.bgColor}
+											onChange={(e) => this.setState({ bgColor: e.target.value })}
+											className="h-8 w-8  rounded"
+										/>
+									</div>
+								</div>
+
+							</div>
 
 
 
 
 
 
-					<div className="flex flex-col m-2 ">
-						<span className="font-medium">Icon</span>
-						<Select value={this.state.icon}
-							onChange={(selectedOption) => this.setState({ icon: selectedOption })}
-							options={this.state.devIconOptions}
-							formatOptionLabel={this.formatOptionLabel}
-							className="outline-none focus:outline-none text-xl text-gray-700"
-						/>
-					</div>
+							<div className="flex flex-col m-2 ">
+								<span className="font-medium">Icon</span>
+								<Select value={this.state.icon}
+									onChange={(selectedOption) => this.setState({ icon: selectedOption })}
+									options={this.state.devIconOptions}
+									formatOptionLabel={this.formatOptionLabel}
+									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="focus:outline-none text-lg cursor-pointer bg-white rounded border"
-								onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
-							/>
-						</div>
-						:
-						<div></div>
-					}
+							{this.state.icon.label === 'custom' ?
+								<div className="flex items-center justify-center m-2">
+									<input type="file"
+										className="focus:outline-none text-lg cursor-pointer bg-white rounded border"
+										onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
+									/>
+								</div>
+								:
+								<div></div>
+							}
 
-					<div className="flex">
+							<div className="flex">
 
 
-						<div className="flex flex-col m-2 w-1/2">
-							<span className="font-medium">Pattern</span>
-							<select
-								onChange={(e) => this.setState({ pattern: e.target.value })}
-								className="focus:outline-none border text-xl p-2 rounded"
-								value={this.state.pattern}>
+								<div className="flex flex-col m-2 w-1/2">
+									<span className="font-medium">Pattern</span>
+									<select
+										onChange={(e) => this.setState({ pattern: e.target.value })}
+										className="focus:outline-none border text-xl p-2 rounded"
+										value={this.state.pattern}>
 
-								<option>None</option>
-								<option>graph-paper</option>
-								<option>jigsaw</option>
-								<option>hideout</option>
-								<option>dots</option>
-								<option>falling-triangles</option>
-								<option>circuit-board</option>
-								<option>temple</option>
-								<option>anchors</option>
-								<option>brickwall</option>
-								<option>overlapping-circles</option>
-								<option>wiggle</option>
-								<option>tic-tac-toe</option>
-								<option>leaf</option>
-								<option>bubbles</option>
-								<option>squares</option>
-								<option>explorer</option>
-								<option>jupiter</option>
-								<option>sun</option>
-							</select>
-						</div>
+										<option>None</option>
+										<option>graph-paper</option>
+										<option>jigsaw</option>
+										<option>hideout</option>
+										<option>dots</option>
+										<option>falling-triangles</option>
+										<option>circuit-board</option>
+										<option>temple</option>
+										<option>anchors</option>
+										<option>brickwall</option>
+										<option>overlapping-circles</option>
+										<option>wiggle</option>
+										<option>tic-tac-toe</option>
+										<option>leaf</option>
+										<option>bubbles</option>
+										<option>squares</option>
+										<option>explorer</option>
+										<option>jupiter</option>
+										<option>sun</option>
+									</select>
+								</div>
 
-						<div className="flex flex-col m-2 w-1/2">
-							<span className="font-medium">Theme</span>
+								<div className="flex flex-col m-2 w-1/2">
+									<span className="font-medium">Theme</span>
 
-							<select
-								onChange={(e) => this.setState({ theme: e.target.value })}
-								value={this.state.theme}
+									<select
+										onChange={(e) => this.setState({ theme: e.target.value })}
+										value={this.state.theme}
 
-								className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
-								<option>stylish</option>
-								<option>modern</option>
-								<option>basic</option>
-								<option>preview</option>
-								<option>outline</option>
+										className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
+										<option>stylish</option>
+										<option>modern</option>
+										<option>basic</option>
+										<option>preview</option>
+										<option>outline</option>
 
 
 
-							</select>
-						</div>
+									</select>
+								</div>
 
-					</div>
+							</div>
 
 
-					<div className="flex flex-col m-2">
-						<span className="font-medium">Platform</span>
+							<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}
+								<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>
+									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://twitter.com/WankhadeRutik"
-						target="_blank" rel="noopener  noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
+								</select>
+							</div>
 
 
 
 
-					{/* <div className="mx-4 my-1">
+
+
+
+							{/* <div className="mx-4 my-1">
 						<h6>Download As</h6>
 						<select onChange={(e) => this.setState({ download: e.target.value })}
 							className="form-control input"
@@ -256,21 +261,21 @@ class Editor extends React.Component {
 
 
 
-				</div>
+						</div>
 
-				<div className="m-2 items-center justify-center flex flex-col">
-					<RandomTheme onThemeChange={this.getRandomTheme} />
-					{/* <button
+						<div className="m-2 items-center justify-center flex flex-col">
+							<RandomTheme onThemeChange={this.getRandomTheme} />
+							{/* <button
 						className="flex items-center mx-auto border"
 						onClick={this.handleReset}>
 						<img src={resetIcon} className="shuffle-btn border bg-white p-2 rounded cursor-pointer"/>
 					</button> */}
-				</div>
+						</div>
 
-				<div className="flex flex-col items-center justify-center ">
+						<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>
 
@@ -291,14 +296,14 @@ class Editor extends React.Component {
 						</div>
 
 					</div> */}
-					<ComponentToImg downloadAs={this.state.download}>
-						<CoverImage {...this.state} />
-					</ComponentToImg>
-				</div>
+							<ComponentToImg downloadAs={this.state.download}>
+								<CoverImage {...this.state} />
+							</ComponentToImg>
+						</div>
 
-				</div>
+					</div>
 				</ImgProvider>
-							</div>
+			</div>
 
 		);
 	}
diff --git a/src/components/Faq.js b/src/components/Faq.js
new file mode 100644
index 0000000..8ae2d50
--- /dev/null
+++ b/src/components/Faq.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Faq = () => {
+    return ( 
+        <div>
+            faq
+        </div>
+     );
+}
+ 
+export default Faq;
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index c65436a..fedf219 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -171,10 +171,9 @@ const Home = () => {
                 </div>
 
 
+                <WallOfLove />
 
-<WallOfLove />
-
-                <div className="md:w-1/2 mx-auto py-20">
+                <div className="md:w-1/2 mx-auto pt-20">
                     <h2 className="text-5xl text-center font-Anek font-bold text-gray-700 mx-auto">Simple, quick, and easy to use</h2>
                     <p className="text-2xl text-center my-2">So you can focus on writing your blog and never worry about those cover images.</p>
                     <Link to="/editor" >
@@ -186,6 +185,20 @@ const Home = () => {
 
 
 
+
+            <footer className="bg-white p-10 flex font-Inter md:px-20 justify-center items-center">
+                <div className="w-1/2 flex flex-col">
+                    <span className="text-lg">Made with 💛 by <a href="https://twitter.com/WankhadeRutik" className="font-semibold" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
+                    <span className="text-lg font-Nunito">checkout <a href="https://rutikwankhade.dev" target="_blank" rel="noreferrer" className="text-purple-400 hover:text-pink-400">more cool stuff</a> I built</span>
+                </div>
+
+                <div className="text-lg flex ">
+                    <Link to="/faq" className="m-2 hover:font-semibold">📌 How to use</Link>
+                    <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">⭐ Star on Github</a>
+                    <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">🥤 Buy me a coffee</a>
+                </div>
+            </footer>
+
         </div>
     );
 }