diff --git a/example/webui/views/agents.html b/example/webui/views/agents.html
index c825a5c..aa4014d 100644
--- a/example/webui/views/agents.html
+++ b/example/webui/views/agents.html
@@ -6,58 +6,62 @@
     <title>Agent List</title>
     {{template "views/partials/header"}}
 </head>
-<body class="bg-gray-900 p-4 text-white">
-<div class="max-w-6xl mx-auto">
-    <div class="text-center mb-6">
-        <h1 class="text-3xl md:text-4xl font-bold">Smart Agent List</h1>
-    </div>
-    <div class="flex flex-col">
-        <div class="overflow-x-auto">
-            <div class="py-2 align-middle inline-block min-w-full">
-                <div class="shadow overflow-hidden border-b border-gray-700 rounded-lg">
-                    <table class="min-w-full divide-y divide-gray-700">
-                        <thead class="bg-gray-700">
-                        <tr>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
-                                Name
-                            </th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
-                                Status
-                            </th>
-                            <th scope="col" class="relative px-6 py-3">
-                                <span class="sr-only">Talk</span>
-                            </th>
-                            <th scope="col" class="relative px-6 py-3">
-                                <span class="sr-only">Delete</span>
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody class="bg-gray-800 divide-y divide-gray-700">
-                        <!-- Dynamic agent rows go here -->
-                        {{ range .Agents }}
-                        <tr>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">{{.}}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Online</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <a href="/talk/{{.}}" class="text-indigo-500 hover:text-indigo-400">Talk</a>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                <a href="/delete/{{.}}" class="text-red-500 hover:text-red-400">Delete</a>
-                            </td>
-                        </tr>
-                        {{ end }}
-                        <!-- Repeat for each agent -->
-                        </tbody>
-                    </table>
+<body class="bg-gray-900 p-4 text-white font-sans">
+    {{template "views/partials/menu"}}
+    <div class="max-w-6xl mx-auto">
+        <header class="text-center mb-8">
+            <h1 class="text-3xl md:text-5xl font-bold">Smart Agent List</h1>
+        </header>
+        <section class="flex flex-col">
+            <div class="overflow-x-auto">
+                <div class="py-2 align-middle inline-block min-w-full">
+                    <div class="shadow overflow-hidden border-b border-gray-700 rounded-lg">
+                        <table class="min-w-full divide-y divide-gray-700">
+                            <thead class="bg-gray-700">
+                                <tr>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                        Name
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                        Status
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-center">
+                                        <span class="sr-only">Talk</span>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-center">
+                                        <span class="sr-only">Delete</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-gray-800 divide-y divide-gray-700">
+                                <!-- Dynamic agent rows go here -->
+                                {{ range .Agents }}
+                                <tr>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">{{.}}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{.}}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
+                                        <a href="/talk/{{.}}" class="text-indigo-500 hover:text-indigo-400">
+                                            <i class="fas fa-comments"></i> Talk
+                                        </a>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
+                                        <a href="/delete/{{.}}" class="text-red-500 hover:text-red-400">
+                                            <i class="fas fa-trash-alt"></i> Delete
+                                        </a>
+                                    </td>
+                                </tr>
+                                {{ end }}
+                                <!-- Repeat for each agent -->
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
-            </div>
+            </section>
+            <footer class="mt-8 text-center">
+                <a href="/create" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
+                    Add New Agent
+                </a>
+            </footer>
         </div>
-    </div>
-    <div class="mt-6 text-center">
-        <a href="/create" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
-            Add New Agent
-        </a>
-    </div>
-</div>
-</body>
+    </body>
 </html>
diff --git a/example/webui/views/chat.html b/example/webui/views/chat.html
index c8ab894..aa391c5 100644
--- a/example/webui/views/chat.html
+++ b/example/webui/views/chat.html
@@ -40,8 +40,10 @@
         }
     </style>
 </head>
-<body class="bg-gray-900 p-4 text-white" hx-ext="sse" sse-connect="/sse/{{.Name}}">
+<body class="bg-gray-900 p-4 text-white font-sans" hx-ext="sse" sse-connect="/sse/{{.Name}}">
+    {{template "views/partials/menu"}}
 <div class="chat-container bg-gray-800 shadow-lg rounded-lg" >
+
     <!-- Chat Header -->
     <div class="border-b border-gray-700 p-4">
         <h1 class="text-lg font-semibold">Talk to '{{.Name}}'</h1>
diff --git a/example/webui/views/create.html b/example/webui/views/create.html
index 67df528..1377cda 100644
--- a/example/webui/views/create.html
+++ b/example/webui/views/create.html
@@ -7,7 +7,8 @@
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
 </head>
-<body class="bg-gray-900 p-4 text-white">
+<body class="bg-gray-900 p-4 text-white font-sans">
+    {{template "views/partials/menu"}}
     <div class="max-w-2xl mx-auto my-12 bg-gray-800 p-8 rounded-lg shadow-lg">
         <h1 class="text-3xl font-bold text-center mb-10 text-blue-400">Create New Agent</h1>
      
diff --git a/example/webui/views/index.html b/example/webui/views/index.html
index 0a75e81..d3feffe 100644
--- a/example/webui/views/index.html
+++ b/example/webui/views/index.html
@@ -4,11 +4,12 @@
     <title>Smart Assistant Dashboard</title>
     {{template "views/partials/header"}}
 </head>
-<body class="bg-gray-900 p-4 text-white">
+<body class="bg-gray-900 p-4 text-white font-sans">
+    {{template "views/partials/menu"}}
 <div class="max-w-4xl mx-auto">
-    <div class="text-center mb-6">
-        <h1 class="text-3xl font-bold">Smart Assistant Dashboard</h1>
-    </div>
+    <header class="text-center mb-8">
+        <h1 class="text-3xl md:text-5xl font-bold">Smart Agent Dashboard</h1>
+    </header>
     <div class="flex flex-col items-center space-y-4">
         <!-- Button to Agent List Page -->
         <a href="/agents" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
diff --git a/example/webui/views/knowledgebase.html b/example/webui/views/knowledgebase.html
index 67a6109..7019825 100644
--- a/example/webui/views/knowledgebase.html
+++ b/example/webui/views/knowledgebase.html
@@ -7,10 +7,12 @@
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
 </head>
-<body class="bg-gray-900 p-4 text-white">
+<body class="bg-gray-900 p-4 text-white font-sans">
+    {{template "views/partials/menu"}}
+    <header class="text-center mb-8">
+        <h1 class="text-3xl md:text-5xl font-bold">Knowledgebase (items: {{.KnowledgebaseItemsCount}})</h1>
+    </header>
     <div class="max-w-2xl mx-auto my-12 bg-gray-800 p-8 rounded-lg shadow-lg">
-        <h1 class="text-3xl font-bold text-center mb-10 text-blue-400">Knowledgebase (items: {{.KnowledgebaseItemsCount}})</h1>
-
     <form action="/knowledgebase" method="POST" class="space-y-6">
         Add sites to KB
         <div class="mb-6">
diff --git a/example/webui/views/partials/header.html b/example/webui/views/partials/header.html
index 31fde73..1e7f6d5 100644
--- a/example/webui/views/partials/header.html
+++ b/example/webui/views/partials/header.html
@@ -2,6 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <style>
     body {
         font-family: 'Roboto', sans-serif;
diff --git a/example/webui/views/partials/menu.html b/example/webui/views/partials/menu.html
new file mode 100644
index 0000000..7019768
--- /dev/null
+++ b/example/webui/views/partials/menu.html
@@ -0,0 +1,20 @@
+<nav class="bg-gray-800 w-full">
+    <div class="px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+            <div class="flex">
+                <div class="flex-shrink-0 flex items-center">
+                    <a href="/" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">
+                        <i class="fas fa-home"></i> Home
+                    </a>
+                    <a href="/agents" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">
+                        <i class="fas fa-users"></i> Agent list
+                    </a>
+                    <a href="/knowledgebase" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">
+                        <i class="fas fa-book"></i> Knowledgebase
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+<br>
