diff --git a/client/src/components/MobileMenu.jsx b/client/src/components/MobileMenu.jsx
index 6ec96b18..d552458f 100644
--- a/client/src/components/MobileMenu.jsx
+++ b/client/src/components/MobileMenu.jsx
@@ -281,6 +281,24 @@ function MobileMenu({ isOpen, onClose, isLoggedIn, userdata }) {
                   <FaQuestionCircle className="text-xl transition-transform duration-200 group-hover:scale-110" />
                   <span className="text-xl">Questions</span>
                 </NavLink>
+                <NavLink
+                  to="/flashcards"
+                  onClick={onClose}
+                  className={({ isActive }) => `
+                    px-3 py-2.5 rounded-xl text-base font-medium transition-all duration-300 flex items-center gap-2 group relative overflow-hidden
+                    ${isActive
+                      ? isDark
+                        ? "bg-dark-bg-tertiary text-primary shadow-lg"
+                        : "bg-light-bg-tertiary text-primary shadow-md"
+                      : isDark
+                        ? "text-dark-text-primary hover:bg-dark-bg-tertiary/70"
+                        : "text-light-text-primary hover:bg-light-bg-tertiary/70"
+                    }
+                  `}
+                >
+                  <FaBook className="text-xl transition-transform duration-200 group-hover:scale-110" />
+                  <span className="text-xl">Flashcards</span>
+                </NavLink>
 
                 <NavLink
                   to="/contact"
diff --git a/client/src/components/Modal.jsx b/client/src/components/Modal.jsx
index 155d1dbc..29ecd8fc 100644
--- a/client/src/components/Modal.jsx
+++ b/client/src/components/Modal.jsx
@@ -10,7 +10,7 @@ export default function Modal({ open, onClose, title, children }) {
         onClick={onClose}
       />
       {/* Panel */}
-      <div className="relative bg-white rounded-lg shadow-lg w-full max-w-2xl mx-4 p-6 z-10">
+      <div className="relative dark:bg-slate-900 bg-white rounded-lg shadow-lg w-full max-w-2xl mx-4 p-6 z-10">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-xl font-semibold">{title}</h2>
           <button
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
index a13f0fe9..547a9eda 100644
--- a/client/src/components/NavBar.jsx
+++ b/client/src/components/NavBar.jsx
@@ -155,7 +155,7 @@ function NavBar() {
                   transition-all duration-300 ease-out relative group
                   transform hover:scale-[1.02] hover:-translate-y-0.5
                   ${isActive
-                    ? "bg-primary text-white shadow-lg shadow-primary/25"
+                    ? "bg-primary dark:text-white text-black shadow-lg shadow-primary/25"
                     : isDark
                       ? "bg-gray-800/40 border border-gray-700/30 text-dark-text-primary hover:bg-primary/10 hover:text-white hover:border-primary/30 hover:shadow-md hover:shadow-primary/10"
                       : "bg-white/25 border border-white/20 text-light-text-primary hover:bg-primary/10 hover:text-black hover:border-primary/30 hover:shadow-md hover:shadow-primary/10"
diff --git a/client/src/pages/Flashcards.jsx b/client/src/pages/Flashcards.jsx
index a9398397..4a067ca9 100644
--- a/client/src/pages/Flashcards.jsx
+++ b/client/src/pages/Flashcards.jsx
@@ -213,7 +213,7 @@ export default function Flashcards() {
                     setCurrentIndex(0);
                     setFlipped(false);
                   }}
-                  className="block w-full text-left px-4 py-2 hover:bg-purple-100 dark:hover:bg-gray-800 rounded-t-lg"
+                  className="block w-full text-left px-4 py-2 hover:bg-primary-100 dark:hover:bg-gray-800 rounded-t-lg"
                 >
                   All Topics
                 </button>
@@ -226,7 +226,7 @@ export default function Flashcards() {
                       setCurrentIndex(0);
                       setFlipped(false);
                     }}
-                    className="block w-full text-left px-4 py-2 hover:bg-purple-100 dark:hover:bg-gray-800"
+                    className="block w-full text-left px-4 py-2 hover:bg-primary-100 dark:hover:bg-gray-800"
                   >
                     {t}
                   </button>
@@ -241,7 +241,7 @@ export default function Flashcards() {
           <div className="flex gap-4">
             <button
               onClick={handleReview}
-              className="p-2 bg-purple-100 text-purple-800 rounded font-medium"
+              className="p-2 bg-primary-100 text-primary-800 rounded font-medium"
             >
               Reviewed: {reviewCount}
             </button>
@@ -256,7 +256,7 @@ export default function Flashcards() {
           <div className="flex flex-col items-end gap-2">
             <button
               onClick={handleOpenModal}
-              className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
+              className="bg-primary text-white px-4 py-2 rounded hover:bg-primary-600"
             >
               + Add Flashcard
             </button>
@@ -293,7 +293,7 @@ export default function Flashcards() {
 
                   <div
                     className={`flip-card-back flex flex-col justify-center items-center text-center p-8 rounded-2xl shadow-2xl ${
-                      isDark ? "bg-purple-800 text-white" : "bg-purple-200 text-gray-900"
+                      isDark ? "bg-primary-800 text-white" : "bg-primary-200 text-gray-900"
                     }`}
                   >
                     <h2 className="text-2xl font-semibold mb-3">Definition</h2>
@@ -307,13 +307,13 @@ export default function Flashcards() {
             <div className="flex justify-center gap-6 mt-8">
               <button
                 onClick={prevCard}
-                className="px-6 py-2 rounded bg-purple-200 hover:bg-purple-300 text-purple-900 font-medium"
+                className="px-6 py-2 rounded bg-primary-200 hover:bg-primary-300 text-primary-900 font-medium"
               >
                 ← Previous
               </button>
               <button
                 onClick={nextCard}
-                className="px-6 py-2 rounded bg-purple-500 hover:bg-purple-600 text-white font-medium"
+                className="px-6 py-2 rounded bg-primary hover:bg-primary-600 text-white font-medium"
               >
                 Next →
               </button>
@@ -334,9 +334,10 @@ export default function Flashcards() {
           <div>
             <label className="block text-sm font-medium mb-1">Term</label>
             <input
-              className="w-full border rounded p-2"
+              className="w-full border rounded p-2 dark:bg-slate-800 bg-gray-100"
               value={form.term}
               onChange={(e) => setForm({ ...form, term: e.target.value })}
+              placeholder="Enter Term here"
               required
             />
           </div>
@@ -344,7 +345,7 @@ export default function Flashcards() {
           <div>
             <label className="block text-sm font-medium mb-1">Definition</label>
             <textarea
-              className="w-full border rounded p-2"
+              className="w-full border rounded p-2 dark:bg-slate-800 bg-gray-100"
               value={form.definition}
               onChange={(e) => setForm({ ...form, definition: e.target.value })}
               rows={3}
@@ -356,7 +357,7 @@ export default function Flashcards() {
             <label className="block text-sm font-medium mb-1">Topic</label>
             <div className="flex gap-3">
               <select
-                className="border rounded p-2 flex-1"
+                className="border rounded p-2 flex-1 dark:bg-slate-800 bg-gray-100"
                 value={topicChoice === "custom" ? "custom" : form.topic || ""}
                 onChange={(e) => {
                   const val = e.target.value;
@@ -379,7 +380,7 @@ export default function Flashcards() {
               </select>
 
               <input
-                className="border rounded p-2 flex-1"
+                className="border rounded p-2 flex-1 dark:bg-slate-800 bg-gray-100"
                 placeholder="Or type a new topic"
                 value={topicChoice === "custom" ? form.topic : ""}
                 onChange={(e) => {
@@ -394,7 +395,7 @@ export default function Flashcards() {
             <button type="button" onClick={handleCloseModal} className="px-4 py-2 rounded border">
               Cancel
             </button>
-            <button type="submit" className="px-4 py-2 rounded bg-purple-500 text-white hover:bg-purple-600">
+            <button type="submit" className="px-4 py-2 rounded bg-primary text-white hover:bg-primary-600">
               Add
             </button>
           </div>