diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 19319de..04c235f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -50,19 +50,3 @@ export const ModalCloseButton = ({ onClick, to }: ModalCloseButtonProps): ReactE
 
 export const GoBackButton = ({ to, text }: LinkButtonProps): ReactElement =>
   <Link to={to} className={'modal'}><Arrow text={text}/></Link>;
-
-type ContactButtonProps = CommonButtonProps & {
-    icon: string;
-    href: string;
-    alt: string;
-}
-
-export const ContactButton = ({ icon, href, alt, text }: ContactButtonProps): ReactElement =>
-  <a className={'button contact'} href={href} target={'_blank'} rel={'noreferrer'}>
-    <div className={'contact-icon'}>
-      <img src={icon} alt={alt}/>
-    </div>
-    <div className={'contact-text'}>
-      {text}
-    </div>
-  </a>;
diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index b434e15..bdc8460 100644
--- a/src/components/Button/button.scss
+++ b/src/components/Button/button.scss
@@ -8,23 +8,6 @@
             background-color:#000000;
         }
     }
-
-    .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-    }
-
-    .button:hover .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-        transition: ease 0.2s;
-    }
-
-    .button:hover .contact-icon{
-        transition: ease-in-out 0.2s;
-        filter: invert(100%);
-        -webkit-filter: invert(100%);
-    }
 }
   
 @media (prefers-color-scheme: dark) {
@@ -36,18 +19,7 @@
             color:#000000;
             background-color:#FFFFFF;
         }
-    }
-
-    .contact-icon{
-        filter:  invert(100%);
-        -webkit-filter: invert(100%);
-    }
-
-    .button:hover .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-        transition: ease 0.2s;
-    }
+      }
 }
 
 .button{
@@ -73,26 +45,9 @@
 .modal{
     z-index: 1;
 }
-
-.contact-icon{
-    grid-column: 1;
-}
-
 .contact-text{
     grid-column: 2;
     margin: auto;
     width: 50%;
     text-align: center;
 }
-
-
-@media screen and (max-width: 768px){
-    .contact-icon{
-        padding-top: 0.15rem;
-    }
-
-    .contact-text{
-        font-size: 1rem;
-    }
-
-}
\ No newline at end of file
diff --git a/src/components/Contact/Contact.tsx b/src/components/Contact/Contact.tsx
deleted file mode 100644
index a4af359..0000000
--- a/src/components/Contact/Contact.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ContactButton } from '../Button/Button';
-import EmailSVG from './contact_images/email.svg';
-import LinkedInSVG from './contact_images/linkedin.svg';
-import GitHubSVG from './contact_images/github.svg';
-import { ReactElement } from 'react';
-import './contact.scss';
-
-export const Contact = (): ReactElement =>
-  <section className={'contact-container'}>
-    <div className={'contact-header-text'}>
-            Contact me:
-    </div>
-    <div className={'current-status'} />
-    <div className={'contact-links'}>
-      <ul>
-        <li>
-          <ContactButton
-            icon={EmailSVG}
-            href={'mailto:mitch@mitchlui.dev'}
-            alt={'email contact icon'}
-            text={'Email'}
-          />
-        </li>
-        <li>
-          <ContactButton
-            icon={LinkedInSVG}
-            href={'https://www.linkedin.com/in/mitchlui/'}
-            alt={'linkedin contact icon'}
-            text={'Linkedin'}
-          />
-        </li>
-        <li>
-          <ContactButton
-            icon={GitHubSVG}
-            href={'https://www.github.com/mitchlui'}
-            alt={'github contact icon'}
-            text={'GitHub'}
-          />
-        </li>
-      </ul>
-    </div>
-  </section>;
diff --git a/src/components/Contact/contact.scss b/src/components/Contact/contact.scss
deleted file mode 100644
index 95cd71d..0000000
--- a/src/components/Contact/contact.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.contact-container {
-    width: 100%;
-    padding-top: 2rem;
-    padding-bottom: 4rem;
-}
-  
-.contact-header-text{
-    font-size: 1.5rem;
-    font-weight: bold;
-    float: left;
-}
-
-.current-status{
-    padding-top: 2.5rem;
-    font-size: 1.25rem;
-    font-weight: medium;
-}
-
-.contact-links{
-    padding: 1rem 0 1rem 0;
-    width: 100%;
-    float: left;
-
-    ul{
-        display: flex;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-.contact-button{
-    width: 5rem;
-    height: 5rem;
-    background-color: #fff;
-    border-color: #fff;
-    border-radius: 50%;
-}
-
-@media screen and (max-width: 768px) {
-    .contact-header-text {
-        font-size: 1.5rem;
-    }
-
-    .current-status {
-        font-size: 1rem;
-    }
-
-    // really hacky
-    .contact-container {
-      padding-bottom: 12rem;
-    }
-
-    .contact-links{
-      grid-template-columns: 11rem;
-  }
-
-    .contact-links ul {
-        padding-right: 10rem;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-    }
-
-}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 10df142..306c6d9 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -1,5 +1,8 @@
 import { ReactElement, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import EmailSVG from './contact_images/email.svg';
+import LinkedInSVG from './contact_images/linkedin.svg';
+import GitHubSVG from './contact_images/github.svg';
 import { HamburgerMenu } from '../Hamburger/Hamburger';
 import './navbar.scss';
 
@@ -78,6 +81,17 @@ export const NavBarLinks = ({ onClick }: NavBarLinksProps): ReactElement =>
           <span className={'nav-text'}>CV</span>
         </li>
       </Link>
+      <div style={{ marginLeft: '16px' }}>
+        <a style={{ marginRight: '24px' }} href="mailto:mitch@mitchlui.dev">
+          <img className="contact-icon" src={EmailSVG} alt="email" />
+        </a>
+        <a style={{ marginRight: '24px' }} href="/linkedin">
+          <img className="contact-icon" src={LinkedInSVG} alt="linkedin" />
+        </a>
+        <a href="/github">
+          <img className="contact-icon" src={GitHubSVG} alt="github" />
+        </a>
+      </div>
     </ul>
   </nav>;
 
diff --git a/src/components/Contact/contact_images/email.svg b/src/components/NavBar/contact_images/email.svg
similarity index 100%
rename from src/components/Contact/contact_images/email.svg
rename to src/components/NavBar/contact_images/email.svg
diff --git a/src/components/Contact/contact_images/github.svg b/src/components/NavBar/contact_images/github.svg
similarity index 100%
rename from src/components/Contact/contact_images/github.svg
rename to src/components/NavBar/contact_images/github.svg
diff --git a/src/components/Contact/contact_images/linkedin.svg b/src/components/NavBar/contact_images/linkedin.svg
similarity index 100%
rename from src/components/Contact/contact_images/linkedin.svg
rename to src/components/NavBar/contact_images/linkedin.svg
diff --git a/src/components/NavBar/navbar.scss b/src/components/NavBar/navbar.scss
index 7a6f2a3..e06de18 100644
--- a/src/components/NavBar/navbar.scss
+++ b/src/components/NavBar/navbar.scss
@@ -55,6 +55,7 @@
 
 /* desktop navbar */
 .desktop nav ul {
+    display: flex;
     padding: 0;
     list-style: none;
 
@@ -62,6 +63,10 @@
         display: inline-block;
         margin: 1.1rem 1rem;
     }
+
+    .contact-icon {
+      margin-top: 8px;
+    }
 }
 
 /* mobile navbar */
@@ -86,19 +91,17 @@
             animation-delay: 0.13s;
         }
 
-        a:nth-child(4) li{
-          animation-delay: 0.17s;
-      }
+        span a img {
+          margin-top: 16px;
+          animation-delay: 0.21s;
+        }
     }
 
-    li{
+    li {
         cursor: pointer;
         display: flex;
         padding: 0.75rem;
         border-bottom: 0.06rem solid #777777;
-    }
-
-    a li {
         opacity: 0;
         -webkit-animation: fadein 0.25s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 0.25s; /* Firefox < 16 */
@@ -107,6 +110,7 @@
         animation: fadein 0.25s;
         animation-fill-mode: forwards;
     }
+
 }
 
 .mainnav{
@@ -143,5 +147,22 @@
     nav ul {
         text-align: center;
     }
+
+    .contact-icon {
+      padding-top: 16px;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+  .contact-icon {
+    filter: invert(0%);
+    -webkit-filter: invert(0%);
+  }
 }
 
+@media (prefers-color-scheme: dark) {
+  .contact-icon {
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+}
\ No newline at end of file
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index fa997f3..afbbac7 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,5 +1,4 @@
 import { ReactElement, useEffect } from 'react';
-import { Contact } from '../../components/Contact/Contact';
 import { Intro } from '../../components/Intro/Intro';
 import { setTitle, setDescription, setOgProperties } from '../../meta/meta';
 
@@ -15,8 +14,9 @@ export function HomePage (): ReactElement {
 
   return (
     <div className={'fade-in'}>
-      <Intro/>
-      <Contact/>
+      <div style={{ marginBottom: '64px' }}>
+        <Intro/>
+      </div>
     </div>
   );
 }