diff --git a/src/assets/images/theme5.webp b/src/assets/images/theme5.webp
new file mode 100644
index 0000000..98a8616
Binary files /dev/null and b/src/assets/images/theme5.webp differ
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 2222b52..96b08c4 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -11,6 +11,7 @@ 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'
+import theme5 from '../assets/images/theme5.webp'
 
 
 const defaultSettings = {
@@ -79,7 +80,7 @@ class Editor extends React.Component {
 							<Tab.Group>
 								<div className="flex md:flex-row flex-col">
 
-									<Tab.List className=" bg-white p-2 flex flex-row md:flex-col">
+									<Tab.List className=" bg-white md:p-0 p-2 flex flex-row md:flex-col">
 										<Tab className="flex  items-center font-semibold  ">
 											<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray- bg-white rounded-xl w-12 m-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>
 										</Tab>
@@ -250,6 +251,10 @@ class Editor extends React.Component {
 													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"
 												/>
+												<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"
+												/>
 											</div>
 
 
@@ -274,7 +279,7 @@ class Editor extends React.Component {
 
 						</div>
 
-						<div className="flex m-6 flex-col items-center justify-center ">
+						<div className=" flex m-6 flex-col items-center justify-center ">
 
 							<ComponentToImg downloadAs={this.state.download}>
 								<CoverImage {...this.state} />
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index 85bd965..6265be1 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -6,29 +6,32 @@ const OutlineTheme = ({ config }) => {
         <div className="p-4 bg-white ">
 
 
-            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} ${platform} `}
+            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10  ${pattern} ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >
 
 
-                <div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col p-12 `}>
-                    <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
-                </div>
-
-                <div className={`${font} w-full h-16 border-gray-800 border-t-4 flex  mt-auto mb-0 p-2 px-6  items-center bg-white`}>
+                <div className={`${font} rounded-2xl py-6 flex flex-col  `}>
                     {
                         customIcon ?
-                            <div className="w-12 h-12  ">
-                                <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                            <div className=" m-6">
+                                <img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
                             </div>
                             :
                             <div className="  mr-auto ml-2 items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
+                                <i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
                             </div>
                     }
-                    <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
+                    <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">{title}</h1>
+                
+                     <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
+                    
+                    <h2 className="text-xl text-white font-semibold">{author}</h2>
 
                 </div>
+                </div>
+
+           
 
             </div>