css tweaks start

app/components/Header.tsx

@@ -43,7 +43,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
         <div className="header-button header-logo">
           {/* AI logo or text */}
         </div>
-        <div className="login-button">
+        <div className="login-button-container">
           <Login /> 
         </div>
       </header>

app/components/InputFrontend.tsx

@@ -40,7 +40,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
         <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
           <img src="/img/send.svg" alt="send" />
         </button>
-        <button className={`microphone-button ${isRecording ? "red":"green"}`} type="button" onClick={onMicClick}>
+        <button className={`microphone-button ${isRecording ? "red": "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
           <img src="/img/microphone.svg" alt="microphone" />
         </button>
       </div>

app/components/Models.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect } from 'react';
 
 // Define the available model options
@@ -18,9 +19,10 @@ const modelDropdown = {
 const Models: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
   const [selectedModel, setSelectedModel] = useState('');
-  const radioSelection = localStorage.getItem('radioSelection')
-
+  const [radioSelection, setRadioSelection] = useState<string | null>("")
+  
   useEffect(() => {
+    setRadioSelection(localStorage.getItem('radioSelection'))
     const handleStorageChange = () => {
       setSelectedModel(localStorage.getItem('selectedModel') || '');
     };