diff --git a/frontend/src/components/Membership.jsx b/frontend/src/components/Membership.jsx
index ca95edbf..9409bd62 100644
--- a/frontend/src/components/Membership.jsx
+++ b/frontend/src/components/Membership.jsx
@@ -91,7 +91,7 @@ const Membership = () => {
         {membershipData.map((plan, index) => (
           <motion.div
             key={index}
-            className="bg-black bg-opacity-70 shadow-2xl rounded-3xl p-8 max-w-sm w-full transform transition duration-500 hover:scale-105"
+            className="bg-black bg-opacity-70 dark:bg-amber-700 shadow-2xl rounded-3xl p-8 max-w-sm w-full transform transition duration-500 hover:scale-105"
             whileHover={{ scale: 1.05 }}
             variants={cardVariants}
           >
@@ -106,14 +106,14 @@ const Membership = () => {
             <div className="text-2xl font-semibold text-white mb-6">{plan.price}</div>
             {plan.title === "Customizable Add-ons" ? (
               <button
-                className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+                className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
                 onClick={() => setIsModalOpen(true)}
               >
                 Customize Add-ons
               </button>
             ) : (
               <button
-                className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+                className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
                 onClick={() => navigate('/signup')}
               >
                 Sign Up
@@ -141,7 +141,7 @@ const Membership = () => {
               ))}
             </div>
             <button
-              className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-4 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+              className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-4 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
               onClick={handleNext}
             >
               Next
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index c4bb2fe5..1393bb0f 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -440,7 +440,7 @@ function Boardgame() {
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
             <div
               id="modal-instructions"
-              className="bg-amber-100 p-8 rounded-lg max-w-md mx-auto shadow-lg relative overflow-y-auto max-h-[90vh]"
+              className="bg-amber-100 dark:bg-amber-600 p-8 rounded-lg max-w-md mx-auto shadow-lg relative overflow-y-auto max-h-[90vh]"
             >
               <h2 className="text-2xl font-bold mb-4">
                 {selectedBoard.title} Instructions
@@ -452,7 +452,7 @@ function Boardgame() {
               </ul>
               <button
                 onClick={handleCloseInstructions}
-                className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+                className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-white dark:hover:text-gray-300"
               >
                 Close
               </button>