diff --git a/src/App.tsx b/src/App.tsx
index 18836e8..8ed905d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Experience from './Components/Experience/Experience';
 import { Route, Routes } from 'react-router-dom';
 import Navbar from './Components/Navbar';
 import './App.scss';
+import Footer from './Components/Footer/Footer';
 
 const App: React.FC = () => {
   return (
@@ -17,6 +18,7 @@ const App: React.FC = () => {
         <Route path="/projects" element={<Project />} />
         <Route path="/stats" element={<Experience />} />
       </Routes>
+      <Footer />
     </div>
   );
 };
diff --git a/src/Components/Footer/Footer.scss b/src/Components/Footer/Footer.scss
new file mode 100644
index 0000000..d7d3698
--- /dev/null
+++ b/src/Components/Footer/Footer.scss
@@ -0,0 +1,51 @@
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #95b9b0;
+$background-color: #262f2aec;
+$text-color: #fafff0;
+$font-color: #a2aa94;
+$hover-color: #ced4da;
+$footer-background-color: darken($background-color, 10%);
+$icon-color: $text-color;
+
+.Footer {
+  background-color: rgba(darken($footer-background-color,70%), 0.2);
+  box-shadow: 1px 1px 2px 2px rgba($footer-background-color, 0.5);
+  padding: 20px;
+  margin-bottom: 30px;
+  margin-top: 30px;
+  border-radius: 12px;
+  text-align: center;
+  width: 45vw;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+
+  @media (min-width: 768px) {
+    width: 15vw;
+  }
+
+  .FooterIcons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+
+    a {
+      color: $icon-color;
+      font-size: 1.8rem;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+
+  .FooterText {
+    font-size: 0.9rem;
+    color: $font-color;
+  }
+}
diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
new file mode 100644
index 0000000..6352022
--- /dev/null
+++ b/src/Components/Footer/Footer.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { FaGithub, FaLinkedin, FaDev, FaMedium } from 'react-icons/fa';
+import './Footer.scss';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="Footer">
+      <div className="FooterIcons">
+        <a href="https://github.com/carsonSgit" target="_blank" rel="noreferrer">
+          <FaGithub />
+        </a>
+        <a href="https://www.linkedin.com/in/carsonspriggs" target="_blank" rel="noreferrer">
+          <FaLinkedin />
+        </a>
+        <a href="https://dev.to/carsonsgit" target="_blank" rel="noreferrer">
+          <FaDev />
+        </a>
+        <a href="https://medium.com/@carsonspriggs6" target="_blank" rel="noreferrer">
+          <FaMedium />
+        </a>
+      </div>
+      <div className="FooterText">
+        Coded and Designed by @carsonSgit
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/Components/Home/Hero/Hero.scss b/src/Components/Home/Hero/Hero.scss
index 30b7d7e..70a1926 100644
--- a/src/Components/Home/Hero/Hero.scss
+++ b/src/Components/Home/Hero/Hero.scss
@@ -11,7 +11,7 @@ $font-color: #a2aa94;
 .HeroContainer {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 90vh;
   color: $text-color;
   overflow: hidden;
 
@@ -103,7 +103,7 @@ $font-color: #a2aa94;
 
   @media (min-width: 768px) {
     flex: 0 0 55%;
-    margin-left: 50px;
+    margin-left: 150px;
   }
 
   @media (max-width: 768px) {