diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 25939ad..e13552b 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -3,6 +3,7 @@ import "./CoverImage.css";
 import "../assets/css/patterns.css";
 import ModernTheme from "./Themes/ModernTheme";
 import BasicTheme from "./Themes/BasicTheme";
+import OutlineTheme from "./Themes/OutlineTheme";
 
 const CoverImage = (props) => {
 	// hexToRgbA(hex, opacity) {
@@ -20,11 +21,19 @@ const CoverImage = (props) => {
 
 	const { theme } = props;
 
+	const selectTheme = (theme) => {
+		switch (theme) {
+			case 'basic': return <BasicTheme config={props} />
+			case 'modern': return <ModernTheme config={props} />
+			case 'outline': return <OutlineTheme config={props} />
+			default: return <BasicTheme config={props} />
+		}
+	}
+
 
 	return (
 		<div>
-			{theme === 'basic' ? <BasicTheme config={props} /> : <ModernTheme config={props} />}
-		</div>
+			{selectTheme(theme)}		</div>
 	);
 
 
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 16c0be1..ce6ca23 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -171,6 +171,7 @@ class Editor extends React.Component {
 								className="text-gray-700 text-xl p-2 rounded border">
 								<option>basic</option>
 								<option>modern</option>
+								<option>outline</option>
 							</select>
 						</div>
 
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
new file mode 100644
index 0000000..e5852d5
--- /dev/null
+++ b/src/components/Themes/OutlineTheme.js
@@ -0,0 +1,37 @@
+import React from 'react';
+const OutlineTheme = ({ config }) => {
+    const { title, bgColor, pattern, author, icon, font } = config;
+
+    return (
+        <div className="p-4 bg-white border">
+
+
+            <div className={`cover rounded flex flex-col text-gray-800 items-center border-2 border-gray-800 ${pattern} `}
+                style={{ backgroundColor: bgColor }}
+            >
+
+
+                <div className={`${font} bg-white rounded md:w-10/12 border-2 border-gray-800 m-auto flex flex-col py-12 px-6 `}>
+                    <div className="px-12">
+                        <div>
+                            <h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
+                        </div>
+                    </div>
+
+
+                </div>
+
+                <div className="w-full border-gray-800 border-t-2 flex  mt-10 p-2 px-6  items-center bg-white">
+                    <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
+                    <h2 className="text-xl ml-auto mr-2 font-semibold"> - {author}</h2>
+
+                </div>
+
+            </div>
+
+
+        </div>
+    );
+}
+
+export default OutlineTheme;
\ No newline at end of file