diff --git a/src/Client/src/app/app.css b/src/Client/src/app/app.css
index 9be18ff..4346dda 100644
--- a/src/Client/src/app/app.css
+++ b/src/Client/src/app/app.css
@@ -99,4 +99,65 @@
 .bottom-bar-padding {
     margin: 20px;
     color: var(--mistox-border-light);
+}
+
+
+@media (max-width: 900px) {
+    
+    .top-bar {
+        display: block;
+        height: unset;
+    }
+
+    .top-bar-logo {
+        display: none;
+    }
+
+    .top-bar-buttons {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        margin: 0;
+        width: 100%;
+        height: unset;
+    }
+
+    .flex-right {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    .nav-button {
+        width: 100%;
+        margin: 0;
+        margin-bottom: 10px;
+    }
+
+    .bottom-bar {
+        display: block;
+        height: unset;
+    }
+
+    .bottom-bar-buttons {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        margin: 0;
+        width: 100%;
+        height: unset;
+    }
+
+    .nav-button-bottom{
+        width: 100%;
+    }
+
+    .bottom-bar-logo {
+        display: none;
+    }
+
+    .mistox-logo {
+        display: block;
+    }
+
+    .bottom-bar-padding {
+        width: 100%;
+        text-align: center;
+    }
 }
\ No newline at end of file
diff --git a/src/Client/src/app/app.html b/src/Client/src/app/app.html
index 0d023ef..080fd5a 100644
--- a/src/Client/src/app/app.html
+++ b/src/Client/src/app/app.html
@@ -38,7 +38,7 @@
   <a class="bottom-bar-logo" href="https://mistox.com">
     <img src="img/mistox-logo.png" />
   </a>
-  <div class="bottom-bar-buttons flex-right bottom-bar-float">
+  <div class="bottom-bar-buttons flex-right mistox-logo bottom-bar-float">
     <div class="bottom-bar-padding">
       <span>Mistox LLC</span>
     </div>
diff --git a/src/Client/src/app/pages/home/home.component.css b/src/Client/src/app/pages/home/home.component.css
index d877bf3..3ad598a 100644
--- a/src/Client/src/app/pages/home/home.component.css
+++ b/src/Client/src/app/pages/home/home.component.css
@@ -8,7 +8,7 @@
 }
 
 .center-text h1 {
-    font-size: 100px;
+    font-size: 60px;
     margin: 20px 0;
     color: var(--mistox-text);
 }
@@ -78,4 +78,22 @@ hr {
 
 .border {
     border-bottom: solid 1px #000;
+}
+
+@media (max-width: 900px) {
+    .content-frame {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-auto-flow: unset;
+    }
+
+    .floating-frame {
+        width: calc(100% - 60px);
+        margin: 10px 10px;
+    }
+
+    .solution-frame {
+        width: calc(100% - 20px);
+        margin: 20px 10px;
+    }
 }
\ No newline at end of file
diff --git a/src/Client/src/app/pages/jobs/jobs.component.css b/src/Client/src/app/pages/jobs/jobs.component.css
index 674dc8d..4bbf54f 100644
--- a/src/Client/src/app/pages/jobs/jobs.component.css
+++ b/src/Client/src/app/pages/jobs/jobs.component.css
@@ -22,6 +22,7 @@ button {
 
 .tile-frame {
     display: grid;
+    grid-auto-flow: row;
     grid-template-columns: repeat(4, 1fr);
     column-gap: 20px;
     padding: 20px;
@@ -84,4 +85,23 @@ button {
 .post-job-frame button {
     border-color: var(--Mistox-Black);
     color: var(--Mistox-Black);
+}
+
+@media (max-width: 1920px) {
+    .tile-frame{
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 1350px) {
+    .tile-frame{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 900px) {
+    .tile-frame{
+        grid-template-columns: repeat(1, 1fr);
+        grid-auto-flow: unset;
+    }
 }
\ No newline at end of file
diff --git a/src/Client/src/app/pages/jobs/jobs.component.html b/src/Client/src/app/pages/jobs/jobs.component.html
index c3faab1..cdfd17c 100644
--- a/src/Client/src/app/pages/jobs/jobs.component.html
+++ b/src/Client/src/app/pages/jobs/jobs.component.html
@@ -1,6 +1,6 @@
 <!-- Avaliable Jobs -->
- @for (cur of JobListingPage; track cur.id){
-    <div class="tile-frame">
+<div class="tile-frame">
+    @for (cur of JobListingPage; track cur.id){
         <div class="tile">
             <div class="tile-title">
                 <h1>{{ cur.title }}</h1>
@@ -20,5 +20,5 @@
                 <button [routerLink]="['/jobs/viewer']"  [queryParams]="{ JobID: cur.id }" >VIEW LISTING</button>
             </div>
         </div>
-    </div>
- }
\ No newline at end of file
+    }
+</div>
\ No newline at end of file