diff --git a/src/assets/images/theme6.webp b/src/assets/images/theme6.webp
new file mode 100644
index 0000000..f19cc61
Binary files /dev/null and b/src/assets/images/theme6.webp differ
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 7b62c5a..0e09fad 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -12,6 +12,7 @@ import theme2 from '../assets/images/theme2.webp'
 import theme3 from '../assets/images/theme3.webp'
 import theme4 from '../assets/images/theme4.webp'
 import theme5 from '../assets/images/theme5.webp'
+import theme6 from '../assets/images/theme6.webp'
 
 
 
@@ -24,7 +25,7 @@ const defaultSettings = {
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
 	font: 'font-Anek',
-	theme: 'mobile',
+	theme: 'stylish',
 	customIcon: '',
 	platform: 'hashnode'
 
@@ -237,23 +238,29 @@ class Editor extends React.Component {
 
 												<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 "
+													className=" 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 "
+													className="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"
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
 												/>
+												
 												<img src={theme5} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "outline" })}
-													className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+													className=" 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=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
+												<img src={theme6} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "mobile" })}
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
 												/>
 											</div>
 
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js
index c55274e..a6578da 100644
--- a/src/components/Themes/MobileMockupTheme.js
+++ b/src/components/Themes/MobileMockupTheme.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const MobileMockupTheme = ({ config }) => {
-    const { bgColor, platform, title } = config;
+    const { bgColor, platform, title,font } = config;
 
     const [image, setImage] = useState()
 
@@ -14,7 +14,7 @@ const MobileMockupTheme = ({ config }) => {
             >
 
 
-                <h1 className="text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left">{title}</h1>
+                <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="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index 6ac000e..ccfaafc 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const PreviewTheme = ({ config }) => {
-    const { bgColor, platform,title } = config;
+    const { bgColor, platform, title, font } = config;
 
     const [image, setImage] = useState()
 
@@ -13,8 +13,8 @@ const PreviewTheme = ({ config }) => {
                 style={{ backgroundColor: bgColor }}
             >
 
-                
-                                            <h1 className="text-2xl md:text-3xl p-10 text-white font-bold text-center">{title}</h1>
+
+                <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">
                     <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
@@ -30,7 +30,7 @@ const PreviewTheme = ({ config }) => {
                     </div>
 
 
-                    
+
                     {image ?
                         <div className="">
                             <img src={image && image} className="object-cover " alt="preview" />