diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 9d1bf92..ee6739b 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,103 +1,85 @@
-import React, { useState } from 'react';
+// Models.tsx
+import React from 'react';
 
 const Models: React.FC = () => {
-  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
-
-  const modelOptions = [
-    'Offline Fast',
-    'Offline Fast (FOSS)',
-    'Offline Slow',
-    'Offline Slow (FOSS)',
-    'Online (La Plateforme)',
-    'Online (FOSS) (La Plateforme)',
-    'Online Cheap (OpenAI)',
-    'Online Expensive (OpenAI)',
-    'Online Cheap (Anthropic)',
-    'Online Expensive (Anthropic)',
-    'Online Cheap (Google)',
-    'Online Expensive (Google)',
-  ];
-
-  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedModel(event.target.value);
-  };
-
-  const isOfflineModel = (model: string) => {
-    return model.includes('Offline');
-  };
-
   return (
     <div className="model-background">
       <div className="models">
         <div className="titel">
           <h1>Different AI models</h1>
         </div>
-        <div className="model-dropdown">
-          <label htmlFor="model-select">Select AI Model:</label>
-          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
-            {modelOptions.map((model) => (
-              <option key={model} value={model}>
-                {model}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="grid">
-          <button className="code-model model-box">
-            <div className="overlay">
-              <h3>Code</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="math-model model-box">
-            <div className="overlay">
-              <h3>Math</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="language-model model-box">
-            <div className="overlay">
-              <h3>Language</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="character-model model-box">
-            <div className="overlay">
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="financial-model model-box">
-            <div className="overlay">
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="weather-model model-box">
-            <div className="overlay">
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="time-planner-model model-box">
-            <div className="overlay">
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="image-model model-box">
-            <div className="overlay">
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-          <button className="default-model model-box">
-            <div className="overlay"> 
-              <h3>Character</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-        </div>
+        <form action="">
+          <div className="grid">
+            <button className="code-model model-box">
+              <div className="overlay">
+                <h3>Code</h3>
+                <img src="/img/wifi.svg" alt="Wi-Fi" />
+              </div>
+            </button>
+            <button className="math-model model-box">
+              <div className="overlay">
+                <h3>Math</h3>
+                <img src="/img/nowifi.svg" alt="No Wi-Fi" />
+              </div>
+            </button>
+            <button className="language-model model-box">
+              <div className="overlay">
+                <h3>Language</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            {/* Example Models */}
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay">
+                <h3>Default</h3>
+              </div>
+            </button>
+          </div>
+        </form>
       </div>
     </div>
   );
diff --git a/app/styles/models.css b/app/styles/models.css
index 2c2d91e..c53d14b 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,7 +1,7 @@
 .model-background {
     grid-column: 1 / 2;
     grid-row: 2 / 5;
-    overflow-y: scroll;
+    overflow-y: auto;
     background-color: var(--models-background-color); /* Ensure this variable is defined */
     border-radius: 2em;
     padding: 1em;
@@ -11,9 +11,24 @@
 }
 
 .models {
-    display: flex;
-    flex-direction: column;
+    grid-column: 1 / 2;
+    grid-row: 2 / 5;
+    overflow-y: auto;
+    background-color: var(--models-background-color); /* Ensure this variable is defined */
+    border-radius: 2em;
+    padding: 1em;
     height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: scroll;
+}
+
+.models form {
+    padding-right: 10px;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .models .titel {
@@ -24,21 +39,15 @@
     font-size: 0.7em;
 }
 
-.model-dropdown {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1em; /* Space between dropdown and models */
-}
-
-.model-dropdown label {
-    margin-right: 0.5em; /* Space between label and dropdown */
-}
-
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
-    width: 100%; /* Ensure grid takes full width */
+    width: fit-content;
+}
+
+.grid h3 {
+    font-size: large;
 }
 
 .model-box {
@@ -51,7 +60,6 @@
     position: relative;
     height: 18vh;
     width: 18vh;
-    margin: auto; /* Center each model box in the grid cell */
 }
 
 .overlay {
@@ -65,10 +73,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: x-large;
+    font-size: 300%;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
+    font-size: xx-large;
 }
 
 .overlay img {
@@ -85,7 +94,6 @@
     opacity: 1;
 }
 
-/* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);
     background-repeat: no-repeat;
@@ -94,7 +102,7 @@
 
 .math-model {
     background-image: url(/img/math.jpg);
-    background-color: var(--background-color);
+    background-color: var(--background-color); /* Use variable for background color */
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -102,47 +110,7 @@
 
 .language-model {
     background-image: url(/img/language.jpg);
-    background-color: #72cce4;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-
-.character-model {
-    background-image: url(/img/character.jpg);
-    background-color: #72cce4;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-
-.financial-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);
-    background-color: #72cce4;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-}
-
-.time-planner-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-color: #72cce4; /* Use variable for background color */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -154,33 +122,3 @@
     background-size: cover;
     background-position: center;
 }
-
-.model-dropdown {
-    display: flex;
-    flex-direction: column; /* Stack label and dropdown */
-    align-items: center; /* Center the content */
-    margin-bottom: 1em; /* Space between dropdown and models */
-}
-
-.model-dropdown label {
-    margin-bottom: 0.5em; /* Space between label and dropdown */
-    font-size: large; /* Increase font size for visibility */
-    color: var(--text-color); /* Use variable for text color */
-}
-
-#model-select {
-    padding: 0.5em; /* Padding for better touch targets */
-    border-radius: 5px; /* Rounded corners */
-    border: 1px solid var(--input-border-color); /* Border color */
-    background-color: var(--input-background-color); /* Background color */
-    color: var(--text-color); /* Text color */
-    font-size: medium; /* Font size for dropdown */
-    cursor: pointer; /* Cursor change on hover */
-    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
-}
-
-#model-select:hover {
-    background-color: var(--button-hover-background-color); /* Change background on hover */
-    border-color: var(--button-background-color); /* Change border color on hover */
-}
-
diff --git a/public/img/character.jpg b/public/img/character.jpg
deleted file mode 100644
index b9363db..0000000
Binary files a/public/img/character.jpg and /dev/null differ
diff --git a/public/img/financial.jpg b/public/img/financial.jpg
deleted file mode 100644
index f6513d7..0000000
Binary files a/public/img/financial.jpg and /dev/null differ
diff --git a/public/img/image.jpg b/public/img/image.jpg
deleted file mode 100644
index 6cbc53d..0000000
Binary files a/public/img/image.jpg and /dev/null differ
diff --git a/public/img/time.jpg b/public/img/time.jpg
deleted file mode 100644
index 6db57ad..0000000
Binary files a/public/img/time.jpg and /dev/null differ
diff --git a/public/img/weather.jpg b/public/img/weather.jpg
deleted file mode 100644
index c921471..0000000
Binary files a/public/img/weather.jpg and /dev/null differ