diff --git a/Glossary.html b/Glossary.html
index 4252cc6..b6a9ca6 100644
--- a/Glossary.html
+++ b/Glossary.html
@@ -4,84 +4,145 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Glossary</title>
-    <!-- Add Supabase JS library FIRST -->
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <style>
         /* ... keep your existing styles ... */
     </style>
 </head>
 <body>
-    <!-- ... keep your existing HTML ... -->
+    <h1>Glossary</h1>
+    <div class="container">
+        <div class="column side-column-left">
+            <h2>Add New Term</h2>
+            <form id="glossaryForm">
+                <input type="text" id="term" name="term" placeholder="Term" required>
+                <textarea id="definition" name="definition" placeholder="Definition" required></textarea>
+                <input type="submit" value="Add">
+            </form>
+        </div>
+        <div class="column main-column">
+            <h2>Glossary List</h2>
+            <div id="glossaryList"></div>
+        </div>
+        <div class="column side-column-right">
+            <h2>Search</h2>
+            <input type="text" id="searchInput" placeholder="Type to search...">
+        </div>
+    </div>
 
     <script>
-        // Create the Supabase client BEFORE any other code
-        const { createClient } = supabase;
-        const supabaseClient = createClient(
-            'https://itpqpqtvtpdyraookiqf.supabase.co',
-            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w'
-        );
+        // Wait for the DOM to be fully loaded before running any code
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Supabase
+            const { createClient } = supabase;
+            const supabaseClient = createClient(
+                'https://itpqpqtvtpdyraookiqf.supabase.co',
+                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0cHFwcXR2dHBkeXJhb29raXFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjk4NTc5MjYsImV4cCI6MjA0NTQzMzkyNn0.WVVtHy1spmEjl3_A2i8jEETyzgxmyAFM7yGhJ3oSp5w'
+            );
 
-        const glossaryForm = document.getElementById('glossaryForm');
-        const glossaryList = document.getElementById('glossaryList');
-        const searchInput = document.getElementById('searchInput');
-        let glossary = [];
+            const glossaryForm = document.getElementById('glossaryForm');
+            const glossaryList = document.getElementById('glossaryList');
+            const searchInput = document.getElementById('searchInput');
+            let glossary = [];
 
-        async function loadGlossary() {
-            try {
-                const { data, error } = await supabaseClient
-                    .from('glossary_entries')
-                    .select('*')
-                    .order('term');
-                
-                if (error) throw error;
-                glossary = data || [];
-                updateGlossaryDisplay();
-            } catch (error) {
-                console.error('Error loading glossary:', error);
-            }
-        }
-
-        glossaryForm.addEventListener('submit', async function(event) {
-            event.preventDefault();
-            const term = document.getElementById('term').value;
-            const definition = document.getElementById('definition').value;
-            
-            try {
-                const { error } = await supabaseClient
-                    .from('glossary_entries')
-                    .insert([{ 
-                        term: term.trim(), 
-                        definition: definition.trim() 
-                    }]);
-
-                if (error) throw error;
-                glossaryForm.reset();
-                await loadGlossary();
-            } catch (error) {
-                console.error('Error adding term:', error);
+            async function loadGlossary() {
+                try {
+                    const { data, error } = await supabaseClient
+                        .from('glossary_entries')
+                        .select('*')
+                        .order('term');
+                    
+                    if (error) throw error;
+                    glossary = data || [];
+                    updateGlossaryDisplay();
+                } catch (error) {
+                    console.error('Error loading glossary:', error);
+                }
             }
-        });
-
-        // ... keep rest of your existing code but replace 'supabase' with 'supabaseClient' ...
 
-        async function deleteEntry(id) {
-            if (confirm("Are you sure you want to delete this entry?")) {
+            glossaryForm.addEventListener('submit', async function(event) {
+                event.preventDefault();
+                const term = document.getElementById('term').value;
+                const definition = document.getElementById('definition').value;
+                
                 try {
                     const { error } = await supabaseClient
                         .from('glossary_entries')
-                        .delete()
-                        .eq('id', id);
-                    
+                        .insert([{ 
+                            term: term.trim(), 
+                            definition: definition.trim() 
+                        }]);
+
                     if (error) throw error;
+                    glossaryForm.reset();
                     await loadGlossary();
                 } catch (error) {
-                    console.error('Error deleting term:', error);
+                    console.error('Error adding term:', error);
+                }
+            });
+
+            searchInput.addEventListener('input', function() {
+                updateGlossaryDisplay();
+            });
+
+            function updateGlossaryDisplay() {
+                const searchTerm = searchInput.value.toLowerCase();
+                const filteredGlossary = glossary
+                    .filter(item => 
+                        item.term.toLowerCase().includes(searchTerm) || 
+                        item.definition.toLowerCase().includes(searchTerm)
+                    )
+                    .sort((a, b) => a.term.localeCompare(b.term));
+
+                glossaryList.innerHTML = '';
+                const sections = {};
+                
+                filteredGlossary.forEach(item => {
+                    const firstLetter = item.term[0].toUpperCase();
+                    if (!sections[firstLetter]) {
+                        sections[firstLetter] = [];
+                    }
+                    sections[firstLetter].push(item);
+                });
+                
+                Object.keys(sections).sort().forEach(letter => {
+                    const sectionElement = document.createElement('div');
+                    sectionElement.className = 'glossary-section';
+                    sectionElement.innerHTML = `<div class="section-header">${letter}</div>`;
+                    
+                    sections[letter].forEach(item => {
+                        const itemElement = document.createElement('div');
+                        itemElement.className = 'glossary-item';
+                        itemElement.innerHTML = `
+                            <div><span class="term">${item.term}:</span> ${item.definition}</div>
+                            <button class="delete-button" onclick="deleteEntry(${item.id})">Delete</button>
+                        `;
+                        sectionElement.appendChild(itemElement);
+                    });
+                    
+                    glossaryList.appendChild(sectionElement);
+                });
+            }
+
+            async function deleteEntry(id) {
+                if (confirm("Are you sure you want to delete this entry?")) {
+                    try {
+                        const { error } = await supabaseClient
+                            .from('glossary_entries')
+                            .delete()
+                            .eq('id', id);
+                        
+                        if (error) throw error;
+                        await loadGlossary();
+                    } catch (error) {
+                        console.error('Error deleting term:', error);
+                    }
                 }
             }
-        }
 
-        // Initial load
-        loadGlossary();
+            // Initial load
+            loadGlossary();
+        });
     </script>
 </body>
 </html>
