diff --git a/index.html b/index.html
index 150e20a..ed451cb 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,16 @@ <h2 class="fade-in">Sample Component</h2>
       <section class="price-table fade-in">
         <iframe src="components/pricing.html" frameborder="0"></iframe>
       </section>
+      
+  <button class="theme-toggle" onclick="document.body.classList.toggle('dark-theme')">
+    Toggle Theme
+  </button>
+
+  <div class="card">
+    <h2>Hacktoberfest</h2>
+    <p>This card looks good in both light and dark themes.</p>
+  </div>
+
       <div class="btn_container">
         <a href="#modal"><button class="btn fade-in">APS_X</button></a>
       </div>
diff --git a/style.css b/style.css
index ba61a5a..b2d76bb 100644
--- a/style.css
+++ b/style.css
@@ -3,10 +3,63 @@
 html {
   scroll-behavior: smooth;
 }
+
+<style>
+    /* Default (light theme) */
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #ffffff;
+      color: #a6d0ec;
+      transition: background 0.3s, color 0.3s;
+    }
+
+    .card {
+      padding: 1rem;
+      margin: 2rem auto;
+      width: 300px;
+      border-radius: 10px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      background: #f5f5f5;
+    }
+
+    /* Dark theme via system preference */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #29bbc9;
+        color: #eeeeee;
+      }
+      .card {
+        background: #239ccf;
+        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.582);
+      }
+    }
+
+    /* Dark theme via class toggle */
+    body.dark-theme {
+      background-color: #2cb3bc;
+      color: #eeeeee;
+    }
+    body.dark-theme .card {
+      background: #1a75ae;
+      box-shadow: 0 2px 8px rgba(255,255,255,0.1);
+    }
+
+    /* Toggle button (just for demo) */
+    .theme-toggle {
+      margin: 1rem;
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+  </style>
+
+
 :root {
   --radius-main: 26px;
 }
 
+
 body {
     font-family: var(--font-sans);
     margin: 0;
@@ -418,7 +471,7 @@ footer {
     color: rgba(220, 219, 219, 0.595);
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen (max-width: 600px) {
 
   .modalBox{
     left: 50px;