diff --git a/src/assets/images/theme1.webp b/src/assets/images/theme1.webp
new file mode 100644
index 0000000..c4a82a0
Binary files /dev/null and b/src/assets/images/theme1.webp differ
diff --git a/src/assets/images/theme2.webp b/src/assets/images/theme2.webp
new file mode 100644
index 0000000..a520e16
Binary files /dev/null and b/src/assets/images/theme2.webp differ
diff --git a/src/assets/images/theme3.webp b/src/assets/images/theme3.webp
new file mode 100644
index 0000000..2f924f5
Binary files /dev/null and b/src/assets/images/theme3.webp differ
diff --git a/src/assets/images/theme4.webp b/src/assets/images/theme4.webp
new file mode 100644
index 0000000..9cc8a44
Binary files /dev/null and b/src/assets/images/theme4.webp differ
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 8deb28b..d254f27 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -7,6 +7,12 @@ import { ImgProvider } from '../utils/ImgContext'
 import Header from "./Header";
 import { Tab } from '@headlessui/react'
 
+import theme1 from '../assets/images/theme1.webp'
+import theme2 from '../assets/images/theme2.webp'
+import theme3 from '../assets/images/theme3.webp'
+import theme4 from '../assets/images/theme4.webp'
+
+
 const defaultSettings = {
 	title: "How I built my first project with react",
 	bgColor: "#ffe9e3",
@@ -67,15 +73,13 @@ class Editor extends React.Component {
 				<Header />
 
 				<ImgProvider>
-
 					<div className="flex md:flex-row flex-col bg-gray-50 ">
 
-						<div className="bg-white flex flex-col h-100 border w-4/12">
+						<div className="bg-white flex flex-col h-100 w-4/12">
 
 							<Tab.Group>
 								<div className="flex">
 
-
 									<Tab.List className=" bg-white p-2 flex flex-col">
 										<Tab className="flex  items-center font-semibold  ">
 											<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray-800 w-12 my-2 h-12 p-2 rounded border" width="24" height="24" viewBox="0 0 24 24" ><path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path></svg>
@@ -140,9 +144,7 @@ class Editor extends React.Component {
 
 													<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>
@@ -151,8 +153,6 @@ class Editor extends React.Component {
 														<option>font-Poppins</option>
 														<option>font-Anek</option>
 														<option>font-Nunito</option>
-
-
 													</select>
 												</div>
 												<div className="flex flex-col m-2 ">
@@ -206,12 +206,9 @@ class Editor extends React.Component {
 													<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>
 
@@ -223,36 +220,40 @@ class Editor extends React.Component {
 												<span>Reset All</span>
 											</button>
 
-
-
 										</Tab.Panel>
 
 
+										<Tab.Panel className="h-99 w-full flex flex-col justify-center">
 
+											<div className="flex items-center border rounded-xl border-gray-50 px-4">
+												<h2 className="text-lg pl-2 font-inter font-semibold">Themes</h2>
+												<div className="ml-auto mr-1 p-2">
+													<RandomTheme onThemeChange={this.getRandomTheme} />
 
-										<Tab.Panel className=" w-full flex flex-col justify-center">
+												</div>
+											</div>
 
-											<div>
-												<RandomTheme onThemeChange={this.getRandomTheme} />
+											<div className="p-4  flex flex-wrap  overflow-y-scroll ">
+
+												<img src={theme1} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "basic" })}
+													className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
+												/>
+												<img src={theme2} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "modern" })}
+													className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 "
+												/>
+												<img src={theme3} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "stylish" })}
+													className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
+												<img src={theme4} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "preview" })}
+													className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
 											</div>
 
 
-
-
-											<div className="flex flex-col m-2 w-1/2">
-
-												<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>
-
-												</select>
-											</div>
 										</Tab.Panel>
 									</Tab.Panels>
 
@@ -274,15 +275,6 @@ class Editor extends React.Component {
 
 						</div>
 
-						{/* <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 className="flex m-6 flex-col items-center justify-center ">
 
 							<ComponentToImg downloadAs={this.state.download}>
diff --git a/src/components/RandomTheme.js b/src/components/RandomTheme.js
index b19cd72..b4e1b65 100644
--- a/src/components/RandomTheme.js
+++ b/src/components/RandomTheme.js
@@ -107,8 +107,11 @@ class RandomTheme extends React.Component {
 
     render() {
         return (
-            <div className="shuffle-btn mx-auto w-14 flex justify-center items-center shadow-xl shadow-gray-100 h-14 p-2  bg-indigo-400  rounded-xl cursor-pointer" onClick={this.changeTheme}>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-white w-10 h-10" width="24" height="24" viewBox="0 0 24 24" ><path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path><path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path></svg>
+            <div className="flex flex-col justify-center">
+                <div className="shuffle-btn  w-10 flex justify-center items-center shadow-xl shadow-gray-100 h-10 p-2  bg-indigo-400  rounded-xl cursor-pointer" onClick={this.changeTheme}>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-white w-10 h-10" width="24" height="24" viewBox="0 0 24 24" ><path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path><path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path></svg>
+                </div>
+
             </div>
         );
     }
diff --git a/src/index.css b/src/index.css
index 029129b..bd4c23c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,4 +11,28 @@
 
 .h-100{
     height:36rem;
+}
+
+.h-99{
+    height:35rem;
+}
+
+::-webkit-scrollbar {
+  /* width: 8px; */
+  display: none;
+}
+
+Track
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background:  #ccccff;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background:  #b3b3ff;
 }
\ No newline at end of file