diff --git a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
index b64230c..11bb562 100644
--- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
+++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
@@ -17,3 +17,12 @@
   padding: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+@media (prefers-color-scheme: light) {
+  .component-wrapper {
+    background-color: #f0f0f0;
+  }
+  .component-content {
+    background-color: #fff;
+  }
+}
diff --git a/react-advanced-tag1/src/common/components/Header/navigation.css b/react-advanced-tag1/src/common/components/Header/navigation.css
index 050af00..6b7f02b 100644
--- a/react-advanced-tag1/src/common/components/Header/navigation.css
+++ b/react-advanced-tag1/src/common/components/Header/navigation.css
@@ -26,3 +26,19 @@
 .navigation ul li {
   display: inline;
 }
+
+@media (prefers-color-scheme: light) {
+  .navigation {
+    background-color: #f0f0f0;
+  }
+  .navigation a {
+    color: #282c34;
+  }
+  .navigation a:hover {
+    background-color: #98e1f6;
+  }
+
+  .navigation ul li {
+    color: #282c34;
+  }
+}
diff --git a/react-advanced-tag1/src/layouts/MainLayout.css b/react-advanced-tag1/src/layouts/MainLayout.css
index 5a47318..0a37388 100644
--- a/react-advanced-tag1/src/layouts/MainLayout.css
+++ b/react-advanced-tag1/src/layouts/MainLayout.css
@@ -53,3 +53,21 @@ footer {
   padding: 2rem;
   text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+  header {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  header nav a {
+    color: #000000;
+  }
+  footer {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  .content {
+    background-color: #ffffff;
+    color: #000000;
+  }
+}