diff --git a/src/app/[name]/(Main)/order/history/page.tsx b/src/app/[name]/(Main)/order/history/page.tsx
index 0505a2d..61b11fd 100644
--- a/src/app/[name]/(Main)/order/history/page.tsx
+++ b/src/app/[name]/(Main)/order/history/page.tsx
@@ -115,7 +115,7 @@ function OrdersIndex() {
     const firstTab = () => {
         return currentOrders.map((order) => {
             return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
+                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
                     <div className="text-sm2">
                         <div className='flex gap-2'>
                             <LocationPinIcon size={16} />
@@ -127,7 +127,7 @@ function OrdersIndex() {
                         </div>
                     </div>
 
-                    <hr className='mx-4 mt-6 text-disabled3 border-2' />
+                    <hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
 
                     <div className='flex justify-between mt-6'>
                         <div className='flex justify-start gap-[9px]'>
@@ -142,7 +142,7 @@ function OrdersIndex() {
                                             height={32}
                                             alt="order image"
                                         />
-                                        <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
+                                        <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
                                             {item.quantity}
                                         </span>
                                     </span>
@@ -165,7 +165,7 @@ function OrdersIndex() {
     const secondTab = () => {
         return currentOrders.map((order) => {
             return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
+                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
                     <div className="text-sm2">
                         <div className='flex gap-2'>
                             <LocationPinIcon size={16} />
@@ -177,7 +177,7 @@ function OrdersIndex() {
                         </div>
                     </div>
 
-                    <hr className='mx-4 mt-6 text-disabled3 border-2' />
+                    <hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
 
                     <div className='flex justify-between mt-6'>
                         <div className='flex justify-start gap-[9px]'>
@@ -192,7 +192,7 @@ function OrdersIndex() {
                                             height={32}
                                             alt="order image"
                                         />
-                                        <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
+                                        <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
                                             {item.quantity}
                                         </span>
                                     </span>
diff --git a/src/app/globals.css b/src/app/globals.css
index 9ec648e..e201ffb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -280,7 +280,7 @@ html[data-theme="light"] {
   /* #7F7F7F */
   --disabled3: oklch(0.949 0.002 277.1);
   /* #F2F2F2 */
-  --disabled-text: oklch(0.34 0.006 257.4);
+  --disabled-text: oklch(0.6564 0.0285 276.16);
   /* #8C90A3 */
   --menu-header: oklch(0.79 0.03 237.3);
   /* #C3C7DD */
diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx
index 336f91c..257998a 100644
--- a/src/components/tab/TabContainer.tsx
+++ b/src/components/tab/TabContainer.tsx
@@ -36,16 +36,16 @@ export type TabContainerClassName = {
 
 export const TabContainerClassNames: TabContainerClassName = {
     wrapper: 'h-full',
-    scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] justify-center rounded-[32px] inline-flex items-center gap-10',
+    scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] dark:bg-container/70 justify-center rounded-[32px] inline-flex items-center gap-10',
     header: '',
     headerDeactive: '',
     headerActive: '',
     icon: 'text-xs transition-all duration-150',
     iconDeactive: 'stroke-disabled-text',
-    iconActive: 'stroke-black',
+    iconActive: 'stroke-black dark:stroke-foreground',
     title: 'text-xs transition-all duration-150',
     titleDeactive: 'text-disabled-text',
-    titleActive: 'text-black'
+    titleActive: 'text-black dark:text-foreground'
 }
 
 function TabContainer({ className = TabContainerClassNames, changeType = TabContainerRenderType.RENDERER, defaultIndex = 0, itemRenderer, children, ...restProps }: Props) {