diff --git a/client-solid/src/Components/LoginButton.tsx b/client-solid/src/Components/LoginButton.tsx
index 14d1bc3..53dce5d 100644
--- a/client-solid/src/Components/LoginButton.tsx
+++ b/client-solid/src/Components/LoginButton.tsx
@@ -33,17 +33,17 @@ export function LoginButton(): JSXElement {
         </Show>
       </div>
       {showLogoutModal() && (
-        <div role="alert" class="absolute top-10 z-10 flex bg-slate-500 rounded-md">
+        <div
+          role="alert"
+          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-warning"
+        >
           <div class="relative p-5">
             <p>Do you wish to logout?</p>
-            <div
-              class="w-100' flex justify-between
-            "
-            >
-              <button class="btn btn-sm" onClick={confirmLogout}>
+            <div class="w-100' flex justify-around">
+              <button class="btn btn-primary btn-sm" onClick={confirmLogout}>
                 Yes
               </button>
-              <button class="btn btn-sm" onClick={cancelLogout}>
+              <button class="btn btn-primary btn-sm" onClick={cancelLogout}>
                 No
               </button>
             </div>