diff --git a/README.md b/README.md
index 4db964d..375010c 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,6 @@ Welcome to my Development Portfolio. I am a Software Development Engineer, alway
 
 Running this project locally is simple. Clone the directory, open it in VSCode and launch it using the Live Server extension.
 
-## TODO
-
--   Update Responsive Styles
-
 ## Projects Featured
 
 ---
diff --git a/index.html b/index.html
index 79ca129..12852de 100644
--- a/index.html
+++ b/index.html
@@ -252,71 +252,73 @@ <h3>Find Your Hat</h3>
                             >
                         </p>
                     </div>
-                    <div class="calc project">
-                        <p id="output">0</p>
-                        <table class="buttons">
-                            <tr>
-                                <td colspan="2">
-                                    <button class="button" id="clearAll">C</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="divide">/</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="multiply">*</button>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <button class="button" id="in7">7</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in8">8</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in9">9</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="subtract">-</button>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <button class="button" id="in4">4</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in5">5</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in6">6</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="add">+</button>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <button class="button" id="in1">1</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in2">2</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="in3">3</button>
-                                </td>
-                                <td rowspan="2">
-                                    <button class="button" id="equals">=</button>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td colspan="2">
-                                    <button class="button" id="in0">0</button>
-                                </td>
-                                <td>
-                                    <button class="button" id="inDecimal">.</button>
-                                </td>
-                            </tr>
-                        </table>
+                    <div class="project">
+                        <div class="calc">
+                            <p id="output">0</p>
+                            <table class="buttons">
+                                <tr>
+                                    <td colspan="2">
+                                        <button class="button" id="clearAll">C</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="divide">/</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="multiply">*</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <button class="button" id="in7">7</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in8">8</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in9">9</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="subtract">-</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <button class="button" id="in4">4</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in5">5</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in6">6</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="add">+</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <button class="button" id="in1">1</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in2">2</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="in3">3</button>
+                                    </td>
+                                    <td rowspan="2">
+                                        <button class="button" id="equals">=</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="2">
+                                        <button class="button" id="in0">0</button>
+                                    </td>
+                                    <td>
+                                        <button class="button" id="inDecimal">.</button>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
                         <h3>Calculator</h3>
                         <ul>
                             <li>HTML</li>
@@ -325,7 +327,7 @@ <h3>Calculator</h3>
                         </ul>
                         <p class="links">
                             <a
-                                href="https://github.com/IsaiahPetrichor/Portfolio/blob/main/resources/projects/JS/calculator.js"
+                                href="https://github.com/IsaiahPetrichor/portfolio/blob/main/resources/javascript/calculator.js"
                                 rel="noopener"
                                 target="_blank"
                                 >View Code</a
@@ -346,7 +348,7 @@ <h3>Autumn Procurement and Services LLC</h3>
                         </ul>
                         <p class="links">
                             <a href="http://www.autumnpsllc.com/" rel="noopener" target="_blank">View Project</a>
-                            <a href="" rel="noopener" target="_blank">View Code</a>
+                            <a href="#projects" rel="" target=""><strike>View Code</strike></a>
                         </p>
                     </div>
                 </div>
diff --git a/resources/css/about.css b/resources/css/about.css
index c1421d4..441d015 100644
--- a/resources/css/about.css
+++ b/resources/css/about.css
@@ -26,7 +26,7 @@
     position: absolute;
     margin: 0 auto;
     top: 0;
-    right: 18%;
+    right: 35px;
     filter: grayscale(40%) brightness(60%);
     z-index: -1;
     max-width: 500px;
@@ -66,64 +66,74 @@ a.contact:hover {
 }
 
 /* Media Queries */
-@media only screen and (max-width: 2380px) {
-    .about .profile {
-        right: 12%;
+@media only screen and (min-width: 1024px) and (max-width: 1440px) {
+    .about {
+        margin-top: 25px;
     }
-}
 
-@media only screen and (max-width: 2100px) {
-    .about .profile {
-        right: 8%;
+    .about div {
+        width: 70%;
     }
-}
 
-@media only screen and (max-width: 1850px) {
-    .about .profile {
-        right: 4%;
+    .about h2 {
+        font-size: 3rem;
     }
-}
 
-@media only screen and (max-width: 1700px) {
-    .about .profile {
-        right: 25px;
+    .about p {
+        width: 70%;
     }
 }
 
-@media only screen and (max-width: 1250px) {
-    .about {
-        margin-top: 50px;
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    .about .profile {
+        max-width: 300px;
     }
 
     .about div {
-        width: 70%;
+        width: 90%;
     }
 
     .about h2 {
-        font-size: 3rem;
+        font-size: 2rem;
+    }
+
+    .about p {
+        width: 70%;
     }
 }
 
-@media only screen and (max-width: 1025px) {
+@media only screen and (max-width: 767px) {
     .about {
-        margin-top: 25px;
+        margin-top: 40px;
     }
 
-    .about .profile {
-        max-width: 400px;
+    .about div {
+        max-width: 100%;
     }
-}
 
-@media only screen and (max-width: 725px) {
     .about .profile {
-        max-width: 300px;
+        width: 80%;
+        right: 10%;
+        left: 10%;
+        filter: grayscale(60%) brightness(40%);
     }
 
-    .about div {
-        width: 70%;
+    .about h2 {
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    .about p {
+        width: 100%;
     }
 
+    .about map {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 500px) {
     .about h2 {
-        font-size: 2rem;
+        font-size: 1.5rem;
     }
 }
diff --git a/resources/css/footer.css b/resources/css/footer.css
index 2d26086..417c15a 100644
--- a/resources/css/footer.css
+++ b/resources/css/footer.css
@@ -67,3 +67,44 @@ select:-webkit-autofill:focus {
     font-weight: 600;
     font-family: 'Raleway', Arial, Helvetica, sans-serif;
 }
+
+.footer-content form button:hover {
+    background-color: var(--footer);
+    cursor: pointer;
+}
+
+footer nav ul {
+    display: flex;
+    justify-content: center;
+    margin-top: 0;
+}
+
+footer ul li {
+    margin: 0 20px;
+}
+
+@media only screen and (max-width: 767px) {
+    .footer-content form input,
+    .footer-content form textarea {
+        width: 80%;
+        margin-inline: 10%;
+    }
+
+    .footer-content form button {
+        width: 40%;
+        margin-inline: auto;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .footer-content form input,
+    .footer-content form textarea {
+        width: 100%;
+        margin-inline: auto;
+    }
+
+    .footer-content form button {
+        width: 60%;
+        margin-inline: auto;
+    }
+}
diff --git a/resources/css/header.css b/resources/css/header.css
index fb88aea..8f7a3a7 100644
--- a/resources/css/header.css
+++ b/resources/css/header.css
@@ -14,11 +14,11 @@ h1 a:active {
     color: var(--neutral);
 }
 
-nav {
+header nav {
     max-width: 600px;
 }
 
-nav ul {
+header nav ul {
     display: flex;
     justify-content: space-evenly;
     flex-wrap: nowrap;
@@ -27,3 +27,36 @@ nav ul {
 nav ul li {
     list-style: none;
 }
+
+@media only screen and (max-width: 767px) {
+    header {
+        flex-wrap: wrap;
+        padding: 10px;
+    }
+
+    header h1 {
+        white-space: nowrap;
+    }
+
+    header nav {
+        position: absolute;
+        right: 0;
+    }
+
+    header nav ul {
+        width: fit-content;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    header nav {
+        top: 90px;
+    }
+
+    header nav ul {
+        flex-direction: row;
+    }
+}
diff --git a/resources/css/projects.css b/resources/css/projects.css
index 5b7ec81..55fd1cd 100644
--- a/resources/css/projects.css
+++ b/resources/css/projects.css
@@ -13,9 +13,7 @@
     height: 510px;
     margin: 0 auto;
     margin-bottom: 14px;
-    /* padding: 8px; */
     border-radius: 5px;
-    /* box-shadow: 0px 2px 5px var(--footer); */
 }
 
 .project figure {
@@ -45,15 +43,89 @@
     width: 100%;
     margin: 4px auto 12px auto;
     display: flex;
-    justify-content: space-evenly;
 }
 
 .project .links a {
     font-size: 1.2rem;
     border-bottom: 1px solid var(--lt-accent);
-    padding: 5px;
+    padding: 5px 0px;
+    margin-right: 20px;
 }
 
 .project .links a:hover {
     color: var(--lt-accent);
 }
+
+/* Calculator Styles */
+
+.calc {
+    height: 370px;
+    width: fit-content;
+    box-shadow: 0px 0px 10px #111;
+    background: linear-gradient(90deg, rgb(36, 44, 76) 10%, rgb(19, 54, 63) 50%, rgb(20, 47, 57) 90%);
+    padding: 5px;
+    border-radius: 5px;
+}
+
+#output {
+    background-color: #444;
+    box-shadow: inset 0px 0px 5px #222;
+    border-radius: 5px;
+    padding: 12px 5px;
+}
+
+.buttons button {
+    background-color: #444;
+    border-radius: 5px;
+    border: 1px solid var(--neutral-grey);
+    color: var(--neutral-grey);
+    width: 50px;
+    height: 50px;
+}
+
+#clearAll,
+#in0 {
+    width: 104px;
+}
+
+#equals {
+    height: 104px;
+}
+
+@media only screen and (max-width: 767px) {
+    .project {
+        width: 100%;
+        height: fit-content;
+        margin-bottom: 42px;
+    }
+
+    .calc {
+        height: auto;
+        padding: 10px;
+        margin: 0 auto;
+    }
+
+    .calc p {
+        margin: 10px auto;
+    }
+
+    #output {
+        padding: 32px 10px;
+        font-size: 2rem;
+    }
+
+    .buttons button {
+        width: 18vw;
+        height: 18vw;
+        font-size: 1.6rem;
+    }
+
+    #clearAll,
+    #in0 {
+        width: calc(36vw + 4px);
+    }
+
+    #equals {
+        height: calc(36vw + 4px);
+    }
+}