diff --git a/html/index.html b/html/index.html
index 1cf1fdf..087940a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -15,16 +15,26 @@
         <!-- History section: A scrollable list of interactions or messages -->
         <div class="history">
             <ul>
-                <li>history1</li>
-                <li>history2</li>
-                <li>history3</li>
-                <li>history4</li>
-                <li>history5</li>
-                <li>history6</li>
-                <li>history7</li>
-                <li>history8</li>
-                <li>history9</li>
-                <li>history10</li>
+                <li><a href="#">history1</a></li>
+                <li><a href="#">history2</a></li>
+                <li><a href="#">history3</a></li>
+                <li><a href="#">history4</a></li>
+                <li><a href="#">history5</a></li>
+                <li><a href="#">history6</a></li>
+                <li><a href="#">history7</a></li>
+                <li><a href="#">history8</a></li>
+                <li><a href="#">history9</a></li>
+                <li><a href="#">history10</a></li>
+                <li><a href="#">history11</a></li>
+                <li><a href="#">history12</a></li>
+                <li><a href="#">history13</a></li>
+                <li><a href="#">history14</a></li>
+                <li><a href="#">history15</a></li>
+                <li><a href="#">history16</a></li>
+                <li><a href="#">history17</a></li>
+                <li><a href="#">history18</a></li>
+                <li><a href="#">history19</a></li>
+                <li><a href="#">history20</a></li>
             </ul>
         </div>
         
@@ -33,26 +43,28 @@
             <div class="titel">
                 <h1>Different AI models</h1>
             </div>
-            <!-- Each AI model is represented as a colored circular button -->
-            <div class="ai-class">
-                <h3>Code</h3>
-                <div class="circle code-model"></div>
-            </div>
-            <div class="ai-class">
-                <h3>Math</h3>
-                <div class="circle math-model"></div>
-            </div>
-            <div class="ai-class">
-                <h3>Language</h3>
-                <div class="circle language-model"></div>
-            </div>
-            <div class="ai-class">
-                <h3>Default</h3>
-                <div class="circle default-model"></div>
-            </div>
-            <div class="ai-class">
-                <h3>Custom</h3>
-                <div class="circle custom-model"></div>
+            <div class="grid">
+                <!-- Each AI model is represented as a colored circular button -->
+                <div class="ai-class">
+                    <h3>Code</h3>
+                    <div class="circle code-model"></div>
+                </div>
+                <div class="ai-class">
+                    <h3>Math</h3>
+                    <div class="circle math-model"></div>
+                </div>
+                <div class="ai-class">
+                    <h3>Language</h3>
+                    <div class="circle language-model"></div>
+                </div>
+                <div class="ai-class">
+                    <h3>Default</h3>
+                    <div class="circle default-model"></div>
+                </div>
+                <div class="ai-class">
+                    <h3>Custom</h3>
+                    <div class="circle custom-model"></div>
+                </div>
             </div>
         </div>
 
@@ -75,4 +87,4 @@
     </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/html/styles.css b/html/styles.css
index 1c62c93..399202a 100644
--- a/html/styles.css
+++ b/html/styles.css
@@ -62,23 +62,49 @@ body {
 .history ul li {
     padding: 10px 0;
     border-bottom: 1px solid var(--text-color);
+    width: 100%;
 }
+
+.history ul li a{
+    display: block;
+    text-decoration: none;
+    color: white;
+    width: 100%;
+    padding: 5px; 
+}
+
+.history ul li a:hover{
+    background-color: var(--input-button-hover-color);
+}
+
 /* Models Section */
 .models {
-    grid-column: 1;
-    grid-row: 2;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     background-color: var(--models-background-color);
     border-radius: 2em;
     padding: 1em;
     height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
 }
-.models .title h3 {
+
+.models h3 {
     padding: 2px;
     margin: 5px;
 }
+
+.models .title h3 {
+    padding: 2px;
+    margin: 5px;
+    padding-bottom: 1em;
+}
+
+.grid{
+    grid-column: 1;
+    grid-row: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1em;
+}
+
 .ai-class {
     text-align: center;
     display: flex;
@@ -187,4 +213,4 @@ body {
 }
 .input button:hover {
     background-color: var(--input-button-hover-color);
-}
+}
\ No newline at end of file