diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index ca2323e..298f31a 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -43,6 +43,7 @@ import {
   ChatBubbleLeftEllipsisIcon,
   ScissorsIcon,
   SwatchIcon,
+  SparklesIcon,
 } from "@heroicons/react/24/outline";
 
 export interface TemplateChatStore extends ChatStore {
@@ -473,7 +474,119 @@ export default function ChatBOX(props: {
           setShow={setShowSearch}
         />
       )}
-      <div
+      <div class="navbar bg-base-100">
+        <div class="navbar-start">
+          <div class="dropdown">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h7"
+                />
+              </svg>
+            </div>
+            <ul
+              tabindex="0"
+              class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+            >
+              <li>
+                <p>
+                  <ChatBubbleLeftEllipsisIcon class="h-4 w-4" />
+                  Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
+                </p>
+              </li>
+              <li>
+                <p>
+                  <ScissorsIcon class="h-4 w-4" />
+                  Cut:
+                  {chatStore.postBeginIndex}/
+                  {chatStore.history.filter(({ hide }) => !hide).length}
+                </p>
+              </li>
+              <li>
+                <p>
+                  <BanknotesIcon class="h-4 w-4" />
+                  Cost: ${chatStore.cost.toFixed(4)}
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-center">
+          <div class="indicator">
+            <span class="indicator-item badge badge-primary">
+              {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
+            </span>
+            <a class="btn btn-ghost text-xl">
+              <SparklesIcon class="h-4 w-4" />
+              {chatStore.model}
+            </a>
+          </div>
+        </div>
+        <div class="navbar-end">
+          <button
+            class="btn btn-ghost btn-circle"
+            onClick={(event) => {
+              // stop propagation to parent
+              event.stopPropagation();
+
+              setShowSearch(true);
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
+            </svg>
+          </button>
+          <button
+            class="btn btn-ghost btn-circle"
+            onClick={() => setShowSettings(true)}
+          >
+            <div class="indicator">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="h-6 w-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                />
+              </svg>
+
+              <span class="badge badge-xs badge-primary indicator-item"></span>
+            </div>
+          </button>
+        </div>
+      </div>
+      {/* <div
         className="relative cursor-pointer rounded p-2"
         onClick={() => setShowSettings(true)}
       >
@@ -488,63 +601,7 @@ export default function ChatBOX(props: {
         >
           <MagnifyingGlassIcon class="w-5 h-5" />
         </button>
-        <div class="stats shadow hidden lg:inline-grid">
-          <div class="stat">
-            <div class="stat-figure text-secondary">
-              <CubeIcon class="h-10 w-10" />
-            </div>
-            <div class="stat-title">Model</div>
-            <div class="stat-value">{chatStore.model}</div>
-            <div class="stat-desc">
-              Prompt:{" "}
-              {chatStore.systemMessageContent.length > 30
-                ? chatStore.systemMessageContent.slice(0, 30) + ".."
-                : chatStore.systemMessageContent}
-            </div>
-          </div>
-
-          <div class="stat">
-            <div class="stat-figure text-secondary">
-              <SwatchIcon class="h-10 w-10" />
-            </div>
-            <div class="stat-title">Mode</div>
-            <div class="stat-value">
-              {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
-            </div>
-            <div class="stat-desc">STREAM/FETCH</div>
-          </div>
-
-          <div class="stat">
-            <div class="stat-figure text-secondary">
-              <ChatBubbleLeftEllipsisIcon class="h-10 w-10" />
-            </div>
-            <div class="stat-title">Tokens</div>
-            <div class="stat-value">{chatStore.totalTokens}</div>
-            <div class="stat-desc">Max: {chatStore.maxTokens}</div>
-          </div>
-
-          <div class="stat">
-            <div class="stat-figure text-secondary">
-              <ScissorsIcon class="h-10 w-10" />
-            </div>
-            <div class="stat-title">Cut</div>
-            <div class="stat-value">{chatStore.postBeginIndex}</div>
-            <div class="stat-desc">
-              Max: {chatStore.history.filter(({ hide }) => !hide).length}
-            </div>
-          </div>
-
-          <div class="stat">
-            <div class="stat-figure text-secondary">
-              <BanknotesIcon class="h-10 w-10" />
-            </div>
-            <div class="stat-title">Cost</div>
-            <div class="stat-value">${chatStore.cost.toFixed(4)}</div>
-            <div class="stat-desc">
-              Accumulated: ${getTotalCost().toFixed(2)}
-            </div>
-          </div>
-        </div>
+        <div class="hidden lg:inline-grid"></div>
         <div class="lg:hidden">
           <div>
             <button className="underline">
@@ -580,7 +637,7 @@ export default function ChatBOX(props: {
             </span>
           </div>
         </div>
-      </div>
+      </div> */}
       <div className="grow overflow-scroll">
         {!chatStore.apiKey && (
           <p className="bg-base-200 p-6 rounded my-3 text-left">
@@ -781,6 +838,13 @@ export default function ChatBOX(props: {
             <br />
           </p>
         )}
+        <div class="chat chat-start">
+          <div class="chat-header">Prompt</div>
+          <div class="chat-bubble chat-bubble-accent">
+            {chatStore.systemMessageContent}
+          </div>
+        </div>
+
         {chatStore.history.map((_, messageIndex) => (
           <Message
             chatStore={chatStore}