app/components/Login.tsx

@@ -47,13 +47,10 @@ const Login: React.FC = () => {
     const savedAccountPassword = localStorage.getItem('accountPassword');
     const savedAccountName = localStorage.getItem('accountName');
 
-    if (
-      (email === savedAccountEmail || accountName === savedAccountName) &&
-      password === savedAccountPassword
-    ) {
+    if ((email === savedAccountEmail || accountName === savedAccountName) && password === savedAccountPassword) {
       setIsLoggedIn(true); // Successful login
       setShowLoginPopup(false); // Close the login popup
-      // Save credentials to localStorage (optional in case of changes)
+      // Save credentials to localStorage
       localStorage.setItem('accountName', savedAccountName || accountName);
       localStorage.setItem('accountEmail', savedAccountEmail || email);
       localStorage.setItem('accountPassword', savedAccountPassword || password);
@@ -78,7 +75,7 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
-        {isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'}
+        {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
 
       {/* Conditional rendering of the Login Popup */}
@@ -97,12 +94,8 @@ const Login: React.FC = () => {
               <input
                 type="text"
                 placeholder="Name or Email"
-                value={email || accountName} // Display whichever is set
-                onChange={(e) => {
-                  const input = e.target.value;
-                  setEmail(input); // Update both email and accountName states
-                  setAccountName(input);
-                }}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
               />
             </div>
 
@@ -185,7 +178,7 @@ const Login: React.FC = () => {
       )}
 
       {/* Conditional rendering of the Settings Popup */}
-      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
+      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
     </div>
   );
 };

app/components/Models.tsx

@@ -35,7 +35,7 @@ const Models: React.FC = () => {
     const handleStorageChange = () => {
       setRadioSelection(localStorage.getItem('radioSelection') || '');
     };
-    handleStorageChange();
+    handleStorageChange()
 
     // Update dropdown immediately when localStorage changes internally or externally
     window.addEventListener('storage', handleStorageChange);
@@ -54,58 +54,52 @@ const Models: React.FC = () => {
 
   // Determine the filtered models based on current radioSelection
   const filteredModels = (() => {
-    let models = [];
     switch (radioSelection) {
       case 'Offline':
-        models = modelDropdown.offlineModels; // Show only offline models
-        break;
+        return modelDropdown.offlineModels; // Show only offline models
       case 'AI Online':
-        models = modelDropdown.onlineModels; // Show only online models
-        break;
+        return modelDropdown.onlineModels; // Show only online models
       case 'FOSS':
-        models = modelDropdown.fossModels; // Show only FOSS models
-        break;
+        return modelDropdown.fossModels; // Show only FOSS models
       default:
-        models = [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
-        break;
+        return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
     }
-    return Array.from(new Set(models)); // Remove duplicates using Set
   })();
 
   const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
 
   return (
     <div className="model-background">
-      <div className="models">
-        <div className="title">
-          <h3>Different AI Models</h3>
-        </div>
+    <div className="models">
+      <div className="title">
+        <h3>Different AI Models</h3>
+      </div>
 
-        {/* Model Selection Dropdown */}
-        <div className="model-dropdown">
-          <label htmlFor="model-select">Select AI Model:</label>
-          <select id="model-select" value={radioSelection} onChange={handleModelChange}>
-            {filteredModels.map((model) => (
-              <option key={model} value={model}>
-                {model}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {/* Model Grid with Cards */}
-        <div className="grid">
-          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
-            <button key={category} className={`${category.toLowerCase()}-model model-box`}>
-              <div className="overlay">
-                <h3>{category}</h3>
-                {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
+      {/* Model Selection Dropdown */}
+      <div className="model-dropdown">
+        <label htmlFor="model-select">Select AI Model:</label>
+        <select id="model-select" value={radioSelection} onChange={handleModelChange}>
+          {filteredModels.map((model) => (
+            <option key={model} value={model}>
+              {model}
+            </option>
           ))}
-        </div>
+        </select>
+      </div>
+
+      {/* Model Grid with Cards */}
+      <div className="grid">
+        {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
+          <button key={category} className={`${category.toLowerCase()}-model model-box`}>
+            <div className="overlay">
+              <h3>{category}</h3>
+              {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+        ))}
       </div>
     </div>
+  </div> 
   );
 };
 

app/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <title>{metadata.title}</title>
         <meta name="description" content={metadata.description} />
         {/* Tried adding the favicon here */}
-        <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+        <link rel="icon" href="./public/favicon.ico" type="image/x-icon" />
       </head>
       <body>
         <main>{children}</main>