diff --git a/src/components/MainArea.vue b/src/components/MainArea.vue
index 5783ef9..7c904aa 100644
--- a/src/components/MainArea.vue
+++ b/src/components/MainArea.vue
@@ -26,40 +26,43 @@ watch(
 </script>
 
 <template>
-  <div class="main-area" v-if="connStore.isConnected">
+  <div class="main-area">
     <div class="tab-bar">
-      <button
-        class="tab-item"
-        :class="{ active: activeTab === 'status' }"
-        @click="activeTab = 'status'"
-      >
-        <el-icon><Monitor /></el-icon>
-        {{ t('status.title') }}
-      </button>
-      <button
-        class="tab-item"
-        :class="{ active: activeTab === 'keys' }"
-        @click="activeTab = 'keys'"
-      >
-        <el-icon><Document /></el-icon>
-        {{ t('key.title') }}
-      </button>
-      <button
-        class="tab-item"
-        :class="{ active: activeTab === 'cli' }"
-        @click="activeTab = 'cli'"
-      >
-        <el-icon><Monitor /></el-icon>
-        {{ t('cli.title') }}
-      </button>
-      <button
-        class="tab-item"
-        :class="{ active: activeTab === 'slowlog' }"
-        @click="activeTab = 'slowlog'"
-      >
-        <el-icon><Clock /></el-icon>
-        {{ t('slowlog.title') }}
-      </button>
+      <template v-if="connStore.isConnected">
+        <button
+          class="tab-item"
+          :class="{ active: activeTab === 'status' }"
+          @click="activeTab = 'status'"
+        >
+          <el-icon><Monitor /></el-icon>
+          {{ t('status.title') }}
+        </button>
+        <button
+          class="tab-item"
+          :class="{ active: activeTab === 'keys' }"
+          @click="activeTab = 'keys'"
+        >
+          <el-icon><Document /></el-icon>
+          {{ t('key.title') }}
+        </button>
+        <button
+          class="tab-item"
+          :class="{ active: activeTab === 'cli' }"
+          @click="activeTab = 'cli'"
+        >
+          <el-icon><Monitor /></el-icon>
+          {{ t('cli.title') }}
+        </button>
+        <button
+          class="tab-item"
+          :class="{ active: activeTab === 'slowlog' }"
+          @click="activeTab = 'slowlog'"
+        >
+          <el-icon><Clock /></el-icon>
+          {{ t('slowlog.title') }}
+        </button>
+      </template>
+      <div class="tab-spacer" v-if="connStore.isConnected"></div>
       <button
         class="tab-item"
         :class="{ active: activeTab === 'settings' }"
@@ -70,19 +73,20 @@ watch(
       </button>
     </div>
     <div class="tab-content">
-      <StatusView v-if="activeTab === 'status'" />
-      <KeyBrowser v-else-if="activeTab === 'keys'" />
-      <CliView v-else-if="activeTab === 'cli'" />
-      <SlowLogView v-else-if="activeTab === 'slowlog'" />
-      <SettingsView v-else-if="activeTab === 'settings'" />
+      <template v-if="connStore.isConnected">
+        <StatusView v-if="activeTab === 'status'" />
+        <KeyBrowser v-else-if="activeTab === 'keys'" />
+        <CliView v-else-if="activeTab === 'cli'" />
+        <SlowLogView v-else-if="activeTab === 'slowlog'" />
+      </template>
+      <SettingsView v-if="activeTab === 'settings'" />
+      <div v-if="!connStore.isConnected && activeTab !== 'settings'" class="no-connection">
+        <div class="placeholder-icon">JRD</div>
+        <h2>JRedisDesktop</h2>
+        <p>{{ t('app.placeholder') }}</p>
+      </div>
     </div>
   </div>
-
-  <div v-else class="no-connection">
-    <div class="placeholder-icon">JRD</div>
-    <h2>JRedisDesktop</h2>
-    <p>{{ t('app.placeholder') }}</p>
-  </div>
 </template>
 
 <style scoped>
@@ -126,6 +130,10 @@ watch(
   border-bottom-color: var(--accent-light);
 }
 
+.tab-spacer {
+  flex: 1;
+}
+
 .tab-content {
   flex: 1;
   overflow: hidden;