diff --git a/app/components/Credits.tsx b/app/components/Credits.tsx
index 5144603..6af40d0 100644
--- a/app/components/Credits.tsx
+++ b/app/components/Credits.tsx
@@ -11,13 +11,22 @@ const Credits: React.FC = () => {
           This project utilizes the following icon resources:
         </p>
         <a
-          href="https://fontawesome.com/v4/license/"
+          href="https://www.svgrepo.com/author/Solar%20Icons/"
           className="credit-btn"
           target="_blank"
           rel="noopener noreferrer"
         >
-          fontawesome
+          Solar Icons
         </a>
+        <a
+          href="https://www.svgrepo.com/author/Dazzle%20UI/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Dazzle UI
+        </a>
+
         <h2 className="subtitle">Fonts</h2>
         <p className="paragraph">
           The fonts used in this project are provided by:
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 63d0b87..5a02425 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -34,6 +34,7 @@ const Header: React.FC<HeaderProps> = ({
     // Effect to handle clicks outside of the dropdown
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
+            // Check if the click is outside both the dropdown and the hamburger menu
             if (
                 dropdownRef.current && 
                 !dropdownRef.current.contains(event.target as Node) &&
@@ -56,19 +57,7 @@ const Header: React.FC<HeaderProps> = ({
             <header>
                 {showToggle && showHistoryModelsToggle && (
                     <button onClick={toggleDivs} className="nav-btn show-hide-btn">
-                        {showDivs ? (
-                            <>
-                                <svg style={{ fill: "var(--text-color)" }} width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                    <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/>
-                                </svg>
-                            </>
-                        ) : (
-                            <>
-                                <svg style={{ fill: "var(--text-color)" }} width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                                    <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
-                                </svg>
-                            </>
-                        )}
+                        {showDivs ? 'Hide' : 'Show'}
                     </button>
                 )}
                 <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
@@ -82,9 +71,9 @@ const Header: React.FC<HeaderProps> = ({
                     <span></span>
                     <span></span>
                 </div>
-                <div className="header-logo">
-                    {/* AI logo or text */}
-                </div>
+                  <div className="header-logo">
+                      {/* AI logo or text */}
+                  </div>
                 <div className="login-button-container">
                     <Login />
                 </div>
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 30c427c..4e64b33 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -8,84 +8,132 @@ const modelList = {
     Math: 'qwen2-math:1.5b',
     Code: 'starcoder2',
     Language: 'llama3.2',
+    Character: 'dolphin-phi',
+    Finance: 'qwen2-math:1.5b',
     Weather: 'llama3.2',
+    Time: 'llama3.2',
+    Image: 'llava-phi3'
   },
   'Offline Slow': {
     model_type: 'local',
     Math: 'wizard-math',
     Code: 'starcoder2:7b',
     Language: 'llama3.1',
+    Character: 'dolphin-llama3',
+    Finance: 'wizard-math',
     Weather: 'llama3.1',
+    Time: 'llama3.1',
+    Image: 'llava'
   },
   'Offline Fast (FOSS)': {
     model_type: 'local',
     Math: 'qwen2-math:1.5b',
     Code: 'qwen2.5-coder:1.5b',
     Language: 'phi3.5',
+    Character: 'dolphin-mistral',
+    Finance: 'qwen2-math:1.5b',
     Weather: 'phi3.5',
+    Time: 'phi3.5',
+    Image: 'llava'
   },
   'Offline Slow (FOSS)': {
     model_type: 'local',
     Math: 'mathstral',
     Code: 'qwen2.5-coder',
     Language: 'qwen2.5',
+    Character: 'dolphin-mistral',
+    Finance: 'mathstral',
     Weather: 'qwen2.5',
+    Time: 'qwen2.5',
+    Image: 'llava'
   },
   'Online Cheap (OpenAI)': {
     model_type: 'openai',
     Math: 'gpt-4o-mini',
     Code: 'gpt-4o-mini',
     Language: 'gpt-4o-mini',
+    Character: 'gpt-4o-mini',
+    Finance: 'gpt-4o-mini',
     Weather: 'gpt-4o-mini',
+    Time: 'gpt-4o-mini',
+    Image: 'gpt-4o-mini'
   },
   'Online Expensive (OpenAI)': {
     model_type: 'openai',
     Math: 'gpt-4o',
     Code: 'gpt-4o',
     Language: 'gpt-4o',
+    Character: 'gpt-4o',
+    Finance: 'gpt-4o',
     Weather: 'gpt-4o',
+    Time: 'gpt-4o',
+    Image: 'gpt-4o'
   },
   'Online Cheap (Anthropic)': {
     model_type: 'anthropic',
     Math: 'claude-3-haiku',
     Code: 'claude-3-haiku',
     Language: 'claude-3-haiku',
+    Character: 'claude-3-haiku',
+    Finance: 'claude-3-haiku',
     Weather: 'claude-3-haiku',
+    Time: 'claude-3-haiku',
+    Image: 'claude-3-haiku'
   },
   'Online Expensive (Anthropic)': {
     model_type: 'anthropic',
     Math: 'claude-3-5-sonnet',
     Code: 'claude-3-5-sonnet',
     Language: 'claude-3-5-sonnet',
+    Character: 'claude-3-5-sonnet',
+    Finance: 'claude-3-5-sonnet',
     Weather: 'claude-3-5-sonnet',
+    Time: 'claude-3-5-sonnet',
+    Image: 'claude-3-5-sonnet'
   },
   'Online Cheap (Google)': {
     model_type: 'google',
     Math: 'gemini-1.5-flash-latest',
     Code: 'gemini-1.5-flash-latest',
     Language: 'gemini-1.5-flash-latest',
+    Character: 'gemini-1.5-flash-latest',
+    Finance: 'gemini-1.5-flash-latest',
     Weather: 'gemini-1.5-flash-latest',
+    Time: 'gemini-1.5-flash-latest',
+    Image: 'gemini-1.5-flash-latest'
   },
   'Online Expensive (Google)': {
     model_type: 'google',
     Math: 'gemini-1.5-pro-latest',
     Code: 'gemini-1.5-pro-latest',
     Language: 'gemini-1.5-pro-latest',
+    Character: 'gemini-1.5-pro-latest',
+    Finance: 'gemini-1.5-pro-latest',
     Weather: 'gemini-1.5-pro-latest',
+    Time: 'gemini-1.5-pro-latest',
+    Image: 'gemini-1.5-pro-latest'
   },
   'Online (La Plateforme)': {
     model_type: 'mistral',
     Math: 'open-mistral-nemo',
     Code: 'codestral-latest',
     Language: 'mistral-small-latest',
+    Character: 'mistral-large-latest',
+    Finance: 'open-mistral-nemo',
     Weather: 'mistral-small-latest',
+    Time: 'mistral-small-latest',
+    Image: 'pixtral-12b-2409'
   },
   'Online (FOSS) (La Plateforme)': {
     model_type: 'mistral',
     Math: 'open-mistral-nemo',
     Code: 'open-codestral-mamba',
     Language: 'open-mistral-nemo',
+    Character: 'open-mixtral-8x22b',
+    Finance: 'open-mixtral-8x22b',
     Weather: 'open-mistral-nemo',
+    Time: 'open-mistral-nemo',
+    Image: 'pixtral-12b-2409'
   }
 }
 
@@ -110,7 +158,13 @@ const selectedAIFunction = [
   'Code',
   'Math',
   'Language',
-  'Weather'
+  'Character',
+  'Finance',
+  'Weather',
+  'Time',
+  'Image',
+  'Custom1',
+  'Custom2'
 ]
 
 const ModelSection: React.FC = () => {
diff --git a/app/styles/header.css b/app/styles/header.css
index ff5baf3..5c3a2e5 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -46,10 +46,8 @@ header {
     background-color: var(--burger-menu-background-color);
     width: 100%;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 10px auto;
-    margin: auto;
+    align-items: flex-start;
+    padding: 10px;
 }
 
 .nav-links.active {
@@ -63,11 +61,11 @@ header {
     font-size: 0.9em;
     height: 50px; /* Consistent height */
     border-radius: 5px;
-    padding: 10px auto;
+    padding: 10px;
     font-family: var(--font-family);
     width: 100%; /* Full width */
     text-align: center; /* Center text */
-    margin: 4px auto;
+    margin: 4px;
 }
 
 .nav-btn:hover {
@@ -118,8 +116,6 @@ header {
 }
 
 .show-hide-btn{
-    display: flex;
-    align-items: center;
     width: fit-content;
     align-self: left;
     position: absolute;
diff --git a/app/styles/models.css b/app/styles/models.css
index fd7e22b..7b833ae 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -119,6 +119,21 @@
     background-position: center;
 }
 
+.character-model {
+    background-image: url(/img/character.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.finance-model {
+    background-image: url(/img/financial.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
 
 .weather-model {
     background-image: url(/img/weather.jpg);
@@ -128,6 +143,22 @@
     background-position: center;
 }
 
+.time-model {
+    background-image: url(/img/time.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.image-model {
+    background-image: url(/img/image.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
 .custom1-model,
 .custom2-model {
     background-image: url(/img/default.jpg);
diff --git a/public/img/character.jpg b/public/img/character.jpg
new file mode 100644
index 0000000..b9363db
Binary files /dev/null and b/public/img/character.jpg differ
diff --git a/public/img/default.jpg b/public/img/default.jpg
new file mode 100644
index 0000000..527d4fe
Binary files /dev/null and b/public/img/default.jpg differ
diff --git a/public/img/financial.jpg b/public/img/financial.jpg
new file mode 100644
index 0000000..56520f2
Binary files /dev/null and b/public/img/financial.jpg differ
diff --git a/public/img/image.jpg b/public/img/image.jpg
new file mode 100644
index 0000000..34849a4
Binary files /dev/null and b/public/img/image.jpg differ
diff --git a/public/img/time.jpg b/public/img/time.jpg
new file mode 100644
index 0000000..8472916
Binary files /dev/null and b/public/img/time.jpg differ