diff --git a/books.html b/books.html
new file mode 100644
index 0000000..48a65eb
--- /dev/null
+++ b/books.html
@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Books Read by Arjun Vinod">
+    <meta name="author" content="Arjun Vinod">
+    <title>Books | Arjun Vinod</title>
+    <link rel="canonical" href="https://arjunvinod.com/books.html">
+    <meta property="og:title" content="Books | Arjun Vinod">
+    <meta property="og:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://arjunvinod.com/books.html">
+    <meta property="og:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Books | Arjun Vinod">
+    <meta name="twitter:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
+    <meta name="twitter:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin="anonymous">
+    <link rel="preconnect" href="https://covers.openlibrary.org" crossorigin="anonymous">
+    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+    <link rel="icon" href="images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <style>
+        /* Books-specific: h1/h2 and copyright alignment */
+        h1 {
+            color: var(--text-primary);
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+        h2 {
+            color: var(--text-primary);
+            font-size: 1.3rem;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--border-color);
+        }
+        .copyright {
+            text-align: center;
+            /* Removed hardcoded margin-left: 200px for better responsiveness */
+        }
+        .footer-email {
+            font-size: 0.9rem;
+        }
+    </style>
+    <script src="js/theme.js" defer></script>
+    <script>
+        // Helper: Normalize ISBN (remove all non-digit characters except X)
+        function normalizeIsbn(isbn) {
+            return (isbn || '').toString().replace(/[^0-9X]/gi, '').toUpperCase();
+        }
+
+        // Helper: Convert ISBN-10 to ISBN-13 (prefix 978)
+        // ISBN-13 is the modern standard that replaced ISBN-10. All ISBN-10s can be converted
+        // to ISBN-13 by prepending '978' (the Bookland EAN prefix) to the first 9 digits,
+        // then recalculating the check digit using the EAN-13 algorithm.
+        function isbn10to13(isbn10) {
+            const clean = normalizeIsbn(isbn10);
+            if (clean.length !== 10) return null;
+            
+            // Take first 9 digits of ISBN-10 and prepend '978' to create 12-digit base
+            const core = '978' + clean.slice(0, 9);
+            
+            // Calculate EAN-13 check digit using the standard algorithm:
+            // Sum all digits, alternating between weight 1 (even positions) and weight 3 (odd positions)
+            // The check digit is the number needed to make the total sum a multiple of 10
+            let sum = 0;
+            for (let i = 0; i < 12; i++) {
+                const d = parseInt(core[i], 10);
+                sum += (i % 2 === 0) ? d : d * 3;  // Even index = weight 1, odd index = weight 3
+            }
+            const check = (10 - (sum % 10)) % 10;
+            return core + String(check);
+        }
+
+        // Helper: Convert ISBN-13 to ISBN-10 (only for 978 prefix)
+        // Only ISBN-13s with '978' prefix (Bookland) can be converted back to ISBN-10.
+        // ISBN-13s with '979' prefix have no ISBN-10 equivalent as they were issued after
+        // the ISBN-10 system was deprecated.
+        function isbn13to10(isbn13) {
+            const clean = normalizeIsbn(isbn13);
+            if (clean.length !== 13 || !clean.startsWith('978')) return null;
+            
+            // Extract the 9 core digits (removing '978' prefix and check digit)
+            const core9 = clean.slice(3, 12);
+            
+            // Calculate ISBN-10 check digit using modulo 11 algorithm:
+            // Each digit is multiplied by its position weight (10 down to 2)
+            // The check digit makes the weighted sum divisible by 11
+            let sum = 0;
+            for (let i = 0; i < 9; i++) {
+                sum += (10 - i) * parseInt(core9[i], 10);  // Weights: 10, 9, 8, 7, 6, 5, 4, 3, 2
+            }
+            
+            // Calculate what's needed to reach next multiple of 11
+            let remainder = 11 - (sum % 11);
+            let check;
+            if (remainder === 10) check = 'X';        // 'X' represents 10 in ISBN-10
+            else if (remainder === 11) check = '0';   // Remainder 11 means already divisible, use 0
+            else check = String(remainder);
+            return core9 + check;
+        }
+
+        function unique(arr) {
+            return Array.from(new Set(arr.filter(Boolean)));
+        }
+
+        function buildIsbnCandidates(img) {
+            const provided = normalizeIsbn(img.dataset.isbn || '');
+            const manual = (img.dataset.altIsbns || '')
+                .split(',')
+                .map(s => normalizeIsbn(s))
+                .filter(Boolean);
+
+            const candidates = [];
+            // Manual overrides first (explicit order)
+            candidates.push(...manual);
+
+            // Provided ISBN
+            if (provided) candidates.push(provided);
+
+            // Add conversions
+            if (provided.length === 10) {
+                candidates.push(isbn10to13(provided));
+            } else if (provided.length === 13 && provided.startsWith('978')) {
+                candidates.push(isbn13to10(provided));
+            }
+
+            return unique(candidates);
+        }
+
+        function openLibraryUrlForIsbn(isbn) {
+            // default=false so a missing cover triggers error instead of generic placeholder
+            return `https://covers.openlibrary.org/b/isbn/${isbn}-L.jpg?default=false`;
+        }
+
+        function generatePlaceholderDataURI(title, author) {
+            const bg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#2d2d2d' : '#e9eef3';
+            const fg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#d0d0d0' : '#2c3e50';
+            const safeTitle = (title || 'No cover').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+            const safeAuthor = (author || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+            const svg = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="400" height="600">
+                    <rect width="100%" height="100%" fill="${bg}"/>
+                    <foreignObject x="20" y="40" width="360" height="520">
+                        <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif; color:${fg}; display:flex; flex-direction:column; justify-content:center; height:100%;">
+                            <div style="font-size:28px; font-weight:700; line-height:1.2; margin-bottom:12px; word-wrap:break-word;">${safeTitle}</div>
+                            <div style="font-size:18px; opacity:0.8;">${safeAuthor}</div>
+                        </div>
+                    </foreignObject>
+                </svg>`;
+            return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
+        }
+
+        function tryLoadCover(img) {
+            const title = img.getAttribute('alt') || img.dataset.title || '';
+            const author = img.dataset.author || '';
+            const isbns = buildIsbnCandidates(img);
+
+            if (isbns.length === 0) {
+                img.src = generatePlaceholderDataURI(title, author);
+                img.dataset.loaded = 'placeholder';
+                return;
+            }
+
+            const probes = [];
+
+            function cleanup() {
+                // Remove event handlers and references to avoid leaks
+                probes.forEach(probe => {
+                    probe.onload = null;
+                    probe.onerror = null;
+                });
+                probes.length = 0;
+            }
+
+            // Try ISBNs sequentially to ensure deterministic order
+            function tryNextIsbn(index) {
+                if (index >= isbns.length) {
+                    // All ISBNs failed, use placeholder
+                    img.src = generatePlaceholderDataURI(title, author);
+                    img.dataset.loaded = 'placeholder';
+                    return;
+                }
+                const isbn = isbns[index];
+                const testUrl = openLibraryUrlForIsbn(isbn);
+                const probe = new Image();
+                probes.push(probe);
+                probe.onload = function() {
+                    // Check for 1x1 pixel placeholder images that some servers may return
+                    // Only reject images that are exactly 1x1 pixels (common placeholder)
+                    if (probe.naturalWidth === 1 && probe.naturalHeight === 1) {
+                        tryNextIsbn(index + 1);
+                        return;
+                    }
+                    img.src = testUrl;
+                    img.dataset.loaded = isbn;
+                    cleanup();
+                };
+                probe.onerror = function() {
+                    tryNextIsbn(index + 1);
+                };
+                probe.src = testUrl;
+            }
+            tryNextIsbn(0);
+        }
+
+        // Resolve book covers on page load
+        window.addEventListener('DOMContentLoaded', () => {
+            // Resolve covers with fallbacks/alternates
+            document.querySelectorAll('.book-cover img[data-isbn]').forEach(img => {
+                tryLoadCover(img);
+            });
+        });
+
+        // Listen for theme changes and regenerate placeholder images
+        document.addEventListener('themeChanged', () => {
+            // Only regenerate placeholder images, not real book covers
+            document.querySelectorAll('.book-cover img[data-loaded="placeholder"]').forEach(img => {
+                const title = img.getAttribute('alt') || img.dataset.title || '';
+                const author = img.dataset.author || '';
+                img.src = generatePlaceholderDataURI(title, author);
+            });
+        });
+    </script>
+    <script src="js/menu.js" defer></script>
+</head>
+<body>
+    <a class="skip-link" href="#main">Skip to content</a>
+    <header>
+        <div class="header-content">
+            <div class="site-logo"><a href="/">Arjun Vinod</a></div>
+            <div class="header-right">
+                <div class="menu-wrapper">
+                    <button class="menu-button" aria-label="Menu" aria-haspopup="true" aria-expanded="false" aria-controls="menu-dropdown">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
+                        <a href="/books.html">Books</a>
+                    </nav>
+                </div>
+                <div class="theme-toggle-wrapper">
+                    <button class="theme-toggle" aria-label="Toggle theme" role="switch" aria-checked="false">
+                        <div class="theme-toggle-slider">
+                            <i class="fas fa-moon"></i>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main id="main">
+        <div class="container">
+            <h1>Reading List</h1>
+            
+            <h2>2025</h2>
+            <p class="section-description">
+                A collection of books exploring macroeconomics, financial systems, and monetary history.
+            </p>
+            
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.amazon.com/Deficit-Myth-Monetary-Peoples-Economy/dp/1541736184" target="_blank" rel="noopener noreferrer">
+                        <img decoding="async" data-isbn="1541736184" alt="The Deficit Myth by Stephanie Kelton" data-title="The Deficit Myth" data-author="Stephanie Kelton">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">The Deficit Myth: Modern Monetary Theory and the Birth of the People's Economy</h3>
+                    <div class="book-author">by Stephanie Kelton</div>
+                    <p class="book-notes">A leading economist challenges conventional deficit thinking and explains how Modern Monetary Theory reveals the true power and limitations of sovereign currencies in advancing the public good.</p>
+                </div>
+            </article>
+
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.amazon.com/Layered-Money-Dollars-Bitcoin-Currencies/dp/1736110527" target="_blank" rel="noopener noreferrer">
+                        <img loading="lazy" decoding="async" data-isbn="1736110527" alt="Layered Money by Nik Bhatia" data-title="Layered Money" data-author="Nik Bhatia">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">Layered Money: From Gold and Dollars to Bitcoin and Central Bank Digital Currencies</h3>
+                    <div class="book-author">by Nik Bhatia</div>
+                    <p class="book-notes">An innovative framework for understanding money as a layered system, tracing its evolution from gold-backed currencies through modern banking to cryptocurrencies and the future of digital central bank money.</p>
+                </div>
+            </article>
+
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.amazon.com/Price-Tomorrow-Deflation-Abundant-Future/dp/1999257405" target="_blank" rel="noopener noreferrer">
+                        <img loading="lazy" decoding="async" data-isbn="1999257405" alt="The Price of Tomorrow by Jeff Booth" data-title="The Price of Tomorrow" data-author="Jeff Booth">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">The Price of Tomorrow: Why Deflation Is the Key to an Abundant Future</h3>
+                    <div class="book-author">by Jeff Booth</div>
+                    <p class="book-notes">A thought-provoking exploration of how exponential technological advancement is creating deflation in a world built on inflationary economic systems, and why embracing this shift could unlock unprecedented prosperity.</p>
+                </div>
+            </article>
+
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.amazon.com/dp/B0F2NCPQ2K" target="_blank" rel="noopener noreferrer">
+                        <img loading="lazy" decoding="async" data-isbn="9798992242515" alt="The Big Print by Lawrence Lepard" data-title="The Big Print" data-author="Lawrence Lepard">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">The Big Print: What Happened to America and How Sound Money Will Fix It</h3>
+                    <div class="book-author">by Lawrence Lepard</div>
+                    <p class="book-notes">A compelling analysis of how decades of monetary expansion and currency debasement have eroded American prosperity, and a call for returning to sound money principles to restore economic stability and opportunity.</p>
+                </div>
+            </article>
+
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.thriftbooks.com/w/the-case-against-the-fed_murray-n-rothbard/343797/#edition=4404863&idiq=4178217" target="_blank" rel="noopener noreferrer">
+                        <img loading="lazy" decoding="async" data-isbn="9781987817720" alt="The Case Against the Fed by Murray N. Rothbard" data-title="The Case Against the Fed" data-author="Murray N. Rothbard">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">The Case Against the Fed</h3>
+                    <div class="book-author">by Murray N. Rothbard</div>
+                    <p class="book-notes">A foundational critique of the Federal Reserve System, examining its origins, operations, and effects on the economy while arguing for a return to free-market banking and sound money backed by gold.</p>
+                </div>
+            </article>
+
+            <article class="book-item">
+                <div class="book-cover">
+                    <a href="https://www.thriftbooks.com/w/paper-soldiers-how-the-weaponization-of-the-dollar-changed-the-world-order_saleha-mohsin/55037738/?resultid=b45c7b57-ac03-4945-9e3d-74a29ea8aab4#edition=67591091&idiq=57992781" target="_blank" rel="noopener noreferrer">
+                        <img loading="lazy" decoding="async" data-isbn="9780593539118" data-alt-isbns="9780593197543,059319754X" alt="Paper Soldiers by Saleha Mohsin" data-title="Paper Soldiers" data-author="Saleha Mohsin">
+                    </a>
+                </div>
+                <div class="book-details">
+                    <h3 class="book-title">Paper Soldiers: How the Weaponization of the Dollar Changed the World Order</h3>
+                    <div class="book-author">by Saleha Mohsin</div>
+                    <p class="book-notes">An inside look at how the U.S. dollar became a powerful geopolitical weapon through financial sanctions and economic warfare, reshaping global power dynamics and raising questions about the future of American financial dominance.</p>
+                </div>
+            </article>
+        </div>
+    </main>
+    <footer>
+        <div class="footer-content">
+            <div class="copyright footer-copyright">
+                © 2025 Arjun Vinod. All rights reserved.
+            </div>
+            <div class="footer-right">
+                <div class="footer-links">
+                    <a href="https://twitter.com/arjun7965" target="_blank" rel="noopener noreferrer" title="X (Twitter)" aria-label="X (Twitter)">
+                        <i class="fab fa-x-twitter"></i>
+                    </a>
+                    <a href="https://linkedin.com/in/avinod" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                    <a href="https://github.com/arjun7965" target="_blank" rel="noopener noreferrer" title="GitHub" aria-label="GitHub">
+                        <i class="fab fa-github"></i>
+                    </a>
+                </div>
+                <div class="footer-email">
+                    <a href="mailto:me@arjunvinod.com" class="footer-email-link">me@arjunvinod.com</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..e040e32
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,188 @@
+/* Global Theme Variables */
+:root {
+  --bg-color: #f5f5f5;
+  --container-bg: #ffffff;
+  --text-primary: #2c3e50;
+  --text-secondary: #34495e;
+  --text-muted: #666;
+  --border-color: #eee;
+  --link-color: #3498db;
+}
+[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --container-bg: #2d2d2d;
+  --text-primary: #e0e0e0;
+  --text-secondary: #d0d0d0;
+  --text-muted: #b8b8b8;
+  --border-color: #404040;
+  --link-color: #5dade2;
+}
+/* Base Layout */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.3s ease;
+}
+main {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+}
+.container {
+  background-color: var(--container-bg);
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 2rem;
+  transition: background-color 0.3s ease;
+}
+/* Header */
+header {
+  background-color: transparent;
+  color: var(--text-primary);
+  padding: 0.5rem 0;
+  text-align: left;
+  width: 100%;
+  border-bottom: 1px solid var(--border-color);
+}
+.header-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header-right { display: flex; gap: 1rem; align-items: center; }
+.menu-wrapper { position: relative; }
+.menu-button {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  border-radius: 5px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.menu-button:hover { background-color: var(--border-color); }
+.menu-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  background-color: var(--container-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  min-width: 150px;
+  display: none;
+  z-index: 1000;
+}
+.menu-dropdown.show { display: block; }
+.menu-dropdown a {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+.menu-dropdown a:hover { background-color: var(--border-color); }
+.menu-dropdown a:first-child { border-radius: 5px 5px 0 0; }
+.menu-dropdown a:last-child { border-radius: 0 0 5px 5px; }
+header h1 { margin: 0; font-size: 1.2rem; font-weight: 500; }
+header h1 a { position: relative; text-decoration: none; color: inherit; }
+header h1 a:after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: var(--link-color); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.2s ease-out; }
+header h1 a:hover:after { transform: scaleX(1); transform-origin: bottom left; }
+nav a { color: var(--text-primary); text-decoration: none; font-size: 0.95rem; padding: 0.5rem 1rem; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; }
+nav a:hover { background-color: var(--border-color); }
+/* Theme Toggle */
+.theme-toggle-wrapper { position: relative; display: inline-block; }
+.theme-toggle { 
+  --toggle-width: 60px;
+  --slider-size: 24px;
+  --padding: 3px;
+  position: relative; 
+  width: var(--toggle-width); 
+  height: 30px; 
+  background-color: var(--border-color); 
+  border-radius: 15px; 
+  cursor: pointer; 
+  transition: background-color 0.3s ease; 
+  border: none; 
+  padding: 0; 
+}
+.theme-toggle:hover { opacity: 0.8; }
+.theme-toggle-slider { 
+  position: absolute; 
+  top: var(--padding); 
+  left: var(--padding); 
+  width: var(--slider-size); 
+  height: var(--slider-size); 
+  background-color: #fff; 
+  border-radius: 50%; 
+  transition: transform 0.3s ease; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
+}
+.theme-toggle-slider i { font-size: 0.75rem; color: #2c3e50; }
+[data-theme="dark"] .theme-toggle { background-color: var(--link-color); }
+[data-theme="dark"] .theme-toggle-slider { transform: translateX(calc(var(--toggle-width) - var(--slider-size) - (var(--padding) * 2))); }
+[data-theme="dark"] .theme-toggle-slider i { color: #f39c12; }
+/* Footer */
+footer { background-color: transparent; color: var(--text-muted); padding: 0.75rem 0; text-align: center; margin-top: auto; width: 100%; border-top: 1px solid var(--border-color); font-size: 0.9rem; }
+.footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 800px; margin: 0 auto; padding: 0 1rem; }
+.footer-right { display: flex; flex-direction: column; align-items: flex-end; }
+.footer-links { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 0.5rem; }
+.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 1.1rem; transition: color 0.3s ease; }
+.footer-links a:hover { color: var(--text-primary); }
+.footer-email a:hover { text-decoration: underline; }
+/* Skip Link */
+.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
+.skip-link:focus { position: static; width: auto; height: auto; padding: 0.5rem 0.75rem; background: var(--container-bg); border: 1px solid var(--border-color); border-radius: 5px; margin: 0.5rem; }
+/* Footer Specific */
+.footer-copyright { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
+.footer-email-link { color: var(--text-muted); text-decoration: none; }
+.footer-email-link:hover { text-decoration: underline; }
+/* Section Description */
+.section-description { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem; font-style: italic; }
+/* Site Logo */
+.site-logo { font-size: 1.2rem; font-weight: 500; }
+.site-logo a { position: relative; text-decoration: none; color: inherit; }
+.site-logo a:after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: var(--link-color); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.2s ease-out; }
+.site-logo a:hover:after { transform: scaleX(1); transform-origin: bottom left; }
+/* Books Page Shared Elements */
+.book-item { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1.5rem; align-items: flex-start; }
+.book-item:last-child { border-bottom: none; }
+.book-cover { flex-shrink: 0; width: 120px; }
+.book-cover a { display: block; transition: transform 0.3s ease, opacity 0.3s ease; }
+.book-cover a:hover { transform: translateY(-4px); opacity: 0.9; }
+.book-cover img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+.book-details { flex: 1; }
+.book-title { color: var(--text-primary); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.25rem; margin-top: 0; }
+.book-author { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin-bottom: 0.5rem; }
+.book-notes { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
+/* Misc */
+.intro { font-size: 1.1rem; color: var(--text-primary); max-width: 600px; margin: 2rem auto; text-align: center; }
+.experience, .education { margin: 2rem 0; text-align: left; }
+.experience h2, .education h2 { color: var(--text-primary); font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 500; }
+.experience-item, .education-item { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
+.experience-item:last-child, .education-item:last-child { border-bottom: none; }
+.experience-header h4, .education-header h4 { color: var(--text-primary); margin: 0 0 0.25rem 0; font-size: 1.1rem; font-weight: 500; }
+.company, .university { display: block; color: var(--text-muted); margin-bottom: 0.25rem; }
+.company a, .university a { color: var(--link-color); text-decoration: none; }
+.company a:hover, .university a:hover { text-decoration: underline; }
+.duration { color: var(--text-muted); font-size: 0.9rem; }
+.activities { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0 0; font-style: italic; }
diff --git a/index.html b/index.html
index 1374f6c..9bf4a3e 100644
--- a/index.html
+++ b/index.html
@@ -4,37 +4,36 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Arjun's Personal Website - Firmware Engineer">
+    <meta name="author" content="Arjun Vinod">
     <title>Arjun Vinod | Firmware Engineer</title>
+    <link rel="canonical" href="https://arjunvinod.com/">
+    <meta property="og:title" content="Arjun Vinod | Firmware Engineer">
+    <meta property="og:description" content="Firmware engineer specializing in high-performance embedded systems, data center infrastructure, and hardware interfaces.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://arjunvinod.com/">
+    <meta property="og:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Arjun Vinod | Firmware Engineer">
+    <meta name="twitter:description" content="Firmware engineer specializing in high-performance embedded systems, data center infrastructure, and hardware interfaces.">
+    <meta name="twitter:image" content="https://arjunvinod.com/images/apple-touch-icon.png">
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin="anonymous">
     <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
     <link rel="icon" href="images/favicon.ico">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css">
     <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            background-color: #f5f5f5;
-            display: flex;
-            flex-direction: column;
-        }
+        /* Index-specific: container with text-align center */
         .container {
             text-align: center;
-            padding: 2rem;
-            background-color: white;
-            max-width: 800px;
-            margin: 0 auto;
-            width: 100%;
         }
         h1 {
-            color: #2c3e50;
+            color: var(--text-primary);
             margin-bottom: 1rem;
         }
         p {
-            color: #34495e;
+            color: var(--text-secondary);
             font-size: 1.1rem;
             margin-bottom: 1.5rem;
         }
@@ -46,224 +45,69 @@
         }
         .social-links a {
             text-decoration: none;
-            color: #3498db;
+            color: var(--link-color);
             padding: 0.5rem 1rem;
-            border: 2px solid #3498db;
+            border: 2px solid var(--link-color);
             border-radius: 5px;
             transition: all 0.3s ease;
         }
         .social-links a:hover {
-            background-color: #3498db;
+            background-color: var(--link-color);
             color: white;
         }
-        .intro {
-            font-size: 1.1rem;
-            color: #2c3e50;
-            max-width: 600px;
-            margin: 2rem auto;
-        }
-        .experience {
-            margin: 2rem 0;
-            text-align: left;
-        }
-        .experience h3 {
-            color: #2c3e50;
-            font-size: 1.5rem;
-            margin-bottom: 1.5rem;
-            font-weight: 500;
-        }
-        .experience-item {
-            margin-bottom: 2rem;
-            padding-bottom: 1.5rem;
-            border-bottom: 1px solid #eee;
-        }
-        .experience-item:last-child {
-            border-bottom: none;
-        }
         .experience-header {
             margin-bottom: 0.5rem;
         }
-        .experience-header h4 {
-            color: #2c3e50;
-            margin: 0 0 0.25rem 0;
-            font-size: 1.1rem;
-            font-weight: 500;
-        }
-        .company {
-            display: block;
-            color: #666;
-            margin-bottom: 0.25rem;
-        }
-        .company a {
-            color: #3498db;
-            text-decoration: none;
-        }
-        .company a:hover {
-            text-decoration: underline;
-        }
-        .duration {
-            color: #666;
-            font-size: 0.9rem;
-        }
         .experience-item p {
-            color: #666;
+            color: var(--text-muted);
             font-size: 0.95rem;
             margin: 0.5rem 0 0 0;
             line-height: 1.5;
         }
-        .education {
-            margin: 2rem 0;
-            text-align: left;
-        }
-        .education h3 {
-            color: #2c3e50;
-            font-size: 1.5rem;
-            margin-bottom: 1.5rem;
-            font-weight: 500;
-        }
-        .education-item {
-            margin-bottom: 2rem;
-            padding-bottom: 1.5rem;
-            border-bottom: 1px solid #eee;
-        }
-        .education-item:last-child {
-            border-bottom: none;
-        }
         .education-header {
             margin-bottom: 0.5rem;
         }
-        .education-header h4 {
-            color: #2c3e50;
-            margin: 0 0 0.25rem 0;
-            font-size: 1.1rem;
-            font-weight: 500;
-        }
-        .university {
-            display: block;
-            color: #666;
-            margin-bottom: 0.25rem;
-        }
-        .university a {
-            color: #3498db;
-            text-decoration: none;
-        }
-        .university a:hover {
-            text-decoration: underline;
-        }
-        .activities {
-            color: #666;
-            font-size: 0.9rem;
-            margin: 0.5rem 0 0 0;
-            font-style: italic;
-        }
-        header {
-            background-color: transparent;
-            color: #2c3e50;
-            padding: 0.5rem 0;
-            text-align: left;
-            width: 100%;
-            border-bottom: 1px solid #eee;
-        }
-        header .header-content {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 0 1rem;
-        }
-        header h1 {
-            color: #2c3e50;
-            margin: 0;
-            font-size: 1.2rem;
-            font-weight: 500;
-        }
-        header h1 a {
-            position: relative;
-        }
-        header h1 a:after {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 1px;
-            bottom: -2px;
-            left: 0;
-            background-color: #3498db;
-            transform: scaleX(0);
-            transform-origin: bottom right;
-            transition: transform 0.2s ease-out;
-        }
-        header h1 a:hover:after {
-            transform: scaleX(1);
-            transform-origin: bottom left;
-        }
-        footer {
-            background-color: transparent;
-            color: #666;
-            padding: 0.75rem 0;
-            text-align: center;
-            margin-top: auto;
-            width: 100%;
-            border-top: 1px solid #eee;
-            font-size: 0.9rem;
-        }
-        .footer-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 0 1rem;
-        }
-        .footer-right {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-        }
         .copyright {
             text-align: center;
-            margin-left: 200px;
-        }
-        .footer-links {
-            display: flex;
-            gap: 1.5rem;
-            align-items: center;
-            margin-bottom: 0.5rem;
-        }
-        .footer-links a {
-            color: #666;
-            text-decoration: none;
-            font-size: 1.1rem;
-            transition: color 0.3s ease;
-        }
-        .footer-links a:hover {
-            color: #2c3e50;
+            /* Removed hardcoded margin-left: 200px; for better responsiveness */
         }
         .footer-email {
             font-size: 0.9rem;
         }
-        .footer-email a:hover {
-            text-decoration: underline;
-        }
-        main {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 2rem 0;
-        }
     </style>
+    <script src="js/theme.js" defer></script>
+    <script src="js/menu.js" defer></script>
 </head>
 <body>
+    <a class="skip-link" href="#main">Skip to content</a>
     <header>
         <div class="header-content">
-            <h1><a href="/" style="text-decoration: none; color: inherit;">Arjun Vinod</a></h1>
+            <div class="site-logo"><a href="/">Arjun Vinod</a></div>
+            <div class="header-right">
+                <div class="menu-wrapper">
+                    <button class="menu-button" aria-label="Menu" aria-haspopup="true" aria-expanded="false" aria-controls="menu-dropdown">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
+                        <a href="/books.html">Books</a>
+                    </nav>
+                </div>
+                <div class="theme-toggle-wrapper">
+                    <button class="theme-toggle" aria-label="Toggle theme" role="switch" aria-checked="false">
+                        <div class="theme-toggle-slider">
+                            <i class="fas fa-moon"></i>
+                        </div>
+                    </button>
+                </div>
+            </div>
         </div>
     </header>
-    <main>
+    <main id="main">
         <div class="container">
-            <h2>Welcome to My Website</h2>
-        <p class="intro">Hi! I'm Arjun, a Firmware Engineer based in Silicon Valley with expertise in embedded systems and hardware interfaces.</p>
+        <p class="intro">Hi! I'm Arjun, a Firmware Engineer based in Silicon Valley. I specialize in developing high-performance embedded systems, optimizing firmware for data center infrastructure, and designing robust hardware interfaces for next-generation connectivity solutions.</p>
         
         <section class="experience">
-            <h3>Experience</h3>
+            <h2>Experience</h2>
             
             <div class="experience-item">
                 <div class="experience-header">
@@ -294,7 +138,7 @@ <h4>Embedded Software Engineer</h4>
         </section>
 
         <section class="education">
-            <h3>Education</h3>
+            <h2>Education</h2>
             
             <div class="education-item">
                 <div class="education-header">
@@ -314,23 +158,23 @@ <h4>Bachelor of Engineering (B.E.), Electrical, Electronics and Communications E
     </main>
     <footer>
         <div class="footer-content">
-            <div class="copyright" style="margin-top: 0.5rem; font-size: 0.9rem; color: #666;">
+            <div class="copyright footer-copyright">
                 © 2025 Arjun Vinod. All rights reserved.
             </div>
             <div class="footer-right">
                 <div class="footer-links">
-                    <a href="https://twitter.com/arjun7965" target="_blank" rel="noopener noreferrer" title="Twitter">
-                        <i class="fab fa-twitter"></i>
+                    <a href="https://twitter.com/arjun7965" target="_blank" rel="noopener noreferrer" title="X (Twitter)" aria-label="X (Twitter)">
+                        <i class="fab fa-x-twitter"></i>
                     </a>
-                    <a href="https://linkedin.com/in/avinod" target="_blank" rel="noopener noreferrer" title="LinkedIn">
+                    <a href="https://linkedin.com/in/avinod" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
                         <i class="fab fa-linkedin"></i>
                     </a>
-                    <a href="https://github.com/arjun7965" target="_blank" rel="noopener noreferrer" title="GitHub">
+                    <a href="https://github.com/arjun7965" target="_blank" rel="noopener noreferrer" title="GitHub" aria-label="GitHub">
                         <i class="fab fa-github"></i>
                     </a>
                 </div>
                 <div class="footer-email">
-                    <a href="mailto:me@arjunvinod.com" style="color: #666; text-decoration: none;">me@arjunvinod.com</a>
+                    <a href="mailto:me@arjunvinod.com" class="footer-email-link">me@arjunvinod.com</a>
                 </div>
             </div>
         </div>
diff --git a/js/menu.js b/js/menu.js
new file mode 100644
index 0000000..0311a8d
--- /dev/null
+++ b/js/menu.js
@@ -0,0 +1,56 @@
+// Menu dropdown toggle
+function toggleMenu() {
+    const dropdown = document.querySelector('#menu-dropdown');
+    const btn = document.querySelector('.menu-button');
+    const willShow = !dropdown.classList.contains('show');
+    dropdown.classList.toggle('show');
+    if (btn) btn.setAttribute('aria-expanded', willShow ? 'true' : 'false');
+    // Move focus to first link in dropdown when menu is opened
+    if (willShow) {
+        const firstLink = dropdown.querySelector('a, button, [tabindex]:not([tabindex="-1"])');
+        if (firstLink) firstLink.focus();
+    }
+}
+
+// Close dropdown when clicking outside, on Escape key press, and when focus leaves the menu area
+document.addEventListener('DOMContentLoaded', function() {
+    // Cache DOM elements
+    const menuWrapper = document.querySelector('.menu-wrapper');
+    const dropdown = document.querySelector('#menu-dropdown');
+    const btn = document.querySelector('.menu-button');
+    
+    if (!menuWrapper || !dropdown || !btn) return;
+    
+    // Attach event listener to menu button
+    btn.addEventListener('click', toggleMenu);
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(event) {
+        if (!menuWrapper.contains(event.target)) {
+            dropdown.classList.remove('show');
+            btn.setAttribute('aria-expanded', 'false');
+        }
+    });
+
+    // Close dropdown on Escape key press
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            if (dropdown.classList.contains('show')) {
+                dropdown.classList.remove('show');
+                btn.setAttribute('aria-expanded', 'false');
+                btn.focus(); // Return focus to button
+            }
+        }
+    });
+    
+    // Close dropdown when focus leaves the menu area
+    menuWrapper.addEventListener('focusout', function(event) {
+        // If the newly focused element is not inside the menu wrapper, close the dropdown
+        if (!event.relatedTarget || !menuWrapper.contains(event.relatedTarget)) {
+            if (dropdown.classList.contains('show')) {
+                dropdown.classList.remove('show');
+                btn.setAttribute('aria-expanded', 'false');
+            }
+        }
+    });
+});
diff --git a/js/theme.js b/js/theme.js
new file mode 100644
index 0000000..5f9ab50
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,46 @@
+// Theme toggle functionality shared across pages
+
+// Check for saved theme preference or default to light mode
+const currentTheme = localStorage.getItem('theme') || 'light';
+document.documentElement.setAttribute('data-theme', currentTheme);
+
+function toggleTheme() {
+    const theme = document.documentElement.getAttribute('data-theme');
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    
+    // Update icon
+    const icon = document.querySelector('.theme-toggle-slider i');
+    if (icon) icon.className = newTheme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
+    
+    // Update aria-label for accessibility
+    const btn = document.querySelector('.theme-toggle');
+    if (btn) {
+        btn.setAttribute('aria-label', newTheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
+        btn.setAttribute('aria-checked', newTheme === 'dark' ? 'true' : 'false');
+    }
+    
+    // Dispatch custom event for theme change
+    document.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
+}
+
+// Set initial icon and aria-label on page load
+window.addEventListener('DOMContentLoaded', () => {
+    const theme = document.documentElement.getAttribute('data-theme');
+    const icon = document.querySelector('.theme-toggle-slider i');
+    if (icon) {
+        icon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
+    } else {
+        console.warn('Theme toggle icon element not found');
+    }
+    
+    // Set initial aria-label and attach event listener
+    const btn = document.querySelector('.theme-toggle');
+    if (btn) {
+        btn.setAttribute('aria-label', theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
+        btn.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
+        btn.addEventListener('click', toggleTheme);
+    }
+});
