diff --git a/src/components/App.css b/src/components/App.css
index 739b284..d2f95e4 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
+
 html,
 body,
 #root {
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index aee6ead..b64c555 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -1,87 +1,110 @@
-
-.cover{
-    background-color:  #00ff99;
-    text-align: center;
+.cover {
+    background-color: #00ff99;
+    display: flex;
     justify-content: center;
     align-items: center;
-    height:380px;
-    width:800px;
-    padding:90px;
-    border-radius:2px;
+    height: 420px;
+    width: 800px;
+    border-radius: 2px;
     overflow-y: hidden;
+    padding: 40px;
+
 
 }
 
-.title-card{
-   border-radius: 2px 2px 20px 20px;
-   background-color: #ffffff; 
-   text-align: center;
-   color:#676683;
-   justify-content: center;
-   align-items: center;
-   vertical-align: middle;
-   padding:40px;
-   font-size:35px;
-   font-weight: 600;
-   border:none;  
-   vertical-align: middle; 
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
 }
 
-i{
-    font-size: 32px;
-    float:left;
-    margin-left:2vw;
+.title-card {
+    border-radius: 10px;
+    background-color: #ffffff;
+    text-align: left;
+    color: #676683;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    width: 90%;
+    border: none;
+    padding: 40px;
+    font-family: inter;
+    margin: auto;
+    box-shadow: 13px 10px 36px 2px rgba(0,0,0,0.22);
+
 }
-.author{
-    margin-right:3vw;
+
+.title {
+    font-size: 40px;
+    font-weight: 700;
+
 }
-.meta{
-    float:bottom;
+
+i {
+    font-size: 110px;
+    margin: 2vw;
+}
+
+.author-text {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 20px;
+}
+
+.meta {
+    float: bottom;
     background-color: #676683;
-    color:#ffffff;
-    height:42px;
-    padding :4px;
+    color: #ffffff;
+    padding: 20px;
     font-weight: 500;
     display: flex;
     align-items: center;
-    justify-content: space-between  
+    justify-content: space-between
 }
 
-h1{
-    height:auto;
+h1 {
+    height: auto;
 }
 
-button{
-  background-color:  #634f7d;
-font-weight: 600;
-    color:#ffffff;
-    border:none;
-    border-radius:4px;
-    padding:10px;
-    width:150px;
-    margin-top:20px;
+button {
+    background-color: #634f7d;
+    font-weight: 600;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px;
+    width: 150px;
+    margin-top: 20px;
     text-align: center;
     box-shadow: 4px 4px #cccccc;
 
 }
-button:hover{   
-     background-color: #54466b;
+
+button:hover {
+    background-color: #54466b;
 }
 
-@media screen and (max-width:600px){
-    .cover{
-        width:100vw;
-        height:auto;
-        padding:8vh;
+@media screen and (max-width:600px) {
+    .cover {
+        width: 100vw;
+        height: auto;
+        padding: 8vh;
     }
-    .title-card{
-        padding:2.5vw 3vw 2.5vw 3vw;
+
+    .title-card {
+        padding: 2.5vw 3vw 2.5vw 3vw;
         font-size: 1.2rem;
     }
-    .meta{
-        height:5vh;
+
+    .meta {
+        height: 5vh;
         font-size: 2vh;
     }
-    i{font-size:3.5vh;}
-   
+
+    i {
+        font-size: 3.5vh;
+    }
+
 }
\ No newline at end of file
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index ef6360b..336dfd4 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -3,39 +3,40 @@ import "./CoverImage.css";
 import "../assets/css/patterns.css";
 
 class CoverImage extends React.Component {
-	hexToRgbA(hex, opacity) {
-		var c;
-		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-			c = hex.substring(1).split("");
-			if (c.length === 3) {
-				c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-			}
-			c = "0x" + c.join("");
-			return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
-		}
-		throw new Error("Bad Hex");
-	}
+	// hexToRgbA(hex, opacity) {
+	// 	var c;
+	// 	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+	// 		c = hex.substring(1).split("");
+	// 		if (c.length === 3) {
+	// 			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+	// 		}
+	// 		c = "0x" + c.join("");
+	// 		return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
+	// 	}
+	// 	throw new Error("Bad Hex");
+	// }
 
 	render() {
-		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author, icon } = this.props;
-		const styleToApply = {
-			borderTop: `${borderSize}px ${borderType} ${borderColor}`,
-			backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
-			color: `${textColor}`,
-		};
+		const { title, bgColor, pattern, author, icon } = this.props;
+	
 		return (
 			<div>
 				<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
 					<div className={`${pattern}`}>
-						<div className="title-card" style={styleToApply}>
-							<p>{title}</p>
+
+						<div className="title-card">
+							<div className="flex-row">
+								<i className={`devicon-${icon.value}-plain dev-icon `}></i>
+								<div>
+									<h1 className="title">{title}</h1>
+									<h2 className="author-text"> {author}</h2>
+								</div>
+							</div>
 						</div>
 
 					</div>
 				</div>
-				<div className="meta" style={{ backgroundColor: borderColor }}>
-					<i className={`devicon-${icon.value}-plain dev-icon`}></i>
-					<span className="author">A blog by  <span role="img" aria-label="bolt">⚡</span> {author}</span></div>
+				
 			</div>
 		);
 	}