diff --git a/docs/notes/blockchain.md b/docs/notes/blockchain.md
index ffb8624..38c1340 100644
--- a/docs/notes/blockchain.md
+++ b/docs/notes/blockchain.md
@@ -9,81 +9,87 @@ sidebar_position: 5
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 1</h3>
-    <p>Introduction to Blockchain</p>
-    <a href="/pdfs/blockchain/Module1 Introduction to Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 1</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Introduction to Blockchain</p>
+    <a href="/pdfs/blockchain/Module1 Introduction to Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 2</h3>
-    <p>Blockchain Technologies</p>
-    <a href="/pdfs/blockchain/Module2 Blockchain Technologies.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 2</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Blockchain Technologies</p>
+    <a href="/pdfs/blockchain/Module2 Blockchain Technologies.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 3</h3>
-    <p> Programing in Blockchain</p>
-    <a href="/pdfs/blockchain/Module3 Programing in Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 3</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Programing in Blockchain</p>
+    <a href="/pdfs/blockchain/Module3 Programing in Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 4</h3>
-    <p>Public Blockchain</p>
-    <a href="/pdfs/blockchain/Module4 Public Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 4</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Public Blockchain</p>
+    <a href="/pdfs/blockchain/Module4 Public Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 5</h3>
-    <p>Private Blockchain</p>
-    <a href="/pdfs/blockchain/Module5 Private Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 5</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Private Blockchain</p>
+    <a href="/pdfs/blockchain/Module5 Private Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 6</h3>
-    <p>Applications of Blockchain</p>
-    <a href="/pdfs/blockchain/Module6 Applications of Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 6</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Applications of Blockchain</p>
+    <a href="/pdfs/blockchain/Module6 Applications of Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>
diff --git a/docs/notes/devops.md b/docs/notes/devops.md
index e75b6da..a7c0add 100644
--- a/docs/notes/devops.md
+++ b/docs/notes/devops.md
@@ -9,16 +9,17 @@ sidebar_position: 6
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⚙️ Devops</h3>
-    <p>Handwritten notes</p>
-    <a href="/pdfs/devops/devops handwritten notes.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⚙️ Devops</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Handwritten notes</p>
+    <a href="/pdfs/devops/devops handwritten notes.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   </div>
diff --git a/docs/notes/dsa.md b/docs/notes/dsa.md
index 0ea1976..ce3c798 100644
--- a/docs/notes/dsa.md
+++ b/docs/notes/dsa.md
@@ -9,159 +9,171 @@ sidebar_position: 3
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>📘 Chapter 1</h3>
-    <p>Introduction & Recursion</p>
-    <a href="/pdfs/dsa/1.Intro +Recursion.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 1</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Introduction & Recursion</p>
+    <a href="/pdfs/dsa/1.Intro +Recursion.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>📘 Chapter 2</h3>
-    <p>Arrays & Searching</p>
-    <a href="/pdfs/dsa/2. Array+Searching.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 2</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Arrays & Searching</p>
+    <a href="/pdfs/dsa/2. Array+Searching.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 3</h3>
-    <p>Sorting</p>
-    <a href="/pdfs/dsa/3. Sorting.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 3</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Sorting</p>
+    <a href="/pdfs/dsa/3. Sorting.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 4</h3>
-    <p>Hashing</p>
-    <a href="\pdfs\dsa\4. Hashing.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 4</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Hashing</p>
+    <a href="\pdfs\dsa\4. Hashing.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 5</h3>
-    <p>Strings</p>
-    <a href="/pdfs/dsa/5. Strings.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 5</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Strings</p>
+    <a href="/pdfs/dsa/5. Strings.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 6</h3>
-    <p>Linked List</p>
-    <a href="/pdfs/dsa/6. LinkedList.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 6</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Linked List</p>
+    <a href="/pdfs/dsa/6. LinkedList.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 7</h3>
-    <p>Stacks</p>
-    <a href="/pdfs/dsa/7. Stacks (1).pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 7</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Stacks</p>
+    <a href="/pdfs/dsa/7. Stacks (1).pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 8</h3>
-    <p>Queues</p>
-    <a href="/pdfs/dsa/8. Queues.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 8</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Queues</p>
+    <a href="/pdfs/dsa/8. Queues.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 9</h3>
-    <p>Trees</p>
-    <a href="/pdfs/dsa/9. Trees.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 9</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Trees</p>
+    <a href="/pdfs/dsa/9. Trees.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 10</h3>
-    <p>Binary Search Trees</p>
-    <a href="/pdfs/dsa/10. binarySearchTrees.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 10</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Binary Search Trees</p>
+    <a href="/pdfs/dsa/10. binarySearchTrees.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 11</h3>
-    <p>Greedy+Backtracking</p>
-    <a href="/pdfs/dsa/11. Greedy+Backtracking.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 11</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Greedy+Backtracking</p>
+    <a href="/pdfs/dsa/11. Greedy+Backtracking.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-
-    <h3>📘 Chapter 12</h3>
-    <p>Dynamic Programming</p>
-    <a href="/pdfs/dsa/12. DynamicProgramming.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 12</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Dynamic Programming</p>
+    <a href="/pdfs/dsa/12. DynamicProgramming.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>
diff --git a/docs/notes/gen-ai.md b/docs/notes/gen-ai.md
index c86cdb7..20f6b06 100644
--- a/docs/notes/gen-ai.md
+++ b/docs/notes/gen-ai.md
@@ -9,102 +9,115 @@ sidebar_position: 4
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 1</h3>
-    <p>Deploying LLM-Powered Applications</p>
-    <a href="/pdfs/genai/Deploying LLM-Powered Applications.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 1</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Deploying LLM-Powered Applications</p>
+    <a href="/pdfs/genai/Deploying LLM-Powered Applications.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 2</h3>
-    <p>Instruction Fine-Tuning</p>
-    <a href="/pdfs/genai/Instruction Fine-Tuning.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 2</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Instruction Fine-Tuning</p>
+    <a href="/pdfs/genai/Instruction Fine-Tuning.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
- 
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 3</h3>
-    <p>Introduction</p>
-    <a href="/pdfs/genai/Introduction.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 3</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Introduction</p>
+    <a href="/pdfs/genai/Introduction.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 4</h3>
-    <p>Model Evaluation - Metrics and Benchmarks</p>
-    <a href="/pdfs/genai/Model Evaluation - Metrics and Benchmarks.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 4</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Model Evaluation - Metrics and Benchmarks</p>
+    <a href="/pdfs/genai/Model Evaluation - Metrics and Benchmarks.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 5</h3>
-    <p>Parameter Efficient Fine-Tuning (PEFT)</p>
-    <a href="/pdfs/genai/Parameter Efficient Fine-Tuning (PEFT).pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 5</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Parameter Efficient Fine-Tuning (PEFT)</p>
+    <a href="/pdfs/genai/Parameter Efficient Fine-Tuning (PEFT).pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 6</h3>
-    <p>Pre-training Large Language Models</p>
-    <a href="/pdfs/genai/Pre-training Large Language Models.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 6</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Pre-training Large Language Models</p>
+    <a href="/pdfs/genai/Pre-training Large Language Models.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
-   <div style={{
-    border: '1px solid #ccc',
+
+  <div style={{
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 7</h3>
-    <p>Reinforcement Learning From Human Feedback (RLHF)</p>
-    <a href="/pdfs/genai/Reinforcement Learning From Human Feedback (RLHF).pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 7</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Reinforcement Learning From Human Feedback (RLHF)</p>
+    <a href="/pdfs/genai/Reinforcement Learning From Human Feedback (RLHF).pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
-   <div style={{
-    border: '1px solid #ccc',
+
+  <div style={{
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🤖 Chapter 8</h3>
-    <p>Transformers</p>
-    <a href="/pdfs/genai/Transformers.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🤖 Chapter 8</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Transformers</p>
+    <a href="/pdfs/genai/Transformers.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>
diff --git a/docs/notes/web-dev.md b/docs/notes/web-dev.md
index e142a3a..319645c 100644
--- a/docs/notes/web-dev.md
+++ b/docs/notes/web-dev.md
@@ -9,42 +9,45 @@ sidebar_position: 7
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🌐 HTML</h3>
-    <p>HTML notes </p>
-    <a href="/pdfs/webd/html.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🌐 HTML</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>HTML notes </p>
+    <a href="/pdfs/webd/html.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🌐 CSS</h3>
-    <p>Css notes</p>
-    <a href="/pdfs/webd/css.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🌐 CSS</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Css notes</p>
+    <a href="/pdfs/webd/css.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>🌐 Javascript</h3>
-    <p>javascript notes </p>
-    <a href="/pdfs/webd/javascript.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>🌐 Javascript</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>javascript notes </p>
+    <a href="/pdfs/webd/javascript.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>