diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index cdf07a2..9d1bf92 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -69,31 +69,31 @@ const Models: React.FC = () => {
           </button>
           <button className="financial-model model-box">
             <div className="overlay">
-              <h3>Finance</h3>
+              <h3>Character</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="weather-model model-box">
             <div className="overlay">
-              <h3>Weather</h3>
+              <h3>Character</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="time-planner-model model-box">
             <div className="overlay">
-              <h3>Time</h3>
+              <h3>Character</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="image-model model-box">
             <div className="overlay">
-              <h3>Image</h3>
+              <h3>Character</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="default-model model-box">
             <div className="overlay"> 
-              <h3>Custom</h3>
+              <h3>Character</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
diff --git a/app/styles/container.css b/app/styles/container.css
index 53c90a0..854c997 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -9,7 +9,7 @@
 }
 
 .left-panel {
-    margin-top: 5em;
+    margin-top: 10vh;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -25,7 +25,7 @@
 }
 
 .conversation-container {
-    margin-top: 5em;
+    margin-top: 10vh;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
diff --git a/app/styles/global.css b/app/styles/global.css
index 00a246b..1db5ccb 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -3,6 +3,7 @@ body {
     height: 100vh;
     overflow: hidden;
     position: relative;
+    top: 1vh;
 }
 
 body {
diff --git a/app/styles/header.css b/app/styles/header.css
index b830147..d085746 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,13 +1,13 @@
 header{
     position: absolute;
     padding: 0 20px;
-    top: 2em;
+    top: 0;
     left: 0;
     width: 100%;
-    height: 5em;
+    height: 10vh;
     display: flex;
     align-items: center;
-    font-size: 1em;
+    margin: 1.5vh 0;
 }
 
 .hamburger{
@@ -40,16 +40,14 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    top: 1em;
-    gap: 1em;
-    width: 25em;
-    height: 3em;
+    gap: 15px;
+    width: 25vw;
+    height: 5vh;
 }
 
 .nav-btn{
     background-color: transparent;
     border: none;
-    font-size: 0.9em;
 }
 
 .header-logo{
@@ -65,9 +63,8 @@ header{
 }
 
 .login-button .header-login-button{
-    font-size: 1em;
     position: absolute;
-    top: 1.5em;
+    top: 2.5vh;
     right: 1vw;
     padding: 10px 20px;
     background-color: var(--input-button-color);
diff --git a/app/styles/models.css b/app/styles/models.css
index e2d01ec..2c2d91e 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -61,11 +61,11 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    color: var(--overlay-text-color); /* Use variable for overlay text color */
+    color: var(--text-color); /* Use variable for overlay text color */
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: large;
+    font-size: x-large;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
@@ -176,10 +176,11 @@
     color: var(--text-color); /* Text color */
     font-size: medium; /* Font size for dropdown */
     cursor: pointer; /* Cursor change on hover */
-    transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
-}
-#model-select option:hover{
-    background-color: gray;
+    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
 }
 
+#model-select:hover {
+    background-color: var(--button-hover-background-color); /* Change background on hover */
+    border-color: var(--button-background-color); /* Change border color on hover */
+}
 
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 7b54ab3..50847a8 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -19,8 +19,7 @@
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
-    --burger-menu-background-color: #79832e;  /*NEW*/
-    --overlay-text-color:white; /*NEW*/
+    --burger-menu-background-color: #79832e;  
     
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */