Fixed the responsive design and the header

app/components/Header.tsx

@@ -57,7 +57,7 @@ const Header: React.FC<HeaderProps> = ({
             <header>
                 {showToggle && showHistoryModelsToggle && (
                     <button onClick={toggleDivs} className="nav-btn show-hide-btn">
-                        {showDivs ? 'Hide History/Models' : 'Show History/Models'}
+                        {showDivs ? 'Hide' : 'Show'}
                     </button>
                 )}
                 <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
@@ -71,9 +71,9 @@ const Header: React.FC<HeaderProps> = ({
                     <span></span>
                     <span></span>
                 </div>
-                <div className="header-button header-logo">
-                    {/* AI logo or text */}
-                </div>
+                  <div className="header-logo">
+                      {/* AI logo or text */}
+                  </div>
                 <div className="login-button-container">
                     <Login />
                 </div>

app/styles/header.css

@@ -118,4 +118,7 @@ header {
 .show-hide-btn{
     width: fit-content;
     align-self: left;
+    position: absolute;
+    left: 10vw;
+    cursor: pointer;
 }

app/styles/responsive.css

@@ -102,7 +102,6 @@
 
   .header-logo {
     position: relative;
-    margin-left: -40px;
   }
 
   .hamburger.open {
@@ -150,6 +149,16 @@
   .header-login-button {
     right: 5vh; /* Keep login button visible */
   }
+
+  .show-hide-btn{
+    width: fit-content;
+    left: 20vw;
+  }
+
+  .header-logo {
+    background-image: url(../../public/img/logo-small.png);
+    width: 4em;
+  }
 }
 
 /* Responsive adjustments for the settings */