diff --git a/fe/src/views/components/HomeHeader/HomeHeader.css b/fe/src/views/components/HomeHeader/HomeHeader.css
index dd0e5d1..2379c78 100644
--- a/fe/src/views/components/HomeHeader/HomeHeader.css
+++ b/fe/src/views/components/HomeHeader/HomeHeader.css
@@ -69,6 +69,24 @@
   height: 100%;
 }
 
+.settings-drawer :deep(.el-drawer__body) {
+  display: flex;
+  min-height: 0;
+  padding: 0 20px 20px;
+  overflow: hidden;
+}
+
+.settings-tabs :deep(.el-tabs__header) {
+  flex: 0 0 176px;
+  margin: 0 0 0 20px;
+}
+
+.settings-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
 @media (max-width: 768px) {
   .header-container {
     display: flex;
@@ -87,4 +105,18 @@
   .mobile-logo {
     display: block;
   }
+
+  .settings-drawer :deep(.el-drawer__body) {
+    padding: 0 10px 10px;
+    overflow: auto;
+  }
+
+  .settings-tabs :deep(.el-tabs__header) {
+    flex: none;
+    margin: 0;
+  }
+
+  .settings-tabs :deep(.el-tabs__content) {
+    overflow: visible;
+  }
 }
diff --git a/fe/src/views/components/HomeHeader/HomeHeader.vue b/fe/src/views/components/HomeHeader/HomeHeader.vue
index 7ce6a67..00fed78 100644
--- a/fe/src/views/components/HomeHeader/HomeHeader.vue
+++ b/fe/src/views/components/HomeHeader/HomeHeader.vue
@@ -18,8 +18,8 @@
   </div>
 
   <!-- Settings Drawer -->
-  <el-drawer v-model="globalStatus.settingsDrawerVisible" :size="isMobile ? '100%' : '600px'" :title="lang.settings" class="settings-drawer" :with-header="true" direction="rtl">
-    <el-tabs :tab-position="isMobile ? 'top' : 'left'" class="settings-tabs">
+  <el-drawer v-model="globalStatus.settingsDrawerVisible" :size="isMobile ? '100%' : '50vw'" :title="lang.settings" class="settings-drawer" :with-header="true" direction="rtl">
+    <el-tabs :tab-position="isMobile ? 'top' : 'right'" class="settings-tabs">
       <el-tab-pane :label="lang.security">
         <SecuritySettings/>
       </el-tab-pane>