diff --git a/src/renderer/components/available-versions/available-versions-slide.component.tsx b/src/renderer/components/available-versions/available-versions-slide.component.tsx
index c9ed1def..9aa98b2a 100644
--- a/src/renderer/components/available-versions/available-versions-slide.component.tsx
+++ b/src/renderer/components/available-versions/available-versions-slide.component.tsx
@@ -18,7 +18,7 @@ export function AvailableVersionsSlide(props: {year: string}) {
 
 
   return (
-    <div className="w-full max-w-full max-h-full shrink-0 flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin scrollbar-thumb-neutral-900">
+    <div className="w-full max-w-full max-h-full shrink-0 flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
       <div className="relative left-[2px] flex justify-center items-start content-start flex-wrap max-w-6xl pb-4">
         {availableVersions.map((version, index) =>
           <AvailableVersionItem key={index} version={version}></AvailableVersionItem>
diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx
index 714e45e9..638a155c 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar.component.tsx
@@ -17,7 +17,7 @@ export function NavBar() {
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <BsManagerIcon className='relative aspect-square w-16 h-16'/>
       </div>
-      <div id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
+      <div id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
          {installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 00901273..cbad61b2 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -22,10 +22,6 @@
     padding: 0;
     margin: 0;
     display: inline;
-  }
-
-::-webkit-scrollbar-thumb {
-  border-radius: 20px;
 }
 
 .download-progress{
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index 4d4df118..901e5ada 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -119,7 +119,7 @@ export function SettingsPage() {
   }
 
     return (
-        <div className="w-full h-full flex justify-center overflow-y-scroll scrollbar-thin scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
+        <div className="w-full h-full flex justify-center overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
 
             <div className="max-w-2xl w-full mt-10">
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 46082302..42ff802e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,10 +6,7 @@ module.exports = {
   darkMode: 'class',
   content: ['./src/renderer/**/*.tsx'],
   mode: 'jit',
-  plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')],
-  variants: {
-    scrollbar: ['rounded']
-  },
+  plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')({ nocompatible: true })],
   theme:{
     colors:{
       ...colors,