diff --git a/src/Components/Home/Hero/Hero.scss b/src/Components/Home/Hero/Hero.scss
index 3c5632a..0427c74 100644
--- a/src/Components/Home/Hero/Hero.scss
+++ b/src/Components/Home/Hero/Hero.scss
@@ -23,6 +23,11 @@ $font-color: #a2aa94;
   @media (max-width: 1200px) {
     flex-direction: row;
   }
+
+  @media (max-width: 430px) {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 /* Left Container */
@@ -52,6 +57,22 @@ $font-color: #a2aa94;
     flex: 0 0 60%;
     padding: 210px 0px 0px 40px; /* top, right, bottom, left */
   }
+
+  @media (max-width: 430px){
+    flex: 0 0 50%;
+    padding: 60px 40px 0px 40px; /* top, right, bottom, left */
+  }
+
+  @media (max-width: 414px) {
+    flex: 0 0 50%;
+    padding: 30px 40px 0px 40px; /* top, right, bottom, left */
+  }
+
+  @media (max-width: 375px) {
+    flex: 0 0 55%;
+    padding: 20px 40px 0px 40px; /* top, right, bottom, left */
+  }
+
 }
 
 /* Right Container */
@@ -78,6 +99,35 @@ $font-color: #a2aa94;
     margin-left: -100px;
     margin-top: -190px;
   }
+
+  @media (max-width: 430px) {
+    flex: 0 0 50%;
+    margin-left: 10px;
+    margin-top: -210px;
+  }
+
+  @media (max-width: 390px) {
+    flex: 0 0 50%;
+    margin-left: 10px;
+    margin-top: -190px;
+  }
+
+  @media (max-width: 414px) {
+    flex: 0 0 50%;
+    margin-left: 10px;
+    margin-top: -200px;
+  }
+
+  @media (max-width: 375px) {
+    margin-left: 10px;
+    margin-top: -290px;
+  }
+
+  @media (max-width: 360px) {
+    flex: 0 0 100%;
+    margin-left: 10px;
+    margin-top: -350px;
+  }
 }
 
 /* Text Styling */
@@ -157,3 +207,58 @@ p {
     font-size: 1.5em;
   }
 }
+
+@media (max-width: 430px) {
+  h1 {
+    font-size: 3.2em;
+    margin-bottom: -0.2em;
+  }
+
+  p {
+    font-size: 1.3em;
+  }
+}
+
+@media (max-width: 390px) {
+  h1 {
+    font-size: 2.9em;
+    margin-bottom: -0.2em;
+  }
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+@media (max-width: 414px) {
+  h1 {
+    font-size: 2.9em;
+    margin-bottom: -0.2em;
+  }
+
+  p {
+    font-size: 1.3em;
+  }
+}
+
+@media (max-width: 375px) {
+  h1 {
+    font-size: 2.7em;
+    margin-bottom: -0.2em;
+  }
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+@media (max-width: 360px){
+  h1 {
+    font-size: 2.5em;
+    margin-bottom: -0.2em;
+  }
+
+  p {
+    font-size: 1.1em;
+  }
+}
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
index 18b2dcc..e07e536 100644
--- a/src/Components/Projects/Projects.scss
+++ b/src/Components/Projects/Projects.scss
@@ -22,24 +22,32 @@ a {
   min-height: 100vh;
   text-align: center;
 
-  @media (min-width: 768px) {
-    padding: 0px 40px;
+  @media (min-width: 768px) and (max-width: 1200px) {
+    padding: 0px 30px;
+    margin-left: 0;
   }
 
-  @media (max-width: 1200px) {
-    margin-left: -120px;
+  @media (min-width: 1200px) {
+    padding: 0px 40px;
+    margin-left: 0;
   }
 
-  @media (max-width: 992px) {
-    margin-left: -100px;
+  @media (max-width: 767px) {
+    padding: 0px 10px;
+    margin-left: 0;
   }
 }
+
 .ProjectsTitle {
   font-size: 2.8em;
   margin-bottom: 40px;
   color: $text-color;
 
-  @media (min-width: 768px) {
+  @media (min-width: 768px) and (max-width: 1200px) {
+    font-size: 3.5em;
+  }
+
+  @media (min-width: 1200px) {
     font-size: 4.5em;
   }
 }
@@ -58,10 +66,13 @@ a {
   background-clip: text;
   -webkit-background-clip: text;
   animation: gradientAnimation 5s ease infinite;
-
   font-size: inherit;
 
-  @media (min-width: 768px) {
+  @media (min-width: 768px) and (max-width: 1200px) {
+    font-size: inherit;
+  }
+
+  @media (min-width: 1200px) {
     font-size: inherit;
   }
 }
@@ -83,8 +94,7 @@ a {
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
-  width: 75em;
-  height: 35em;
+  width: 90%;
   background-size: cover;
   background-position: center;
   border-radius: 15px;
@@ -102,17 +112,24 @@ a {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.417);
   }
 
+  @media (min-width: 768px) and (max-width: 1200px) {
+    height: auto;
+    min-height: 400px;
+  }
+
+  @media (min-width: 1200px) {
+    width: 75%;
+    height: auto;
+    min-height: 500px;
+    margin-left: 0;
+  }
+
   @media (max-width: 767px) {
     width: 90%;
     height: auto;
     background-size: cover;
     min-height: 200px;
   }
-
-  @media (max-width: 1200px) {
-    width: 45em;
-    height: 25em;
-  }
 }
 
 .ProjectContent {