diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..e8ceba0
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,105 @@
+
+body {
+    background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
+    color: #fff;
+    font-family: 'Poppins', sans-serif;
+}
+
+.card {
+    background: #1a2a45;
+    border: 1px solid #2c5364;
+    border-radius: 0.5rem;
+}
+
+.card-header {
+    background: #203a43;
+    border-bottom: 1px solid #2c5364;
+}
+
+.deck {
+    margin-left: 2rem;
+    position: relative;
+}
+
+.deck-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    cursor: pointer;
+}
+
+.deck-name {
+    background: linear-gradient(to right, #2c3e50, #34495e);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid #46637f;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    transition: all 0.3s ease;
+}
+
+.deck-name:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    transform: translateY(-2px);
+}
+
+.deck-name .text-yellow-300 {
+    color: #facc15;
+}
+
+.deck-name .text-yellow-100 {
+    color: #fef08a;
+}
+
+.words {
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+    display: none; /* Initially hidden */
+}
+
+.word {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-bottom: 0.5rem;
+}
+
+.word-connector {
+    position: absolute;
+    left: -1.5rem;
+    top: 50%;
+    width: 1rem;
+    height: 1px;
+    background-color: rgba(70, 99, 127, 0.5);
+}
+
+.word-content {
+    background: linear-gradient(to right, rgba(44, 62, 80, 0.8), rgba(52, 73, 94, 0.8));
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.25rem;
+    border: 1px solid rgba(70, 99, 127, 0.5);
+    transition: all 0.3s ease;
+}
+
+.word-content:hover {
+    border-color: rgba(250, 204, 21, 0.5);
+}
+
+.word .text-yellow-400 {
+    color: #fbbf24;
+}
+
+.word .text-yellow-100-80 {
+    color: rgba(254, 240, 138, 0.8);
+}
+
+.chevron {
+    background-color: #34495e;
+    border-radius: 50%;
+    padding: 0.25rem;
+    transition: transform 0.3s ease;
+}
+.chevron.expanded {
+    transform: rotate(90deg);
+}
+
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..e6b9d94
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,42 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    const deckHeaders = document.querySelectorAll('.deck-header');
+
+    deckHeaders.forEach(header => {
+        header.addEventListener('click', () => {
+            const words = header.nextElementSibling;
+            const chevron = header.querySelector('.chevron');
+
+            if (words.style.display === 'block') {
+                words.style.display = 'none';
+                chevron.classList.remove('expanded');
+            } else {
+                words.style.display = 'block';
+                chevron.classList.add('expanded');
+            }
+        });
+    });
+
+    const toggleAllButton = document.getElementById('toggle-all');
+    let allExpanded = true;
+
+    toggleAllButton.addEventListener('click', () => {
+        allExpanded = !allExpanded;
+        deckHeaders.forEach(header => {
+            const words = header.nextElementSibling;
+            const chevron = header.querySelector('.chevron');
+
+            if (allExpanded) {
+                words.style.display = 'block';
+                chevron.classList.add('expanded');
+            } else {
+                words.style.display = 'none';
+                chevron.classList.remove('expanded');
+            }
+        });
+        toggleAllButton.textContent = allExpanded ? 'Collapse All' : 'Expand All';
+    });
+
+    // Initially expand all
+    toggleAllButton.click();
+});