diff --git a/TealCode/main/static/css/style.css b/TealCode/main/static/css/style.css
index 32625b3..5dfd94e 100644
--- a/TealCode/main/static/css/style.css
+++ b/TealCode/main/static/css/style.css
@@ -17,4 +17,19 @@
 
 .nav-link:hover{
     color:rgb(21, 200, 132) !important;
+}
+
+.list-group-item{
+    background-color: rgb(32, 102, 99);
+    color: white;
+    font-size: 13pt;
+    transition: 0.1s;
+    transition-timing-function: linear;
+    letter-spacing: 1px;
+}
+
+.list-group-item:hover{
+    color: white;
+    letter-spacing: 5px;
+    background-color: rgb(36, 126, 121);
 }
\ No newline at end of file
diff --git a/TealCode/main/templates/base.html b/TealCode/main/templates/base.html
index 204a34c..846d05c 100644
--- a/TealCode/main/templates/base.html
+++ b/TealCode/main/templates/base.html
@@ -27,9 +27,9 @@
 <body class="bg-dark">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-9M4H60DMBG"></script>
-    <div id="cookie_banner">
+    <div style="background-color: rgba(255, 255, 255, 0.219);" id="cookie_banner" class="text-center">
         <p>We only use non-technical cookies for analysis purposes.<br> Do you want to accept those cookies? (please)</p>
-        <button onclick='document.cookie = "cookies_allowed=1;path=/";window.location.reload();'>Accept</button>
+        <button class="btn btn-success mb-3" onclick='document.cookie = "cookies_allowed=1;path=/";window.location.reload();'>Accept</button>
     </div>
     <script>
         cookies_allowed = document.cookie.split("cookies_allowed=")[1][0]
diff --git a/TealCode/main/templates/main/category.html b/TealCode/main/templates/main/category.html
index 7b69abf..ed44c1f 100644
--- a/TealCode/main/templates/main/category.html
+++ b/TealCode/main/templates/main/category.html
@@ -1,44 +1,27 @@
 {% extends "base.html" %}
 {% block content %}
-    
-    <h2>{{ category_obj.display_name }}</h2>
-
-    <div id="search">
-        <input placeholder = "Search..." type="text" id="searchBar" onkeydown="search()" onkeyup="search()" onchange="search()">
-    </div>
-
-    <div id="list">
-        {% for topic in topics %}
-        <div class="list-item" onclick="openTopic('{{ topic.title }}')">
-            <!--<img src="c_icon.png"/>-->
-            <p>{{ topic.title }}</p>
-            <small style="display:none;">{{ topic.tags }}</small>
+    <div class="container mx-auto">
+        <div class="row">
+            <div class="col text-center mt-2">
+                <h2 style="font-weight: bold; letter-spacing: 4px;">{{ category_obj.display_name }}</h2>
+            </div>
         </div>
-        {% endfor %}
-    </div>   
+        <div class="row">
+            <div class="col">
 
-    <script>
-        function search(){
-            var input = document.getElementById("searchBar");
-            var items = document.getElementsByClassName("list-item");
+            </div>
+            <div class="col col-9 ">
+                <div class="container">
+                    <div class="list-group bg-dark text-center">
+                    {% for topic in topics %}
+                        <button onclick='window.open("/topic/{{ category_obj.title }}/{{topic.title}}", "_self");' type="button" class="list-group-item list-group-item-action">{{ topic.title }}</button>
+                    {% endfor %}
+                    </div>
+                </div>
+            </div>
+            <div class="col">
 
-            for (let index = 0; index < items.length; index++) {
-                const item = items  [index];
-                const p = item.getElementsByTagName("p")[0];
-                const tags = item.getElementsByTagName("small")[0].innerHTML;
-                var value = input.value.toLowerCase().replace(".", "").replace(";", "").replace(",", "").replace(" ", "")
-
-                item.style.display = "none";
-                
-                if(p.innerHTML.toLowerCase().includes(value) || tags.toLowerCase().includes(value)){
-                    item.style.display = "block";
-                }
-
-            }
-        }
-
-        function openTopic(topic){
-            window.open("/topic/{{ category_obj.title }}/" + topic, "_self");
-        }
-    </script>
+            </div>
+        </div>
+    </div>
 {% endblock content %}
\ No newline at end of file
diff --git a/TealCode/main/templates/main/index.html b/TealCode/main/templates/main/index.html
index a398593..df892dc 100644
--- a/TealCode/main/templates/main/index.html
+++ b/TealCode/main/templates/main/index.html
@@ -12,13 +12,13 @@
 
   <div class="row">
     <div class="col">
-      d
+      
     </div>
 
     <div class="col col-8 text-center fw-bold">
       <div class="container">
         <h5><br>Categories</h5>
-        <div class="container ">
+        <div class="container">
           <div class="list-group bg-dark">
             {% for category in categorys %}
             <button onclick='window.open("/category/{{ category.title }}", "_self");' type="button" class="list-group-item list-group-item-action">{{ category.display_name }}</button>
diff --git a/TealCode/main/templates/main/topic.html b/TealCode/main/templates/main/topic.html
index 3679d36..6c0966a 100644
--- a/TealCode/main/templates/main/topic.html
+++ b/TealCode/main/templates/main/topic.html
@@ -1,45 +1,62 @@
 {% extends "base.html" %}
 {% block content %}
-    <div id="button-content">
-
-        <div>
-            {% if previous %}
-            <a href="/topic/{{ category_title }}/{{ previous.title }}/">Previous</a>
-            {% endif %}
+<div class="container">
+    <div class="row">
+        <div class="col text-center mt-3">
+            <h2>{{ title }}</h2>
         </div>
-        
-
-        <div>
-            <a href="/category/{{ category_title }}/">Back To List</a>
-        </div>
-        
-
-        <div>
-            {% if next %}
-            <a href="/topic/{{ category_title }}/{{ next.title }}/">Next</a>
-            {% endif %}
+    </div>
+    <div class="row">
+        <div class="col">
+            <div class="container pb-5">
+                <div class="row text-center">
+                    <div class="col">
+                        {% if previous %}
+                        <button onclick="window.open('/topic/{{ category_title }}/{{ previous.title }}/', '_self')" type="button" class="btn btn-outline-success">Previous</button>
+                        {% endif %}
+                    </div>
+                    <div class="col">
+                        <button onclick="window.open('/category/{{ category_title }}/', '_self')" type="button" class="btn btn-outline-primary">Back To Category</button>
+                    </div>
+                    <div class="col">
+                        {% if next %}
+                        <button onclick="window.open('/topic/{{ category_title }}/{{ next.title }}/', '_self')" type="button" class="btn btn-outline-success">Next</button>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
-    <h2>{{ title }}</h2>
+    <div class="row">
+        <div class="col">
+            nav
+        </div>
+
+        <div class="col col-10">
+            <pre><code  style="padding-top: 5px; padding-bottom: 5px; font-size: 18pt;"class="border border-secondary language-{{category_title}}">{{code}}</code></pre>
+
+            {% if output %}
+            <pre><code  style="padding-top: 5px; padding-bottom: 5px;font-size: 15pt"class="language-python">#Output: {{output}}</code></pre>
+            {% endif %}
+    
+            {% if version %}
+            <small class="text-muted">tested in version: {{version}}</small>
+            {% endif %}
+        </div>
+
+        <div class="col">
+
+        </div>
+    </div>
+    
             
     <div id="main-content-code">
 
-        <pre><code  style="padding-top: 5px; padding-bottom: 5px;"class="language-{{category_title}}">{{code}}</code></pre>
-        {% if output %}
-        <br>
-        <pre><code  style="padding-top: 5px; padding-bottom: 5px;"class="language-python">#Output: {{output}}</code></pre>
-        {% endif %}
+        
 
-        {% if version %}
-        <div class="note">
-            <p>Tested in version: {{version}}</p>
-        </div>
-        {% endif %}
-
-        <div class="vote_buttons">
-            
-        </div>
     </div>
+</div>
+
 
 {% endblock content %}
\ No newline at end of file
