diff --git a/components/Headers/Headers.tsx b/components/Headers/Headers.tsx
index 4612185..5f9c33e 100644
--- a/components/Headers/Headers.tsx
+++ b/components/Headers/Headers.tsx
@@ -13,7 +13,7 @@ export default function Headers() {
   const isMobile = useCheckMobile();
 
   return (
-    <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between bg-background py-5 shadow-custom pc:h-[80px] pc:px-[80px] tamo:h-[60px] tamo:px-[20px]">
+    <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between bg-background py-5 shadow-custom dark:shadow-custom-dark pc:h-[80px] pc:px-[80px] tamo:h-[60px] tamo:px-[20px]">
       <div className="flex gap-10">
         <Link href="/">
           <Image
diff --git a/components/Input.tsx b/components/Input.tsx
index 32a75dd..d017a63 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -69,8 +69,8 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
       containerHorizontal: 'flex items-center gap-[10px]',
       labelVertical: 'text-14 text-gray-500',
       labelHorizontal: 'text-14 text-gray-400 w-[60px] flex-shrink-0',
-      base: 'px-[20px] py-[10px] h-[45px] w-full rounded-md text-[14px] text-gray-500 placeholder:text-14 focus:outline-none',
-      error: 'border border-red-100 bg-red-50',
+      base: 'px-[20px] py-[10px] h-[45px] w-full rounded-md text-[14px] placeholder:text-14 focus:outline-none',
+      error: 'bg-red-50 dark:bg-gray-100 dark:border dark:border-red-100',
       normal:
         'bg-gray-100 focus:border-green-200 focus:ring-1 focus:ring-green-200',
       errorText: 'text-12 text-red-100',
diff --git a/components/LinkBar.tsx b/components/LinkBar.tsx
index 0602f91..66380e9 100644
--- a/components/LinkBar.tsx
+++ b/components/LinkBar.tsx
@@ -24,7 +24,7 @@ export default function LinkBar({
       className={`flex min-w-20 items-center gap-[5px] rounded-custom bg-green-100 px-[10px] py-[3px] text-green-200 transition-colors hover:bg-green-200 hover:text-green-100 mo:py-1 ${classNames}`}
     >
       <IconLink width={20} height={20} className="size-5 mo:size-4" />
-      <p className="flex-1 truncate whitespace-nowrap text-14 mo:text-12">
+      <p className="flex-1 truncate whitespace-nowrap text-14 dark:text-green-300 mo:text-12">
         {link}
       </p>
     </button>
diff --git a/components/SnackBar.tsx b/components/SnackBar.tsx
index 9c24544..47c60be 100644
--- a/components/SnackBar.tsx
+++ b/components/SnackBar.tsx
@@ -13,7 +13,7 @@ export interface SnackBarProps {
 const severityConfig = {
   fail: {
     style:
-      'bg-red-50 border-red-100 fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto shadow-custom mo:min-w-[280px]',
+      'bg-red-50 border-[#d14343] fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto shadow-custom mo:min-w-[280px]',
     icon: '/icon/icon-fail.svg',
     textStyle: 'text-red-100 text-14sb mo:text-12sb ',
   },
diff --git a/components/UserProfile.tsx b/components/UserProfile.tsx
index 3fe07a7..96ccc63 100644
--- a/components/UserProfile.tsx
+++ b/components/UserProfile.tsx
@@ -62,7 +62,7 @@ function UserProfile({
 
   return (
     // 메인 컨테이너
-    <div className="max-w-4xl rounded-custom bg-background shadow-custom dark:shadow-custom-dark pc:h-auto pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
+    <div className="bgCard max-w-4xl rounded-custom bg-background shadow-custom dark:shadow-custom-dark pc:h-auto pc:w-[320px] pc:p-7 tamo:w-full tamo:p-5">
       {/* 레이아웃 컨테이너: PC에서는 세로, 모바일/태블릿에서는 가로 배치 */}
       <div
         className={`flex ${isEditing ? 'flex-col' : 'flex-col mo:flex-row ta:flex-row pc:flex-col'}`}
diff --git a/components/boards.page/BoardCard.tsx b/components/boards.page/BoardCard.tsx
index 33ac48f..b01c4ce 100644
--- a/components/boards.page/BoardCard.tsx
+++ b/components/boards.page/BoardCard.tsx
@@ -27,7 +27,7 @@ export default function BoardCard({
   return (
     <Link
       href={`/boards/${id}`}
-      className="block h-auto w-[250px] overflow-hidden rounded-custom shadow-custom dark:shadow-custom-dark ta:w-full"
+      className="scaleStyle block h-auto w-[250px] overflow-hidden rounded-custom shadow-custom dark:shadow-custom-dark ta:w-full"
     >
       <div className="relative h-[130px] w-auto overflow-hidden bg-gray-100 ta:h-[17.475vw]">
         <Image
@@ -39,7 +39,7 @@ export default function BoardCard({
           sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
         />
       </div>
-      <div className="bg-background px-[20px] pb-[14px] pt-[20px] mo:pt-[11px]">
+      <div className="bgCard px-[20px] pb-[14px] pt-[20px] mo:pt-[11px]">
         <h3 className="mb-[6px] truncate text-18sb mo:mb-0 mo:text-16sb">
           {title}
         </h3>
diff --git a/components/boards.page/BoardDetailCard.tsx b/components/boards.page/BoardDetailCard.tsx
index 60e8025..e58a8d5 100644
--- a/components/boards.page/BoardDetailCard.tsx
+++ b/components/boards.page/BoardDetailCard.tsx
@@ -108,7 +108,7 @@ export default function BoardDetailCard({
   };
 
   return (
-    <div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
+    <div className="bgCard rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
       <header className="mb-[38px] mo:mb-[15px] mo:pb-[11px] ta:mb-[30px] ta:pb-2 tamo:border-b">
         <div className="mb-[30px] flex items-center justify-between mo:mb-[14px]">
           <h1 className="w-full break-all text-32sb mo:text-24sb">
diff --git a/components/boards.page/BoardList.tsx b/components/boards.page/BoardList.tsx
index b88e98b..8474cd9 100644
--- a/components/boards.page/BoardList.tsx
+++ b/components/boards.page/BoardList.tsx
@@ -28,7 +28,7 @@ export default function BoardList({ data = [] }: BoardListResponse) {
           name={item.writer.name}
           likeCount={item.likeCount}
           createdAt={item.createdAt}
-          className={`${tableStyles} mo:flex`}
+          className={`${tableStyles} hover:dark:bg-green-100 mo:flex`}
         />
       ))}
     </div>
diff --git a/components/boards.page/Comment.tsx b/components/boards.page/Comment.tsx
index 6015b53..1c2ce53 100644
--- a/components/boards.page/Comment.tsx
+++ b/components/boards.page/Comment.tsx
@@ -62,7 +62,7 @@ export default function Comment({
   }, [createdAt, updatedAt]);
 
   return (
-    <div className="flex items-start gap-5 rounded-custom px-[30px] py-[22px] shadow-custom dark:shadow-custom-dark mo:gap-[15px] mo:px-5 mo:py-4">
+    <div className="bgCard flex items-start gap-5 rounded-custom px-[30px] py-[22px] shadow-custom dark:shadow-custom-dark mo:gap-[15px] mo:px-5 mo:py-4">
       <div className="size-[50px] overflow-hidden rounded-full mo:size-10">
         <Image
           src={profile ? profile : '/icon/icon-profile.svg'}
diff --git a/components/wikiList.page/ListItem.tsx b/components/wikiList.page/ListItem.tsx
index 4c51f26..7d303d4 100644
--- a/components/wikiList.page/ListItem.tsx
+++ b/components/wikiList.page/ListItem.tsx
@@ -47,7 +47,7 @@ export default function ListItem({ data, onSnackBarClick }: ListItemProps) {
   };
 
   return (
-    <li className="relative rounded-custom shadow-custom transition-all hover:scale-[1.02] hover:bg-gray-100 hover:shadow-xl dark:shadow-custom-dark">
+    <li className="bgCard relative rounded-custom shadow-custom transition-all hover:scale-[1.02] hover:bg-gray-300 hover:shadow-xl dark:shadow-custom-dark">
       <Link
         href={`/wiki/${code}`}
         className="flex gap-8 rounded-full px-9 py-6 mo:gap-5 mo:px-6 mo:py-5"
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1e2e346..0af7410 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -30,7 +30,7 @@ export default function App({ Component, pageProps }: AppProps) {
           <QueryClientProvider client={queryClient}>
             <Component {...pageProps} />
             {/* NOTE : 배포 시 false로 변경  */}
-            <ReactQueryDevtools initialIsOpen={true} />
+            <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
         </SnackbarProvider>
       </ProfileProvider>
diff --git a/styles/globals.css b/styles/globals.css
index 79393f2..a392554 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,7 @@
 
 :root {
   --background: #ffffff;
+  --card: #fff;
   --white: #ffffff;
   --gray-100: #f7f7fa;
   --gray-200: #e4e5f0;
@@ -28,7 +29,8 @@
 }
 
 .dark {
-  --background: #121212;
+  --background: #191d2d;
+  --card: #2a2f46;
   --white: #e4e4e4;
   --gray-100: #3b415b;
   --gray-200: #474d66;
@@ -41,9 +43,6 @@
   --green-200: #4cbfa4;
   --green-300: #a5e5d1;
 
-  --red-50: #8a1c1c;
-  --red-100: #d14343;
-
   --purple-100: #b095ff;
 
   --yellow-100: #e7a832;
@@ -52,6 +51,10 @@
   --blue-100: #1a1f2e;
 }
 
+.bgCard {
+  @apply bg-card;
+}
+
 body {
   color: var(--gray-500);
   background: var(--background);
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d5b1719..7e7c3c8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,6 +21,7 @@ export default {
       colors: {
         background: 'var(--background)',
         white: 'var(--white)',
+        card: 'var(--card)',
         gray: {
           100: 'var(--gray-100)',
           200: 'var(--gray-200)',