diff --git a/assets/hrefs.js b/assets/hrefs.js
index 1a91408..cc4f584 100644
--- a/assets/hrefs.js
+++ b/assets/hrefs.js
@@ -1,3 +1,3 @@
 export const hrefs = [
-  { name: 'Try app', href: '/app' },
+  { name: 'Try App', href: '/app' },
 ]
\ No newline at end of file
diff --git a/components/Navbar/Links/NavLinks.jsx b/components/Navbar/Links/NavLinks.jsx
index 6c99161..0426315 100644
--- a/components/Navbar/Links/NavLinks.jsx
+++ b/components/Navbar/Links/NavLinks.jsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 import { hrefs } from '../../../assets/hrefs'
+import { GitHub } from '../../../assets/icons'
 import Languages from '../display/Languages'
 import style from './navlinks.module.css'
 
@@ -15,6 +16,11 @@ const NavLinks = ({ viewport = 'desktop', }) => {
         </li>
       ))}
       {viewport === 'mobile' && <li style={{ margin: '0.5rem 0' }}><Languages /></li>}
+      <li className={style.social}>
+        <Link href='https://github.com/Simply-Markdown/mdpreview-web'>
+          <a target='_blank'>GitHub<GitHub /></a>
+        </Link>
+      </li>
     </ul>
   )
 }
diff --git a/components/Navbar/Links/navlinks.module.css b/components/Navbar/Links/navlinks.module.css
index b52a6e1..ef36078 100644
--- a/components/Navbar/Links/navlinks.module.css
+++ b/components/Navbar/Links/navlinks.module.css
@@ -25,8 +25,9 @@
   border-bottom: 1px solid var(--md-divider-light-1);
 }
 
-.link:hover, .navLinkDesktop:hover {
+.link:hover, .linkDesktop:hover, .social a:hover {
   color: var(--md-text-3);
+  transition: color 0.2s ease-out;
 }
 
 .navLinkMobile li {
@@ -38,7 +39,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  margin-right: 1.5rem;
+  margin-right: 1rem;
 }
 
 .linkDesktop {
@@ -55,13 +56,55 @@
   display: none;
 }
 
+.social {
+  color: var(--md-text-1);
+  position: relative;
+  width: max-content;
+  padding: 1rem 0;
+}
+
+.social a {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.social a svg {
+  height: 1.4rem;
+}
+
 @media screen and (min-width: 768px) {
   .navLinkMobile {
     display: none;
   }
+
   .navLinkDesktop {
     display: flex;
     color: var(--md-text-1);
+    gap: 2rem;
+  }
+
+  .social {
+    color: var(--md-text-1);
+    position: relative;
+    width: max-content;
+    padding: 0;
+    height: 100%;
+  }
+  .social a {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    gap: 0.5rem;
+  }
+
+  .social a svg {
+    height: 1.1rem;
   }
 }