diff --git a/src/components/Lume.tsx b/src/components/Lume.tsx
index e09f4fc..ce308d1 100644
--- a/src/components/Lume.tsx
+++ b/src/components/Lume.tsx
@@ -1,12 +1,41 @@
-import { LumeIdentity, LumeDashboard, LumeProvider } from "@lumeweb/sdk";
+import {
+  LumeIdentity,
+  LumeIdentityTrigger,
+  LumeDashboardTrigger,
+  LumeDashboard,
+  useLume,
+  LumeProvider,
+} from "@lumeweb/sdk";
+
+const Lume = () => {
+  const { isLoggedIn } = useLume();
+  return (
+    <>
+      <LumeIdentity>
+        <LumeIdentityTrigger asChild>
+          {!isLoggedIn ? (
+            <LumeDashboard>
+              <LumeDashboardTrigger asChild>
+                <button className="ml-2 w-full rounded-full bg-[hsl(113,49%,55%)] text-black">
+                  Check Status
+                </button>
+              </LumeDashboardTrigger>
+            </LumeDashboard>
+          ) : (
+            <button className="ml-2 w-full rounded-full bg-[hsl(113,49%,55%)] text-black">
+              Login
+            </button>
+          )}
+        </LumeIdentityTrigger>
+      </LumeIdentity>
+    </>
+  );
+};
 
 export default function () {
   return (
-    <>
-      <LumeIdentity />
-      <LumeProvider>
-        <LumeDashboard />
-      </LumeProvider>
-    </>
+    <LumeProvider>
+      <Lume />
+    </LumeProvider>
   );
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 241a8fd..4cc3a95 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
-import "@/styles/globals.scss";
 import "@lumeweb/sdk/lib/style.css";
+import "@/styles/globals.scss";
 import ArrowSvg from "@/components/Arrow";
 import Lume from "../components/Lume";
 ---
@@ -15,18 +15,21 @@ import Lume from "../components/Lume";
   </head>
   <body>
     <main class="flex min-h-screen flex-col items-center justify-between">
-      <header class="relative h-14 px-2 pl-7 py-2 w-full bg-neutral-900">
+      <header class="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
         <div
-          class="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center"
+          class="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white"
         >
-          <Lume client:only="react" />
+        <input class="ml-3 text-gray-300 w-[calc(100%-150px)] h-full bg-transparent focus:ring-0 focus:outline-none focus:border-0"/>
           <button
             class="absolute bg-neutral-700 text-neutral-400 px-4 py-2 right-0 rounded-r-full"
           >
             Navigate
-            <ArrowSvg class="inline-block ml-2 -mt-1 w-5 h-5" />
+            <ArrowSvg className="inline-block ml-2 -mt-1 w-5 h-5" />
           </button>
         </div>
+        <div class="w-32 flex justify-end">
+          <Lume client:only="react" />
+        </div>
       </header>
     </main>
   </body>
