diff --git a/package-lock.json b/package-lock.json
index bafadb1..dc04cd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5000,15 +5000,6 @@
         "inline-style-prefixer": "^2.0.0"
       }
     },
-    "node_modules/aphrodite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/aphrodite/-/aphrodite-1.1.0.tgz",
-      "integrity": "sha512-H1XYw4w5yLw2TP4ybW6IjCUttgAPZuGQPyOMIJeRoE+LbLL3FRdMFTtmXWKmtVpiugk4XL/Y0hukua1UK84fKg==",
-      "dependencies": {
-        "asap": "^2.0.3",
-        "inline-style-prefixer": "^2.0.0"
-      }
-    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -5713,11 +5704,6 @@
       "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
       "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
     },
-    "node_modules/bowser": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
-      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9562,18 +9548,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/inline-style-prefixer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",
-      "integrity": "sha512-rlgoApaAAv66JeDFqGYaXwglnlxjyIr7RMaFZqJw4opT0WKnZVXhXMC9SAfuMpN7NELPaImUhJmOO3hAamSlfw==",
-      "dependencies": {
-        "bowser": "^1.0.0",
-        "hyphenate-style-name": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -14908,14 +14882,6 @@
         "aphrodite": "1.1.0"
       }
     },
-    "node_modules/react-components": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/react-components/-/react-components-0.5.1.tgz",
-      "integrity": "sha512-YRZcUHHwnsP/3zoRZOXZPnil8d4qlA1f4YQhNcMfdNdOhJiTAe3B3G6XnFCPzqlTWrOA3dRb+kvlIp7W3ufPsA==",
-      "dependencies": {
-        "aphrodite": "1.1.0"
-      }
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/src/components/CardDetailsPage.tsx b/src/components/CardDetailsPage.tsx
index 36278be..dff164f 100644
--- a/src/components/CardDetailsPage.tsx
+++ b/src/components/CardDetailsPage.tsx
@@ -171,7 +171,7 @@ const CardDetailsPage: React.FC = () => {
       <BackToTopButton />
       <button
         onClick={() => navigate(-1)}
-        className='mb-8 flex items-center px-4 py-2 bg-white bg-opacity-30 backdrop-filter backdrop-blur-md border border-white border-opacity-20 rounded-lg shadow-lg hover:bg-opacity-40 transition-all duration-300 text-gray-800'
+        className='mb-8 flex items-center px-4 py-2 bg-white bg-opacity-30 backdrop-filter backdrop-blur-md border border-white border-opacity-20 rounded-lg shadow-lg hover:bg-opacity-40 transition-all duration-300 text-white'
       >
         <ArrowLeft size={20} className='mr-2' />
         Back to Components
@@ -214,7 +214,7 @@ function Example() {
 
       {/* Props */}
       <section className='mb-12'>
-        <h2 className='text-2xl font-bold mb-4 text-gray-800'>Props</h2>
+        <h2 className='text-2xl font-bold mb-4 text-white'>Props</h2>
         <div className='bg-white bg-opacity-30 backdrop-filter backdrop-blur-md border border-white border-opacity-20 rounded-lg p-6 max-sm:px-1'>
           <div className='overflow-x-auto'>
             <table className='w-full'>
@@ -253,8 +253,8 @@ function Example() {
 
       {/* Custom Card Section */}
       <section className='mb-12'>
-        <h2 className='text-2xl font-bold mb-4 text-gray-800'>Custom Card</h2>
-        <p className='mb-4 text-gray-700'>
+        <h2 className='text-2xl font-bold mb-4 text-white'>Custom Card</h2>
+        <p className='mb-4 text-white'>
           Customize your card's appearance by selecting a preset theme or
           creating your own color scheme.
         </p>
@@ -287,7 +287,7 @@ function Example() {
       {/* Credit Card Example */}
       {/* Credit Card Example */}
       <section className='mb-12'>
-        <h2 className='text-2xl font-bold mb-4 text-gray-800'>
+        <h2 className='text-2xl font-bold mb-4 text-white'>
           Credit Card Example
         </h2>
         <div className='bg-white bg-opacity-30 backdrop-filter backdrop-blur-md border border-white border-opacity-20 rounded-lg p-6 max-sm:px-1'>
@@ -296,7 +296,7 @@ function Example() {
               <CreditCardExample />
             </div>
             <div className='lg:w-2/3'>
-              <h3 className='text-xl font-semibold mb-4 text-gray-800'>Code</h3>
+              <h3 className='text-xl font-semibold mb-4 text-white'>Code</h3>
               <div className='relative'>
                 <pre className='bg-gray-800 text-white p-4 rounded-lg overflow-x-auto text-sm max-h-[400px] whitespace-pre-wrap break-words max-sm:text-[0.55rem]'>
                   <code>