diff --git a/src/Components/Navigation/Navpanel.js b/src/Components/Navigation/Navpanel.js
index 8403402..e2efd34 100644
--- a/src/Components/Navigation/Navpanel.js
+++ b/src/Components/Navigation/Navpanel.js
@@ -27,7 +27,7 @@ export default function Navpanel(props) {
         <div className="mobileHeadingLinkWrap">
           <div className="mobile-info-box">
             <div className="contact-detail-one">
-              <Link className="contactLink" href="/login">
+              <Link className="contact-link" href="/login">
                 Login
               </Link>
             </div>
@@ -41,6 +41,11 @@ export default function Navpanel(props) {
                 Signup
               </a>
             </div>
+            <div className="contact-detail-one">
+              <Link className="contact-link" href="/login">
+                Blog
+              </Link>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/styles/contact.scss b/src/styles/contact.scss
index 5d475c8..6ea0dec 100644
--- a/src/styles/contact.scss
+++ b/src/styles/contact.scss
@@ -38,9 +38,9 @@
   border: 1px solid #2196f3;
 }
 
-.contactLink {
+.contact-link {
   font-size: 1rem;
-  letter-spacing: -0.07rem;
+  letter-spacing: 0.2rem;
   color: #fff;
   text-decoration: none;
   padding-right: 5px;
@@ -92,7 +92,7 @@
 .contact-detail-one {
   display: flex;
   flex-direction: row-reverse;
-  height: 50px;
+  height: 38px;
   margin: 12px 0px;
   background-color: rgb(56, 56, 233);
 }
@@ -100,7 +100,7 @@
 .contact-detail-two {
   display: flex;
   flex-direction: row-reverse;
-  height: 50px;
+  height: 38px;
   margin: 12px 0px;
   background-color: hsl(17, 100%, 61%);
   letter-spacing: 0.2rem;
@@ -109,7 +109,7 @@
 .contact-detail-three {
   display: flex;
   flex-direction: row-reverse;
-  height: 50px;
+  height: 40px;
   margin: 12px 0px;
   background-color: rgb(93, 206, 255);
   letter-spacing: 0.5rem;