diff --git a/src/css/custom.css b/src/css/custom.css
index 29093d57..e0344184 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,30 +1,54 @@
 /**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
+ * Global CSS for the Classic Template
+ * The Infima framework is included by default and optimized for content-centric websites.
+ * Customize Infima variables and add global styles here.
  */
 
-/* You can override the default Infima variables here. */
+/* Base Variables */
 :root {
+  /* Primary Color Palette */
   --ifm-color-primary: #6495ed;
-  --ifm-color-primary-dark: #6495ed;
-  --ifm-color-primary-darker: #6495ed;
-  --ifm-color-primary-darkest: #6495ed;
-  --ifm-color-primary-light: #6495ed;
-  --ifm-color-primary-lighter: #6495ed;
-  --ifm-color-primary-lightest: #6495ed;
+  --ifm-color-primary-dark: #5a86d8;
+  --ifm-color-primary-darker: #4e78c3;
+  --ifm-color-primary-darkest: #426aaf;
+  --ifm-color-primary-light: #7aa6f5;
+  --ifm-color-primary-lighter: #90b9fd;
+  --ifm-color-primary-lightest: #a6cbff;
+
+  /* Font and Code Styles */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark Mode Variables */
 [data-theme='dark'] {
+  /* Adjusted Primary Color Palette for Dark Mode */
   --ifm-color-primary: #6495ed;
-  --ifm-color-primary-dark: #6495ed;
-  --ifm-color-primary-darker: #6495ed;
-  --ifm-color-primary-darkest: #6495ed;
-  --ifm-color-primary-light: #6495ed;
-  --ifm-color-primary-lighter: #6495ed;
-  --ifm-color-primary-lightest: #6495ed;
+  --ifm-color-primary-dark: #5a86d8;
+  --ifm-color-primary-darker: #4e78c3;
+  --ifm-color-primary-darkest: #426aaf;
+  --ifm-color-primary-light: #7aa6f5;
+  --ifm-color-primary-lighter: #90b9fd;
+  --ifm-color-primary-lightest: #a6cbff;
+
+  /* Highlighted Code Line Background for Dark Mode */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* Additional Customizations (Optional) */
+/* Example: Customize link styles */
+a {
+  text-decoration: none;
+  color: var(--ifm-color-primary);
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--ifm-color-primary-dark);
+}
+
+/* Example: Add spacing adjustments */
+body {
+  line-height: 1.6;
+  font-size: 16px;
+}