diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 3c4fa66..ce8dfbe 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -107,14 +107,20 @@ const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
 type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
 
 const ModelSection: React.FC = () => {
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState<string>(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast");
-  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState<AIFunction>(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code");
-  const [selectedModel, setSelectedModel] = useState<string>("");
-  const [selectedModelType, setSelectedModelType] = useState<string>("");
+  const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => "Offline Fast");
+  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => "Code");
+  const [, setSelectedModel] = useState<string>("");
+  const [, setSelectedModelType] = useState<string>("");
+
+  useEffect(() => {
+    setSelectedModelDropdown(localStorage.getItem("selectedModelDropdown")|| "Offline Fast");
+    setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || "Code");
+  }, []);
 
   // Update the model and type when the dropdown or function changes
   useEffect(() => {
-    const newSelectedModel = modelList[selectedModelDropdown]?.[activeSelectedAIFunction] || "";
+    const aiFunctionsActiveSelectedAIFunction = activeSelectedAIFunction as AIFunction
+    const newSelectedModel = modelList[selectedModelDropdown]?.[aiFunctionsActiveSelectedAIFunction] || "";
     const newModelType = modelList[selectedModelDropdown]?.model_type || "";
 
     setSelectedModel(newSelectedModel);