diff --git a/src/components/Button/CancelButton.tsx b/src/components/Button/CancelButton.tsx
index 5406ae7e..e7fda68c 100644
--- a/src/components/Button/CancelButton.tsx
+++ b/src/components/Button/CancelButton.tsx
@@ -9,7 +9,7 @@ export default function CancelButton(props: ButtonProps) {
 
   return (
     <button
-      className={`btn-violet-light w-[52px] cursor-pointer rounded-[4px] border-none py-[7px] text-xs text-violet disabled:cursor-default md:w-[84px] md:text-sm dark:bg-dark-200 dark:text-dark-10 dark:hover:bg-dark-100/50 dark:disabled:bg-dark-200/50 ${className}`}
+      className={`btn-violet-light w-[52px] cursor-pointer rounded-[4px] py-[7px] text-xs text-violet disabled:cursor-default md:w-[84px] md:text-sm dark:border-none dark:bg-dark-200 dark:text-dark-10 dark:hover:bg-dark-100/50 dark:disabled:bg-dark-200/50 ${className}`}
       disabled={disabled}
       {...buttonProps}
     >
diff --git a/src/components/Modal/EditCardModal/ColumnsDropDown.tsx b/src/components/Modal/EditCardModal/ColumnsDropDown.tsx
index 0df763f0..856c66ec 100644
--- a/src/components/Modal/EditCardModal/ColumnsDropDown.tsx
+++ b/src/components/Modal/EditCardModal/ColumnsDropDown.tsx
@@ -9,17 +9,17 @@ export default function ColumnsDropDown({
   onSelectColumn: (columnId: number) => void;
 }) {
   return (
-    <ul className='absolute top-[110%] z-[9999] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2'>
+    <ul className='absolute top-[110%] z-[9999] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2 dark:border-dark-200 dark:bg-dark-300'>
       {columns.map((column) => {
         return (
           <li
-            className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-e8 md:text-[16px]'
+            className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-e8 md:text-[16px] dark:hover:bg-dark-200'
             key={`member-${column.id}`}
             onClick={() => {
               onSelectColumn(column.id);
             }}
           >
-            <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
+            <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
               <p className='text-[10px]'>●</p>
               <p className='w-max'>{column.title}</p>
             </div>
diff --git a/src/components/Modal/EditCardModal/MembersDropDown.tsx b/src/components/Modal/EditCardModal/MembersDropDown.tsx
index 1ce29931..57e8eeb6 100644
--- a/src/components/Modal/EditCardModal/MembersDropDown.tsx
+++ b/src/components/Modal/EditCardModal/MembersDropDown.tsx
@@ -12,11 +12,11 @@ export default function MembersDropDown({
   onSelectMember: (userId: number) => void;
 }) {
   return (
-    <ul className='absolute top-[110%] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2'>
+    <ul className='absolute top-[110%] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2 dark:border-dark-200 dark:bg-dark-300'>
       {members.map((member) => {
         return (
           <li
-            className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-light-hover md:text-[16px]'
+            className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-light-hover md:text-[16px] dark:text-dark-10 dark:hover:bg-dark-200'
             key={`member-${member.userId}`}
             onClick={() => {
               onSelectMember(member.userId);
@@ -27,7 +27,7 @@ export default function MembersDropDown({
         );
       })}
       <li
-        className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] text-gray-9f transition-all hover:bg-violet-light-hover md:text-[16px]'
+        className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] text-gray-9f transition-all hover:bg-violet-light-hover md:text-[16px] dark:text-dark-10 dark:hover:bg-dark-200'
         onClick={() => {
           onSelectMember(0);
         }}
diff --git a/src/components/Modal/EditCardModal/index.tsx b/src/components/Modal/EditCardModal/index.tsx
index e39a723f..9e737230 100644
--- a/src/components/Modal/EditCardModal/index.tsx
+++ b/src/components/Modal/EditCardModal/index.tsx
@@ -300,12 +300,12 @@ export default function EditCardModal({ column, isEdit = false, card }: EditCard
                   ref={columnsToggleRef}
                 >
                   {selectedColumns ? (
-                    <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
+                    <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
                       <p className='text-[10px]'>●</p>
                       <p className='w-max'>{selectedColumns.title}</p>
                     </div>
                   ) : (
-                    <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
+                    <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
                       <p className='text-[10px]'>●</p>
                       <p className='w-max'>{'temp'}</p>
                     </div>
diff --git a/src/components/Modal/TodoCardModal/TodoCardModal.tsx b/src/components/Modal/TodoCardModal/TodoCardModal.tsx
index f9329c94..d359126b 100644
--- a/src/components/Modal/TodoCardModal/TodoCardModal.tsx
+++ b/src/components/Modal/TodoCardModal/TodoCardModal.tsx
@@ -72,7 +72,7 @@ export default function TodoCardModal({ card, column, onClick }: TodoCardModalPr
         {/* Tags Section */}
         <section className='order-2 flex flex-col gap-[16px] md:order-1'>
           <div className='flex gap-[10px]'>
-            <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet hover:cursor-default'>
+            <div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet hover:cursor-default dark:bg-dark-purple-hover dark:text-dark-10'>
               <p className='text-[10px]'>●</p>
               <p className='w-max'>{column.title}</p>
             </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 579d2072..219fb6dc 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -63,7 +63,7 @@
   }
 
   .modal {
-    @apply rounded-[8px] bg-white px-5 py-7 text-base text-black-33 md:px-7 md:text-lg dark:bg-dark-bg dark:text-dark-10;
+    @apply dark:bg-dark-450 rounded-[8px] bg-white px-5 py-7 text-base text-black-33 md:px-7 md:text-lg dark:text-dark-10;
   }
 
   .modal-basic {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e678ee80..4b45bfa2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -32,6 +32,7 @@ const config: Config = {
         200: 'hsl(0, 0%, 30%)',
         300: 'hsl(0, 0%, 15%)',
         400: 'hsl(0, 0%, 10%)',
+        450: 'hsl(0, 0%, 8%)',
         500: 'hsl(0, 0%, 6%)',
         purple: {
           DEFAULT: '#2C283A',