diff --git a/app/components/CreateGraph.tsx b/app/components/CreateGraph.tsx
index 8cb14894..bcd2e807 100644
--- a/app/components/CreateGraph.tsx
+++ b/app/components/CreateGraph.tsx
@@ -36,7 +36,8 @@ export default function CreateGraph({
 
     const handleCreateGraph = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
-        if (!graphName) {
+        const name = graphName.trim()
+        if (!name) {
             toast({
                 title: "Error",
                 description: "Graph name cannot be empty",
@@ -45,13 +46,13 @@ export default function CreateGraph({
             return
         }
         const q = 'RETURN 1'
-        const result = await securedFetch(`api/graph/${prepareArg(graphName)}/?query=${prepareArg(q)}`, {
+        const result = await securedFetch(`api/graph/${prepareArg(name)}/?query=${prepareArg(q)}`, {
             method: "GET",
         }, toast)
 
         if (!result.ok) return
 
-        onSetGraphName(graphName)
+        onSetGraphName(name)
         setGraphName("")
         setOpen(false)
     }
diff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx
index 8ccf2e20..c03f4663 100644
--- a/app/components/ui/combobox.tsx
+++ b/app/components/ui/combobox.tsx
@@ -109,10 +109,10 @@ export default function Combobox({ isSelectGraph = false, disabled = false, inTa
               {
                 options.map((option) => (
                   <SelectItem
-                    value={option}
-                    key={option}
+                    value={!option ? '""' : option}
+                    key={`key-${option}`}
                   >
-                    {option}
+                    {!option ? '""' : option}
                   </SelectItem>
                 ))
               }
diff --git a/app/graph/Selector.tsx b/app/graph/Selector.tsx
index 6f4f8138..3d6170aa 100644
--- a/app/graph/Selector.tsx
+++ b/app/graph/Selector.tsx
@@ -74,9 +74,10 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
     }
 
     const handleOnChange = async (name: string) => {
+        const formattedName = name === '""' ? "" : name
         if (runQuery) {
             const q = 'MATCH (n)-[e]-(m) return n,e,m'
-            const result = await securedFetch(`api/graph/${prepareArg(name)}_schema/?query=${prepareArg(q)}&create=false&role=${session?.user.role}`, {
+            const result = await securedFetch(`api/graph/${prepareArg(formattedName)}_schema/?query=${prepareArg(q)}&create=false&role=${session?.user.role}`, {
                 method: "GET"
             }, toast)
 
@@ -87,7 +88,7 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
                 setSchema(Graph.create(name, json.result, false, true))
             }
         }
-        onChange(name)
+        onChange(formattedName)
         setSelectedValue(name)
     }
 
diff --git a/app/schema/page.tsx b/app/schema/page.tsx
index 64e4d215..e01d4983 100644
--- a/app/schema/page.tsx
+++ b/app/schema/page.tsx
@@ -56,7 +56,7 @@ export default function Page() {
 
     return (
         <div className="Page">
-            <Header />
+            <Header onSetGraphName={setSchemaName}/>
             <div className="h-1 grow p-8 px-10 flex flex-col gap-8">
                 <Selector
                     setGraphName={setSchemaName}