diff --git a/about.html b/about.html
index 1c5f18c..f28322c 100644
--- a/about.html
+++ b/about.html
@@ -18,7 +18,6 @@
             margin: 0;
             padding: 0;
             background-color: #f4f4f4;
-            color: #333;
         }
         .container {
             width: 80%;
@@ -27,6 +26,7 @@
             background: #282828;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
             border-radius: 8px;
+            color: white;
         }
         h1, h2 {
             text-align: center;
@@ -55,6 +55,7 @@
         .banner h1 {
             margin: 0;
             font-size: 2em;
+            color: beige;
         }
         .section {
             margin: 20px 0;
@@ -72,6 +73,9 @@
             flex: 1;
             text-align: center;
         }
+        .card p{
+            color: black;
+        }
         .footer-content {
             display: flex;
             justify-content: space-between;
@@ -116,6 +120,15 @@
         #nav-top:hover {
             background: #3498DB;
         }
+        .title{
+            color: white;
+        }
+        .container h2{
+            color: beige;
+        }
+        .dark-theme .card h3{
+            color: black;
+        }
     </style>
 
 </head>
diff --git a/learn.html b/learn.html
index a29d47a..7f9b04e 100644
--- a/learn.html
+++ b/learn.html
@@ -80,10 +80,10 @@ <h2>Python Lessons</h2>
       <br>
                         <p id="copy-message" style="display: none; color: black;">Copied!</p>
                     </div>
-                    <h2 >Code Input :</h2>
+                    <h2 style="color: black;">Code Input :</h2>
                     <div id="editor"></div>
                     
-                    <h2>Output :</h2>
+                    <h2 style="color: black;">Output :</h2>
                     <div id="terminal-container">
                         <div id="terminal"></div>
                     </div>
diff --git a/styles.css b/styles.css
index c552f32..581640f 100644
--- a/styles.css
+++ b/styles.css
@@ -117,6 +117,7 @@ body {
     transition: background-color 0.3s ease;
     animation: fadeIn 1.2s ease-in-out; /* Smooth content load animation */
     margin-bottom: 35px;
+    color: black;
 }
 
 @keyframes fadeIn {
@@ -125,7 +126,7 @@ body {
 }
 
 h1, h2, h3, h4 {
-    color: white;
+    color: black;
     font-weight: 700; /* Bolder titles */
 }