diff --git a/resources/css/app.css b/resources/css/app.css
index 377af4e88b..aaa7177007 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -157,7 +157,7 @@ tr td:first-child {
 }
 
 .menu-item {
-    @apply flex items-center w-full gap-3 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
+    @apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
 }
 
 .menu-item-active {
diff --git a/resources/views/livewire/project/application/configuration.blade.php b/resources/views/livewire/project/application/configuration.blade.php
index 4aaf96569c..c93080183a 100644
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$application" />
     <livewire:project.application.heading :application="$application" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
-        <div class="flex flex-col gap-2 xl:w-48">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             @if ($application->destination->server->isSwarm())
@@ -78,7 +78,7 @@
                 @click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 <livewire:project.application.general :application="$application" />
             </div>
diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index 1a69781dad..dd3e053492 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -2,8 +2,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
-        <div class="flex flex-col gap-4 min-w-fit">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a :class="activeTab === 'general' && 'dark:text-white'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
@@ -48,7 +48,7 @@
                 href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 @if ($database->type() === 'standalone-postgresql')
                     <livewire:project.database.postgresql.general :database="$database" />
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 3c0e113e4b..94bcfaa15d 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -1,6 +1,6 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex h-full pt-6">
+    <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex flex-col items-start gap-4 min-w-fit">
             <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
             <a :class="activeTab === 'service-stack' && 'dark:text-white'"
@@ -39,7 +39,7 @@
                 href="#">Danger Zone
             </a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'service-stack'">
                 <livewire:project.service.stack-form :service="$service" />
                 <h3>Services</h3>
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 563625305c..098a751bb8 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -1,7 +1,7 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex h-full pt-6">
-        <div class="flex flex-col gap-4 min-w-fit">
+    <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
             <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
@@ -24,7 +24,7 @@
                     @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
             @endif
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             @isset($serviceApplication)
                 <div x-cloak x-show="activeTab === 'general'" class="h-full">
                     <livewire:project.service.service-application-view :application="$serviceApplication" />
diff --git a/resources/views/livewire/server/resources.blade.php b/resources/views/livewire/server/resources.blade.php
index 8c888b1316..a5ff69ea17 100644
--- a/resources/views/livewire/server/resources.blade.php
+++ b/resources/views/livewire/server/resources.blade.php
@@ -1,13 +1,13 @@
 <div>
     <x-server.navbar :server="$server" :parameters="$parameters" />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
-        <div class="flex flex-col gap-4">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full flex-col md:flex-row gap-8">
+        <div class="flex md:flex-col gap-4 flex-row">
             <a :class="activeTab === 'managed' && 'dark:text-white'"
                 @click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
             <a :class="activeTab === 'unmanaged' && 'dark:text-white'"
                 @click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'managed'" class="h-full">
                 <div class="flex flex-col">
                     <div class="flex gap-2">