diff --git a/.env.local.template b/.env.local.template
deleted file mode 100644
index ab2504c..0000000
--- a/.env.local.template
+++ /dev/null
@@ -1,6 +0,0 @@
-NEXT_PUBLIC_MODE=UNLIMITED # Optional values LIMITED/UNLIMITED
-
-FALKORDB_URL=falkordb://localhost:6379 # FALKORDB_URL
-
-OPENAI_API_KEY=[API_KEY] # Set you openai api key here
-
diff --git a/app/api/chat/[graph]/route.ts b/app/api/chat/[graph]/route.ts
new file mode 100644
index 0000000..d6ef73a
--- /dev/null
+++ b/app/api/chat/[graph]/route.ts
@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server"
+
+
+export async function POST(request: NextRequest, { params }: { params: { graph: string } }) {
+
+    const graphName = params.graph
+    const msg = request.nextUrl.searchParams.get('msg')
+
+    try {
+        const result = await fetch(`${process.env.BEAKEND_URL}/chat`, {
+            method: 'POST',
+            body: JSON.stringify({ repo: graphName, msg }),
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
+                "Content-Type": 'application/json'
+            }
+        })
+
+        if (!result.ok) {
+            throw new Error(await result.text())
+        }
+
+        const json = await result.json()
+
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
+    }
+}
\ No newline at end of file
diff --git a/app/api/repo/[graph]/[node]/route.ts b/app/api/repo/[graph]/[node]/route.ts
index 277e394..4b4f014 100644
--- a/app/api/repo/[graph]/[node]/route.ts
+++ b/app/api/repo/[graph]/[node]/route.ts
@@ -1,24 +1,55 @@
-import { FalkorDB, Graph } from "falkordb";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(request: NextRequest, { params }: { params: { graph: string, node: string } }) {
-    
-    const nodeId  = parseInt(params.node);
+
+    const nodeId = parseInt(params.node);
+    const graphId = params.graph;
+    try {
+
+        const result = await fetch(`${process.env.BEAKEND_URL}/get_neighbors?repo=${graphId}&node_id=${nodeId}`, {
+            method: 'GET',
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
+            }
+        })
+
+        const json = await result.json()
+
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ massage: (err as Error).message }, { status: 400 })
+    }
+}
+
+export async function POST(request: NextRequest, { params }: { params: { graph: string, node: string } }) {
+
+    const nodeId = params.node;
     const graphId = params.graph;
+    const targetId = request.nextUrl.searchParams.get('targetId')
+
+    try {
 
-    const db = await FalkorDB.connect({url: process.env.FALKORDB_URL || 'falkor://localhost:6379',});
-    const graph = db.selectGraph(graphId);
+        const result = await fetch(`${process.env.BEAKEND_URL}/find_paths`, {
+            method: 'POST',
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                repo: graphId,
+                src: Number(nodeId),
+                dest: Number(targetId!)
+            })
+        })
 
-    // Get node's neighbors    
-    const q_params = {nodeId: nodeId};
-    const query    = `MATCH (src)-[e]-(n)
-                      WHERE ID(src) = $nodeId
-                      RETURN collect(distinct { label:labels(n)[0], id:ID(n), name: n.name } ) as nodes,
-                      collect( { src: ID(startNode(e)), id: ID(e), dest: ID(endNode(e)), type: type(e) } ) as edges`;
+        if (!result.ok) {
+            throw new Error(await result.text())
+        }
 
-    let res: any = await graph.query(query, { params: q_params });
-    let nodes = res.data[0]['nodes'];
-    let edges = res.data[0]['edges'];
+        const json = await result.json()
 
-    return NextResponse.json({ id: graphId, nodes: nodes, edges: edges }, { status: 200 })
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ massage: (err as Error).message }, { status: 200 })
+    }
 }
\ No newline at end of file
diff --git a/app/api/repo/[graph]/route.ts b/app/api/repo/[graph]/route.ts
index 1fe88b8..a4a2dd7 100644
--- a/app/api/repo/[graph]/route.ts
+++ b/app/api/repo/[graph]/route.ts
@@ -1,296 +1,256 @@
-import OpenAI from "openai";
-import { QUESTIONS } from '../questions';
-import { graphSchema } from "../graph_ops";
-import { FalkorDB, Graph } from 'falkordb';
-import { NextRequest, NextResponse } from "next/server";
-import { ChatCompletionCreateParams, ChatCompletionMessageParam, ChatCompletionMessageToolCall, ChatCompletionTool } from 'openai/resources/chat/completions.mjs';
+import { NextRequest, NextResponse } from "next/server"
 
-// convert a structured graph schema into a string representation
-// used in a model prompt
-async function GraphSchemaToPrompt(
-    graph: Graph,
-    graphId: string,
-    db: FalkorDB
-) {
-    // Retrieve graph schema
-    let schema: any = await graphSchema(graphId, db);
-
-    // Build a string description of graph schema
-    let desc: string = "The knowladge graph schema is as follows:\n";
-
-    //-------------------------------------------------------------------------
-    // Describe labels
-    //-------------------------------------------------------------------------
-
-    // list labels
-    desc = desc + "The graph contains the following node labels:\n";
-    for (const lbl in schema["labels"]) {
-        desc = desc + `${lbl}\n`;
-    }
-
-    // specify attributes associated with each label
-    for (const lbl in schema["labels"]) {
-        let node_count = schema["labels"][lbl]['node_count'];
-        let attributes = schema["labels"][lbl]['attributes'];
-        let attr_count = Object.keys(attributes).length;
-
-        if (attr_count == 0) {
-            desc = desc + `the ${lbl} label has ${node_count} nodes and has no attributes\n`;
-        } else {
-            desc = desc + `the ${lbl} label has ${node_count} nodes and is associated with the following attribute(s):\n`;
-            for (const attr in attributes) {
-                let type = attributes[attr]['type'];
-                desc = desc + `'${attr}' which is of type ${type}\n`;
-            }
-        }
-    }
-
-    desc = desc + "The graph contains the following relationship types:\n"
-
-    //-------------------------------------------------------------------------
-    // Describe relationships
-    //-------------------------------------------------------------------------
-
-    // list relations
-    for (const relation in schema["relations"]) {
-        desc = desc + `${relation}\n`;
-    }
-
-    // specify attributes associated with each relationship
-    for (const relation in schema["relations"]) {
-        let connect = schema["relations"][relation]['connect'];
-        let edge_count = schema["relations"][relation]['edge_count'];
-        let attributes = schema["relations"][relation]['attributes'];
-        let attr_count = Object.keys(attributes).length;
+export async function GET(request: NextRequest, { params }: { params: { graph: string } }) {
 
-        if (attr_count == 0) {
-            desc = desc + `the ${relation} relationship has ${edge_count} edges and has no attributes\n`;
-        } else {
-            desc = desc + `the ${relation} relationship has ${edge_count} edges and is associated with the following attribute(s):\n`;
-            for (const attr in attributes) {
-                let type = attributes[attr]['type'];
-                desc = desc + `'${attr}' which is of type ${type}\n`;
-            }
-        }
+    const graphName = params.graph
 
-        if (connect.length > 0) {
-            desc = desc + `the ${relation} relationship connects the following labels:\n`
-            for (let i = 0; i < connect.length; i += 2) {
-                let src = connect[i];
-                let dest = connect[i + 1];
-                desc = desc + `${src} is connected via ${relation} to ${dest}\n`;
+    try {
+        const result = await fetch(`${process.env.BEAKEND_URL}/graph_entities?repo=${graphName}`, {
+            method: 'GET',
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
             }
-        }
-    }
-
-    desc = desc + `This is the end of the knowladge graph schema description.\n`
-
-    //-------------------------------------------------------------------------
-    // include graph indices
-    //-------------------------------------------------------------------------
-
-    // vector indices
-    let query = `CALL db.indexes() YIELD label, properties, types, entitytype`;
-    let res = await graph.query(query);
-
-    // process indexes
-    let indexes: any = res.data;
-    if (indexes.length > 0) {
-        let index_prompt = "The knowladge graph contains the following indexes:\n"
-        for (let i = 0; i < indexes.length; i++) {
-            const index = indexes[i];
-            const label: string = index['label'];
-            const entityType: string = index['entitytype'];
-            const props = index['properties'];
-            const types = index['types'];
+        })
 
-            for (const prop of props) {
-                const propTypes: string[] = types[prop];
-                for (let j = 0; j < propTypes.length; j++) {
-                    const idxType: string = propTypes[j];
-                    index_prompt += `${entityType} of type ${label} have a ${idxType} index indexing its ${prop} attribute\n`;
-                }
-            }
+        if (!result.ok) {
+            throw new Error(await result.text())
         }
-        index_prompt += `This is the end of our indexes list
-        To use a Vector index use the following procedure:
-        CALL db.idx.vector.queryNodes(<LABEL>, <PROPERTY>, <N>, <VALUE>)) YIELD node
-
-        The procedure returns up to N nodes that have a <PROPERTY> value which is semantically close to
-        <VALUE>.
-
-        Here are a few question / answer examples of using the vector index:
-        Question: Find 3 functions which have nested loops, return a list of callers
-        Cypher query: CALL db.idx.vector.queryNodes('Function', 'source', 3, 'nested loops') YIELD node MATCH (f)-[:CALLS]->(node) RETURN node.name
 
-        Question: List 5 Classes which contain a function that raise an exception
-        Cypher query: CALL db.idx.vector.queryNodes('Function', 'source', 5, "raise exception") YIELD node MATCH (c:Class)-[:CONTAINS]->(node) RETURN class.name, node.name
-    `;
-
-        desc += index_prompt;
+        const json = await result.json()
 
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
-
-    return desc;
 }
 
-// handle instruction from OpenAI
-// there are two types of accepted instructions:
-// 1. Run query.
-// 2. Generate embeddings and run a query.
-async function run_query
-(
-    graph: Graph,
-    query: string
-) {
-    console.log(`query: ${query}`)
-    let params = {};
-
-    // handle cases where the query contains a vector index utilization
-    // CALL db.idx.vector.queryNodes('Function', 'src_embeddings', 5, 'x= x   1')
-    if(query.indexOf('CALL db.idx.vector.queryNodes(') !== -1) {
-        // query utilizes a vector index
-        // extract semantic value and produce embeddings
-        let startIdx       = query.indexOf('CALL db.idx.vector.queryNodes(');
-        let endIdx         = query.indexOf(')');
-        let proc_call      = query.substring(startIdx + 'CALL db.idx.vector.queryNodes('.length, endIdx);
-        let args           = proc_call.split(',');
-        let semantic_value = args[args.length - 1];
-
-        const openai   = new OpenAI();
-        let response   = await openai.embeddings.create({input:semantic_value, model:'text-embedding-ada-002'});
-        let embeddings = response.data[0].embedding;
-
-        args[args.length - 1] = "vecf32($embeddings)";
-
-        // rewrite query
-        params = {embeddings: embeddings};
-        let rewrite = 'CALL db.idx.vector.queryNodes(' + args.join(',') + query.substring(endIdx, query.length);
-        query = rewrite;
-    }
-
-    let result = await graph.roQuery(query, {params: params});
-    return result.data;
-}
-
-// Chat bot handler
-export async function GET(request: NextRequest, { params }: { params: { graph: string } }) {
-    const graph_id = params.graph;
-    let question = request.nextUrl.searchParams.get("q");
-
-    if(!question) {
-        return NextResponse.json({ message: 'Question not specified' }, { status: 400 })
-    }
-
-    //-------------------------------------------------------------------------
-    // Connect to graph
-    //-------------------------------------------------------------------------
-
-    // hard coded graph id
-    const db = await FalkorDB.connect({
-        url: process.env.FALKORDB_URL || 'falkor://localhost:6379',
-    });
-    const graph = db.selectGraph(graph_id);
-
-    //-------------------------------------------------------------------------
-    // Construct prompt
-    //-------------------------------------------------------------------------
-
-    let graph_schema = await GraphSchemaToPrompt(graph, graph_id, db);
-
-    let prompt: string = `You're a Cypher expert, with access to the following graph:
-    ${graph_schema}
-    The graph represents a code base.
-    Please note the graph you're querying does NOT supports regular expression matching via the =~ symbol
-    Do not generate queries using the '=~' symbol.`;
-
-    //-------------------------------------------------------------------------
-    // Send prompt to OpenAI
-    //-------------------------------------------------------------------------
-
-    // Define conversation first message
-    const openai = new OpenAI();
-    let messages: ChatCompletionMessageParam[] = [
-        { role: 'system', content: prompt },
-        { role: 'user', content: `Question: ${question}`, name: 'user' },
-    ];
-
-    // Define OpenAI tool
-    const tools:ChatCompletionTool[] = [
-    {
-        type: "function",
-        function: {
-            name: "run_query",
-            description: "Run a Cypher query",
-            parameters: {
-                type: "object",
-                properties: {
-                    query: {
-                        type: "string",
-                        description: "Cypher query to run",
-                    },
-                },
-                required: ["query"],
-            },
-        },
-    },
-    ];
-
-    // Construct conversation body
-    let body: ChatCompletionCreateParams = {
-        model: "gpt-4o",
-        messages: messages,
-        tools: tools,
-        tool_choice: "auto",
-    };
+export async function POST(request: NextRequest, { params }: { params: { graph: string } }) {
+
+    const type = request.nextUrl.searchParams.get('type') || "count"
+    const graphName = params.graph
+
+    try {
+        switch (type) {
+            case "commit": {
+                const result = await fetch(`${process.env.BEAKEND_URL}/list_commits`, {
+                    method: 'POST',
+                    body: JSON.stringify({ repo: graphName }),
+                    headers: {
+                        "Authorization": process.env.SECRET_TOKEN!,
+                        "Content-Type": 'application/json'
+                    }
+                })
+
+                if (!result.ok) {
+                    throw new Error(await result.text())
+                }
 
-    // Get completion for conversation
-    let response = await openai.chat.completions.create(body);
+                const json = await result.json()
 
-    //-------------------------------------------------------------------------
-    // Perform instruction
-    //-------------------------------------------------------------------------    
+                return NextResponse.json({ result: json }, { status: 200 })
+            }
+            case "switchCommit": {
+                return NextResponse.json({
+                    result: {
+                        deletions: {
+                            'nodes': [
+                                {
+                                    "alias": "",
+                                    "id": 2,
+                                    "labels": [
+                                        "Function"
+                                    ],
+                                    "properties": {
+                                        "args": [
+                                            [
+                                                "cls",
+                                                "Unknown"
+                                            ]
+                                        ],
+                                        "name": "setUpClass",
+                                        "path": "tests/test_kg_gemini.py",
+                                        "src": "def setUpClass(cls):\n\n        cls.ontology = Ontology([], [])\n\n        cls.ontology.add_entity(\n            Entity(\n                label=\"Actor\",\n                attributes=[\n                    Attribute(\n                        name=\"name\",\n                        attr_type=AttributeType.STRING,\n                        unique=True,\n                        required=True,\n                    ),\n                ],\n            )\n        )\n        cls.ontology.add_entity(\n            Entity(\n                label=\"Movie\",\n                attributes=[\n                    Attribute(\n                        name=\"title\",\n                        attr_type=AttributeType.STRING,\n                        unique=True,\n                        required=True,\n                    ),\n                ],\n            )\n        )\n        cls.ontology.add_relation(\n            Relation(\n                label=\"ACTED_IN\",\n                source=\"Actor\",\n                target=\"Movie\",\n                attributes=[\n                    Attribute(\n                        name=\"role\",\n                        attr_type=AttributeType.STRING,\n                        unique=False,\n                        required=False,\n                    ),\n                ],\n            )\n        )\n\n        cls.graph_name = \"IMDB_gemini\"\n\n        model = GeminiGenerativeModel(model_name=\"gemini-1.5-flash-001\")\n        cls.kg = KnowledgeGraph(\n            name=cls.graph_name,\n            ontology=cls.ontology,\n            model_config=KnowledgeGraphModelConfig.with_model(model),\n        )",
+                                        "src_end": 82,
+                                        "src_start": 29
+                                    }
+                                },
+                                {
+                                    "alias": "",
+                                    "id": 13,
+                                    "labels": [
+                                        "Function"
+                                    ],
+                                    "properties": {
+                                        "args": [
+                                            [
+                                                "self",
+                                                "Unknown"
+                                            ],
+                                            [
+                                                "restaurants_kg",
+                                                "KnowledgeGraph"
+                                            ],
+                                            [
+                                                "attractions_kg",
+                                                "KnowledgeGraph"
+                                            ]
+                                        ],
+                                        "name": "import_data",
+                                        "path": "tests/test_multi_agent.py",
+                                        "src": "def import_data(\n        self,\n        restaurants_kg: KnowledgeGraph,\n        attractions_kg: KnowledgeGraph,\n    ):\n        with open(\"tests/data/cities.json\") as f:\n            cities = loads(f.read())\n        with open(\"tests/data/restaurants.json\") as f:\n            restaurants = loads(f.read())\n        with open(\"tests/data/attractions.json\") as f:\n            attractions = loads(f.read())\n\n        for city in cities:\n            restaurants_kg.add_node(\n                \"City\",\n                {\n                    \"name\": city[\"name\"],\n                    \"weather\": city[\"weather\"],\n                    \"population\": city[\"population\"],\n                },\n            )\n            restaurants_kg.add_node(\"Country\", {\"name\": city[\"country\"]})\n            restaurants_kg.add_edge(\n                \"IN_COUNTRY\",\n                \"City\",\n                \"Country\",\n                {\"name\": city[\"name\"]},\n                {\"name\": city[\"country\"]},\n            )\n\n            attractions_kg.add_node(\n                \"City\",\n                {\n                    \"name\": city[\"name\"],\n                    \"weather\": city[\"weather\"],\n                    \"population\": city[\"population\"],\n                },\n            )\n            attractions_kg.add_node(\"Country\", {\"name\": city[\"country\"]})\n            attractions_kg.add_edge(\n                \"IN_COUNTRY\",\n                \"City\",\n                \"Country\",\n                {\"name\": city[\"name\"]},\n                {\"name\": city[\"country\"]},\n            )\n\n        for restaurant in restaurants:\n            restaurants_kg.add_node(\n                \"Restaurant\",\n                {\n                    \"name\": restaurant[\"name\"],\n                    \"description\": restaurant[\"description\"],\n                    \"rating\": restaurant[\"rating\"],\n                    \"food_type\": restaurant[\"food_type\"],\n                },\n            )\n            restaurants_kg.add_edge(\n                \"IN_CITY\",\n                \"Restaurant\",\n                \"City\",\n                {\"name\": restaurant[\"name\"]},\n                {\"name\": restaurant[\"city\"]},\n            )\n\n        for attraction in attractions:\n            attractions_kg.add_node(\n                \"Attraction\",\n                {\n                    \"name\": attraction[\"name\"],\n                    \"description\": attraction[\"description\"],\n                    \"type\": attraction[\"type\"],\n                },\n            )\n            attractions_kg.add_edge(\n                \"IN_CITY\",\n                \"Attraction\",\n                \"City\",\n                {\"name\": attraction[\"name\"]},\n                {\"name\": attraction[\"city\"]},\n            )",
+                                        "src_end": 310,
+                                        "src_start": 230
+                                    }
+                                },
+                            ],
+                            'edges': [
+                                {
+                                    "alias": "",
+                                    "dest_node": 13,
+                                    "id": 460,
+                                    "properties": {},
+                                    "relation": "CALLS",
+                                    "src_node": 2
+                                },
+                            ]
+                        },
+                        additions: {
+                            'nodes': [
+                                {
+                                    "alias": "",
+                                    "id": 13,
+                                    "labels": [
+                                        "File"
+                                    ],
+                                    "properties": {
+                                        "ext": ".py",
+                                        "name": "test_kg_gemini.py",
+                                        "path": "tests"
+                                    }
+                                },
+                                {
+                                    "alias": "",
+                                    "id": 2,
+                                    "labels": [
+                                        "Class"
+                                    ],
+                                    "properties": {
+                                        "doc": "\"\"\"\n    Test Knowledge Graph\n    \"\"\"",
+                                        "name": "TestKGGemini",
+                                        "path": "tests/test_kg_gemini.py",
+                                        "src_end": 106,
+                                        "src_start": 23
+                                    }
+                                },
+                            ],
+                            'edges': [
+                                {
+                                    "alias": "",
+                                    "dest_node": 13,
+                                    "id": 460,
+                                    "properties": {},
+                                    "relation": "DEFINES",
+                                    "src_node": 2
+                                },
+                            ],
+                        },
+                        modifications: {
+                            'nodes': [
+                                {
+                                    "alias": "",
+                                    "id": 3,
+                                    "labels": [
+                                        "Function"
+                                    ],
+                                    "properties": {
+                                        "args": [
+                                            []
+                                        ],
+                                        "name": "",
+                                        "path": "",
+                                        "src": "",                                        
+                                        "src_end": 0,
+                                        "src_start": 0
+                                    }
+                                },
+                                {
+                                    "alias": "",
+                                    "id": 61,
+                                    "labels": [
+                                        "Function"
+                                    ],
+                                    "properties": {
+                                        "args": [
+                                            [],
+                                            []
+                                        ],
+                                        "doc": "",
+                                        "name": "",
+                                        "path": "",
+                                        "ret_type": "",
+                                        "src": "",
+                                        "src_end": 0,
+                                        "src_start": 0
+                                    }
+                                },
+                            ],
+                            'edges': [
+                                {
+                                    "alias": "",
+                                    "dest_node": 61,
+                                    "id": 439,
+                                    "properties": {
+                                        name: "Source"
+                                    },
+                                    "relation": "CALLS",
+                                    "src_node": 3
+                                },
+                            ]
+                        }
+                    }
+                }, { status: 200 })
+            }
+            case "autoComplete": {
+                const prefix = request.nextUrl.searchParams.get('prefix')!
+                const result = await fetch(`${process.env.BEAKEND_URL}/auto_complete`, {
+                    method: 'POST',
+                    body: JSON.stringify({ repo: graphName, prefix }),
+                    headers: {
+                        "Authorization": process.env.SECRET_TOKEN!,
+                        "Content-Type": 'application/json'
+                    }
+                })
+
+                if (!result.ok) {
+                    throw new Error(await result.text())
+                }
 
-    //const instruction = response.choices[0]['message']['content'];
-    const responseMessage = response.choices[0].message;
+                const json = await result.json()
 
-    // Step 2: check if the model wanted to call a function
-    const toolCalls: ChatCompletionMessageToolCall[] | undefined  = responseMessage.tool_calls;
+                return NextResponse.json({ result: json }, { status: 200 })
+            }
+            default: {
+                const result = await fetch(`${process.env.BEAKEND_URL}/repo_info`, {
+                    method: 'POST',
+                    body: JSON.stringify({ repo: graphName }),
+                    headers: {
+                        "Authorization": process.env.SECRET_TOKEN!,
+                        "Content-Type": 'application/json'
+                    }
+                })
+
+                if (!result.ok) {
+                    throw new Error(await result.text())
+                }
 
-    let query_result: string = '';  // response from query
+                const json = await result.json()
 
-    if (toolCalls) {
-        for (const toolCall of toolCalls) {
-            const functionName = toolCall.function.name;
-            const functionArgs = JSON.parse(toolCall.function.arguments);
-            
-            if(functionName != 'run_query') {
-                return NextResponse.json({ result: "Unknown function to run" }, { status: 500 });
+                return NextResponse.json({ result: json }, { status: 200 })
             }
-
-            let result = await run_query(graph, functionArgs.query);
-            query_result = JSON.stringify(result);
         }
-    } else {
-        return NextResponse.json({ result: "Unexpected instruction" }, { status: 500 });
+    } catch (err) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
 
-    //-------------------------------------------------------------------------
-    // Digest response
-    //-------------------------------------------------------------------------
 
-    console.log(`query_result: ${query_result}`);
-    prompt = `This is the user's question: ${question}
-    And this is the data we've got from our knowladge graph: ${query_result}
-    Please formulate an answer to the user question based on the data we've got from the knowladge graph`;
-
-    messages = [{ "role": "system", "content": prompt }];
-    response = await openai.chat.completions.create({
-        "model": "gpt-4o",
-        "messages": messages,
-    });
-    const answer = response.choices[0]['message']['content'];
-
-    console.log(`response: ${answer}`);
-    return NextResponse.json({ result: answer }, { status: 200 });
-}
+}
\ No newline at end of file
diff --git a/app/api/repo/graph_ops.ts b/app/api/repo/graph_ops.ts
deleted file mode 100644
index 12d8aaa..0000000
--- a/app/api/repo/graph_ops.ts
+++ /dev/null
@@ -1,552 +0,0 @@
-import OpenAI from "openai";
-import { FalkorDB, Graph } from 'falkordb';
-
-//-----------------------------------------------------------------------------
-// Graph operations
-//-----------------------------------------------------------------------------
-
-// Create graph indices
-export async function create_indices
-(
-    graph: Graph
-) {
-    //-------------------------------------------------------------------------
-    // index "name" attribute
-    //-------------------------------------------------------------------------
-
-    console.log("Creating range index on Class.name");
-    await graph.query("CREATE INDEX FOR (c:Class) ON (c.name)");    
-
-    console.log("Creating range index on Module.name");
-    await graph.query("CREATE INDEX FOR (m:Module) ON (m.name)");
-
-    console.log("Creating range index on Function.name");
-    await graph.query("CREATE INDEX FOR (f:Function) ON (f.name)");
-
-    //-------------------------------------------------------------------------
-    // index "src_embeddings" attribute
-    //-------------------------------------------------------------------------
-
-    console.log("Creating vector index on Function.src_embeddings");
-    await graph.query("CREATE VECTOR INDEX FOR (f:Function) ON (f.src_embeddings) OPTIONS {dimension:1536, similarityFunction:'euclidean'}");
-}
-
-// Create Module node
-export async function create_module
-(
-	file: string,
-	graph: Graph
-) {
-    // Create module node
-    const file_components = file.split("/");
-    const file_name = file_components[file_components.length - 1];
-    const params = {'name': file_name};
-    
-    const q = "MERGE (m:Module {name: $name}) RETURN ID(m)";
-    await graph.query(q, {params: params});
-}
-
-// Create Class node
-export async function create_class
-(
-	file: string,
-	graph: Graph,
-	class_name: string,
-	src_start: number,
-	src_end: number
-) {
-    // create class node
-    const file_components = file.split("/");
-    const file_name = file_components[file_components.length - 1];
-
-    const params = {'name': class_name,
-              'file_name': file_name,
-              'src_start': src_start,
-              'src_end': src_end};
-
-    // create Class and connect to Module
-    const q = `MERGE (c:Class {name: $name, file_name: $file_name,
-           src_start:$src_start, src_end: $src_end})
-           WITH c
-           MATCH (m:Module {name: $file_name})
-           MERGE (m)-[:CONTAINS]->(c)`;
-    await graph.query(q, {params: params});
-}
-
-export async function inherit_class
-(
-	file: string,
-	graph: Graph,
-	node: any
-) {
-    //-------------------------------------------------------------------------
-    // determine class inheritance
-    //-------------------------------------------------------------------------
-
-    //inheritance = []
-    //for base in node.bases:
-    //    if isinstance(base, ast.Name):
-    //        inheritance.append(base.id)
-
-    //file_name = file.split("/")[-1]
-    //params = {'name': node.name,
-    //          'file_name': file_name,
-    //          'src_start': node.lineno,
-    //          'src_end': node.end_lineno,
-    //          'inheritance': inheritance}
-
-    //q = """MATCH (c:Class {name: $name, file_name: $file_name,
-    //       src_start:$src_start, src_end: $src_end}), (base:Class)
-    //       WHERE base.name IN $inheritance
-    //       MERGE (c)-[:INHERITS]->(base)"""
-    //
-    //graph.query(q, params)
-}
-
-// Create Function node
-export async function create_function
-(
-	file: string,
-	graph: Graph,
-	function_name: string,
-	parent: string,
-	args: string[],
-	src_start: number,
-	src_end: number,
-	src: string
-) {
-    //-------------------------------------------------------------------------
-    // scan function arguments
-    //-------------------------------------------------------------------------
-
-    // discard 'self' argument
-    if(args.length > 0 && args[0] == "self") {
-    	args.shift();
-    }
-
-    // create function node
-    const file_components = file.split("/");
-    const file_name = file_components[file_components.length - 1];
-
-    //-------------------------------------------------------------------------
-    // create function source embeddings
-    //-------------------------------------------------------------------------
-
-    const openai    = new OpenAI();
-    const embedding = await openai.embeddings.create({model: "text-embedding-ada-002", input: src});
-    const vector    = embedding.data[0].embedding;
-
-    let params: any = {'name':            function_name,
-                       'file_name':       file_name,
-    			        'src_code':       src,
-                        'src_embeddings': vector,
-    			        'src_start':      src_start,
-    			        'src_end':        src_end,
-    			        'args':           args};
-
-    let q = `CREATE (f:Function {name: $name, file_name: $file_name,
-             src_code: $src_code, src_embeddings:vecf32($src_embeddings), src_start: $src_start, src_end: $src_end, args: $args})
-             RETURN ID(f) as func_id`;
-
-    let result: any = await graph.query(q, {params: params});
-    let f_id = result.data[0]['func_id'];
-
-    //-------------------------------------------------------------------------
-    // Connect function to parent
-    //-------------------------------------------------------------------------
-
-    params = {'f_id': f_id, 'parent': parent};
-
-    q = `MATCH (parent {name: $parent})
-    MATCH (f:Function) WHERE ID(f) = $f_id
-    MERGE (parent)-[:CONTAINS]->(f)`;
-    await graph.query(q, {params: params});
-}
-
-// Create function call
-export async function create_function_call
-(
-	file: string,	          // file in which call occurred
-	graph: Graph,             // graph object
-	caller: string,           // who've invoked the call
-	callee: string,           // who's being called
-	caller_src_start: number, // caller definition start
-	caller_src_end: number,   // caller definition end
-	call_src_start: number,   // first line on which call occurred
-	call_src_end: number      // last line on which call occurred
-) {
-    // make sure callee exists
-    // determine callee type (either a function or a class)
-    let params: any = {'name': callee};
-    let q = `OPTIONAL MATCH (c:Class {name: $name})
-           OPTIONAL MATCH (f:Function {name: $name})
-           RETURN ID(c) as c_id, ID(f) as f_id LIMIT 1`;
-
-	let res: any = await graph.query(q, {params: params});
-    let c_id = res.data[0]['c_id'];
-    let f_id = res.data[0]['f_id'];
-
-    const callee_id = c_id !== null ? c_id : f_id;
-    if (callee_id == null) {
-        //console.log("Callee: " + callee + " not found");
-        return;
-    }
-
-    // create function node
-    const file_components = file.split("/");
-    const file_name = file_components[file_components.length - 1];
-
-    params = {'file_name':         file_name,
-			   'callee_id':        callee_id,
-    		   'caller_name':      caller,
-    		   'caller_src_start': caller_src_start,
-    		   'caller_src_end':   caller_src_end,
-    		   'call_src_start':   call_src_end,
-    		   'call_src_end':     call_src_end};
-
-    // connect caller to callee
-	q = `MATCH (callee), (caller)
-		 WHERE ID(callee) = $callee_id AND
-			   caller.name = $caller_name AND
-    		   caller.file_name = $file_name AND
-    		   caller.src_start = $caller_src_start AND
-    		   caller.src_end = $caller_src_end
-		 MERGE (caller)-[:CALLS {file_name: $file_name, src_start: $call_src_start, src_end:$call_src_end}]->(callee)`;
-
-    await graph.query(q, {params: params});
-}
-
-export async function projectGraph
-(
-	graph: Graph,
-    max_entities: number
-) {
-    let query = `MATCH (n)
-                 OPTIONAL MATCH (n)-[e]->(z)
-                 WITH n, e, z
-                 LIMIT $limit
-                 WITH collect( { label:labels(n)[0], id:ID(n), name: n.name } ) as src,
-                      collect( { label:labels(z)[0], id:ID(z), name: z.name } ) as dest,
-                      collect( { src: ID(startNode(e)), id: ID(e), dest: ID(endNode(e)), type: type(e) } ) as edges
-                 WITH src + dest as nodes, edges
-                 RETURN [ node in nodes WHERE node.id is not null] AS nodes, [ edge in edges WHERE edge.id is not null] as edges
-                 `
-
-    let params = { limit: max_entities };
-    let result: any = await graph.query(query, { params: params });
-
-	return result.data[0];
-}
-
-// creates a schema graph
-export async function graphCreateSchema
-(
-    graph: Graph,
-    graphId: string,
-    db: FalkorDB
-) {
-    // graph schema is an additional graph key sharing the same
-    // key name as the graph it describes with the addition of '-schema'
-    // to the key.
-    const schema_graph_id = graphId + '-schema';
-
-    // return if schema already exists
-    const graphs = await db.list();
-    if(graphs.includes(schema_graph_id)) {
-        console.log(`${schema_graph_id} already exists`);
-        return;
-    }
-
-    const schema_graph = db.selectGraph(schema_graph_id);
-
-    //-------------------------------------------------------------------------
-    // collect labels and the attributes associated with them
-    //-------------------------------------------------------------------------
-
-    let query = `CALL db.labels()
-                 YIELD label
-                 RETURN label AS label`;
-
-    let res = await graph.query(query);
-    let labels: any = res.data;
-
-    for (let i = 0; i < labels.length; i++) {
-        let label = labels[i]['label'];        
-
-        // number labeld nodes
-        let query = `MATCH (n:${label}) RETURN count(n) as node_count`;
-        let res: any = await graph.query(query);
-        let node_count: number = res.data[0]['node_count'];
-
-        //---------------------------------------------------------------------
-        // create label node
-        //---------------------------------------------------------------------
-
-        let params = {'name': label, 'count': node_count};
-        query = `CREATE (:Label {name:$name, count:$count})`;
-        await schema_graph.query(query, {'params': params});
-
-        //---------------------------------------------------------------------
-        // collect label attributes
-        //---------------------------------------------------------------------
-
-        query = `MATCH (n:${label})
-                 WITH keys(n) AS keys
-                 UNWIND keys as key
-                 RETURN collect(distinct key) AS attributes`;
-        res = await graph.query(query);        
-        let attributes: string[] = res.data[0]['attributes'];
-
-        for (let j = 0; j < attributes.length; j++) {
-            let attr   = attributes[j];
-            let params = {'name': label, 'attr': attr};
-            let query  = `MATCH (l:Label {name: $name})
-                          CREATE (l)-[:HAS]->(a:Attribute {name:$attr, type:'unknown'})`;
-            await schema_graph.query(query, {'params': params});
-        }
-
-        //---------------------------------------------------------------------
-        // determine dominante type for each attribute
-        //---------------------------------------------------------------------
-
-        query = `MATCH (n:${label})
-                 WITH n, keys(n) AS keys
-                 UNWIND keys as key
-                 RETURN key as attr, typeOf(n[key]) AS attr_type, count(1) as count
-                 ORDER BY attr`;
-        res = await graph.query(query);
-        
-        let current_attr = null;
-        let max_count;
-        let dominant_type;
-
-        for (let j = 0; j < res.data.length; j++) {
-            let record = res.data[j];
-            let attr   = record['attr'];
-            let count  = record['count'];
-            let type   = record['attr_type'];
-
-            // done processing current attribute
-            if (current_attr != attr) {
-                if(current_attr != null) {
-                    let params = {'name': label, 'attr': current_attr, 'type': dominant_type};
-                    let query  = `MATCH (l:Label{name:$name})-[:HAS]->(a:Attribute{name:$attr})
-                                  SET a.type = $type`;
-                    await schema_graph.query(query, {'params': params});
-                }
-
-                // reset state
-                max_count     = count;
-                current_attr  = attr;
-                dominant_type = type;
-            }
-
-            if(max_count < count) {
-                max_count     = count;
-                dominant_type = type;
-            }
-        }
-
-        // handle last attribute
-        query = `MATCH (l:Label{name:$name})-[:HAS]->(a:Attribute{name:$attr})
-                 SET a.type = $type`;
-        await schema_graph.query(query, {'params': {'name': label, 'attr': current_attr, 'type': dominant_type}});
-    }
-
-    //-------------------------------------------------------------------------
-    // collect relations and the attributes associated with them
-    //-------------------------------------------------------------------------
-
-    query = `CALL db.relationshiptypes()
-             YIELD relationshipType
-             RETURN relationshipType as relation`;
-
-    res = await graph.query(query);
-    let relationships: any = res.data;
-
-    for (let i = 0; i < relationships.length; i++) {
-        let relation = relationships[i]['relation'];
-        
-        // number edges
-        let query = `MATCH ()-[e:${relation}]->()
-                     RETURN count(e) as edge_count`;
-        let res: any = await graph.query(query);
-        let edge_count: number = res.data[0]['edge_count'];
-        
-        // Create Relation node
-        query  = `CREATE (r:Relation {name:$name, count:$count})`
-        await schema_graph.query(query, {params: {'name': relation, 'count': edge_count}});
-
-        // collect relation attributes
-        query = `MATCH ()-[e:${relation}]->()
-                     WITH keys(e) AS keys
-                     UNWIND keys as key
-                     RETURN collect(distinct key) AS attributes`;
-        res = await graph.query(query);
-        let attributes: string[] = res.data[0]['attributes'];
-        for (let j = 0; j < attributes.length; j++) {
-            let attr   = attributes[j];
-            let params = {'name': relation, 'attr': attr};
-            let query  = `MATCH (r:Relation {name:$name})
-                          CREATE (r)-[:HAS]->(:Attribute {name: $attr})`
-            await schema_graph.query(query, {'params': params});
-        }
-
-        // determine dominante type for each attribute
-        query = `MATCH ()-[e:${relation}]->()
-                 WITH e, keys(e) AS keys
-                 UNWIND keys as key
-                 RETURN key as attr, typeOf(e[key]) AS attr_type, count(1) as count
-                 ORDER BY attr`
-        res = await graph.query(query);
-
-        let current_attr = null;
-        let max_count;
-        let dominant_type;
-
-        for (let j = 0; j < res.data.length; j++) {
-            let record = res.data[j];
-            let attr   = record['attr'];
-            let count  = record['count'];
-            let type   = record['attr_type'];
-
-            // done processing current attribute
-            if (current_attr != attr) {
-                if(current_attr != null) {                    
-                    let params = {'name': relation, 'attr': current_attr, 'type': dominant_type};
-                    let query  = `MATCH (r:Relation{name:$name})-[:HAS]->(a:Attribute{name:$attr})
-                                  SET a.type = $type`;
-                    await schema_graph.query(query, {'params': params});
-                }
-
-                // reset state
-                max_count     = count;
-                current_attr  = attr;
-                dominant_type = type;
-            }
-
-            if(max_count < count) {
-                max_count     = count;
-                dominant_type = type;
-            }
-        }
-
-        if(current_attr != null) {
-            // handle last attribute
-            query = `MATCH (r:Relation{name:$name})-[:HAS]->(a:Attribute{name:$attr})
-                     SET a.type = $type`;
-            await schema_graph.query(query, {'params': {'name': relation, 'attr': current_attr, 'type': dominant_type}});
-        }
-    }
-
-    // type or relations:
-    // relationship type 'R' connect src label 'A' to dest label 'B'
-    query = `MATCH (a)-[e]->(b)
-             RETURN type(e) as rel, collect(distinct {src: labels(a)[0], dest:labels(b)[0]}) as ends`
-    res = await graph.query(query);
-    let connections: any = res.data;
-
-    for (let i = 0; i < connections.length; i++) {
-        let connection = connections[i];
-        let relation   = connection['rel'];
-        let ends       = connection['ends'];
-        let connects   = [];
-
-        for(let j = 0; j < ends.length; j++) {
-            let src  = ends[j]['src'];
-            let dest = ends[j]['dest'];
-            connects.push(src);
-            connects.push(dest);
-        }
-
-        let params = {'name': relation, 'connects': connects};
-        let query  = `MATCH (r:Relation {name:$name})
-                      SET r.connects = $connects`
-        await schema_graph.query(query, {'params': params});
-    }
-}
-
-// returns graph's schema
-// labels and all attributes associated with them,
-// relationship-types and all attributes associated with them.
-export async function graphSchema
-(
-    graphId: string,
-    db: FalkorDB
-) {
-    const schemaGraphId = graphId + '-schema';
-    const graphs = await db.list();
-    if(!graphs.includes(schemaGraphId)) {
-        console.log(`${schemaGraphId} is missing!`);
-        return null;
-    }
-
-    const schemaGraph = db.selectGraph(schemaGraphId);
-
-    // graph schema
-    let schema: {
-        labels: Record<string, any>;
-        relations: Record<string, any>;
-    } = {
-        'labels': {},
-        'relations': {}
-    };
-
-    //-------------------------------------------------------------------------
-    // collect labels and the attributes associated with them
-    //-------------------------------------------------------------------------
-
-    let query = `MATCH (l:Label)-[:HAS]->(a:Attribute)
-                 OPTIONAL MATCH (l)-[:HAS]->(a:Attribute)
-                 RETURN l.name as label, l.count as node_count, collect(a) as attributes`;
-    let res = await schemaGraph.query(query);
-    let labels: any = res.data;
-
-    for (let i = 0; i < labels.length; i++) {
-        let label: string      = labels[i]['label'];
-        let node_count: number = labels[i]['node_count'];
-        let attributes: any[]  = labels[i]['attributes'];
-        
-        schema['labels'][label] = { };
-        schema['labels'][label]['node_count'] = node_count;
-        schema['labels'][label]['attributes'] = { };
-
-        for (let j = 0; j < attributes.length; j++) {
-            let attr      = attributes[j].properties.name;
-            let attr_type = attributes[j].properties.type;
-            schema['labels'][label]['attributes'][attr] = { 'type': attr_type };
-        }
-    }
-
-    //-------------------------------------------------------------------------
-    // collect relations and the attributes associated with them
-    //-------------------------------------------------------------------------
-
-    query = `MATCH (r:Relation)
-             OPTIONAL MATCH (r)-[:HAS]->(a:Attribute)
-             RETURN r as r, collect(a) as attributes`;
-    res = await schemaGraph.query(query);
-    let relationships: any = res.data;
-
-    for (let i = 0; i < relationships.length; i++) {
-        let r: any  = relationships[i]['r'];
-        let attributes: any[] = relationships[i]['attributes'];
-
-        let relation   = r.properties.name;
-        let connects   = r.properties.connects;
-        let edge_count = r.properties.count;
-
-        schema['relations'][relation] = { };        
-        schema['relations'][relation]['connect']    = connects;
-        schema['relations'][relation]['edge_count'] = edge_count;
-        schema['relations'][relation]['attributes'] = { };
-
-        for (let j = 0; j < attributes.length; j++) {
-            let attr      = attributes[j].properties.name;
-            let attr_type = attributes[j].properties.type;
-            schema['relations'][relation]['attributes'][attr] = { 'type': attr_type };
-        }
-    }
-
-    return schema;
-}
diff --git a/app/api/repo/questions.ts b/app/api/repo/questions.ts
deleted file mode 100644
index e09d7f4..0000000
--- a/app/api/repo/questions.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const QUESTIONS = [
-    "List a few recursive functions",
-    "What is the name of the most used method?",
-    "Who is calling the most used method?",
-    "Which function has the largest number of arguments? List a few arguments",
-    "Show a calling path between the drop_edge_range_index function and _query, only return function(s) names",
-];
diff --git a/app/api/repo/repositories.ts b/app/api/repo/repositories.ts
deleted file mode 100644
index 92e062a..0000000
--- a/app/api/repo/repositories.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const RESPOSITORIES = [
-    "https://github.com/falkordb/falkordb-py",
-    "https://github.com/pallets/click",
-    "https://github.com/psf/requests"
-]
diff --git a/app/api/repo/route.ts b/app/api/repo/route.ts
index 4c1cb11..06d6199 100644
--- a/app/api/repo/route.ts
+++ b/app/api/repo/route.ts
@@ -1,322 +1,46 @@
-import os from 'os';
-import path from 'path';
-import git from 'isomorphic-git';
-import http from 'isomorphic-git/http/node';
-import Parser from 'web-tree-sitter';
-
-import { promises as fs } from 'fs';
-import { SyntaxNode } from 'web-tree-sitter';
 import { NextRequest, NextResponse } from "next/server";
-import { FalkorDB, Graph } from 'falkordb';
-import { RESPOSITORIES } from './repositories';
-import Language from '@/lib/languages/language';
-import Python from '@/lib/languages/python'
-
-const GraphOps = require('./graph_ops');
-const LIMITED_MODE = process.env.NEXT_PUBLIC_MODE?.toLowerCase() === 'limited';
-
-//-----------------------------------------------------------------------------
-// Tree-Sitter queries
-//-----------------------------------------------------------------------------
-let parser: Parser;
-let language: Language;
-
-// Process Class declaration
-async function processClassDeclaration
-	(
-		source_file: string,
-		graph: Graph,
-		match: Parser.QueryMatch
-	) {
-	let class_node = match.captures[0].node;
-	let class_name = match.captures[1].node.text;
-	let class_src_end = class_node.endPosition.row;
-	let class_src_start = class_node.startPosition.row;
-
-	// Create Class node
-	await GraphOps.create_class(source_file, graph, class_name, class_src_start, class_src_end);
-}
-
-// Process function declaration
-async function processFunctionDeclaration
-	(
-		source_file: string,
-		graph: Graph,
-		match: Parser.QueryMatch
-	) {
-	let function_node = match.captures[0].node;
-	let function_name = match.captures[1].node.text;
-	let function_args = match.captures[2].node;
-
-	//-------------------------------------------------------------------------
-	// Determine function parent
-	//-------------------------------------------------------------------------
-
-	let parent: any = function_node.parent;
-
-	while (parent != null && parent.type != 'class_definition') {
-		parent = parent.parent;
-	}
-
-	if (parent == null) {
-		// function isn't part of a Class
-		// this is a Module level function
-		const file_components = source_file.split("/");
-		parent = file_components[file_components.length - 1];
-	} else {
-		let identifier_matches = language.identifier_query.matches(parent)[0].captures;
-		const identifierNode = identifier_matches[0].node;
-		parent = identifierNode.text;
-	}
-
-	//-------------------------------------------------------------------------
-	// Extract function args
-	//-------------------------------------------------------------------------
-
-	let args: string[] = [];
-	for (let i = 0; i < function_args.namedChildCount; i++) {
-		let child_node: SyntaxNode = function_args.namedChild(i) as SyntaxNode;
-		// if parameter is an identifier e.g. f(a)
-		// then simply 
-		if (child_node.type == 'identifier') {
-			args.push(child_node.text);
-		} else {
-			let identifier_matches = language.identifier_query.matches(child_node)
-			if (identifier_matches.length == 0) {
-				console.log("Investigate!");
-				continue;
-			}
-			let captures = identifier_matches[0].captures;
-			const identifierNode = captures[0].node;
-			args.push(identifierNode.text);
-		}
-	}
-
-	let src = function_node.text;
-	let function_src_end = function_node.endPosition.row;
-	let function_src_start = function_node.startPosition.row;
-
-	// Create Function node
-	await GraphOps.create_function(source_file, graph, function_name, parent, args,
-		function_src_start, function_src_end, src);
-}
-
-// Process function call
-async function processFunctionCall
-	(
-		source_file: string,
-		graph: Graph,
-		caller: string,
-		caller_src_start: number,
-		caller_src_end: number,
-		match: Parser.QueryMatch
-	) {
-	let call = match.captures[0].node;	   // caller
-	let callee = match.captures[1].node.text;  // called function
-	let call_src_end = call.endPosition.row;         // call begins on this line number
-	let call_src_start = call.startPosition.row;       // call ends on this line number
-
-	// Create Function call edge
-	await GraphOps.create_function_call(source_file, graph, caller, callee,
-		caller_src_start, caller_src_end, call_src_start, call_src_end);
-}
-
-// Process first pass
-// Introduces:
-// 1. Modules
-// 2. Class declarations
-// 3. Function declarations
-async function processFirstPass
-	(
-		source_files: string[],
-		graph: Graph
-	) {
-	for (let source_file of source_files) {
-		console.log("Processing file: " + source_file);
-
-		await GraphOps.create_module(source_file, graph);
-
-		const src = await fs.readFile(source_file, 'utf8');
-
-		// Construct an AST from src
-		const tree = parser.parse(src);
-
-		// Match all Class definitions
-		let class_matches = language.class_definition_query.matches(tree.rootNode);
-
-		// Iterate over each matched Class
-		for (let class_match of class_matches) {
-			await processClassDeclaration(source_file, graph, class_match);
-		}
-
-		// Match all function definition within the current class
-		let function_matches = language.function_definition_query.matches(tree.rootNode);
-		for (let function_match of function_matches) {
-			await processFunctionDeclaration(source_file, graph, function_match);
-		}
-	}
-}
-
-// Process second pass
-// Introduces:
-// 1. Function calls
-async function processSecondPass
-	(
-		source_files: string[],
-		graph: Graph
-	) {
-	// for each source file
-	for (let source_file of source_files) {
-		const src = await fs.readFile(source_file, 'utf8');
-
-		// Construct an AST from src
-		const tree = parser.parse(src);
-
-		// Match all Function definitions
-		let function_matches = language.function_definition_query.matches(tree.rootNode);
 
-		// Iterate over each matched Function
-		for (let function_match of function_matches) {
-			let function_node = function_match.captures[0].node;
-			let function_name = function_match.captures[1].node.text;
-			let function_src_start = function_node.startPosition.row;
-			let function_src_end = function_node.endPosition.row;
-
-			// Match all function calls: `f()` within the current function
-			let function_call_matches = language.function_call_query.matches(function_node);
-			for (let function_call_match of function_call_matches) {
-				await processFunctionCall(source_file, graph, function_name,
-					function_src_start, function_src_end, function_call_match);
+export async function GET() {
+	try {
+		const result = await fetch(`${process.env.BEAKEND_URL}/list_repos`, {
+			method: 'GET',
+			headers: {
+				"Authorization": process.env.SECRET_TOKEN!,
 			}
+		})
 
-			// Match all function calls: `Obj.foo()` within the current function
-			function_call_matches = language.function_attr_call_query.matches(function_node);
-			for (let function_call_match of function_call_matches) {
-				await processFunctionCall(source_file, graph, function_name,
-					function_src_start, function_src_end, function_call_match);
-			}
+		if (!result.ok) {
+			throw new Error(await result.text())
 		}
-	}
-}
 
-async function BuildGraph
-	(
-		db: FalkorDB,
-		graphId: string,
-		graph: Graph,
-		repo_root: string
-	) {
-	console.log("BuildGraph");
+		const { repositories } = await result.json()
 
-	// Initialize Tree-Sitter
-	await InitializeTreeSitter();
-
-	// Create graph indicies
-	GraphOps.create_indices(graph);
-
-	//--------------------------------------------------------------------------
-	// collect all source files in repo
-	//--------------------------------------------------------------------------
-
-	let source_files: string[] = [];
-	let walk = async function (dir: string) {
-		let files = await fs.readdir(dir);
-		for (let file of files) {
-			let file_path = path.join(dir, file);
-			let file_stat = await fs.stat(file_path);
-			if (file_stat.isDirectory()) { await walk(file_path); }
-			else if (file.endsWith(".py")) { source_files.push(file_path); }
-		}
+		return NextResponse.json({ result: repositories }, { status: 200 })
+	} catch (err) {
+		return NextResponse.json({ message: (err as Error).message }, { status: 400 })
 	}
-	await walk(repo_root);
-
-	//--------------------------------------------------------------------------
-	// process each source file
-	//--------------------------------------------------------------------------
-
-	// first pass, declarations only.
-	await processFirstPass(source_files, graph);
-
-	// second pass calls.
-	await processSecondPass(source_files, graph);
-
-	// create schema graph
-	await GraphOps.graphCreateSchema(graph, graphId, db);
-
-	console.log("Done BuildGraph");
-}
-
-async function InitializeTreeSitter() {
-	parser = new Parser();
-	language = new Python();
-	parser.setLanguage(language.language);
 }
 
 export async function POST(request: NextRequest) {
-	const body = await request.json();
-	const url = body.url;
-	if (!url) {
-		return NextResponse.json({ message: 'URL not provided' }, { status: 400 })
-	}
-	if (LIMITED_MODE && !RESPOSITORIES.includes(url)) {
-		return NextResponse.json({ message: 'Repository not supported' }, { status: 401 })
-	}
-
-	const urlParts = url.split('/');
-	if (urlParts.length < 2) {
-		return NextResponse.json({ message: 'Invalid URL' }, { status: 400 })
-	}
-	const organization = urlParts[urlParts.length - 2];
-	const repo = urlParts[urlParts.length - 1];
-
-	//-------------------------------------------------------------------------
-	// Connect to FalkorDB
-	//-------------------------------------------------------------------------
 
-	const db = await FalkorDB.connect(
-		{
-			url: process.env.FALKORDB_URL || "falkor://localhost:6379"
-		}
-	);
-
-	// Download Github Repo into a temporary folder
-	// Create temporary folder
-
-	const graphId = `${organization}-${repo}`;
-	const graph = db.selectGraph(graphId);
-
-	const graphs = await db.list();
-	let graph_exists = graphs.includes(graphId);
-	if (!graph_exists) {
-		const tmp_dir = os.tmpdir();
+	const url = request.nextUrl.searchParams.get('url');
 
-		//---------------------------------------------------------------------
-		// process repo
-		//---------------------------------------------------------------------
-
-		let repo_root = path.join(tmp_dir, repo);
-
-		// check if repo was already cloned
-		try {
-			await fs.stat(repo_root)
-			console.log("Found folder");
-		} catch (error) {
-			//---------------------------------------------------------------------
-			// clone repo into temporary folder
-			//---------------------------------------------------------------------
-			try {
-				await git.clone({ fs, http, dir: repo_root, url, depth: 1 })
-				console.log("Cloned repo");
-			} catch (error) {
-				console.error(error);
-				return NextResponse.json({ message: 'Repository not found' }, { status: 404 })
+	try {
+		const result = await fetch(`${process.env.BEAKEND_URL}/process_repo`, {
+			method: 'POST',
+			body: JSON.stringify({ repo_url: url, ignore: ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"] }),
+			headers: {
+				"Authorization": process.env.SECRET_TOKEN!,
+				'Content-Type': 'application/json'
 			}
+		})
+
+		if (!result.ok) {
+			throw new Error(await result.text())
 		}
 
-		await BuildGraph(db, graphId, graph, repo_root);
+		return NextResponse.json({ message: "success" }, { status: 200 })
+	} catch (err) {
+		return NextResponse.json({ message: (err as Error).message }, { status: 400 })
 	}
-
-	let code_graph = await GraphOps.projectGraph(graph, 600);
-	
-	return NextResponse.json({ id: graphId, nodes: code_graph.nodes, edges: code_graph.edges }, { status: 201 })
 }
\ No newline at end of file
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
new file mode 100644
index 0000000..d314fe8
--- /dev/null
+++ b/app/components/Input.tsx
@@ -0,0 +1,193 @@
+import { toast } from "@/components/ui/use-toast"
+import { getCategoryColorName, getCategoryColorValue, Graph } from "./model"
+import { useEffect, useRef, useState } from "react"
+import { PathNode } from "../page"
+import { cn } from "@/lib/utils"
+import twcolors from 'tailwindcss/colors'
+
+let colors = twcolors as any
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+    value?: string
+    graph: Graph
+    onValueChange: (node: PathNode) => void
+    handelSubmit?: (node: any) => void
+    icon?: React.ReactNode
+    node?: PathNode
+    parentClassName?: string
+    scrollToBottom?: () => void
+}
+
+export default function Input({ value, onValueChange, handelSubmit, graph, icon, node, className, parentClassName, scrollToBottom, ...props }: Props) {
+
+    const [open, setOpen] = useState(false)
+    const [options, setOptions] = useState<any[]>([])
+    const [selectedOption, setSelectedOption] = useState<number>(0)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        setSelectedOption(0)
+
+        if (open) {
+            scrollToBottom && scrollToBottom()
+        }
+    }, [open])
+
+    useEffect(() => {
+        const timeout = setTimeout(async () => {
+
+            if (!value || node?.id) {
+                if (!value) {
+                    setOptions([])
+                }
+                setOpen(false)
+                return
+            }
+
+            const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}&type=autoComplete`, {
+                method: 'POST'
+            })
+
+            if (!result.ok) {
+                toast({
+                    variant: "destructive",
+                    title: "Uh oh! Something went wrong.",
+                    description: "Please try again later.",
+                })
+                return
+            }
+
+            const json = await result.json()
+            const { completions } = json.result
+
+            setOptions(completions || [])
+
+            if (completions?.length > 0) {
+                setOpen(true)
+            } else {
+                setOpen(false)
+            }
+        }, 500)
+
+        return () => clearTimeout(timeout)
+    }, [value])
+
+    const handelKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        switch (e.code) {
+            case "Enter": {
+                e.preventDefault()
+                const option = options.find((o, i) => i === selectedOption)
+                if (!option) return
+                if (handelSubmit) {
+                    handelSubmit(option)
+                } else {
+                    if (!open) return
+                    onValueChange({ name: option.properties.name, id: option.id })
+                }
+                setOpen(false)
+                return
+            }
+            case "ArrowUp": {
+                e.preventDefault()
+                setSelectedOption(prev => {
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: (prev <= 0 ? options.length - 1 : prev - 1) * 64 })
+                    return prev <= 0 ? options.length - 1 : prev - 1
+                })
+                return
+            }
+            case "ArrowDown": {
+                e.preventDefault()
+                setSelectedOption(prev => {
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: ((prev + 1) % options.length) * 64 })
+                    return (prev + 1) % options.length
+                })
+                return
+            }
+            case "Space": {
+                if (e.ctrlKey) {
+                    e.preventDefault()
+                    setOpen(true)
+                }
+                return
+            }
+            case "Escape": {
+                e.preventDefault()
+                setOpen(false)
+            }
+        }
+    }
+
+    return (
+        <div
+            className={cn("w-[20dvw] relative pointer-events-none rounded-md gap-4", parentClassName)}
+        >
+            <input
+                ref={inputRef}
+                onKeyDown={handelKeyDown}
+                className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
+                value={value || ""}
+                onChange={(e) => {
+                    const newVal = e.target.value
+                    onValueChange({ name: newVal })
+                }}
+                {...props}
+                onBlur={(e) => {
+                    if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+                        setOpen(false)
+                    }
+                }}
+            />
+            {
+                open &&
+                <div
+                    ref={containerRef}
+                    className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md max-h-[50dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
+                    style={{
+                        top: (inputRef.current?.clientHeight || 0) + 16
+                    }}
+                >
+                    {
+                        options.map((option, index) => {
+                            const label = option.labels[0]
+                            const name = option.properties.name
+                            const path = option.properties.path
+                            const colorName = getCategoryColorName(graph.CategoriesMap.get(label)!.index)
+                            const color = getCategoryColorValue(graph.CategoriesMap.get(label)!.index)
+                            return (
+                                <button
+                                    className={cn(
+                                        "w-full flex gap-3 p-1 items-center rounded-md",
+                                        selectedOption === index && "bg-gray-100"
+                                    )}
+                                    onMouseEnter={() => setSelectedOption(index)}
+                                    onMouseLeave={() => setSelectedOption(-1)}
+                                    onClick={() => {
+                                        debugger
+                                        onValueChange({ name: option.properties.name, id: option.id })
+                                        handelSubmit && handelSubmit(option)
+                                        setOpen(false)
+                                    }}
+                                    key={option.id}
+                                >
+                                    <p className={`truncate w-[30%] bg-${colorName} bg-opacity-20 p-1 rounded-md`} style={{ color }} title={label}>{label}</p>
+                                    <div className="w-1 grow text-start">
+                                        <p className="truncate" title={name}>
+                                            {name}
+                                        </p>
+                                        <p className="truncate p-1 text-xs font-medium text-gray-400" title={path}>
+                                            {path}
+                                        </p>
+                                    </div>
+                                </button>
+                            )
+                        })
+                    }
+                </div>
+            }
+            <div className='absolute top-2 right-3' >
+                {icon}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 0402573..c2df1aa 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1,39 +1,198 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
-import { useEffect, useRef, useState } from "react";
-import { QUESTIONS } from "../api/repo/questions";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dispatch, FormEvent, MutableRefObject, SetStateAction, useEffect, useRef, useState } from "react";
 import Image from "next/image";
+import { AlignLeft, ArrowRight, ChevronDown, Lightbulb, Undo2 } from "lucide-react";
+import { Path } from "../page";
+import Input from "./Input";
+import { Graph } from "./model";
+import { cn } from "@/lib/utils";
+import { LAYOUT } from "./code-graph";
+import { TypeAnimation } from "react-type-animation";
 
 enum MessageTypes {
     Query,
     Response,
+    Path,
+    PathResponse,
     Pending,
+    Text,
 }
 
 interface Message {
-    text: string;
     type: MessageTypes;
+    text?: string;
+    paths?: { nodes: any[], edges: any[] }[];
 }
 
-export function Chat(props: { repo: string }) {
+interface Props {
+    repo: string
+    path: Path | undefined
+    setPath: Dispatch<SetStateAction<Path | undefined>>
+    graph: Graph
+    chartRef: MutableRefObject<cytoscape.Core | null>
+    selectedPathId: string | undefined
+    isPath: boolean
+    setIsPath: (isPathResponse: boolean) => void
+}
+
+const RemoveLastPath = (messages: Message[]) => {
+    const index = messages.findIndex((m) => m.type === MessageTypes.Path)
+
+    if (index !== -1) {
+        messages = [...messages.slice(0, index - 2), ...messages.slice(index + 1)];
+        messages = RemoveLastPath(messages)
+    }
+
+    return messages
+}
+
+export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isPath, setIsPath }: Props) {
 
     // Holds the messages in the chat
     const [messages, setMessages] = useState<Message[]>([]);
 
+    // Holds the messages in the chat
+    const [paths, setPaths] = useState<{ nodes: any[], edges: any[] }[]>([]);
+
+    const [selectedPath, setSelectedPath] = useState<{ nodes: any[], edges: any[] }>();
+
     // Holds the user input while typing
     const [query, setQuery] = useState('');
 
+    const [isPathResponse, setIsPathResponse] = useState(false);
+
+    const [tipOpen, setTipOpen] = useState(false);
+
     // A reference to the chat container to allow scrolling to the bottom
-    const bottomRef: React.RefObject<HTMLDivElement> = useRef(null);
+    const containerRef: React.RefObject<HTMLDivElement> = useRef(null);
 
-    // A function that handles the change event of the url input box
-    async function handleQueryInputChange(event: any) {
+    const tipRef: React.RefObject<HTMLDivElement> = useRef(null);
+
+    const isSendMessage = messages.some(m => m.type === MessageTypes.Pending) || (messages.some(m => m.text === "Please select a starting point and the end point. Select or press relevant item on the graph") && !messages.some(m => m.type === MessageTypes.Path))
 
-        if (event.key === "Enter") {
-            await handleQueryClick(event);
+    useEffect(() => {
+        if (tipOpen) {
+            tipRef.current?.focus()
         }
+    }, [tipOpen])
+
+    useEffect(() => {
+        const p = paths.find((path) => [...path.edges, ...path.nodes].some((e: any) => e.id === selectedPathId))
+
+        if (!p) return
+
+        handelSetSelectedPath(p)
+    }, [selectedPathId])
+
+    useEffect(() => {
+        handelSubmit()
+    }, [path])
+
+    useEffect(() => {
+        if (isPath) return
+        setIsPathResponse(false)
+        setSelectedPath(undefined)
+        setPaths([])
+    }, [isPath])
+
+    useEffect(() => {
+        setIsPath(isPathResponse)
+    }, [isPathResponse])
+
+    const handelSetSelectedPath = (p: { nodes: any[], edges: any[] }) => {
+        const chart = chartRef.current
+
+        if (!chart) return
+
+        setSelectedPath(prev => {
+            if (prev) {
+                if (isPathResponse && paths.some((path) => [...path.nodes, ...path.edges].every((e: any) => [...prev.nodes, ...prev.edges].some((el: any) => el.id === e.id)))) {
+                    chart.edges().forEach(e => {
+                        const id = e.id()
+
+                        if (prev.edges.some(el => el.id == id) && !p.edges.some(el => el.id == id)) {
+                            e.style({
+                                width: 0.5,
+                                "line-style": "dashed",
+                                "line-color": "#FF66B3",
+                                "arrow-scale": 0.3,
+                                "target-arrow-color": "#FF66B3",
+                            })
+                        }
+                    })
+                } else {
+                    const elements = chart.elements().filter(e => [...prev.edges, ...prev.nodes].some(el => el.id == e.id() && ![...p.nodes, ...p.edges].some(ele => ele.id == e.id()))).removeStyle()
+                    if (isPathResponse) {
+                        elements.forEach(e => {
+                            if (e.isNode()) {
+                                e.style({
+                                    "border-width": 0.5,
+                                    "color": "gray",
+                                    "border-color": "black",
+                                    "background-color": "gray",
+                                    "opacity": 0.5
+                                });
+                            }
+
+                            if (e.isEdge()) {
+                                e.style({
+                                    "line-color": "gray",
+                                    "target-arrow-color": "gray",
+                                    "opacity": 0.5,
+                                });
+                            }
+                        })
+                    }
+                }
+            }
+            return p
+        })
+
+        if (isPathResponse && paths.some((path) => [...path.nodes, ...path.edges].every((e: any) => [...p.nodes, ...p.edges].some((el: any) => el.id === e.id)))) {
+            chart.edges().forEach(e => {
+                const id = e.id()
+
+                if (p.edges.some(el => el.id == id)) {
+                    e.style({
+                        width: 1,
+                        "line-style": "solid",
+                        "line-color": "#FF66B3",
+                        "arrow-scale": 0.6,
+                        "target-arrow-color": "#FF66B3",
+                    })
+                }
+            })
+            chart.elements().filter(el => [...p.nodes, ...p.edges].some(e => e.id == el.id())).layout(LAYOUT).run();
+        } else {
+            chart.elements().filter(el => [...p.nodes, ...p.edges].some(e => e.id == el.id())).forEach(el => {
+                if (el.id() == p.nodes[0].id || el.id() == p.nodes[p.nodes.length - 1].id) {
+                    el.removeStyle().style({
+                        "border-width": 1,
+                        "border-color": "#FF66B3",
+                        "border-opacity": 1,
+                    });
+                } else if (el.isNode()) {
+                    el.removeStyle().style({
+                        "border-width": 0.5,
+                        "border-color": "#FF66B3",
+                        "border-opacity": 1,
+                    });
+                }
+                if (el.isEdge()) {
+                    el.removeStyle().style({
+                        width: 1,
+                        "line-style": "solid",
+                        "line-color": "#FF66B3",
+                        "arrow-scale": 0.6,
+                        "target-arrow-color": "#FF66B3",
+                    })
+                }
+            }).layout(LAYOUT).run();
+        }
+    }
+
+    // A function that handles the change event of the url input box
+    async function handleQueryInputChange(event: any) {
 
         // Get the new value of the input box
         const value = event.target.value;
@@ -43,117 +202,311 @@ export function Chat(props: { repo: string }) {
     }
 
     // Send the user query to the server
-    async function sendQuery(q: string) {
+    async function sendQuery(event: FormEvent) {
+
+        event.preventDefault();
+
+        const q = query.trim()
+
         if (!q) {
             toast({
                 variant: "destructive",
                 title: "Uh oh! Something went wrong.",
                 description: "Please enter a question.",
             })
-            setQuery("")
             return
         }
 
-        setMessages((messages) => [...messages, { text: q, type: MessageTypes.Query }, { text: "", type: MessageTypes.Pending }]);
+        setQuery("")
 
-        return fetch(`/api/repo/${props.repo}?q=${encodeURIComponent(q)}&type=text`, {
-            method: 'GET'
-        }).then(async (result) => {
-            if (result.status >= 300) {
-                throw Error(await result.text())
+        setMessages((messages) => [...messages, { text: q, type: MessageTypes.Query }, { type: MessageTypes.Pending }]);
 
-            }
+        const result = await fetch(`/api/chat/${repo}?msg=${encodeURIComponent(q)}`, {
+            method: 'POST'
+        })
 
-            return result.json()
-        }).then(data => {
-            // Create an array of messages from the current messages remove the last pending message and add the new response
-            setMessages(function (messages) {
-                if (messages[messages.length - 1].type === MessageTypes.Pending) {
-                    // Remove the last pending message if exists
-                    messages = messages.slice(0, -1);
-                }
-                return [...messages, { text: data.result, type: MessageTypes.Response }];
-            });
-        }).catch((error) => {
-            setMessages(function (messages) {
-                if (messages[messages.length - 1].type === MessageTypes.Pending) {
-                    // Remove the last pending message if exists
-                    return messages.slice(0, -1);
-                }
-                return messages
+        if (!result.ok) {
+            setMessages((prev) => {
+                prev = [...prev.slice(0, -1)];
+                return [...prev, { type: MessageTypes.Response, text: "Sorry but I couldn't answer your question, please try rephrasing." }];
             });
+            return
+        }
+
+        const json = await result.json()
+
+        setMessages((prev) => {
+            prev = prev.slice(0, -1);
+            return [...prev, { text: json.result.response, type: MessageTypes.Response }];
+        });
+
+    }
+
+    // Scroll to the bottom of the chat on new message
+    useEffect(() => {
+        setTimeout(() => {
+            containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight);
+        }, 300)
+    }, [messages]);
+
+    const handelSubmit = async () => {
+        setSelectedPath(undefined)
+
+        const chart = chartRef?.current
+
+        if (!chart || !path?.start?.id || !path.end?.id) return
+
+        const result = await fetch(`/api/repo/${repo}/${path.start.id}/?targetId=${path.end.id}`, {
+            method: 'POST'
+        })
+
+        if (!result.ok) {
             toast({
                 variant: "destructive",
                 title: "Uh oh! Something went wrong.",
-                description: error.message,
-            });
+                description: await result.text(),
+            })
+            return
+        }
+
+        const json = await result.json()
+
+        if (json.result.paths.length === 0) {
+            toast({
+                title: `No path found`,
+                description: `no path found between node ${path.start.name} - ${path.end.name}`,
+            })
+            return
+        }
+
+        const formattedPaths: { nodes: any[], edges: any[] }[] = json.result.paths.map((p: any) => ({ nodes: p.filter((node: any, i: number) => i % 2 === 0), edges: p.filter((edge: any, i: number) => i % 2 !== 0) }))
+        chart.add(formattedPaths.flatMap((p: any) => graph.extend(p, false, path)))
+        formattedPaths.forEach(p => p.edges.forEach(e => e.id = `_${e.id}`))
+        graph.Elements.forEach((element: any) => {
+            const { id } = element.data
+            const e = chart.elements().filter(el => el.id() == id)
+            if (id == path.start?.id || id == path.end?.id) {
+                e.style({
+                    'border-width': 1,
+                    'border-color': '#FF66B3',
+                    'border-opacity': 1,
+                });
+            } else if (formattedPaths.some((p: any) => [...p.nodes, ...p.edges].some((el: any) => el.id == id))) {
+                if (e.isNode()) {
+                    e.style({
+                        'border-width': 0.5,
+                        'border-color': '#FF66B3',
+                        'border-opacity': 1,
+                    });
+                }
+
+                if (e.isEdge()) {
+                    e.style({
+                        "line-style": "dashed",
+                        "line-color": "#FF66B3",
+                        "target-arrow-color": "#FF66B3",
+                        "opacity": 1
+                    });
+                }
+            } else {
+                if (e.isNode()) {
+                    e.style({
+                        "border-width": 0.5,
+                        "color": "gray",
+                        "border-color": "black",
+                        "background-color": "gray",
+                        "opacity": 0.5
+                    });
+                }
+
+                if (e.isEdge()) {
+                    e.style({
+                        "line-color": "gray",
+                        "target-arrow-color": "gray",
+                        "opacity": 0.5,
+                    });
+                }
+            }
+        })
+        const elements = chart.elements().filter((element) => {
+            return formattedPaths.some(p => [...p.nodes, ...p.edges].some((node) => node.id == element.id()))
         });
+        elements.layout(LAYOUT).run()
+        setPaths(formattedPaths)
+        setMessages(prev => [...prev.slice(0, -2), { type: MessageTypes.PathResponse, paths: formattedPaths }])
+        setPath(undefined)
+        setIsPathResponse(true)
     }
 
-    // A function that handles the click event
-    async function handleQueryClick(event: any) {
-        event.preventDefault();
-        return sendQuery(query.trim());
-    }
+    const getTip = () =>
+        <>
+            <button
+                className="Tip"
+                onClick={() => {
+                    setTipOpen(false)
+                    setPath({})
+                    setMessages(prev => [
+                        ...RemoveLastPath(prev),
+                        { type: MessageTypes.Query, text: "Create a path" },
+                    ])
 
-    // On question selected from the predefined questions list
-    async function onQuestionSelected(value: string) {
-        setQuery(value)
-        return sendQuery(value)
-    }
+                    if (isPathResponse) {
+                        chartRef.current?.elements().removeStyle().layout(LAYOUT).run()
+                        setIsPathResponse(false)
+                    }
 
-    // Scroll to the bottom of the chat on new message
-    useEffect(() => {
-        bottomRef.current?.scrollTo(0, bottomRef.current?.scrollHeight);
-    }, [messages]);
+                    setTimeout(() => setMessages(prev => [...prev, {
+                        type: MessageTypes.Response,
+                        text: "Please select a starting point and the end point. Select or press relevant item on the graph"
+                    }]), 300)
+                    setTimeout(() => setMessages(prev => [...prev, { type: MessageTypes.Path }]), 4000)
+                }}
+            >
+                <Lightbulb />
+                <div>
+                    <h1 className="label">Show the path</h1>
+                    <p className="text">Fetch, update, batch, and navigate data efficiently</p>
+                </div>
+            </button>
+        </>
+
+    const getMessage = (message: Message, index?: number) => {
+        switch (message.type) {
+            case MessageTypes.Query: return (
+                <div key={index} className="flex flex-col gap-2">
+                    <div className="flex gap-2">
+                        <AlignLeft />
+                        <h1 className="text-lg font-medium">You</h1>
+                    </div>
+                    <p className="break-words whitespace-pre-wrap">{message.text}</p>
+                </div>
+            )
+            case MessageTypes.Response: return (
+                <div key={index} className="flex flex-col gap-2">
+                    <div className="flex gap-2">
+                        <Undo2 className="rotate-180" />
+                        <h1 className="text-lg font-medium break-words whitespace-pre-wrap">Answer</h1>
+                    </div>
+                    <TypeAnimation
+                        key={message.text}
+                        sequence={[message.text!]}
+                        speed={60}
+                        wrapper="span"
+                        cursor={false}
+                    />
+                </div>
+            )
+            case MessageTypes.Text: return (
+                <p key={index} >{message.text}</p>
+            )
+            case MessageTypes.Path: {
+                return (
+                    <div className="flex flex-col gap-4" key={index}>
+                        <Input
+                            parentClassName="w-full"
+                            graph={graph}
+                            onValueChange={({ name, id }) => setPath(prev => ({ start: { name, id }, end: prev?.end }))}
+                            value={path?.start?.name}
+                            placeholder="Start typing starting point"
+                            type="text"
+                            icon={<ChevronDown color="gray" />}
+                            node={path?.start}
+                            scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
+                        />
+                        <Input
+                            parentClassName="w-full"
+                            graph={graph}
+                            value={path?.end?.name}
+                            onValueChange={({ name, id }) => setPath(prev => ({ end: { name, id }, start: prev?.start }))}
+                            placeholder="Start typing end point"
+                            type="text"
+                            icon={<ChevronDown color="gray" />}
+                            node={path?.end}
+                            scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
+                        />
+                    </div>
+                )
+            }
+            case MessageTypes.PathResponse: return (
+                <div key={index} className="flex flex-col gap-2">
+                    {
+                        message.paths &&
+                        message.paths.map((p, i: number) => (
+                            <button
+                                key={i}
+                                className={cn("flex text-wrap border p-2 gap-2 rounded-md", p.nodes.length === selectedPath?.nodes.length && selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) && "border-[#FF66B3] bg-[#FFF0F7]")}
+                                onClick={() => {
+                                    if (selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id))) return
+                                    handelSetSelectedPath(p)
+                                    setIsPath(true)
+                                }}
+                            >
+                                <p className="font-bold">#{i}</p>
+                                <div className="flex flex-wrap">
+                                    {
+                                        p.nodes.map((node: any, j: number) => (
+                                            <span key={j} className={cn((j === 0 || j === p.nodes.length - 1) && "font-bold")}>
+                                                {` - ${node.properties.name}`}
+                                            </span>
+                                        ))
+                                    }
+                                </div>
+                            </button>
+                        ))
+                    }
+                </div>
+            )
+            default: return (
+                <div key={index} className="flex gap-2">
+                    <Image src="/dots.gif" width={100} height={10} alt="Waiting for response" />
+                </div>
+            )
+        }
+    }
 
     return (
-        <>
-            <main ref={bottomRef} className="border p-4 flex-1 space-y-4 overflow-auto">
+        <div className="h-full flex flex-col justify-between px-6 pt-10 pb-4 gap-4">
+            <main ref={containerRef} className="relative grow flex flex-col overflow-y-auto gap-6 px-4">
+                {
+                    messages.length === 0 &&
+                    <>
+                        <h1 className="font-oswald text-[20px] font-semibold leading-[32px] text-left text-[#13343B]">WELCOME TO OUR ASSISTANCE SERVICE</h1>
+                        <span className="text-base font-normal leading-5 text-left text-[#7D7D7D]">
+                            We can help you access and update only the needed
+                            data via paths, optimizing network requests with
+                            batching and catching for better performance.
+                        </span>
+                        {getTip()}
+                    </>
+                }
                 {
                     messages.map((message, index) => {
-                        if (message.type === MessageTypes.Query) {
-                            return (<div key={index} className="flex items-end gap-2 justify-end">
-                                <div className="rounded-lg bg-blue-500 text-white p-2">
-                                    <p className="text-sm">{message.text}</p>
-                                </div>
-                            </div>)
-                        } else if (message.type === MessageTypes.Response) {
-                            return (<div key={index} className="flex items-end gap-2">
-                                <div className="rounded-lg bg-zinc-200 p-2">
-                                    <p className="text-sm">{message.text}</p>
-                                </div>
-                            </div>)
-                        } else {
-                            return (<div key={index} className="flex items-end gap-2">
-                                <div>
-                                    <Image src="/dots.gif" width={100} height={10} alt="Waiting for response" />
-                                </div>
-                            </div>)
-                        }
+                        return getMessage(message, index)
                     })
                 }
+                {
+                    tipOpen &&
+                    <div ref={tipRef} className="bg-white fixed bottom-[85px] border rounded-md flex flex-col gap-3 p-2 overflow-y-auto" onBlur={() => setTipOpen(false)}>
+                        {getTip()}
+                    </div>
+                }
             </main>
-            <footer className="border p-4">
-                {props.repo &&
-                    <form className="flex flex-row gap-2" onSubmit={handleQueryClick}>
-                        <Select onValueChange={onQuestionSelected}>
-                            <SelectTrigger className="w-1/3">
-                                <SelectValue placeholder="Suggested questions" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {
-                                    QUESTIONS.map((question, index) => {
-                                        return <SelectItem key={index} value={question}>{question}</SelectItem>
-                                    })
-                                }
-                            </SelectContent>
-                        </Select>
-                        <Input className="w-2/3" placeholder="Type a question..." onChange={handleQueryInputChange} value={query}/>
-                        <Button>Send</Button>
-                    </form>
+            <footer>
+                {
+                    repo &&
+                    <div className="flex gap-4 px-4">
+                        <button disabled={isSendMessage} className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]" onClick={() => setTipOpen(prev => !prev)}>
+                            <Lightbulb />
+                        </button>
+                        <form className="grow flex items-center border rounded-md pr-2" onSubmit={sendQuery}>
+                            <input disabled={isSendMessage} className="grow p-4 rounded-md focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
+                            <button disabled={isSendMessage} className={`bg-gray-200 p-2 rounded-md ${!isSendMessage && 'hover:bg-gray-300'}`}>
+                                <ArrowRight color="white" />
+                            </button>
+                        </form>
+                    </div>
                 }
             </footer>
-        </>
+        </div>
     );
 }
diff --git a/app/components/code-graph.tsx b/app/components/code-graph.tsx
index 35db7e4..63a402d 100644
--- a/app/components/code-graph.tsx
+++ b/app/components/code-graph.tsx
@@ -1,19 +1,34 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import CytoscapeComponent from 'react-cytoscapejs'
-import { useContext, useEffect, useRef, useState } from "react";
-import { Category, Node } from "./model";
-import { RESPOSITORIES } from "../api/repo/repositories";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dispatch, MutableRefObject, SetStateAction, useContext, useEffect, useRef, useState } from "react";
+import { Node } from "./model";
 import { GraphContext } from "./provider";
-
-import cytoscape from 'cytoscape';
+import cytoscape, { ElementDefinition, EventObject, Position } from 'cytoscape';
 import fcose from 'cytoscape-fcose';
-import { Skeleton } from "@/components/ui/skeleton";
 import { Toolbar } from "./toolbar";
 import { Labels } from "./labels";
+import { GitFork, Search, X } from "lucide-react";
+import ElementMenu from "./elementMenu";
+import ElementTooltip from "./elementTooltip";
+import Combobox from "./combobox";
+import { toast } from '@/components/ui/use-toast';
+import { Path, PathNode } from '../page';
+import Input from './Input';
+import CommitList from './commitList';
+import { Checkbox } from '@/components/ui/checkbox';
 
-const LIMITED_MODE = process.env.NEXT_PUBLIC_MODE?.toLowerCase() === 'limited';
+interface Props {
+    onFetchGraph: (graphName: string) => void,
+    onFetchNode: (node: Node) => Promise<any[]>,
+    options: string[]
+    isShowPath: boolean
+    setPath: Dispatch<SetStateAction<Path | undefined>>
+    chartRef: MutableRefObject<cytoscape.Core | null>
+    selectedValue: string
+    selectedPathId: string | undefined
+    setSelectedPathId: (selectedPathId: string) => void
+    isPathResponse: boolean
+    setIsPathResponse: Dispatch<SetStateAction<boolean>>
+}
 
 // The stylesheet for the graph
 const STYLESHEET: cytoscape.Stylesheet[] = [
@@ -25,10 +40,10 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
             // to satisfy the linter...
             'active-bg-color': 'blue',
             'active-bg-opacity': 0.3,
-            "selection-box-border-color": 'blue',
-            "selection-box-border-width": 0,
-            "selection-box-opacity": 1,
-            "selection-box-color": 'blue',
+            "selection-box-border-color": 'gray',
+            "selection-box-border-width": 3,
+            "selection-box-opacity": 0.5,
+            "selection-box-color": 'gray',
             "outside-texture-bg-color": 'blue',
             "outside-texture-bg-opacity": 1,
         },
@@ -37,16 +52,19 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
         selector: "node",
         style: {
             label: "data(name)",
+            "color": "black",
             "text-valign": "center",
-            "text-halign": "center",
+            "text-wrap": "ellipsis",
+            "text-max-width": "10rem",
             shape: "ellipse",
-            height: 10,
-            width: 10,
-            "border-width": 0.15,
+            height: "15rem",
+            width: "15rem",
+            "border-width": 0.3,
+            "border-color": "black",
             "border-opacity": 0.5,
             "background-color": "data(color)",
-            "font-size": "3",
-            "overlay-padding": "1px",
+            "font-size": "3rem",
+            "overlay-padding": "1rem",
         },
     },
     {
@@ -55,6 +73,14 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
             "overlay-opacity": 0,  // hide gray box around active node
         },
     },
+    {
+        selector: "node:selected",
+        style: {
+            'border-width': 0.5,
+            'border-color': 'black',
+            'border-opacity': 1,
+        },
+    },
     {
         selector: "edge",
         style: {
@@ -62,6 +88,7 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
             "line-color": "#ccc",
             "arrow-scale": 0.3,
             "target-arrow-shape": "triangle",
+            "target-arrow-color": "#ccc",
             label: "data(label)",
             'curve-style': 'straight',
             "text-background-color": "#ffffff",
@@ -70,67 +97,127 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
             "overlay-padding": "2px",
         },
     },
+    {
+        selector: "edge:active",
+        style: {
+            "overlay-opacity": 0,  // hide gray box around active node
+        },
+    }
 ]
 
-
 cytoscape.use(fcose);
 
-const LAYOUT = {
+export const LAYOUT = {
     name: "fcose",
     fit: true,
-    padding: 30,
+    padding: 80,
     avoidOverlap: true,
 }
 
-export function CodeGraph(parmas: { onFetchGraph: (url: string) => void, onFetchNode: (node: Node) => Promise<any[]> }) {
+export function CodeGraph({
+    onFetchGraph,
+    onFetchNode,
+    options,
+    isShowPath,
+    setPath,
+    chartRef,
+    selectedValue,
+    setSelectedPathId,
+    isPathResponse,
+    setIsPathResponse,
+    selectedPathId
+}: Props) {
 
     let graph = useContext(GraphContext)
 
-    // Holds the user input while typing
-    const [url, setURL] = useState('');
+    const [url, setURL] = useState("");
+    const [selectedObj, setSelectedObj] = useState<Node>();
+    const [tooltipLabel, setTooltipLabel] = useState<string>();
+    const [position, setPosition] = useState<Position>();
+    const [tooltipPosition, setTooltipPosition] = useState<Position>();
+    const [graphName, setGraphName] = useState<string>("");
+    const [searchNode, setSearchNode] = useState<PathNode>({});
+    const [commits, setCommits] = useState<any[]>([]);
+    const [nodesCount, setNodesCount] = useState<number>(0);
+    const [edgesCount, setEdgesCount] = useState<number>(0);
+    const [commitIndex, setCommitIndex] = useState<number>(0);
+    const [currentCommit, setCurrentCommit] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
 
-    // A reference to the chart container to allowing zooming and editing
-    const chartRef = useRef<cytoscape.Core | null>(null)
+    async function fetchCount() {
+        const result = await fetch(`/api/repo/${graphName}`, {
+            method: 'POST'
+        })
 
-    // A function that handles the change event of the url input box
-    async function handleRepoInputChange(event: any) {
-
-        // If the user pressed enter, submit the URL
-        if (event.key === "Enter") {
-            await handleSubmit(event);
+        if (!result.ok) {
+            toast({
+                variant: "destructive",
+                title: "Uh oh! Something went wrong.",
+                description: await result.text(),
+            })
+            return
         }
 
-        // Get the new value of the input box
-        let value: string = event.target.value;
-
-        // Update the url state
-        setURL(value);
-    }
+        const json = await result.json()
 
-    // A function that handles the click event
-    async function handleSubmit(event: any) {
-        event.preventDefault();
-        parmas.onFetchGraph(url);
+        setNodesCount(json.result.info.node_count)
+        setEdgesCount(json.result.info.edge_count)
+        setURL(json.result.info.repo_url)
     }
 
-    function onRepoSelected(value: string): void {
-        setURL(value)
-        parmas.onFetchGraph(value)
-    }
+    useEffect(() => {
+        if (!selectedValue) return
+        handelSelectedValue(selectedValue)
+    }, [selectedValue])
 
-    const defaultRepo = RESPOSITORIES[0];
-    // Fetch the default graph on first render
     useEffect(() => {
-        onRepoSelected(defaultRepo)
-    }, []);
+        if (!graphName) return
+
+        const run = async () => {
+            fetchCount()
+            const result = await fetch(`/api/repo/${graphName}/?type=commit`, {
+                method: 'POST'
+            })
+
+            if (!result.ok) {
+                toast({
+                    variant: "destructive",
+                    title: "Uh oh! Something went wrong.",
+                    description: await result.text(),
+                })
+                return
+            }
+
+            const json = await result.json()
+            const commitsArr = json.result.commits
+            setCommits(commitsArr)
+
+            if (commitsArr.length > 0) {
+                setCurrentCommit(commitsArr[commitsArr.length - 1].hash)
+                setCommitIndex(commitsArr.length)
+            }
+        }
 
-    function onCategoryClick(category: Category) {
+        run()
+    }, [graphName])
+
+    function handelSelectedValue(value: string) {
+        setGraphName(value)
+        onFetchGraph(value)
+    }
+
+    function onCategoryClick(name: string, show: boolean) {
         let chart = chartRef.current
         if (chart) {
-            let elements = chart.elements(`node[category = "${category.name}"]`)
-            category.show = !category.show
+            let elements = chart.elements(`node[category = "${name}"]`)
 
-            if (category.show) {
+            graph.Categories.forEach((category) => {
+                if (category.name === name) {
+                    category.show = show
+                }
+            })
+
+            if (show) {
                 elements.style({ display: 'element' })
             } else {
                 elements.style({ display: 'none' })
@@ -139,83 +226,291 @@ export function CodeGraph(parmas: { onFetchGraph: (url: string) => void, onFetch
         }
     }
 
+    const deleteNeighbors = (node: Node, chart: cytoscape.Core) => {
+        const neighbors = chart.elements(`#${node.id}`).outgoers()
+        neighbors.forEach((n) => {
+            const id = n.id()
+            const index = graph.Elements.findIndex(e => e.data.id === id);
+            const element = graph.Elements[index]
+
+            if (index === -1 || !element.data.collapsed) return
+
+            const type = "category" in element.data
+
+            if (element.data.expand) {
+                deleteNeighbors(element.data, chart)
+            }
+
+            graph.Elements.splice(index, 1);
+
+            if (type) {
+                graph.NodesMap.delete(Number(id))
+            } else {
+                graph.EdgesMap.delete(Number(id.split('_')[1]))
+            }
+
+            chart.remove(`#${id}`)
+        })
+
+    }
+
+    const handleDoubleTap = async (evt?: EventObject) => {
+
+        const chart = chartRef.current
+
+        if (!chart) return
+
+        let node: Node
+        let elements: ElementDefinition[]
+
+        if (evt) {
+            const { target } = evt
+            target.unselect()
+            node = target.json().data;
+        } else {
+            node = selectedObj!
+        }
+
+        const graphNode = graph.Elements.find(e => e.data.id === node.id);
+
+        if (!graphNode) return
+
+        if (!graphNode.data.expand) {
+            elements = await onFetchNode(node)
+
+            if (elements.length === 0) {
+                toast({
+                    title: "No neighbors found",
+                })
+                return
+            }
+
+            chart.add(elements);
+        } else {
+            deleteNeighbors(node, chart)
+        }
+
+        graphNode.data.expand = !graphNode.data.expand;
+        setSelectedObj(undefined)
+        chart.elements().layout(LAYOUT).run();
+    }
+
+    const handelTap = (evt: EventObject) => {
+        const chart = chartRef.current
+
+        if (!chart) return
+
+        const { target } = evt
+        setTooltipLabel(undefined)
+
+        if (isShowPath) {
+            setPath(prev => {
+                if (!prev?.start?.name || (prev.end?.name && prev.end?.name !== "")) {
+                    return ({ start: { id: Number(target.id()), name: target.data().name as string } })
+                } else {
+                    return ({ end: { id: Number(target.id()), name: target.data().name as string }, start: prev.start })
+                }
+            })
+            return
+        }
+
+        const position = target.renderedPosition()
+        setPosition(() => position ? { x: position.x, y: position.y + chart.zoom() * 8 } : { x: 0, y: 0 });
+        setSelectedObj(target.json().data)
+    }
+
+    const handelSearchSubmit = (node: any) => {
+        const chart = chartRef.current
+
+        if (!chart) return
+
+        const n = { name: node.properties.name, id: node.id }
+
+        let chartNode = chart.elements(`node[id = "${n.id}"]`)
+
+        if (chartNode.length === 0) {
+            const [newNode] = graph.extend({ nodes: [node], edges: [] })
+            chartNode = chart.add(newNode)
+        }
+
+        chartNode.select()
+        const layout = { ...LAYOUT, padding: 250 }
+        chartNode.layout(layout).run()
+        setSearchNode(n)
+    }
+
     return (
-        <>
-            <header className="border p-4">
-                <form className="flex flex-row gap-2" onSubmit={handleSubmit}>
-                    <Select onValueChange={onRepoSelected} defaultValue={defaultRepo}>
-                        <SelectTrigger className={LIMITED_MODE ? "border" : "border w-2/3"}>
-                            <SelectValue placeholder="Suggested repositories" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {
-                                RESPOSITORIES.map((repo, index) => {
-                                    return <SelectItem key={index} value={repo}>{repo}</SelectItem>
-                                })
-                            }
-                        </SelectContent>
-                    </Select>
-                    {
-                        !LIMITED_MODE &&
-                        <>
-                            <Input placeholder="Github repo URL" className="border" type="url" onChange={handleRepoInputChange} />
-                            <Button type="submit">Send</Button>
-                        </>
-                    }
-                </form>
+        <div ref={containerRef} className="h-full w-full flex flex-col gap-4 p-8 bg-gray-100">
+            <header className="flex flex-col gap-4">
+                <Combobox
+                    options={options}
+                    selectedValue={graphName}
+                    onSelectedValue={handelSelectedValue}
+                />
             </header>
-            <main className="h-full w-full">
-                {graph.Id ?
-                    (
-                        <>
-                            <div className="grid grid-cols-6 gap-4 p-2">
-                                <Toolbar className="col-start-1" chartRef={chartRef} />
-                                <Labels className="col-start-3 col-end-4" categories={graph.Categories} onClick={onCategoryClick}/>
-                            </div>
+            <div className='h-1 grow flex flex-col'>
 
-                            <CytoscapeComponent
-                                cy={(cy) => {
-                                    chartRef.current = cy
+                <main className="bg-white h-1 grow">
+                    {
+                        graph.Id ?
+                            <div className="h-full relative border">
+                                <div className="w-full absolute top-0 left-0 flex justify-between p-4 z-10 pointer-events-none">
+                                    <div className='flex gap-4 pointer-events-auto'>
+                                        <Input
+                                            graph={graph}
+                                            value={searchNode.name}
+                                            onValueChange={({ name }) => setSearchNode({ name })}
+                                            icon={<Search />}
+                                            handelSubmit={handelSearchSubmit}
+                                            node={searchNode}
+                                        />
+                                        <Labels categories={graph.Categories} onClick={onCategoryClick} />
+                                    </div>
+                                    {
+                                        isPathResponse &&
+                                        <button
+                                            className='bg-[#ECECEC] hover:bg-[#D3D3D3] p-2 rounded-md flex gap-2 items-center pointer-events-auto'
+                                            onClick={() => {
+                                                chartRef.current?.elements().removeStyle().layout(LAYOUT).run()
+                                                setIsPathResponse(false)
+                                            }}
+                                        >
+                                            <X size={15} />
+                                            <p>Clear Graph</p>
+                                        </button>
+                                    }
+                                </div>
+                                <div className="w-full absolute bottom-0 left-0 flex justify-between items-center p-4 z-10 pointer-events-none">
+                                    <div className="flex gap-4 text-gray-500">
+                                        <p>{nodesCount} Nodes</p>
+                                        <p>{edgesCount} Edges</p>
+                                    </div>
+                                    <div className='flex gap-4'>
+                                        {
+                                            commitIndex !== commits.length &&
+                                            <div className='bg-white flex gap-2 border rounded-md p-2 pointer-events-auto'>
+                                                <div className='flex gap-2 items-center'>
+                                                    <Checkbox
+                                                        className='h-5 w-5 bg-gray-500 data-[state true]'
+                                                    />
+                                                    <p className='text-bold'>Display Changes</p>
+                                                </div>
+                                                <div className='flex gap-2 items-center'>
+                                                    <div className='h-4 w-4 bg-pink-500 bg-opacity-50 border-[3px] border-pink-500 rounded-full' />
+                                                    <p className='text-pink-500'>Were added</p>
+                                                </div>
+                                                <div className='flex gap-2 items-center'>
+                                                    <div className='h-4 w-4 bg-blue-500 bg-opacity-50 border-[3px] border-blue-500 rounded-full' />
+                                                    <p className='text-blue-500'>Were edited</p>
+                                                </div>
+                                            </div>
+                                        }
+                                        <Toolbar className="pointer-events-auto" chartRef={chartRef} />
+                                    </div>
+                                </div>
+                                <ElementTooltip
+                                    label={tooltipLabel}
+                                    position={tooltipPosition}
+                                    parentWidth={containerRef.current?.clientWidth || 0}
+                                />
+                                <ElementMenu
+                                    obj={selectedObj}
+                                    position={position}
+                                    url={url}
+                                    handelMaximize={handleDoubleTap}
+                                    parentWidth={containerRef.current?.clientWidth || 0}
+                                />
+                                <CytoscapeComponent
+                                    cy={(cy) => {
+                                        chartRef.current = cy
 
-                                    // Make sure no previous listeners are attached
-                                    cy.removeAllListeners();
+                                        // Make sure no previous listeners are attached
+                                        cy.removeAllListeners();
 
-                                    // Listen to the click event on nodes for expanding the node
-                                    cy.on('dbltap', 'node', async function (evt) {
-                                        var node: Node = evt.target.json().data;
-                                        let elements = await parmas.onFetchNode(node);
-                                        //cy.add(elements).layout(LAYOUT).run()
+                                        // Listen to the click event on nodes for expanding the node
+                                        cy.on('dbltap', 'node', handleDoubleTap);
 
-                                        // adjust entire graph.
-                                        if (elements.length > 0) {
-                                            cy.add(elements);
-                                            cy.elements().layout(LAYOUT).run();
-                                        }
-                                    });
-                                }}
-                                stylesheet={STYLESHEET}
-                                elements={graph.Elements}
-                                layout={LAYOUT}
-                                className="w-full h-full"
-                            />
-                        </>
-                    ) :
-                    (
-                        <div className="flex flex-col items-center justify-center h-full space-y-4">
-                            <div className="text-gray-600 text-4xl ">
-                                Loading Repository Graph...
+                                        cy.on('mousedown', (evt) => {
+                                            setTooltipLabel(undefined)
+                                            const { target } = evt
+
+                                            if (target !== cy && !target.isEdge()) return;
+
+                                            setSelectedObj(undefined)
+                                        })
+
+                                        cy.on('mouseout', (evt) => {
+                                            const { target } = evt
+
+                                            if (target === cy || target.isEdge()) {
+                                                setTooltipLabel(undefined)
+                                                return
+                                            }
+
+                                            setTooltipLabel(undefined)
+
+                                            if (selectedObj) return
+
+                                            target.unselect()
+                                        })
+
+                                        cy.on('scrollzoom', () => {
+                                            setSelectedObj(undefined)
+                                            setTooltipLabel(undefined)
+                                        });
+
+                                        cy.on('mouseover', 'node', (evt) => {
+                                            const { target } = evt
+                                            target.select()
+
+                                            if (selectedObj) return
+
+                                            const position = target.renderedPosition()
+
+                                            setTooltipPosition(() => ({ x: position.x, y: position.y + cy.zoom() * 8 }));
+                                            setTooltipLabel(() => target.json().data.name);
+                                        })
+
+                                        cy.on('tap', 'node', handelTap);
+
+                                        cy.on('drag', 'node', () => {
+                                            setTooltipLabel(undefined)
+                                            setSelectedObj(undefined)
+                                        });
+
+                                        cy.on('tap', 'edge', (evt) => {
+                                            const { target } = evt
+
+                                            if (!isPathResponse || selectedPathId === target.id()) return
+
+                                            setSelectedPathId(target.id())
+                                        });
+                                    }}
+                                    stylesheet={STYLESHEET}
+                                    elements={graph.Elements}
+                                    layout={LAYOUT}
+                                    className="h-full w-full"
+                                />
                             </div>
-                            <div className="flex items-center justify-center space-x-4">
-                                <Skeleton className="h-12 w-12 rounded-full bg-gray-600" />
-                                <div className="space-y-2">
-                                    <Skeleton className="h-4 w-[250px] bg-gray-600" />
-                                    <Skeleton className="h-4 w-[200px] bg-gray-600" />
-                                </div>
+                            : <div className="flex flex-col items-center justify-center h-full text-gray-400">
+                                <GitFork size={100} color="gray" />
+                                <h1 className="text-4xl">Select a repo to show its graph here</h1>
                             </div>
-                        </div>
-                    )
+                    }
+                </main>
+                {
+                    graph.Id && commits.length > 0 &&
+                    <CommitList
+                        commitIndex={commitIndex}
+                        commits={commits}
+                        currentCommit={currentCommit}
+                        setCommitIndex={setCommitIndex}
+                        setCurrentCommit={setCurrentCommit}
+                        graph={graph}
+                        chartRef={chartRef}
+                    />
                 }
-            </main>
-        </>
+            </div>
+        </div>
     )
 }
\ No newline at end of file
diff --git a/app/components/combobox.tsx b/app/components/combobox.tsx
new file mode 100644
index 0000000..59020d6
--- /dev/null
+++ b/app/components/combobox.tsx
@@ -0,0 +1,28 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+interface Props {
+    options: string[]
+    selectedValue: string
+    onSelectedValue: (value: string) => void
+
+}
+
+export default function Combobox({ options, selectedValue, onSelectedValue }: Props) {
+    return (
+        <Select value={selectedValue} onValueChange={onSelectedValue}>
+            <SelectTrigger className="rounded-md border focus:ring-0 focus:ring-offset-0">
+                <SelectValue placeholder="Select a repo" />
+            </SelectTrigger>
+            <SelectContent>
+                {
+                    options.length !== 0 &&
+                    options.map((option) => (
+                        <SelectItem key={option} value={option}>
+                            {option}
+                        </SelectItem>
+                    ))
+                }
+            </SelectContent>
+        </Select>
+    )
+}
\ No newline at end of file
diff --git a/app/components/commitList.tsx b/app/components/commitList.tsx
new file mode 100644
index 0000000..43d4614
--- /dev/null
+++ b/app/components/commitList.tsx
@@ -0,0 +1,144 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
+import { toast } from "@/components/ui/use-toast"
+import { cn } from "@/lib/utils"
+import cytoscape from "cytoscape"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { Dispatch, MutableRefObject, SetStateAction, useState } from "react"
+import { Graph } from "./model"
+import { LAYOUT } from "./code-graph"
+
+interface Props {
+    commits: any[]
+    currentCommit: number
+    setCurrentCommit: Dispatch<SetStateAction<number>>
+    commitIndex: number
+    setCommitIndex: Dispatch<SetStateAction<number>>
+    graph: Graph,
+    chartRef: MutableRefObject<cytoscape.Core | null>
+}
+
+const COMMIT_LIMIT = 7
+
+export default function CommitList({ commitIndex, commits, currentCommit, setCommitIndex, setCurrentCommit, graph, chartRef }: Props) {
+
+    const [commitChanges, setCommitChanges] = useState<any>()
+
+    const handelCommitChange = async (commit: any) => {
+        const chart = chartRef.current
+
+        if (!chart) return
+
+        const result = await fetch(`api/repo/${graph.Id}/?type=switchCommit`, {
+            method: 'POST',
+        })
+
+        if (!result.ok) {
+            toast({
+                title: "Uh oh! Something went wrong",
+                description: (await result.text()),
+            })
+            return
+        }
+
+        const json = await result.json()
+
+        json.result.deletions.nodes.forEach((e: any) => {
+            chart.remove(`#${e.id}`)
+            graph.NodesMap.delete(e.id)
+            graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
+        })
+
+        json.result.deletions.edges.forEach((e: any) => {
+            chart.remove(`#_${e.id}`)
+            graph.EdgesMap.delete(e.id)
+            graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
+        })
+
+        const additionsIds = chart.add(graph.extend(json.result.additions))
+            .filter((e) => e.isNode()).style({ "border-color": "pink", "border-width": 2, "border-opacity": 1 })
+            .map((e) => e.id())!
+
+        const g = Graph.empty()
+        g.extend(json.result.modifications)
+
+        const modifiedIds = g.Elements.map((e) => {
+            const graphElement = graph.Elements.find((el) => el.data.id === e.data.id)
+            graphElement.data = e.data
+
+            if ("category" in e.data) {
+                chart.$(`#${e.data.id}`).data(e.data).style({ "border-color": "blue", "border-width": 2, "border-opacity": 1 })
+            }
+
+            return e.data.id
+        })
+
+        chart.layout(LAYOUT).run()
+
+        setCommitChanges({ additionsIds, modifiedIds })
+        setCurrentCommit(commit.hash)
+    }
+
+    return (
+        <footer className='bg-gray-200 flex border border-gray-300 rounded-b-md'>
+            <button
+                className='p-4 border-r border-gray-300'
+                onClick={() => {
+                    setCommitIndex(prev => prev - 1)
+                }}
+                disabled={commitIndex - COMMIT_LIMIT === 0}
+            >
+                {
+                    commitIndex - COMMIT_LIMIT !== 0 ?
+                        <ChevronLeft />
+                        : <div className='h-6 w-6' />
+                }
+            </button>
+            <ul className='w-1 grow flex p-3 justify-between gap-4'>
+                {
+                    commits.slice(commitIndex - COMMIT_LIMIT, commitIndex).map((commit: any) => {
+                        const date = new Date(commit.date * 1000)
+                        const month = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}`
+                        const hour = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
+                        return (
+                            <HoverCard
+                                key={commit.hash}
+                            >
+                                <HoverCardTrigger asChild>
+                                    <li
+                                        className={cn(currentCommit === commit.hash && "bg-white", "grow p-1 rounded-md")}
+                                    >
+                                        <button
+                                            className='w-full flex items-center justify-center gap-2'
+                                            onClick={() => handelCommitChange(commit)}
+                                        >
+                                            <p title={month}>{month}</p>
+                                            <p className='text-gray-400' title='hour'>{hour}</p>
+                                        </button>
+                                    </li>
+                                </HoverCardTrigger>
+                                <HoverCardContent className='bg-[#F9F9F9] flex flex-col gap-2 p-4 w-fit max-w-[70%]'>
+                                        <h1 className='text-bold'>{commit.author}</h1>
+                                        <p>{commit.message}</p>
+                                        <p className='text-[#7D7D7D] truncate' title={commit.hash}>{commit.hash}</p>
+                                </HoverCardContent>
+                            </HoverCard>
+                        )
+                    })
+                }
+            </ul>
+            <button
+                className='p-4 border-l border-gray-300'
+                onClick={() => {
+                    setCommitIndex(prev => prev + 1)
+                }}
+                disabled={commitIndex === commits.length}
+            >
+                {
+                    commitIndex !== commits.length ?
+                        <ChevronRight />
+                        : <div className='h-6 w-6' />
+                }
+            </button>
+        </footer>
+    )
+}
\ No newline at end of file
diff --git a/app/components/dataPanel.tsx b/app/components/dataPanel.tsx
new file mode 100644
index 0000000..7aefeb7
--- /dev/null
+++ b/app/components/dataPanel.tsx
@@ -0,0 +1,78 @@
+import { Dispatch, SetStateAction } from "react";
+import { Node } from "./model";
+import { Copy, SquareArrowOutUpRight, X } from "lucide-react";
+
+interface Props {
+    obj: Node | undefined;
+    setObj: Dispatch<SetStateAction<Node | undefined>>;
+    url: string;
+}
+
+const excludedProperties = [
+    "category",
+    "color",
+    "expand",
+    "collapsed",
+    "isPath",
+    "isPathStartEnd"
+]
+
+export default function DataPanel({ obj, setObj, url }: Props) {
+
+    if (!obj) return null;
+
+    const label = `${obj.category}: ${obj.name}`
+    const object = Object.entries(obj).filter(([k]) => !excludedProperties.includes(k))
+
+    return (
+        <div className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col min-h-[65%] max-h-[88%] max-w-[56%] overflow-hidden" >
+            <header className="bg-[#191919] flex items-center gap-8 justify-between p-8">
+                <div className="border-b border-black text-bottom">
+                    <p title={label} className="truncate font-bold">{label.toUpperCase()}</p>
+                </div>
+                <button onClick={() => setObj(undefined)}>
+                    <X color="white" />
+                </button>
+            </header>
+            <main className="flex flex-col grow overflow-auto overflow-x-hidden p-4 justify-center">
+                {
+                    object.map(([key, value]) => (
+                        <div key={key} className="flex gap-2">
+                            <p className="text-[#FF804D]">{key}:</p>
+                            <p className="text-white">{value}</p>
+                        </div>
+                    ))
+                }
+            </main>
+            <footer className="bg-[#191919] flex items-center justify-between p-4">
+                <button
+                    className="flex items-center gap-2 p-2"
+                    title="Copy src to clipboard"
+                    onClick={() => navigator.clipboard.writeText(obj.src)}
+                >
+                    <Copy color="white" />
+                    Copy
+                </button>
+                <a
+                    className="flex items-center gap-2 p-2"
+                    href={url}
+                    target="_blank"
+                    title="Go to repo"
+                    onClick={() => {
+                        const newTab = window.open(url, '_blank');
+
+                        if (!obj.src_start || !obj.src_end || !newTab) return
+
+                        newTab.scroll({
+                            top: obj.src_start,
+                            behavior: 'smooth'
+                        })
+                    }}
+                >
+                    <SquareArrowOutUpRight color="white" />
+                    Go to repo
+                </a>
+            </footer>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/components/elementMenu.tsx b/app/components/elementMenu.tsx
new file mode 100644
index 0000000..53c09ec
--- /dev/null
+++ b/app/components/elementMenu.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { useEffect, useState } from "react";
+import { Node } from "./model";
+import { ChevronLeft, ChevronRight, ChevronsLeftRight, ChevronsRightLeft, Copy, Globe, Maximize2 } from "lucide-react";
+import DataPanel from "./dataPanel";
+import { Position } from "cytoscape";
+
+interface Props {
+    obj: Node | undefined;
+    position: Position | undefined;
+    url: string;
+    handelMaximize: () => void;
+    parentWidth: number;
+}
+
+
+export default function ElementMenu({ obj, position, url, handelMaximize, parentWidth }: Props) {
+    const [currentObj, setCurrentObj] = useState<Node>();
+    const [containerWidth, setContainerWidth] = useState(0);
+
+    useEffect(() => {
+        setCurrentObj(undefined)
+    }, [obj])
+
+    if (!obj || !position) return null
+
+    const objURL = obj.category === "File"
+        ? `${url}/tree/master/${obj.path}/${obj.name}`
+        : `${url}/tree/master/${obj.path}#L${obj.src_start}-L${obj.src_end + 1}`
+
+    return (
+        <>
+            <div
+                ref={(ref) => {
+                    if (!ref) return
+                    setContainerWidth(ref.clientWidth)
+                }}
+                className="absolute z-10 bg-black rounded-lg shadow-lg flex divide-x divide-[#434343]"
+                style={{
+                    left: position.x - containerWidth / 2,
+                    top: position.y + 5
+                }}
+            >
+                <button
+                    className="p-2"
+                    title="Copy src to clipboard"
+                    onClick={() => navigator.clipboard.writeText(obj.src)}
+                >
+                    <Copy color="white" />
+                </button>
+                <a
+                    className="p-2"
+                    href={objURL}
+                    target="_blank"
+                    title="Go to repo"
+                    onClick={() => {
+                        const newTab = window.open(objURL, '_blank');
+
+                        if (!obj.src_start || !obj.src_end || !newTab) return
+
+                        newTab.scroll({
+                            top: obj.src_start,
+                            left: obj.src_end,
+                            behavior: 'smooth'
+                        })
+                    }}
+                >
+                    <Globe color="white" />
+                </a>
+                <button
+                    className="flex p-2"
+                    title="View Node"
+                    onClick={() => setCurrentObj(obj)}
+                >
+                    <ChevronsLeftRight color="white" />
+                </button>
+                <button
+                    className="p-2"
+                    onClick={() => handelMaximize()}
+                >
+                    <Maximize2 color="white" />
+                </button>
+            </div>
+            <DataPanel
+                obj={currentObj}
+                setObj={setCurrentObj}
+                url={objURL}
+            />
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/components/elementTooltip.tsx b/app/components/elementTooltip.tsx
new file mode 100644
index 0000000..4fcd139
--- /dev/null
+++ b/app/components/elementTooltip.tsx
@@ -0,0 +1,30 @@
+import { Position } from "cytoscape";
+import { useState } from "react";
+
+interface Props {
+    label: string | undefined;
+    position: Position | undefined;
+    parentWidth: number;
+}
+
+export default function ElementTooltip({ label, position }: Props) {
+    const [containerWidth, setContainerWidth] = useState<number>(0);
+
+    if (!label || !position) return null
+
+    return (
+        <div
+            ref={(ref) => {
+                if (!ref) return
+                setContainerWidth(ref.clientWidth)
+            }}
+            className="absolute z-10 bg-white rounded-lg shadow-lg p-3"
+            style={{
+                left: position.x - containerWidth / 2,
+                top: position.y
+            }}
+        >
+            {label}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/components/labels.tsx b/app/components/labels.tsx
index 605b538..132ab85 100644
--- a/app/components/labels.tsx
+++ b/app/components/labels.tsx
@@ -1,32 +1,28 @@
-import { Category, getCategoryColorName} from "./model";
+import { Category, getCategoryColorName } from "./model";
 import { cn } from "@/lib/utils";
-import { Minus, Plus } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
 
-export function Labels(params: { categories: Category[], className?: string, onClick: (category: Category) => void }) {
+export function Labels(params: { categories: Category[], className?: string, onClick: (name: string, show: boolean) => void }) {
 
-    // fake stae to force reload
     const [reload, setReload] = useState(false)
 
     return (
-        <div className={cn("flex flex-row gap-x-2", params.className)} >
-            {params.categories.map((category) => {
-                return (
-                    <div className="flex flex-row gap-x-2 items-center" key={category.index}>
-                        <Button
-                            className={cn(`bg-${getCategoryColorName(category.index)}-500 ${category.show ? "" : "opacity-50"}`, "rounded-lg border border-gray-300 p-2 opac")}
-                            onClick={() => {
-                                params.onClick(category)
-                                setReload(!reload)
-                            }}
-                        >
-                            {category.show ? <Minus /> : <Plus />}
-                        </Button>
-                        <p>{category.name}</p>
-                    </div>
-                )
-            })}
-        </div>
+        <div className={cn("flex gap-4", params.className)} >
+            {params.categories.map((category) =>
+                <div className="bg-white flex gap-2 items-center p-2 border rounded-md" key={category.index}>
+                    <Checkbox
+                        className={`data-[state=checked]:bg-${getCategoryColorName(category.index)} bg-${getCategoryColorName(category.index)} border-none rounded-sm`}
+                        onCheckedChange={(checked) => {
+                            params.onClick(category.name, checked as boolean)
+                            setReload(!reload)
+                        }}
+                        checked={category.show}
+                    />
+                    <p>{category.name}</p>
+                </div>
+            )
+            }
+        </div >
     )
 }
\ No newline at end of file
diff --git a/app/components/model.ts b/app/components/model.ts
index 0afda74..a2f713a 100644
--- a/app/components/model.ts
+++ b/app/components/model.ts
@@ -1,4 +1,5 @@
 import twcolors from 'tailwindcss/colors'
+import { Path } from '../page'
 
 export interface Category {
   name: string,
@@ -11,41 +12,34 @@ export interface Node {
   name: string,
   category: string,
   color: string,
+  [key: string]: any,
 }
 
 export interface Edge {
   source: number,
   target: number,
   label: string,
+  [key: string]: any,
 }
 
-const COLORS_ORDER = [
-  "rose",
+const COLORS_ORDER_NAME = [
+  "pink",
   "yellow",
-  "teal",
-  "fuchsia",
   "blue",
-  "violet",
-  "slate",
-  "cyan",
-  "orange",
-  "red",
-  "green",
-  "pink",
 ]
 
-export function getCategoryColorName(index: number): string {
-  index = index<COLORS_ORDER.length ? index : 0
-  return COLORS_ORDER[index]
-}
+const COLORS_ORDER = [
+  "#F43F5F",
+  "#E9B306",
+  "#15B8A6",
+]
 
-function getCategoryColorValue(index: number): string {
-  index = index<COLORS_ORDER.length ? index : 0
-  let colorName = COLORS_ORDER[index]
+export function getCategoryColorValue(index: number): string {
+  return COLORS_ORDER[index % COLORS_ORDER.length]
+}
 
-  let colors = twcolors as any
-  let color = colors[colorName]
-  return color["500"]
+export function getCategoryColorName(index: number): string {
+  return COLORS_ORDER_NAME[index % COLORS_ORDER.length]
 }
 
 export class Graph {
@@ -54,12 +48,12 @@ export class Graph {
   private categories: Category[];
   private elements: any[];
 
-  private categoriesMap: Map<String, Category>;
+  private categoriesMap: Map<string, Category>;
   private nodesMap: Map<number, Node>;
   private edgesMap: Map<number, Edge>;
 
   private constructor(id: string, categories: Category[], elements: any[],
-    categoriesMap: Map<String, Category>, nodesMap: Map<number, Node>, edgesMap: Map<number, Edge>) {
+    categoriesMap: Map<string, Category>, nodesMap: Map<number, Node>, edgesMap: Map<number, Edge>) {
     this.id = id;
     this.categories = categories;
     this.elements = elements;
@@ -76,25 +70,38 @@ export class Graph {
     return this.categories;
   }
 
+  get CategoriesMap(): Map<string, Category> {
+    return this.categoriesMap;
+  }
+
   get Elements(): any[] {
     return this.elements;
   }
 
+  get EdgesMap(): Map<number, Edge> {
+    return this.edgesMap;
+  }
+
+  get NodesMap(): Map<number, Node> {
+    return this.nodesMap;
+  }
+
   public static empty(): Graph {
-    return new Graph("", [], [], new Map<String, Category>(), new Map<number, Node>(), new Map<number, Edge>())
+    return new Graph("", [], [], new Map<string, Category>(), new Map<number, Node>(), new Map<number, Edge>())
   }
 
-  public static create(results: any): Graph {
+  public static create(results: any, graphName: string): Graph {
     let graph = Graph.empty()
     graph.extend(results)
-    graph.id = results.id
+    graph.id = graphName
     return graph
   }
 
-  public extend(results: any): any[] {
+  public extend(results: any, collapsed = false, path?: Path): any[] {
     let newElements: any[] = []
+
     results.nodes.forEach((nodeData: any) => {
-      let label = nodeData.label;
+      let label = nodeData.labels[0];
       // check if category already exists in categories
       let category = this.categoriesMap.get(label)
       if (!category) {
@@ -106,6 +113,11 @@ export class Graph {
       // check if node already exists in nodes
       let node = this.nodesMap.get(nodeData.id)
       if (node) {
+        node.isPath = !!path
+        if (path?.start?.id == nodeData.id || path?.end?.id == nodeData.id) {
+          node.isPathStartEnd = true
+        }
+        node.isPath = !!path
         return
       }
 
@@ -114,7 +126,16 @@ export class Graph {
         name: nodeData.name,
         color: getCategoryColorValue(category.index),
         category: category.name,
+        expand: false,
+        collapsed,
+        isPath: !!path,
+      }
+      if (path?.start?.id == nodeData.id || path?.end?.id == nodeData.id) {
+        node.isPathStartEnd = true
       }
+      Object.entries(nodeData.properties).forEach(([key, value]) => {
+        node[key] = value
+      })
       this.nodesMap.set(nodeData.id, node)
       this.elements.push({ data: node })
       newElements.push({ data: node })
@@ -123,16 +144,21 @@ export class Graph {
     results.edges.forEach((edgeData: any) => {
       let edge = this.edgesMap.get(edgeData.id)
       if (edge) {
+        edge.isPath = !!path
         return
       }
 
-      let sourceId = edgeData.src.toString();
-      let destinationId = edgeData.dest.toString()
+      let sourceId = edgeData.src_node.toString();
+      let destinationId = edgeData.dest_node.toString()
 
       edge = {
+        id: `_${edgeData.id}`,
         source: sourceId,
         target: destinationId,
-        label: edgeData.type,
+        label: edgeData.relation,
+        expand: false,
+        collapsed,
+        isPath: !!path,
       }
       this.edgesMap.set(edgeData.id, edge)
       this.elements.push({ data: edge })
diff --git a/app/components/toolbar.tsx b/app/components/toolbar.tsx
index c497039..7c94879 100644
--- a/app/components/toolbar.tsx
+++ b/app/components/toolbar.tsx
@@ -1,5 +1,4 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { CircleDot, XCircle, ZoomIn, ZoomOut } from "lucide-react";
+import { CircleDot, Minus, Plus } from "lucide-react";
 import { cn } from "@/lib/utils"
 
 export function Toolbar(params: {
@@ -16,39 +15,34 @@ export function Toolbar(params: {
     function handleCenterClick() {
         let chart = params.chartRef.current
         if (chart) {
-            chart.fit()
+            chart.fit(undefined, 80)
             chart.center()
         }
     }
 
     return (
-        <div className={cn("flex flex-row gap-x-2", params.className)}>
-            <TooltipProvider>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>
-                        <ZoomIn />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Zoom In</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}>
-                        <ZoomOut />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Zoom Out</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}>
-                        <CircleDot />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Center</p>
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
+        <div className={cn("bg-white flex flex-row rounded overflow-hidden", params.className)}>
+            <button
+                className="border p-2"
+                onClick={() => handleZoomClick(0.9)}
+                title="Zoom Out"
+            >
+                <Minus />
+            </button>
+            <button
+                className="border p-2"
+                onClick={() => handleCenterClick()}
+                title="Center"
+            >
+                <CircleDot />
+            </button>
+            <button
+                className="border p-2"
+                onClick={() => handleZoomClick(1.1)}
+                title="Zoom In"
+            >
+                <Plus />
+            </button>
         </div>
     )
 }
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 6a75725..7a32f2b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -9,68 +9,112 @@
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --radius: 0.5rem;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+  
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-roberto;
   }
+
+}
+
+.Tip {
+  @apply flex gap-2 p-4 border border-[#0000001A] bg-[#F9F9F9] hover:bg-[#ECECEC] rounded-md text-left;
+  .label {
+    @apply text-[16px] font-bold leading-[14px]
+  }
+  .text {
+    @apply text-[16px] font-normal leading-[20px] text-[#7D7D7D]
+  }
+  div {
+    @apply flex flex-col gap-2 text-start
+  }
+}
+
+.font-roberto {
+  font-family: 'Roboto', sans-serif;
+}
+
+.font-oswald {
+  font-family: 'Oswald', sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 6afa69a..7d2475e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { Toaster } from '@/components/ui/toaster'
 import GoogleAnalytics from './components/GoogleAnalytics'
+import { cn } from '@/lib/utils'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,7 +19,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={cn(inter.className, "relative")}>
         {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
           <GoogleAnalytics ga_id=
             {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
diff --git a/app/page.tsx b/app/page.tsx
index 3981a1c..a4a8185 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,98 +1,248 @@
 'use client'
 
-import { createContext, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Chat } from './components/chat';
 import { Graph, Node } from './components/model';
-import { Github, HomeIcon } from 'lucide-react';
+import { BookOpen, Github, HomeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { CodeGraph } from './components/code-graph';
 import { toast } from '@/components/ui/use-toast';
 import { GraphContext } from './components/provider';
+import Image from 'next/image';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Progress } from '@/components/ui/progress';
+
+export type PathNode = {
+  id?: number
+  name?: string
+}
+
+export type Path = {
+  start?: PathNode,
+  end?: PathNode
+}
 
 export default function Home() {
 
   const [graph, setGraph] = useState(Graph.empty());
+  const [selectedValue, setSelectedValue] = useState("");
+  const [selectedPathId, setSelectedPathId] = useState<string>();
+  const [isPathResponse, setIsPathResponse] = useState<boolean>(false);
+  const [createURL, setCreateURL] = useState("")
+  const [createOpen, setCreateOpen] = useState(false)
+  const [options, setOptions] = useState<string[]>([]);
+  const [path, setPath] = useState<Path | undefined>();
+  const [isSubmit, setIsSubmit] = useState<boolean>(false);
+  const chartRef = useRef<cytoscape.Core | null>(null)
+
+  useEffect(() => {
+    const run = async () => {
+      const result = await fetch(`/api/repo`, {
+        method: 'GET',
+      })
 
-  function onFetchGraph(url: string) {
-    let value = url;
-    if (!value || value.length === 0) {
-      value = 'https://github.com/falkorDB/falkordb-py';
+      if (!result.ok) {
+        toast({
+          variant: "destructive",
+          title: "Uh oh! Something went wrong.",
+          description: await result.text(),
+        })
+        return
+      }
+
+      const json = await result.json()
+      setOptions(json.result)
     }
 
-    setGraph(Graph.empty())
+    run()
+  }, [])
+
+  async function onCreateRepo(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    setIsSubmit(true)
+
+    if (!createURL) {
+      toast({
+        variant: "destructive",
+        title: "Uh oh! Something went wrong.",
+        description: "Please enter a URL.",
+      })
+      return
+    }
 
-    // Send the user query to the server to fetch a repo graph
-    fetch('/api/repo', {
+    const result = await fetch(`/api/repo/?url=${createURL}`, {
       method: 'POST',
-      body: JSON.stringify({
-        url: value
+    })
+
+    if (!result.ok) {
+      toast({
+        variant: "destructive",
+        title: "Uh oh! Something went wrong.",
+        description: await result.text(),
       })
-    }).then(async (result) => {
-      if (result.status >= 300) {
-        throw Error(await result.text())
-      }
-      return result.json()
-    }).then(data => {
-      let graph = Graph.create(data);
-      setGraph(graph);
-    }).catch((error) => {
+      return
+    }
+
+    const graphName = createURL.split('/').pop()!
+
+    setOptions(prev => [...prev, graphName])
+    setSelectedValue(graphName)
+    setCreateURL("")
+    setCreateOpen(false)
+    setIsSubmit(false)
+
+    toast({
+      title: "Success",
+      description: `Project ${graphName} created successfully`,
+    })
+  }
+
+  async function onFetchGraph(graphName: string) {
+
+    setGraph(Graph.empty())
+
+    const result = await fetch(`/api/repo/${graphName}`, {
+      method: 'GET'
+    })
+
+    if (!result.ok) {
       toast({
         variant: "destructive",
         title: "Uh oh! Something went wrong.",
-        description: error.message,
-      });
-    });
+        description: await result.text(),
+      })
+      return
+    }
+
+    const json = await result.json()
+    setGraph(Graph.create(json.result.entities, graphName))
   }
 
   // Send the user query to the server to expand a node
   async function onFetchNode(node: Node) {
-    return fetch(`/api/repo/${graph.Id}/${node.id}`, {
+    const result = await fetch(`/api/repo/${graph.Id}/${node.id}`, {
       method: 'GET'
-    }).then(async (result) => {
-      if (result.status >= 300) {
-        throw Error(await result.text())
-      }
-      return result.json()
-    }).then(data => {
-      let newElements = graph.extend(data)
-      setGraph(graph)
-      return newElements
-    }).catch((error) => {
+    })
+
+    if (!result.ok) {
       toast({
         variant: "destructive",
         title: "Uh oh! Something went wrong.",
-        description: error.message,
+        description: await result.text(),
       })
-      return [] as any[]
-    })
+      return []
+    }
+
+    const json = await result.json()
+
+    return graph.extend(json.result.neighbors, true)
   }
 
   return (
     <main className="h-screen flex flex-col">
-      <header className="flex items-center justify-between p-4 border">
-        <Link href="https://www.falkordb.com" target='_blank'>
-          <HomeIcon className="h-6 w-6" />
-        </Link>
-        <h1 className='font-extrabold'>
-          Code Graph by <Link href="https://www.falkordb.com">FalkorDB</Link>
-        </h1>
-        <nav className="space-x-4">
-          <Link className="text-gray-600 hover:text-gray-900" href="https://github.com/FalkorDB/code-graph" target='_blank'>
-            <Github />
-          </Link>
-        </nav>
+      <header className="flex flex-col text-xl">
+        <div className="flex items-center justify-between py-4 px-8">
+          <div className="flex gap-4 items-center">
+            <Link href="https://www.falkordb.com" target='_blank'>
+              <Image src="/logo_02.svg" alt="FalkorDB" width={27.73} height={23.95} />
+            </Link>
+            <h1 className='italic font-bold text-[22px]'>
+              CODE GRAPH
+            </h1>
+          </div>
+          <ul className="flex gap-4 items-center font-medium">
+            <Link className="flex gap-2.5 items-center p-4" href="https://www.falkordb.com" target='_blank'>
+              <HomeIcon />
+              <p>Home</p>
+            </Link>
+            <Link className="flex gap-2.5 items-center p-4" href="https://github.com/FalkorDB/code-graph" target='_blank'>
+              <Github />
+              <p>Github</p>
+            </Link>
+            <Link className="flex gap-2.5 items-center p-4" href="https://github.com/FalkorDB/code-graph" target='_blank'>
+              <BookOpen />
+              <p>Tip</p>
+            </Link>
+            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+              <DialogTrigger asChild>
+                <button
+                  className="h-full bg-black p-4 text-white rounded-lg"
+                  title="Create new project"
+                >
+                  <p>Create new project</p>
+                </button>
+              </DialogTrigger>
+              <DialogContent className='max-w-[26%] gap-8'>
+                <DialogHeader>
+                  <DialogTitle>{!isSubmit ? "CREATE A NEW PROJECT" : "THANK YOU FOR A NEW REQUEST"}</DialogTitle>
+                </DialogHeader>
+                <DialogDescription className='text-warp'>
+                  {
+                    !isSubmit
+                      ? "Please provide the URL of the model to connect and start querying data"
+                      : "Processing your graph, this could take a while. We appreciate your patience"
+                  }
+                </DialogDescription>
+                {
+                  !isSubmit ?
+                    <form className='flex flex-col gap-4' onSubmit={onCreateRepo}>
+                      <input
+                        className='border p-3 rounded-lg'
+                        type="text"
+                        value={createURL}
+                        onChange={(e) => setCreateURL(e.target.value)}
+                        placeholder="Type URL"
+                      />
+                      <div className='flex flex-row-reverse'>
+                        <button
+                          className='bg-black p-3 text-white rounded-lg'
+                          type='submit'
+                          title='Create Project'
+                        >
+                          <p>Create</p>
+                        </button>
+                      </div>
+                    </form>
+                    : <Progress value={0} />
+                }
+              </DialogContent>
+            </Dialog>
+          </ul>
+        </div>
+        <div className='h-2.5 bg-gradient-to-r from-[#EC806C] via-[#B66EBD] to-[#7568F2]' />
       </header>
-
       <PanelGroup direction="horizontal" className="w-full h-full">
-        <Panel defaultSize={75} className="flex flex-col border" collapsible={true} minSize={30}>
+        <Panel defaultSize={70} className="flex flex-col" minSize={50}>
           <GraphContext.Provider value={graph}>
-            <CodeGraph onFetchGraph={onFetchGraph} onFetchNode={onFetchNode} />
+            <CodeGraph
+              chartRef={chartRef}
+              options={options}
+              onFetchGraph={onFetchGraph}
+              onFetchNode={onFetchNode}
+              setPath={setPath}
+              isShowPath={!!path}
+              selectedValue={selectedValue}
+              selectedPathId={selectedPathId}
+              setSelectedPathId={setSelectedPathId}
+              isPathResponse={isPathResponse}
+              setIsPathResponse={setIsPathResponse}
+            />
           </GraphContext.Provider>
         </Panel>
-        <PanelResizeHandle className="w-1 bg-gray-500" />
-        <Panel className="flex flex-col border" defaultSize={25} collapsible={true} minSize={10}>
-          <Chat repo={graph.Id} />
+        <PanelResizeHandle />
+        <Panel className="border-l min-w-[420px]" defaultSize={30} >
+          <Chat
+            chartRef={chartRef}
+            setPath={setPath}
+            path={path}
+            repo={graph.Id}
+            graph={graph}
+            selectedPathId={selectedPathId}
+            isPath={isPathResponse}
+            setIsPath={setIsPathResponse}
+          />
         </Panel>
       </PanelGroup>
     </main>
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..01ff19c
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..6373043
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..e54d91c
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..5c87ea4
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index cbe5a36..de30839 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
diff --git a/package-lock.json b/package-lock.json
index 5bd6d4f..6f8bab7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,11 @@
       "name": "code-graph",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.1.2",
+        "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.2",
+        "@radix-ui/react-hover-card": "^1.1.2",
+        "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
@@ -25,6 +30,7 @@
         "react-cytoscapejs": "^2.0.0",
         "react-dom": "^18",
         "react-resizable-panels": "^2.0.20",
+        "react-type-animation": "^3.2.0",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
         "web-tree-sitter": "^0.22.6"
@@ -513,6 +519,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz",
+      "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -569,6 +641,165 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -611,6 +842,48 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz",
+      "integrity": "sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
@@ -651,6 +924,122 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.2.tgz",
+      "integrity": "sha512-Y5w0qGhysvmqsIy6nQxaPa6mXNKznfoGjOfBgzOjocLxr2XlSjqBMYQQL+FfyogsMuX+m8cZyQGYhJxvxUzO4w==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -669,6 +1058,169 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz",
+      "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -772,6 +1324,59 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.0.tgz",
+      "integrity": "sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
@@ -5345,6 +5950,16 @@
         }
       }
     },
+    "node_modules/react-type-animation": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+      "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": ">= 15.0.0",
+        "react-dom": ">= 15.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 8b9c360..26bc32a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
@@ -26,6 +31,7 @@
     "react-cytoscapejs": "^2.0.0",
     "react-dom": "^18",
     "react-resizable-panels": "^2.0.20",
+    "react-type-animation": "^3.2.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "web-tree-sitter": "^0.22.6"
diff --git a/public/falkordb-circle.svg b/public/falkordb-circle.svg
new file mode 100644
index 0000000..cebff97
--- /dev/null
+++ b/public/falkordb-circle.svg
@@ -0,0 +1,21 @@
+<svg width="508" height="508" viewBox="0 0 508 508" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1462_204)">
+<rect y="-1" width="508" height="508" rx="63.5" fill="url(#paint0_linear_1462_204)"/>
+<rect y="-1" width="508" height="508" rx="63.5" fill="url(#paint1_linear_1462_204)"/>
+<path d="M459.448 247.263C459.06 249.273 458.295 251.265 457.465 253.036C456.174 255.775 454.477 258.357 452.439 260.598C447.809 265.671 441.271 268.253 434.576 269.608C427.88 270.964 407.573 270.088 399.089 268.041C377.481 262.821 355.182 262.941 341.966 268.05C333.583 271.296 330.651 273.15 326.224 276.968C308.711 292.027 300.872 328.455 293.919 349.897C289.188 364.56 284.549 379.823 273.925 391.378C257.565 409.149 230.332 414 205.635 414H97.1546C95.7989 414 94.7752 412.773 95.0427 411.436L97.588 398.35C99.6538 387.689 109.005 379.998 119.869 379.998H192.706C213.732 379.998 236.234 377.056 247.891 360.963C254.43 351.916 256.311 340.711 258.985 330.051C268.346 292.728 271.454 258.219 308.822 243.5C297.811 236.621 289.806 225.499 287.021 213.27C281.902 190.694 294.011 167.962 295.136 144.897C295.634 135.075 293.319 123.999 284.697 118.549C278.656 114.722 270.91 114.611 263.652 114.611C236.409 114.639 219.182 114.657 187.504 114.676H180.145C165.897 114.685 155.199 101.691 157.919 87.7101L158.685 83.7446C158.879 82.7209 159.745 82.0016 160.778 82.0016C177.637 82.0016 241.602 82.103 273.695 82.0016C292.222 81.9555 313.036 82.8224 325.579 95.7242C329.738 100.013 332.394 104.992 333.962 110.387C334.035 110.6 334.091 110.83 334.155 111.051C337.752 124.267 334.921 139.852 331.296 153.621C326.63 171.531 321.632 192.345 331.628 209.461C335.603 216.258 341.828 221.293 349.224 223.959C353.356 225.453 355.126 226.2 359.516 226.163C361.711 226.144 363.897 225.923 366.064 225.536C370.38 224.779 375.074 223.728 378.966 222.963C380.829 222.594 382.701 222.262 384.591 221.994C389.719 221.275 395.206 221.137 400.426 222.179C404.253 222.944 407.988 224.355 411.188 226.605C414.591 229.003 416.602 231.982 418.391 235.671C419.396 237.737 420.641 239.83 422.67 240.909C426.303 242.846 431.938 241.545 435.848 241.232C439.915 240.909 443.955 240.273 448.012 239.802C449.986 239.572 451.959 239.369 453.942 239.277C455.501 239.203 457.198 239.406 458.369 240.559C459.208 241.388 459.605 242.587 459.697 243.768C459.78 244.911 459.678 246.083 459.457 247.254L459.448 247.263Z" fill="#F7F3EF"/>
+<path d="M182.762 183.279L172.626 235.163C172.359 236.556 173.42 237.847 174.84 237.847H229.158C230.579 237.847 231.639 239.138 231.372 240.531L228.955 253.054C226.908 263.66 217.621 271.333 206.822 271.333H167.508C166.429 271.333 165.498 272.098 165.295 273.159L154.662 327.846C152.605 338.443 143.318 346.088 132.528 346.088H110.524C109.104 346.088 108.044 344.797 108.311 343.404L145.901 149.794C146.103 148.733 147.035 147.968 148.114 147.968H254.095C255.515 147.968 256.576 149.259 256.308 150.651L253.892 163.175C251.845 173.781 242.558 181.453 231.759 181.453H184.984C183.905 181.453 182.974 182.219 182.771 183.279H182.762Z" fill="#F7F3EF"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1462_204" x1="508" y1="-0.999974" x2="-71.0223" y2="100.054" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF66B3"/>
+<stop offset="1" stop-color="#FF804D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1462_204" x1="254" y1="507" x2="254" y2="-0.999989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7466FF"/>
+<stop offset="0.995636" stop-color="#7466FF" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_1462_204">
+<rect width="508" height="508" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo_02.svg b/public/logo_02.svg
new file mode 100644
index 0000000..99ea701
--- /dev/null
+++ b/public/logo_02.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2414 5.00223H4.36942C4.28983 5.00223 4.22093 5.05647 4.20549 5.13104L1.41282 18.8113C1.39262 18.9096 1.47221 19.0011 1.57674 19.0011H3.21125C4.01187 19.0011 4.70202 18.4599 4.85525 17.7118L5.64518 13.8486C5.66063 13.774 5.72952 13.7186 5.80911 13.7186H8.72889C9.53189 13.7186 10.2208 13.1774 10.3729 12.4282L10.5535 11.5424C10.5736 11.4452 10.4941 11.3525 10.3883 11.3525H6.35434C6.24981 11.3525 6.16903 11.261 6.19042 11.1627L6.94352 7.49601C6.95897 7.42143 7.02786 7.3672 7.10745 7.3672H10.582C11.385 7.3672 12.0739 6.82595 12.226 6.0768L12.4065 5.19093C12.4267 5.09262 12.3471 5.0011 12.2414 5.0011V5.00223Z" fill="#191919"/>
+<path d="M27.7117 11.9211C27.6843 12.0662 27.6294 12.2095 27.5697 12.3369C27.4776 12.5344 27.3562 12.7211 27.2103 12.882C26.8792 13.2485 26.4111 13.4341 25.9332 13.5319C25.4552 13.6297 24.0018 13.5665 23.3956 13.4193C21.8501 13.043 20.2547 13.0509 19.3096 13.4193C18.7103 13.6534 18.5007 13.7877 18.1833 14.0623C16.9307 15.1487 16.3695 17.7759 15.873 19.3225C15.5351 20.3803 15.2031 21.4806 14.4431 22.3151C13.2728 23.5971 11.3248 23.9467 9.55896 23.9467H0.154001C0.0570427 23.9467 -0.0164084 23.8579 0.00317914 23.7621L0.185342 22.8179C0.333228 22.0485 1.00214 21.4934 1.77879 21.4934H8.63345C10.1378 21.4934 11.7469 21.2811 12.5803 20.1206C13.0485 19.4677 13.1826 18.6598 13.3736 17.8904C14.0435 15.1981 14.2658 12.7092 16.9386 11.6485C16.1511 11.1517 15.5782 10.3497 15.3794 9.46775C15.0131 7.83911 15.8799 6.1996 15.9592 4.53639C15.9944 3.82824 15.8289 3.02923 15.2129 2.63614C14.781 2.36059 14.2267 2.3517 13.7076 2.3517C11.7586 2.35367 10.5266 2.35466 8.26128 2.35664H5.59542C4.57589 2.35664 3.81099 1.42034 4.00589 0.411945L4.06074 0.125525C4.07543 0.0524388 4.1381 9.31427e-05 4.21156 9.31427e-05C5.41717 9.31427e-05 12.1318 0.00700673 14.4265 9.31427e-05C15.7515 -0.00286982 17.2402 0.0593524 18.1373 0.989723C18.435 1.29886 18.625 1.65836 18.7367 2.0475C18.7426 2.0633 18.7455 2.07911 18.7504 2.0959C19.008 3.04898 18.8052 4.17392 18.5467 5.16651C18.2137 6.45837 17.8553 7.9596 18.5702 9.19417C18.8542 9.68503 19.2998 10.0475 19.8287 10.2401C20.1245 10.3477 20.2508 10.402 20.5642 10.3991C20.7209 10.3971 20.8776 10.3823 21.0324 10.3537C21.3409 10.2993 21.6768 10.2233 21.9549 10.168C22.0881 10.1413 22.2223 10.1176 22.3574 10.0979C22.7237 10.0455 23.1165 10.0356 23.4896 10.1107C23.7629 10.166 24.0302 10.2677 24.2594 10.4297C24.5033 10.6025 24.6463 10.8169 24.7745 11.0835C24.846 11.2327 24.9352 11.3838 25.0801 11.4618C25.3397 11.6011 25.7432 11.5072 26.0223 11.4845C26.3132 11.4608 26.6021 11.4154 26.892 11.3818C27.033 11.365 27.174 11.3512 27.316 11.3443C27.4277 11.3393 27.5491 11.3532 27.6324 11.4371C27.6921 11.4974 27.7215 11.5833 27.7274 11.6692C27.7332 11.7522 27.7264 11.8361 27.7107 11.9201L27.7117 11.9211Z" fill="url(#paint0_linear_202_5427)"/>
+<defs>
+<linearGradient id="paint0_linear_202_5427" x1="-0.478772" y1="23.2987" x2="27.7346" y2="23.2981" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7466FF"/>
+<stop offset="0.5" stop-color="#FF66B3"/>
+<stop offset="1" stop-color="#FF804D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index a14e83b..f0c4cb6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,9 @@ module.exports = {
     },
     extend: {
       colors: {
+        pink: "#F43F5F",
+        yellow: "#E9B306",
+        blue: "#15B8A6",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",