diff --git a/packages/frontend/index.html b/packages/frontend/index.html
index fb8696a1..cf699a6b 100644
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="no-forced-scrollbar">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
diff --git a/packages/frontend/src/assets/styles/global.css b/packages/frontend/src/assets/styles/global.css
index abf4e25f..e3403a71 100644
--- a/packages/frontend/src/assets/styles/global.css
+++ b/packages/frontend/src/assets/styles/global.css
@@ -1,16 +1,10 @@
 * {
   font-family: var(--j-font-family), sans-serif, system-ui !important;
   backface-visibility: hidden;
-}
-
-html {
+  scrollbar-gutter: stable both-edges;
   overscroll-behavior: none;
 }
 
-html.no-forced-scrollbar {
-  overflow-y: unset !important;
-}
-
 /* Custom utility classes */
 
 .link {
diff --git a/packages/frontend/src/layouts/default.vue b/packages/frontend/src/layouts/default.vue
index f448ad6b..80f5fd95 100644
--- a/packages/frontend/src/layouts/default.vue
+++ b/packages/frontend/src/layouts/default.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { computed, onBeforeMount, onUnmounted, provide, ref, watch } from 'vue';
+import { computed, provide, ref, watch } from 'vue';
 import { useDisplay } from 'vuetify';
 import type { DrawerItem } from '#/components/Layout/Navigation/NavigationDrawer.vue';
 import { playbackManager } from '#/store/playback-manager.ts';
@@ -43,10 +43,4 @@ watch(display.mobile, () => {
 });
 
 provide('NavigationDrawer', navDrawer);
-onBeforeMount(() => {
-  document.documentElement.classList.remove('no-forced-scrollbar');
-});
-onUnmounted(() => {
-  document.documentElement.classList.add('no-forced-scrollbar');
-});
 </script>
