diff --git a/web/pages/index.vue b/web/pages/index.vue
index 5baef0a..fc85b69 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <main
-        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
+        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap flex-col md:flex-row"
     >
         <div class="flex items-center justify-center flex-col gap-y-2 w-32">
             <div
@@ -17,7 +17,7 @@
             </div>
 
             <p
-                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
+                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10 border-${opened ? (locked ? 'error' : 'secondary') : 'primary'} border-solid border-2 rounded-md`"
             >
                 {{ opened ? "Opened" : "Closed" }}
             </p>