diff --git a/app/styles/container.css b/app/styles/container.css
index 3f094b2..40c97cc 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -2,8 +2,8 @@
 .container{
     display: flex;
     width: 100vw;
-    height: 100vh;
-    padding-top: 12vh;
+    height: 90dvh;
+    padding-top: 1dvh;
 }
 
 .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,15 +27,10 @@
     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 fb28dc3..1d6b206 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -5,8 +5,8 @@
   
   .credits-section {
     max-width: 900px;
-    height: 80vh;
-    margin: 0 auto;
+    height: 80dvh;
+    margin: auto;
     background: var(--doc-background-color); /* Use variable for background */
     padding: 2rem;
     border-radius: 8px;
@@ -15,20 +15,20 @@
   }
   
   .title {
-    font-size: 2rem;
+    font-size: calc(var(--font-size)*2);
     color: var(--doc-title-color); /* Use variable for title color */
     margin-bottom: 1.5rem;
   }
   
   .subtitle {
-    font-size: 1.5rem;
+    font-size: calc(var(--font-size)*1.5);
     color: var(--doc-subtitle-color); /* Use variable for subtitle color */
     margin-top: 2rem;
     margin-bottom: 1rem;
   }
   
   .paragraph {
-    font-size: 1rem;
+    font-size: calc(var(--font-size));
     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 eb06945..5b2988d 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -7,8 +7,8 @@
 
 .documentation-section {
   max-width: 900px;
-  height: 80vh;
-  margin: 0 auto;
+  height: 80dvh;
+  margin: auto;
   background: var(--doc-background-color); /* Use variable for background */
   padding: 2rem;
   border-radius: 8px;
@@ -17,27 +17,27 @@
 }
 
 .title {
-  font-size: 2rem;
+  font-size: calc(var(--font-size)*2);
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-size)*1.5);
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .subsection-title {
-  font-size: 1.25rem;
+  font-size: calc(var(--font-size)*1.25);
   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .paragraph {
-  font-size: 1rem;
+  font-size: calc(var(--font-size));
   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 c9754e3..0acb073 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,14 +1,10 @@
-html,
 body {
-    height: 100vh;
+    height: 100dvh;
     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);
@@ -19,11 +15,6 @@ 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 282beaa..a540ad3 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,10 +1,8 @@
 header{
-    position: absolute;
+    position: relative;
     padding: 0 20px;
-    top: 0;
-    left: 0;
     width: 100%;
-    height: 10vh;
+    height: 10dvh;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/app/styles/history.css b/app/styles/history.css
index 7537d3a..8133955 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: 45%;
+    height: 40dvh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -39,5 +39,7 @@
 }
 
 .history-models{
-    height: 100%;
+    position: relative;
+    height: 90dvh;
+    /* padding-bottom: 3dvh; */
 }
diff --git a/app/styles/input.css b/app/styles/input.css
index af821e8..3233b14 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,7 +1,5 @@
 /* Input Section */
 .input {
-    grid-column: 2/3;
-    grid-row: 4/5;
     border-radius: 8px;
     background-color: var(--input-background-color);
     padding: 1em;
@@ -13,7 +11,12 @@
     justify-content: space-between;
     align-items: center;
     height: auto;
-    height: 10vh;
+    height: 10dvh;
+    position: absolute;
+    left: 0.25vw;
+    bottom: 3dvh;
+    right: 0.25vw;
+    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
 }
 
 .input input {
@@ -44,8 +47,8 @@
     border-radius: 8px;
     font-size: 1.5em;
     cursor: pointer;
-    height: 50px;
-    width: 75px;
+    height: 8dvh;
+    width: 8vw;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index 7369e40..cb00319 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,13 +1,18 @@
 .model-background {
+    position: absolute;
+    left: 1em;
+    bottom: 4dvh;
+    right: 0;
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45%;
+    padding-bottom: 1px;
+    overflow: scroll;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    margin: 0 1em;
     margin-right: 0;
     border-radius: 1em;
+    height: 45dvh;
 }
 
 .models {
@@ -69,6 +74,7 @@
     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 19507cd..0f9ed42 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -4,13 +4,14 @@
     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: 70vh;
+    height: 90dvh;
 }
 
 #conversation {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index 23d8732..6df5af5 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -2,4 +2,6 @@
     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 422725c..57ec871 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -8,7 +8,6 @@
   
   /* Header styles */
   header {
-    position: fixed;
     top: 0;
     left: 0;
     margin-top: 0px;
@@ -20,11 +19,10 @@
   .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
     width: 100vw;
-    overflow: scroll;
+    overflow: hidden;
     margin: 0;
-    padding: 7em 0 0 0 ;
+    padding: 1dvh 0 0 0 ;
   }
 
   /* Left panel styles */
@@ -58,6 +56,7 @@
     min-width: 100%;
     margin-left: 0;
     border-radius: none;
+    height: 10vh;
   }
 
   /* Grid styles */
@@ -79,6 +78,7 @@
     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 c79b71c..3dd4461 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -16,6 +16,7 @@
     border-bottom-right-radius: 0;
     margin-left: auto;
     text-align: left;
+    margin-right: 1.5vw;
 }
 
 .ai-message {
@@ -27,6 +28,7 @@
 }
 
 .ai-container{
+    position: relative;
     height: min-content;
     bottom: 0;
     width: 100%;