diff --git a/ui/src/components/commands/CommandExecution.svelte b/ui/src/components/commands/CommandExecution.svelte
index 0f642a4..d7b2cda 100644
--- a/ui/src/components/commands/CommandExecution.svelte
+++ b/ui/src/components/commands/CommandExecution.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="max-w-80 max-h-96 overflow-x-scroll" bind:this={msgContainer}>
+<div class="max-w-80 max-h-96 overflow-x-auto" bind:this={msgContainer}>
   {#each output as line, i}
     <pre data-prefix={i} class:text-warning={line["type"] === "stderr"}><code
         >{line["message"]}</code
diff --git a/ui/src/components/commands/Terminal.svelte b/ui/src/components/commands/Terminal.svelte
index c9edff2..cc959bc 100644
--- a/ui/src/components/commands/Terminal.svelte
+++ b/ui/src/components/commands/Terminal.svelte
@@ -47,7 +47,7 @@
   </div>
 
   <div
-    class="flex-grow max-w-80 h-80 overflow-x-scroll bg-base-content p-2"
+    class="flex-grow max-w-80 h-80 overflow-x-auto bg-base-content p-2"
     bind:this={scrollDiv}
   >
     <div class="whitespace-pre-wrap flex flex-col">
diff --git a/ui/src/components/common/CenterCard.svelte b/ui/src/components/common/CenterCard.svelte
index dccb238..fb72a49 100644
--- a/ui/src/components/common/CenterCard.svelte
+++ b/ui/src/components/common/CenterCard.svelte
@@ -1,6 +1,6 @@
 <div class="flex flex-row max-h-full justify-center">
   <div class="card flex-shrink-0 w-full max-w-xl max-h-full">
-    <div class="card-body overflow-scroll">
+    <div class="card-body overflow-auto">
       <slot />
     </div>
   </div>
diff --git a/ui/src/components/common/ContentPage.svelte b/ui/src/components/common/ContentPage.svelte
index ea87d6d..3c6a7e7 100644
--- a/ui/src/components/common/ContentPage.svelte
+++ b/ui/src/components/common/ContentPage.svelte
@@ -2,12 +2,12 @@
   <div class="hidden sm:flex rounded-lg flex-row w-full max-h-full">
     <slot name="sidebar" />
 
-    <div class="pl-3 h-full w-full flex flex-col overflow-x-scroll">
+    <div class="pl-3 h-full w-full flex flex-col overflow-x-auto">
       <div class="w-full">
         <slot name="header" />
       </div>
 
-      <div class="overflow-scroll w-full h-full rounded-lg">
+      <div class="overflow-auto w-full h-full rounded-lg">
         <slot name="content" />
       </div>
     </div>
@@ -18,8 +18,8 @@
     <slot name="header" />
     <slot name="sidebar" />
 
-    <div class="overflow-scroll h-full">
-      <div class="rounded-lg w-full h-full overflow-scroll pb-6">
+    <div class="overflow-auto h-full">
+      <div class="rounded-lg w-full h-full overflow-auto pb-6">
         <slot name="content" />
       </div>
     </div>
diff --git a/ui/src/components/common/Logs.svelte b/ui/src/components/common/Logs.svelte
index c8d5ebd..6be101b 100644
--- a/ui/src/components/common/Logs.svelte
+++ b/ui/src/components/common/Logs.svelte
@@ -2,7 +2,7 @@
   export let logs;
 </script>
 
-<div class="overflow-x-scroll h-full bg-neutral px-4 rounded-lg">
+<div class="overflow-x-auto h-full bg-neutral px-4 rounded-lg">
   <div class="py-4 h-full text-neutral-content">
     {#each logs as line, i}
       <pre data-prefix={i}><code>{line.trim()}</code></pre>
diff --git a/ui/src/components/common/Sidebar.svelte b/ui/src/components/common/Sidebar.svelte
index dcb7b51..491cf46 100644
--- a/ui/src/components/common/Sidebar.svelte
+++ b/ui/src/components/common/Sidebar.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div
-  class="menu rounded-box hidden sm:inline-block min-w-fit max-h-full bg-base-200 overflow-y-scroll shadow-lg h-fit"
+  class="menu rounded-box hidden sm:inline-block min-w-fit max-h-full bg-base-200 overflow-y-auto shadow-lg h-fit"
 >
   {#each pages as info, i}
     <li class="">
diff --git a/ui/src/components/common/Steps.svelte b/ui/src/components/common/Steps.svelte
index 431845d..7a403cf 100644
--- a/ui/src/components/common/Steps.svelte
+++ b/ui/src/components/common/Steps.svelte
@@ -50,7 +50,7 @@
   <div
     class="flex flex-col bg-base-200 p-4 rounded-lg shadow-xl flex-grow max-h-full"
   >
-    <div class="overflow-scroll" in:fly={{ y: 100, duration: 250 }}>
+    <div class="overflow-auto" in:fly={{ y: 100, duration: 250 }}>
       <svelte:component
         this={steps[currentStep].component}
         {props}
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index ce1b98f..d5188a9 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -17,7 +17,7 @@
   const serviceStates = {};
 </script>
 
-<div class="flex flex-col md:flex-row gap-8 p-4 h-full overflow-y-scroll">
+<div class="flex flex-col md:flex-row gap-8 p-4 h-full overflow-y-auto">
   <div class="hidden md:inline flex-grow" />
   <div class="max-w-full md:max-w-lg md:flex-grow">
     <DashboardCardList
diff --git a/ui/src/routes/settings/users/SSHKey.svelte b/ui/src/routes/settings/users/SSHKey.svelte
index 4b8f0aa..8c766a5 100644
--- a/ui/src/routes/settings/users/SSHKey.svelte
+++ b/ui/src/routes/settings/users/SSHKey.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div
-  class="flex gap-2 max-w-full overflow-scroll text-center items-center bg-base-100 p-4 rounded-lg"
+  class="flex gap-2 max-w-full overflow-auto text-center items-center bg-base-100 p-4 rounded-lg"
 >
   <span class="text-lg">{name}</span>
   <div class="tooltip tooltip-left flex-grow" data-tip={tooltipText}>