diff --git a/layers/assets/css/app.css b/layers/assets/css/app.css
index 2f52876..5479127 100644
--- a/layers/assets/css/app.css
+++ b/layers/assets/css/app.css
@@ -3,6 +3,7 @@
 @import './base/_font.css';
 @import './base/_transition.css';
 
+@import './components/_scrollbar.css';
 @import './components/_button.css';
 @import './components/_layout.css';
 @import './components/_modal.css';
diff --git a/layers/assets/css/components/_scrollbar.css b/layers/assets/css/components/_scrollbar.css
new file mode 100644
index 0000000..66b8c4f
--- /dev/null
+++ b/layers/assets/css/components/_scrollbar.css
@@ -0,0 +1,14 @@
+body ::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+body ::-webkit-scrollbar {
+  @apply w-5;
+}
+
+body ::-webkit-scrollbar-thumb {
+  @apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
+}
+
+.custom-theme-scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-[var(--foreground-reversal-15)];
+}
diff --git a/layers/components/blocks/modal/Content.vue b/layers/components/blocks/modal/Content.vue
index 1407559..66fc472 100644
--- a/layers/components/blocks/modal/Content.vue
+++ b/layers/components/blocks/modal/Content.vue
@@ -153,13 +153,4 @@ watch(isOpen, newVal => {
 .content-tex {
   @apply overflow-y-auto mb-4 px-6 sm:mb-6 sm:px-8;
 }
-.content-tex::-webkit-scrollbar-track {
-  @apply bg-transparent;
-}
-.content-tex::-webkit-scrollbar {
-  @apply w-5;
-}
-.content-tex::-webkit-scrollbar-thumb {
-  @apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
-}
 </style>
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 8cc9c7c..6b1c381 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -252,7 +252,7 @@ onMounted(() => {
             </AtomsLocaleLink>
           </div>
           <nav class="nav-list">
-            <div v-if="gnbData?.menus" class="official">
+            <div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
               <div
                 v-for="(gnbItem, key) in gnbData?.menus"
                 :key="key"
@@ -515,6 +515,12 @@ onMounted(() => {
 .official {
   @apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
 }
+.custom-theme-scrollbar::-webkit-scrollbar {
+  @apply w-1;
+}
+.custom-theme-scrollbar::-webkit-scrollbar-thumb {
+  @apply border-0;
+}
 
 .more {
   @apply relative hidden ml-[32px] pt-[11px] md:block;
diff --git a/layers/components/widgets/modal/Preregist.vue b/layers/components/widgets/modal/Preregist.vue
index e71a4f5..8462656 100644
--- a/layers/components/widgets/modal/Preregist.vue
+++ b/layers/components/widgets/modal/Preregist.vue
@@ -280,7 +280,7 @@ defineExpose({
           class="absolute left-0 right-0 top-0 bg-gradient-to-b from-[#292929] to-transparent z-[1] h-[24px] md:h-[32px]"
         ></div>
         <div
-          class="overflow-y-auto h-full py-[24px] px-5 md:py-[32px] md:px-10"
+          class="overflow-y-auto h-full py-[24px] px-5 md:py-[32px] md:px-10 custom-theme-scrollbar"
         >
           <div class="px-3 py-4 md:px-6">
             <div class="flex cursor-pointer items-center gap-3 md:gap-4">
@@ -308,7 +308,7 @@ defineExpose({
             <!-- Marketing Detail Content -->
             <div
               v-if="isExpandedMarketing"
-              class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3"
+              class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3 custom-theme-scrollbar"
             >
               <p
                 v-dompurify-html="tmWithGameName('Preregist_Agree_News_Info')"
@@ -426,27 +426,4 @@ defineExpose({
 .modal-wrap:deep(.modal-close) svg {
   @apply fill-white;
 }
-
-/* Custom scrollbar for accordion content */
-:deep(.overflow-y-auto) {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-}
-
-:deep(.overflow-y-auto::-webkit-scrollbar) {
-  width: 4px;
-}
-
-:deep(.overflow-y-auto::-webkit-scrollbar-track) {
-  background: transparent;
-}
-
-:deep(.overflow-y-auto::-webkit-scrollbar-thumb) {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 999px;
-}
-
-:deep(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
-  background: rgba(255, 255, 255, 0.25);
-}
 </style>