diff --git a/api/routes/auth.py b/api/routes/auth.py
index 0fc6d8cf..f48a87b7 100644
--- a/api/routes/auth.py
+++ b/api/routes/auth.py
@@ -150,7 +150,6 @@ async def google_authorized(request: Request) -> RedirectResponse:
         user_info = token.get("userinfo")
 
         if user_info:
-
             user_data = {
                 'id': user_info.get('id') or user_info.get('sub'),
                 'email': user_info.get('email'),
@@ -163,7 +162,7 @@ async def google_authorized(request: Request) -> RedirectResponse:
             if handler:
                 api_token = secrets.token_urlsafe(32)  # ~43 chars, hard to guess
 
-                # call the registered handler (await if async)
+                # Call the registered handler (await if async)
                 await handler('google', user_data, api_token)
 
                 redirect = RedirectResponse(url="/chat", status_code=302)
@@ -176,9 +175,16 @@ async def google_authorized(request: Request) -> RedirectResponse:
 
                 return redirect
 
+            # Handler not set - log and raise error to prevent silent failure
+            logging.error("Google OAuth callback handler not registered in app state")
+            raise HTTPException(status_code=500, detail="Authentication handler not configured")
+
+        # If we reach here, user_info was falsy
+        logging.warning("No user info received from Google OAuth")
         raise HTTPException(status_code=400, detail="Failed to get user info from Google")
 
     except Exception as e:
+        logging.error(f"Google OAuth authentication failed: {str(e)}")
         raise HTTPException(status_code=400, detail=f"Authentication failed: {str(e)}")
 
 
@@ -232,10 +238,9 @@ async def github_authorized(request: Request) -> RedirectResponse:
                         break
 
         if user_info:
-
             user_data = {
                 'id': user_info.get('id'),
-                'email': user_info.get('email'),
+                'email': email,
                 'name': user_info.get('name'),
                 'picture': user_info.get('avatar_url'),
             }
@@ -243,10 +248,9 @@ async def github_authorized(request: Request) -> RedirectResponse:
             # Call the registered GitHub callback handler if it exists to store user data.
             handler = getattr(request.app.state, "callback_handler", None)
             if handler:
-
                 api_token = secrets.token_urlsafe(32)  # ~43 chars, hard to guess
 
-                # call the registered handler (await if async)
+                # Call the registered handler (await if async)
                 await handler('github', user_data, api_token)
 
                 redirect = RedirectResponse(url="/chat", status_code=302)
@@ -259,9 +263,16 @@ async def github_authorized(request: Request) -> RedirectResponse:
 
                 return redirect
 
+            # Handler not set - log and raise error to prevent silent failure
+            logging.error("GitHub OAuth callback handler not registered in app state")
+            raise HTTPException(status_code=500, detail="Authentication handler not configured")
+
+        # If we reach here, user_info was falsy
+        logging.warning("No user info received from GitHub OAuth")
         raise HTTPException(status_code=400, detail="Failed to get user info from Github")
 
     except Exception as e:
+        logging.error(f"GitHub OAuth authentication failed: {str(e)}")
         raise HTTPException(status_code=400, detail=f"Authentication failed: {str(e)}")
 
 
diff --git a/api/routes/graphs.py b/api/routes/graphs.py
index ad2eac71..ebb108a9 100644
--- a/api/routes/graphs.py
+++ b/api/routes/graphs.py
@@ -8,6 +8,7 @@
 from fastapi import APIRouter, Request, HTTPException, UploadFile, File
 from fastapi.responses import JSONResponse, StreamingResponse
 from pydantic import BaseModel
+from redis import ResponseError
 
 from api.agents import AnalysisAgent, RelevancyAgent, ResponseFormatterAgent
 from api.auth.user_management import token_required
@@ -84,10 +85,25 @@ def sanitize_query(query: str) -> str:
     return query.replace('\n', ' ').replace('\r', ' ')[:500]
 
 def sanitize_log_input(value: str) -> str:
-    """Sanitize input for safe logging (remove newlines and carriage returns)."""
+    """
+    Sanitize input for safe logging—remove newlines, 
+    carriage returns, tabs, and wrap in repr().
+    """
     if not isinstance(value, str):
-        return str(value)
-    return value.replace('\n', ' ').replace('\r', ' ')
+        value = str(value)
+
+    return value.replace('\n', ' ').replace('\r', ' ').replace('\t', ' ')
+
+def _graph_name(request: Request, graph_id:str) -> str:
+    if not graph_id or not isinstance(graph_id, str):
+        raise HTTPException(status_code=400, detail="Invalid graph_id")
+
+    graph_id = graph_id.strip()[:200]
+    if not graph_id:
+        raise HTTPException(status_code=400,
+                            detail="Invalid graph_id, must be less than 200 characters.")
+
+    return f"{request.state.user_id}_{graph_id}"
 
 @graphs_router.get("")
 @token_required
@@ -112,12 +128,7 @@ async def get_graph_data(request: Request, graph_id: str):
     Nodes contain a minimal set of properties (id, name, labels, props).
     Edges contain source and target node names (or internal ids), type and props.
     """
-    if not graph_id or not isinstance(graph_id, str):
-        return JSONResponse(content={"error": "Invalid graph_id"}, status_code=400)
-
-    graph_id = graph_id.strip()[:200]
-    namespaced = f"{request.state.user_id}_{graph_id}"
-
+    namespaced = _graph_name(request, graph_id)
     try:
         graph = db.select_graph(namespaced)
     except Exception as e:
@@ -269,16 +280,7 @@ async def query_graph(request: Request, graph_id: str, chat_data: ChatRequest):
     """
     text2sql
     """
-    # Input validation
-    if not graph_id or not isinstance(graph_id, str):
-        raise HTTPException(status_code=400, detail="Invalid graph_id")
-
-    # Sanitize graph_id to prevent injection
-    graph_id = graph_id.strip()[:100]  # Limit length and strip whitespace
-    if not graph_id:
-        raise HTTPException(status_code=400, detail="Invalid graph_id")
-
-    graph_id = f"{request.state.user_id}_{graph_id}"
+    graph_id = _graph_name(request, graph_id)
 
     queries_history = chat_data.chat if hasattr(chat_data, 'chat') else None
     result_history = chat_data.result if hasattr(chat_data, 'result') else None
@@ -553,7 +555,8 @@ async def confirm_destructive_operation(
     """
     Handle user confirmation for destructive SQL operations
     """
-    graph_id = f"{request.state.user_id}_{graph_id.strip()}"
+
+    graph_id = _graph_name(request, graph_id)
 
     if hasattr(confirm_data, 'confirmation'):
         confirmation = confirm_data.confirmation.strip().upper()
@@ -674,7 +677,7 @@ async def refresh_graph_schema(request: Request, graph_id: str):
     This endpoint allows users to manually trigger a schema refresh
     if they suspect the graph is out of sync with the database.
     """
-    graph_id = f"{request.state.user_id}_{graph_id.strip()}"
+    graph_id = _graph_name(request, graph_id)
 
     try:
         # Get database connection details
@@ -716,3 +719,27 @@ async def refresh_graph_schema(request: Request, graph_id: str):
             "success": False,
             "error": "Error refreshing schema"
         }, status_code=500)
+
+@graphs_router.delete("/{graph_id}")
+@token_required
+async def delete_graph(request: Request, graph_id: str):
+    """Delete the specified graph (namespaced to the user).
+
+    This will attempt to delete the FalkorDB graph belonging to the
+    authenticated user. The graph id used by the client is stripped of
+    namespace and will be namespaced using the user's id from the request
+    state.
+    """
+    namespaced = _graph_name(request, graph_id)
+
+    try:
+        # Select and delete the graph using the FalkorDB client API
+        graph = db.select_graph(namespaced)
+        await graph.delete()
+        return JSONResponse(content={"success": True, "graph": graph_id})
+    except ResponseError:
+        return JSONResponse(content={"error": "Failed to delete graph, Graph not found"},
+                            status_code=404)
+    except Exception as e:
+        logging.exception("Failed to delete graph %s: %s", sanitize_log_input(namespaced), e)
+        return JSONResponse(content={"error": "Failed to delete graph"}, status_code=500)
diff --git a/app/public/css/menu.css b/app/public/css/menu.css
index b09bdea8..91d6a85c 100644
--- a/app/public/css/menu.css
+++ b/app/public/css/menu.css
@@ -331,3 +331,91 @@
   height: 16px;
   flex-shrink: 0;
 }
+
+/* Graph custom dropdown (moved from chat_header.j2 inline styles) */
+.graph-custom-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  margin-left: 8px;
+}
+
+.graph-selected {
+  padding: 8px 14px;
+  border-radius: 6px;
+  background: var(--falkor-quaternary);
+  color: var(--text-primary);
+  cursor: pointer;
+  border: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 160px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.graph-options {
+  position: absolute;
+  top: calc(100%);
+  left: 0;
+  right: 0;
+  background: var(--falkor-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 260px;
+  overflow: auto;
+  display: none;
+  z-index: 50;
+}
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px 12px;
+  gap: 8px;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.dropdown-option:hover {
+  background: var(--bg-tertiary);
+}
+
+.dropdown-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-option .delete-btn {
+  background: transparent;
+  border: none;
+  color: #ff6b6b;
+  opacity: 0;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+}
+
+.dropdown-option:hover .delete-btn {
+  opacity: 1;
+}
+
+.dropdown-option .delete-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.graph-options.open {
+  display: block;
+}
\ No newline at end of file
diff --git a/app/templates/components/chat_header.j2 b/app/templates/components/chat_header.j2
index f03a037c..6bad7b49 100644
--- a/app/templates/components/chat_header.j2
+++ b/app/templates/components/chat_header.j2
@@ -3,9 +3,16 @@
     <img src="/static/icons/queryweaver.webp" alt="Chat Logo" class="logo">
     <h1>Natural Language to SQL Generator</h1>
     <div class="button-container">
-        <select title="Select Database" id="graph-select">
-            <option value="">Loading...</option>
-        </select>
+        <!-- Custom dropdown to show per-item delete action on hover -->
+        <div id="graph-custom-dropdown" class="graph-custom-dropdown">
+            <div id="graph-selected" class="graph-selected dropdown-selected" title="Select Database">
+                <span class="dropdown-text">Select Database</span>
+                <span class="dropdown-arrow">▼</span>
+            </div>
+            <div id="graph-options" class="graph-options dropdown-options" aria-hidden="true"></div>
+        </div>
+
+        <!-- styles for the graph dropdown moved to app/public/css/menu.css -->
         <div class="vertical-separator"></div>
         <input title="Upload Schema" id="schema-upload" type="file" accept=".json" style="display: none;" tabindex="-1" disabled/>
         <label for="schema-upload" id="custom-file-upload">
diff --git a/app/ts/app.ts b/app/ts/app.ts
index cde7a6a6..15289148 100644
--- a/app/ts/app.ts
+++ b/app/ts/app.ts
@@ -6,6 +6,7 @@ import { DOM } from './modules/config';
 import { initChat } from './modules/messages';
 import { sendMessage, pauseRequest } from './modules/chat';
 import { loadGraphs, handleFileUpload, onGraphChange } from './modules/graphs';
+import { getSelectedGraph } from './modules/graph_select';
 import {
     toggleContainer,
     showResetConfirmation,
@@ -64,7 +65,7 @@ function setupEventListeners() {
 
     DOM.schemaButton?.addEventListener('click', () => {
         toggleContainer(DOM.schemaContainer as HTMLElement, async () => {
-            const selected = DOM.graphSelect?.value;
+            const selected = getSelectedGraph();
             if (!selected) return;
             await loadAndShowGraph(selected);
         });
@@ -84,9 +85,10 @@ function setupEventListeners() {
         }
     });
 
-    DOM.graphSelect?.addEventListener('change', async () => {
+    // Legacy select is hidden; custom UI will trigger load via graph_select helper
+    document.getElementById('graph-options')?.addEventListener('click', async () => {
         onGraphChange();
-        const selected = DOM.graphSelect?.value;
+        const selected = getSelectedGraph();
         if (!selected) return;
         if (DOM.schemaContainer && DOM.schemaContainer.classList.contains('open')) {
             await loadAndShowGraph(selected);
diff --git a/app/ts/modules/chat.ts b/app/ts/modules/chat.ts
index 9c4157a9..37ac3861 100644
--- a/app/ts/modules/chat.ts
+++ b/app/ts/modules/chat.ts
@@ -4,12 +4,13 @@
 
 import { DOM, state, MESSAGE_DELIMITER } from './config';
 import { addMessage, removeLoadingMessage, moveLoadingMessageToBottom } from './messages';
+import { getSelectedGraph } from './graph_select';
 
 export async function sendMessage() {
     const message = (DOM.messageInput?.value || '').trim();
     if (!message) return;
 
-    const selectedValue = DOM.graphSelect?.value || '';
+    const selectedValue = getSelectedGraph() || '';
     if (!selectedValue) {
         addMessage('Please select a graph from the dropdown before sending a message.', false, true);
         return;
@@ -257,7 +258,7 @@ export async function handleDestructiveConfirmation(confirmation: string, sqlQue
     }
 
     try {
-        const selectedValue = DOM.graphSelect?.value || '';
+        const selectedValue = getSelectedGraph() || '';
 
         const response = await fetch('/graphs/' + encodeURIComponent(selectedValue) + '/confirm', {
             method: 'POST',
diff --git a/app/ts/modules/config.ts b/app/ts/modules/config.ts
index 6ccf4bd8..e85da9f7 100644
--- a/app/ts/modules/config.ts
+++ b/app/ts/modules/config.ts
@@ -27,7 +27,6 @@ export const SELECTORS = {
     leftToolbarInner: '#left-toolbar-inner',
     expInstructions: '#instructions-textarea',
     inputContainer: '#input-container',
-    graphSelect: '#graph-select',
     resetConfirmationModal: '#reset-confirmation-modal',
     resetConfirmBtn: '#reset-confirm-btn',
     resetCancelBtn: '#reset-cancel-btn'
@@ -59,7 +58,6 @@ export const DOM = {
     leftToolbarInner: getElement<HTMLElement | null>('left-toolbar-inner'),
     expInstructions: getElement<HTMLTextAreaElement | null>('instructions-textarea'),
     inputContainer: getElement<HTMLElement | null>('input-container'),
-    graphSelect: getElement<HTMLSelectElement | null>('graph-select'),
     resetConfirmationModal: getElement<HTMLElement | null>('reset-confirmation-modal'),
     resetConfirmBtn: getElement<HTMLButtonElement | null>('reset-confirm-btn'),
     resetCancelBtn: getElement<HTMLButtonElement | null>('reset-cancel-btn')
diff --git a/app/ts/modules/graph_select.ts b/app/ts/modules/graph_select.ts
new file mode 100644
index 00000000..4ad003e9
--- /dev/null
+++ b/app/ts/modules/graph_select.ts
@@ -0,0 +1,62 @@
+/**
+ * Helper to manage the custom graph selector UI.
+ * Exposes functions to get/set the selected graph and render the list.
+ */
+import { DOM } from './config';
+
+export function getSelectedGraph(): string | null {
+    const selectedLabel = document.getElementById('graph-selected');
+    const text = selectedLabel?.querySelector('.dropdown-text')?.textContent;
+    if (text) return text;
+    return null;
+}
+
+export function setSelectedGraph(name: string) {
+    const selectedLabel = document.getElementById('graph-selected');
+    const textNode = selectedLabel?.querySelector('.dropdown-text');
+    if (textNode) textNode.textContent = name;
+}
+
+export function clearGraphOptions() {
+    const optionsContainer = document.getElementById('graph-options');
+    if (optionsContainer) optionsContainer.innerHTML = '';
+}
+
+export function addGraphOption(name: string, onSelect: (n: string) => void, onDelete: (n: string) => void) {
+    const optionsContainer = document.getElementById('graph-options');
+    if (!optionsContainer) return;
+    const row = document.createElement('div');
+    row.className = 'dropdown-option';
+    row.setAttribute('data-value', name);
+    const icon = document.createElement('span');
+    icon.className = 'db-icon';
+    // optional: could add icons later
+    const text = document.createElement('span');
+    text.textContent = name;
+    row.appendChild(icon);
+    row.appendChild(text);
+
+    const delBtn = document.createElement('button');
+    delBtn.className = 'delete-btn';
+    delBtn.title = `Delete ${name}`;
+    delBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path></svg>`;
+    row.appendChild(delBtn);
+
+    row.addEventListener('click', () => {
+        setSelectedGraph(name);
+        onSelect(name);
+        optionsContainer.classList.remove('open');
+    });
+
+    delBtn.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        onDelete(name);
+    });
+
+    optionsContainer.appendChild(row);
+}
+
+export function toggleOptions() {
+    const optionsContainer = document.getElementById('graph-options');
+    if (optionsContainer) optionsContainer.classList.toggle('open');
+}
diff --git a/app/ts/modules/graphs.ts b/app/ts/modules/graphs.ts
index 4eb2cbe8..96997b3d 100644
--- a/app/ts/modules/graphs.ts
+++ b/app/ts/modules/graphs.ts
@@ -4,17 +4,16 @@
 
 import { DOM } from './config';     
 import { addMessage, initChat } from './messages';
+import { addGraphOption, clearGraphOptions, setSelectedGraph, toggleOptions, getSelectedGraph } from './graph_select';
 
 export function loadGraphs() {
     const isAuthenticated = (window as any).isAuthenticated !== undefined ? (window as any).isAuthenticated : false;
 
     if (!isAuthenticated) {
-        if (DOM.graphSelect) DOM.graphSelect.innerHTML = '';
         const option = document.createElement('option');
         option.value = '';
         option.textContent = 'Please log in to access graphs';
         option.disabled = true;
-        if (DOM.graphSelect) DOM.graphSelect.appendChild(option);
 
         if (DOM.messageInput) DOM.messageInput.disabled = true;
         if (DOM.submitButton) DOM.submitButton.disabled = true;
@@ -33,34 +32,83 @@ export function loadGraphs() {
             return response.json();
         })
         .then((data: string[]) => {
-            if (DOM.graphSelect) DOM.graphSelect.innerHTML = '';
-
+            console.log('Graphs loaded:', data);
             if (!data || data.length === 0) {
-                const option = document.createElement('option');
-                option.value = '';
-                option.textContent = 'No graphs available';
-                option.disabled = true;
-                if (DOM.graphSelect) DOM.graphSelect.appendChild(option);
-
+                // Clear custom dropdown and show no graphs state
+                clearGraphOptions();
+                
                 if (DOM.messageInput) DOM.messageInput.disabled = true;
                 if (DOM.submitButton) DOM.submitButton.disabled = true;
                 if (DOM.messageInput) DOM.messageInput.placeholder = 'Please upload a schema or connect a database to start chatting';
 
                 addMessage('No graphs are available. Please upload a schema file or connect to a database to get started.', false);
+                
+                // Update the visible selected label to show no graphs state
+                const selectedLabel = document.getElementById('graph-selected');
+                if (selectedLabel) {
+                    const dropdownText = selectedLabel.querySelector('.dropdown-text');
+                    if (dropdownText) {
+                        dropdownText.textContent = 'No Databases';
+                    } 
+                }
                 return;
             }
 
+            // populate hidden select for legacy code
             data.forEach(graph => {
                 const option = document.createElement('option');
                 option.value = graph;
                 option.textContent = graph;
                 option.title = graph;
-                if (DOM.graphSelect) DOM.graphSelect.appendChild(option);
             });
 
+            // populate custom dropdown
+            try {
+                clearGraphOptions();
+                data.forEach(graph => {
+                    addGraphOption(graph, (name) => {
+                        // onSelect
+                        setSelectedGraph(name);
+                        initChat();
+                    }, async (name) => {
+                        // onDelete
+                        const confirmed = confirm(`Delete graph "${name}"? This action cannot be undone.`);
+                        if (!confirmed) return;
+                        try {
+                            const resp = await fetch(`/graphs/${encodeURIComponent(name)}`, { method: 'DELETE' });
+                            if (!resp.ok) {
+                                const text = await resp.text();
+                                throw new Error(`Delete failed: ${resp.status} ${text}`);
+                            }
+                            addMessage(`Graph "${name}" deleted.`, false);
+                        } catch (err) {
+                            console.error('Error deleting graph:', err);
+                            addMessage('Error deleting graph: ' + (err as Error).message, false);
+                        } finally {
+                            // Always refresh the graph list after delete attempt
+                            loadGraphs();
+                        }
+                    });
+                });
+
+                const sel = document.getElementById('graph-selected');
+                if (sel) sel.addEventListener('click', () => toggleOptions());
+            } catch (e) {
+                console.warn('Custom graph dropdown not available', e);
+            }
+
+            // custom dropdown is populated above via addGraphOption
+
             if (DOM.messageInput) DOM.messageInput.disabled = false;
             if (DOM.submitButton) DOM.submitButton.disabled = false;
             if (DOM.messageInput) DOM.messageInput.placeholder = 'Describe the SQL query you want...';
+
+            // Attach delete button handler if present
+            const deleteBtn = document.getElementById('delete-graph-btn');
+            if (deleteBtn) {
+                deleteBtn.removeEventListener('click', onDeleteClick as EventListener);
+                deleteBtn.addEventListener('click', onDeleteClick as EventListener);
+            }
         })
         .catch(error => {
             console.error('Error fetching graphs:', error);
@@ -74,15 +122,43 @@ export function loadGraphs() {
                 if (DOM.messageInput) DOM.messageInput.placeholder = 'Cannot connect to server';
             }
 
-            if (DOM.graphSelect) DOM.graphSelect.innerHTML = '';
             const option = document.createElement('option');
             option.value = '';
             option.textContent = (error as Error).message.includes('Authentication') ? 'Please log in' : 'Error loading graphs';
             option.disabled = true;
-            if (DOM.graphSelect) DOM.graphSelect.appendChild(option);
         });
 }
 
+async function onDeleteClick() {
+    const graphName = getSelectedGraph();
+    if (!graphName) {
+        addMessage('Please select a graph to delete.', false);
+        return;
+    }
+
+    const confirmed = confirm(`Are you sure you want to delete the graph '${graphName}'? This action cannot be undone.`);
+    if (!confirmed) return;
+
+    try {
+        const resp = await fetch(`/graphs/${encodeURIComponent(graphName)}`, { method: 'DELETE' });
+        if (!resp.ok) {
+            const text = await resp.text();
+            throw new Error(`Failed to delete graph: ${resp.status} ${text}`);
+        }
+        addMessage(`Graph '${graphName}' deleted.`, false);
+        // Clear current chat state if the deleted graph was selected
+        if (window && (window as any).currentGraph === graphName) {
+            (window as any).currentGraph = undefined;
+        }
+    } catch (err) {
+        console.error('Error deleting graph:', err);
+        addMessage('Error deleting graph: ' + (err as Error).message, false);
+    } finally {
+        // Always reload graphs list after delete attempt
+        loadGraphs();
+    }
+}
+
 export function handleFileUpload(event: Event) {
     const target = event.target as HTMLInputElement | null;
     const file = target?.files ? target.files[0] : null;
diff --git a/app/ts/modules/messages.ts b/app/ts/modules/messages.ts
index 6f26c5a0..7d9d42cf 100644
--- a/app/ts/modules/messages.ts
+++ b/app/ts/modules/messages.ts
@@ -3,6 +3,7 @@
  */
 
 import { DOM, state } from './config';
+import { getSelectedGraph } from './graph_select';
 
 export function addMessage(
     message: string,
@@ -137,7 +138,8 @@ export function initChat() {
         if (element) element.innerHTML = '';
     });
 
-    if (DOM.graphSelect && DOM.graphSelect.options.length > 0 && (DOM.graphSelect.options[0].value || DOM.graphSelect.options.length)) {
+    const selected = getSelectedGraph();
+    if (selected) {
         addMessage('Hello! How can I help you today?', false);
     } else {
         addMessage('Hello! Please select a graph from the dropdown above, upload a schema or connect to a database to get started.', false);