diff --git a/app/styles/container.css b/app/styles/container.css
index 40c97cc..3f094b2 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -2,8 +2,8 @@
 .container{
     display: flex;
     width: 100vw;
-    height: 90dvh;
-    padding-top: 1dvh;
+    height: 100vh;
+    padding-top: 12vh;
 }
 
 .left-panel {
@@ -13,13 +13,13 @@
     border-radius: 0 1em 0 0;
     margin-left: 0;
     padding-right: 1em;
+    height: 100%;
 }
 
 .left-panel.hidden {
     opacity: 0; /* Fade out when hidden */
     width: 0; /* Collapse width to 0 */
     visibility: hidden; /* Hide visibility while collapsing */
-    
 }
 
 .conversation-container {
@@ -27,10 +27,15 @@
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
+    height: 100%;
 }
 
-
+/* Adjust margin-left when panel is shown or hidden */
+.conversation-container.expanded {
+    margin-left: 1vw;
+}
 
 .conversation-container.collapsed {
     margin-left: 1vw; /* Space for the left panel */
+    bottom: 0;
 }
diff --git a/app/styles/credit.css b/app/styles/credit.css
index 1d6b206..fb28dc3 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -5,8 +5,8 @@
   
   .credits-section {
     max-width: 900px;
-    height: 80dvh;
-    margin: auto;
+    height: 80vh;
+    margin: 0 auto;
     background: var(--doc-background-color); /* Use variable for background */
     padding: 2rem;
     border-radius: 8px;
@@ -15,20 +15,20 @@
   }
   
   .title {
-    font-size: calc(var(--font-size)*2);
+    font-size: 2rem;
     color: var(--doc-title-color); /* Use variable for title color */
     margin-bottom: 1.5rem;
   }
   
   .subtitle {
-    font-size: calc(var(--font-size)*1.5);
+    font-size: 1.5rem;
     color: var(--doc-subtitle-color); /* Use variable for subtitle color */
     margin-top: 2rem;
     margin-bottom: 1rem;
   }
   
   .paragraph {
-    font-size: calc(var(--font-size));
+    font-size: 1rem;
     color: var(--doc-paragraph-color); /* Use variable for paragraph color */
     margin-bottom: 1.5rem;
     line-height: 1.6;
diff --git a/app/styles/doc.css b/app/styles/doc.css
index 5b2988d..eb06945 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -7,8 +7,8 @@
 
 .documentation-section {
   max-width: 900px;
-  height: 80dvh;
-  margin: auto;
+  height: 80vh;
+  margin: 0 auto;
   background: var(--doc-background-color); /* Use variable for background */
   padding: 2rem;
   border-radius: 8px;
@@ -17,27 +17,27 @@
 }
 
 .title {
-  font-size: calc(var(--font-size)*2);
+  font-size: 2rem;
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
-  font-size: calc(var(--font-size)*1.5);
+  font-size: 1.5rem;
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .subsection-title {
-  font-size: calc(var(--font-size)*1.25);
+  font-size: 1.25rem;
   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .paragraph {
-  font-size: calc(var(--font-size));
+  font-size: 1rem;
   color: var(--doc-paragraph-color); /* Use variable for paragraph color */
   margin-bottom: 1.5rem;
   line-height: 1.6;
diff --git a/app/styles/global.css b/app/styles/global.css
index 0acb073..c9754e3 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,10 +1,14 @@
+html,
 body {
-    height: 100dvh;
+    height: 100vh;
     overflow: hidden;
     position: relative;
 }
 
 body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
@@ -15,6 +19,11 @@ body {
 header {
     background-color: var(--header-background-color);
     color: var(--header-text-color);
+    padding: 1rem; /* Adjust padding as needed */
+}
+
+main{
+    height: 100%;
 }
 
 button {
diff --git a/app/styles/header.css b/app/styles/header.css
index a540ad3..282beaa 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,8 +1,10 @@
 header{
-    position: relative;
+    position: absolute;
     padding: 0 20px;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 10dvh;
+    height: 10vh;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/app/styles/history.css b/app/styles/history.css
index 8133955..7537d3a 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 40dvh;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -39,7 +39,5 @@
 }
 
 .history-models{
-    position: relative;
-    height: 90dvh;
-    /* padding-bottom: 3dvh; */
+    height: 100%;
 }
diff --git a/app/styles/input.css b/app/styles/input.css
index 3233b14..af821e8 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,5 +1,7 @@
 /* Input Section */
 .input {
+    grid-column: 2/3;
+    grid-row: 4/5;
     border-radius: 8px;
     background-color: var(--input-background-color);
     padding: 1em;
@@ -11,12 +13,7 @@
     justify-content: space-between;
     align-items: center;
     height: auto;
-    height: 10dvh;
-    position: absolute;
-    left: 0.25vw;
-    bottom: 3dvh;
-    right: 0.25vw;
-    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
+    height: 10vh;
 }
 
 .input input {
@@ -47,8 +44,8 @@
     border-radius: 8px;
     font-size: 1.5em;
     cursor: pointer;
-    height: 8dvh;
-    width: 8vw;
+    height: 50px;
+    width: 75px;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index cb00319..7369e40 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,18 +1,13 @@
 .model-background {
-    position: absolute;
-    left: 1em;
-    bottom: 4dvh;
-    right: 0;
     grid-column: 1/2;
     grid-row: 1/2;
-    padding-bottom: 1px;
-    overflow: scroll;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
+    margin: 0 1em;
     margin-right: 0;
     border-radius: 1em;
-    height: 45dvh;
 }
 
 .models {
@@ -74,7 +69,6 @@
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
-    border-radius: 5%;
 }
 
 .overlay img {
diff --git a/app/styles/output.css b/app/styles/output.css
index 0f9ed42..19507cd 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -4,14 +4,13 @@
     grid-row: 1 / 4;
     background-color: var(--output-background-color);
     margin: 1em;
-    padding-bottom: 14dvh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 90dvh;
+    height: 70vh;
 }
 
 #conversation {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index 6df5af5..23d8732 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -2,6 +2,4 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    scroll-behavior: smooth;
-    transition: all 0.2s ease-in-out;
 }
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 57ec871..422725c 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -8,6 +8,7 @@
   
   /* Header styles */
   header {
+    position: fixed;
     top: 0;
     left: 0;
     margin-top: 0px;
@@ -19,10 +20,11 @@
   .container {
     display: flex;
     flex-direction: column;
+    align-items: center;
     width: 100vw;
-    overflow: hidden;
+    overflow: scroll;
     margin: 0;
-    padding: 1dvh 0 0 0 ;
+    padding: 7em 0 0 0 ;
   }
 
   /* Left panel styles */
@@ -56,7 +58,6 @@
     min-width: 100%;
     margin-left: 0;
     border-radius: none;
-    height: 10vh;
   }
 
   /* Grid styles */
@@ -78,7 +79,6 @@
     margin: 0 auto;
     align-items: center;
     width: 90%;
-    bottom: 10dvh
   }
 
   .input input {
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 3dd4461..c79b71c 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -16,7 +16,6 @@
     border-bottom-right-radius: 0;
     margin-left: auto;
     text-align: left;
-    margin-right: 1.5vw;
 }
 
 .ai-message {
@@ -28,7 +27,6 @@
 }
 
 .ai-container{
-    position: relative;
     height: min-content;
     bottom: 0;
     width: 100%;