diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl
index 6d84f8f3590e..71410ea36ba6 100644
--- a/templates/admin/layout_head.tmpl
+++ b/templates/admin/layout_head.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .ctxData}}
 <div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
-	<div class="ui container stackable grid">
+	<div class="ui container admin-container">
 		{{template "admin/navbar" .ctxData}}
-		<div class="twelve wide column">
+		<div class="admin-main">
 			{{template "base/alert" .ctxData}}
 			{{/* block: admin-setting-content */}}
 
diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index 641d3fad81f8..a96e5c93677a 100644
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="four wide column">
+<div class="admin-nav">
 	<div class="ui fluid vertical menu">
 		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index f4848bef4af5..8c9d1e201c2a 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -1,3 +1,25 @@
+.admin-container {
+  display: flex !important;
+  gap: 16px;
+}
+
+.admin-nav {
+  width: 240px;
+}
+
+.admin-main {
+  flex: 1;
+}
+
+@media (max-width: 767.98px) {
+  .admin-container {
+    flex-direction: column;
+  }
+  .admin-nav {
+    width: auto;
+  }
+}
+
 .admin.hooks .list > .item:not(:first-child) {
   border-top: 1px solid var(--color-secondary);
   padding: 0.25rem 1rem;