diff --git a/Glossary.html b/Glossary.html
index daf4b82..d3662c6 100644
--- a/Glossary.html
+++ b/Glossary.html
@@ -1,160 +1,270 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Button } from '@/components/ui/button';
-import defaultData from './glossaryData.json';
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Course Glossary</title>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+        .container {
+            display: flex;
+            max-width: 1000px;
+            margin: 0 auto;
+            gap: 20px;
+        }
+        .column {
+            background-color: #ffffff;
+            padding: 15px;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .side-column-left {
+            flex: 1;
+        }
+        .side-column-right {
+            flex: 0 0 150px;
+        }
+        .main-column {
+            flex: 2;
+        }
+        h1, h2 {
+            color: #444;
+            margin-top: 0;
+            font-weight: normal;
+        }
+        h1 {
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+        h2 {
+            font-size: 18px;
+            margin-bottom: 15px;
+        }
+        input[type="text"],
+        textarea {
+            width: 100%;
+            padding: 6px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            box-sizing: border-box;
+            font-size: 14px;
+        }
+        textarea {
+            height: 80px;
+            resize: vertical;
+        }
+        button, input[type="submit"] {
+            background-color: #f0f0f0;
+            color: #333;
+            padding: 6px 10px;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        button:hover, input[type="submit"]:hover {
+            background-color: #e0e0e0;
+        }
+        .glossary-section {
+            margin-bottom: 15px;
+        }
+        .section-header {
+            font-size: 16px;
+            font-weight: bold;
+            border-bottom: 1px solid #eee;
+            margin-bottom: 8px;
+            padding-bottom: 3px;
+        }
+        .glossary-item {
+            margin-bottom: 8px;
+            padding: 3px 0;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+        }
+        .term {
+            font-weight: bold;
+            margin-right: 5px;
+        }
+        .delete-button {
+            padding: 2px 5px;
+            font-size: 11px;
+        }
+        #notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 10px 20px;
+            border-radius: 4px;
+            display: none;
+        }
+        .success {
+            background-color: #4CAF50;
+            color: white;
+        }
+        .error {
+            background-color: #f44336;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="notification"></div>
+    <h1>Course 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</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>
 
-const Glossary = () => {
-  const [glossary, setGlossary] = useState(() => {
-    const savedGlossary = localStorage.getItem('glossary');
-    if (savedGlossary) {
-      return JSON.parse(savedGlossary);
-    }
-    return defaultData.entries;
-  });
-  
-  const [term, setTerm] = useState('');
-  const [definition, setDefinition] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
+    <script>
+        // Initialize Supabase client
+        const supabaseUrl = 'YOUR_SUPABASE_URL';
+        const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
+        const supabase = supabase.createClient(supabaseUrl, supabaseKey);
 
-  useEffect(() => {
-    localStorage.setItem('glossary', JSON.stringify(glossary));
-  }, [glossary]);
+        let glossary = [];
+        const glossaryForm = document.getElementById('glossaryForm');
+        const glossaryList = document.getElementById('glossaryList');
+        const searchInput = document.getElementById('searchInput');
+        const notification = document.getElementById('notification');
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const newEntry = {
-      term: term.trim(),
-      definition: definition.trim(),
-      id: Date.now()
-    };
-    setGlossary(prev => [...prev, newEntry]);
-    setTerm('');
-    setDefinition('');
-  };
+        function showNotification(message, type) {
+            notification.textContent = message;
+            notification.className = type;
+            notification.style.display = 'block';
+            setTimeout(() => {
+                notification.style.display = 'none';
+            }, 3000);
+        }
 
-  const handleDelete = (id) => {
-    if (window.confirm('Are you sure you want to delete this entry?')) {
-      setGlossary(prev => prev.filter(item => item.id !== id));
-    }
-  };
+        // Load glossary data from Supabase
+        async function loadGlossary() {
+            try {
+                const { data, error } = await supabase
+                    .from('glossary_entries')
+                    .select('*')
+                    .order('term');
+                
+                if (error) throw error;
+                
+                glossary = data;
+                updateGlossaryDisplay();
+            } catch (error) {
+                console.error('Error loading glossary:', error);
+                showNotification('Error loading glossary', 'error');
+            }
+        }
 
-  const handleExport = () => {
-    const dataStr = JSON.stringify({ entries: glossary }, null, 2);
-    const blob = new Blob([dataStr], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'glossaryData.json';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
+        // Subscribe to real-time changes
+        const subscription = supabase
+            .channel('glossary_changes')
+            .on('postgres_changes', 
+                { event: '*', schema: 'public', table: 'glossary_entries' }, 
+                loadGlossary
+            )
+            .subscribe();
 
-  const filteredAndSortedGlossary = glossary
-    .filter(item => 
-      item.term.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      item.definition.toLowerCase().includes(searchTerm.toLowerCase())
-    )
-    .sort((a, b) => a.term.localeCompare(b.term));
+        glossaryForm.addEventListener('submit', async function(event) {
+            event.preventDefault();
+            const term = document.getElementById('term').value.trim();
+            const definition = document.getElementById('definition').value.trim();
+            
+            try {
+                const { error } = await supabase
+                    .from('glossary_entries')
+                    .insert([{ term, definition }]);
+                
+                if (error) throw error;
+                
+                glossaryForm.reset();
+                showNotification('Term added successfully', 'success');
+            } catch (error) {
+                console.error('Error adding term:', error);
+                showNotification('Error adding term', 'error');
+            }
+        });
 
-  const groupedGlossary = filteredAndSortedGlossary.reduce((acc, item) => {
-    const firstLetter = item.term[0]?.toUpperCase() || '#';
-    if (!acc[firstLetter]) {
-      acc[firstLetter] = [];
-    }
-    acc[firstLetter].push(item);
-    return acc;
-  }, {});
+        searchInput.addEventListener('input', updateGlossaryDisplay);
 
-  return (
-    <div className="w-full max-w-6xl mx-auto p-4">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-semibold">Glossary</h1>
-        <Button onClick={handleExport} variant="outline" size="sm">
-          Export JSON
-        </Button>
-      </div>
-      
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-        <Card className="md:col-span-1">
-          <CardHeader>
-            <CardTitle>Add New Term</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <Input
-                value={term}
-                onChange={(e) => setTerm(e.target.value)}
-                placeholder="Term"
-                required
-              />
-              <Textarea
-                value={definition}
-                onChange={(e) => setDefinition(e.target.value)}
-                placeholder="Definition"
-                required
-                className="h-24"
-              />
-              <Button type="submit" className="w-full">
-                Add
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        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));
+            
+            const sections = {};
+            filteredGlossary.forEach(item => {
+                const firstLetter = item.term[0].toUpperCase();
+                if (!sections[firstLetter]) sections[firstLetter] = [];
+                sections[firstLetter].push(item);
+            });
+            
+            glossaryList.innerHTML = '';
+            Object.keys(sections).sort().forEach(letter => {
+                const section = document.createElement('div');
+                section.className = 'glossary-section';
+                section.innerHTML = `<div class="section-header">${letter}</div>`;
+                
+                sections[letter].forEach(item => {
+                    const itemDiv = document.createElement('div');
+                    itemDiv.className = 'glossary-item';
+                    itemDiv.innerHTML = `
+                        <div><span class="term">${item.term}:</span> ${item.definition}</div>
+                        <button class="delete-button" onclick="deleteEntry(${item.id})">Delete</button>
+                    `;
+                    section.appendChild(itemDiv);
+                });
+                
+                glossaryList.appendChild(section);
+            });
+        }
 
-        <Card className="md:col-span-2">
-          <CardHeader>
-            <CardTitle>Glossary List</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {Object.keys(groupedGlossary).sort().map(letter => (
-              <div key={letter} className="space-y-2">
-                <div className="text-lg font-semibold border-b pb-2">
-                  {letter}
-                </div>
-                {groupedGlossary[letter].map(item => (
-                  <div key={item.id} className="flex justify-between items-start py-2 border-b border-gray-100">
-                    <div className="flex-1 pr-4">
-                      <span className="font-medium">{item.term}: </span>
-                      <span className="text-gray-600">{item.definition}</span>
-                    </div>
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => handleDelete(item.id)}
-                    >
-                      Delete
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            ))}
-            {Object.keys(groupedGlossary).length === 0 && (
-              <div className="text-center text-gray-500 py-8">
-                No terms found. Add some terms to get started!
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        <Card className="md:col-span-1">
-          <CardHeader>
-            <CardTitle>Search</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Input
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              placeholder="Type to search..."
-            />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
+        async function deleteEntry(id) {
+            if (confirm("Are you sure you want to delete this entry?")) {
+                try {
+                    const { error } = await supabase
+                        .from('glossary_entries')
+                        .delete()
+                        .eq('id', id);
+                    
+                    if (error) throw error;
+                    
+                    showNotification('Term deleted successfully', 'success');
+                } catch (error) {
+                    console.error('Error deleting term:', error);
+                    showNotification('Error deleting term', 'error');
+                }
+            }
+        }
 
-export default Glossary;
+        // Initial load
+        loadGlossary();
+    </script>
+</body>
+</html>
