diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 337a402c..faedeb53 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -21,6 +21,11 @@
               <AccountAvatar :account="currentUser.account" h="1.5em" />
             </NuxtLink>
           </template>
+          <template v-else>
+            <button btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
+              Sign in
+            </button>
+          </template>
         </div>
       </div>
       <slot name="header" />
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index db1be7ca..0876ca18 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -23,7 +23,7 @@ watchOnce(modelValue, () => {
     />
     <div
       class="
-        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform ml-0
+        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
         border border-base top-1/2 -translate-y-1/2 mx-8 md:(left-1/2 -translate-x-1/2)
       "
       :class="modelValue ? 'opacity-100' : 'opacity-0'"
diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
index 44c37e86..7cde0a0d 100644
--- a/components/user/UserSignIn.vue
+++ b/components/user/UserSignIn.vue
@@ -15,12 +15,12 @@ async function handleInput() {
 </script>
 
 <template>
-  <div h-full text-center justify-center flex="~ col items-center gap2">
+  <div text-center justify-center flex="~ col items-center gap2">
     <div text-3xl mb2>
       Sign in
     </div>
     <div>Mastodon Server Name</div>
-    <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" w-80 text-xl items-center>
+    <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" text-xl items-center>
       <span op35 mr1 text-sm>https://</span>
       <input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent @input="handleInput">
     </div>