diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..994d75f
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,8 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ExtractMethodRecommender" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="minLength" value="554" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/output.json b/output.json
new file mode 100644
index 0000000..a63ce32
--- /dev/null
+++ b/output.json
@@ -0,0 +1,148 @@
+[ {
+  "name" : "Database",
+  "interfaces" : [ {
+    "name" : "Database",
+    "functions" : [ {
+      "name" : "GetUserList",
+      "access_modifier" : "public",
+      "implemented_interface" : "none",
+      "importance" : "critical",
+      "inputTypes" : [ {
+        "type" : "FLOAT",
+        "identifier" : "x"
+      }, {
+        "type" : "STRING",
+        "identifier" : "ag"
+      } ],
+      "returnTypes" : [ {
+        "type" : "\"CustomDataType\"",
+        "identifier" : "x"
+      } ],
+      "specificationEntries" : [ {
+        "key" : "ExecTime",
+        "value" : "\"10s\""
+      }, {
+        "key" : "MaxReturnVals",
+        "value" : "\"10s\""
+      } ]
+    } ]
+  } ],
+  "specifications" : [ {
+    "name" : "DatabaseAccess",
+    "implemented_interface" : "Database",
+    "requirements" : [ {
+      "name" : "DatabaseAccessMember",
+      "annotations" : [ {
+        "importance" : "optional",
+        "name" : "UserHasAdminAccess"
+      }, {
+        "importance" : "critical",
+        "name" : "UserIsNotBanned"
+      } ]
+    } ],
+    "results" : [ {
+      "name" : "DatabaseAdminPanel",
+      "importance" : "optional"
+    }, {
+      "name" : "DatabaseVisualizerPanel",
+      "importance" : "critical"
+    }, {
+      "name" : "Clock",
+      "importance" : "none"
+    } ],
+    "functions" : [ {
+      "name" : "GetUserList",
+      "access_modifier" : "public",
+      "implemented_interface" : "DatabaseAccessImpl",
+      "importance" : "critical",
+      "inputTypes" : [ {
+        "type" : "FLOAT",
+        "identifier" : "x"
+      }, {
+        "type" : "STRING",
+        "identifier" : "ag"
+      } ],
+      "returnTypes" : [ {
+        "type" : "INT",
+        "identifier" : "x"
+      } ],
+      "specificationEntries" : [ {
+        "key" : "ExecTime",
+        "value" : "\"10s\""
+      }, {
+        "key" : "MaxReturnVals",
+        "value" : "\"10s\""
+      } ]
+    }, {
+      "name" : "GetUserdList",
+      "access_modifier" : "public",
+      "implemented_interface" : "Database",
+      "importance" : "critical",
+      "inputTypes" : [ {
+        "type" : "FLOAT",
+        "identifier" : "x"
+      }, {
+        "type" : "STRING",
+        "identifier" : "ag"
+      } ],
+      "returnTypes" : [ {
+        "type" : "INT",
+        "identifier" : "x"
+      } ],
+      "specificationEntries" : [ {
+        "key" : "ExecTime",
+        "value" : "\"10s\""
+      }, {
+        "key" : "MaxReturnVals",
+        "value" : "\"10s\""
+      } ]
+    }, {
+      "name" : "GetUserdfList",
+      "access_modifier" : "public",
+      "implemented_interface" : "Database",
+      "importance" : "critical",
+      "inputTypes" : [ {
+        "type" : "FLOAT",
+        "identifier" : "x"
+      }, {
+        "type" : "STRING",
+        "identifier" : "ag"
+      } ],
+      "returnTypes" : [ {
+        "type" : "INT",
+        "identifier" : "x"
+      } ],
+      "specificationEntries" : [ {
+        "key" : "ExecTime",
+        "value" : "\"10s\""
+      }, {
+        "key" : "MaxReturnVals",
+        "value" : "\"10s\""
+      } ]
+    }, {
+      "name" : "GetUsesfrList",
+      "access_modifier" : "public",
+      "implemented_interface" : "Database",
+      "importance" : "critical",
+      "inputTypes" : [ {
+        "type" : "FLOAT",
+        "identifier" : "x"
+      }, {
+        "type" : "STRING",
+        "identifier" : "ag"
+      } ],
+      "returnTypes" : [ {
+        "type" : "INT",
+        "identifier" : "x"
+      } ],
+      "specificationEntries" : [ {
+        "key" : "ExecTime",
+        "value" : "\"10s\""
+      }, {
+        "key" : "MaxReturnVals",
+        "value" : "\"10s\""
+      } ]
+    } ],
+    "implementedInterface" : "Database"
+  } ]
+} ]
\ No newline at end of file
diff --git a/src/main/java/org/lumijiez/Main.java b/src/main/java/org/lumijiez/Main.java
index 6038637..93134f0 100644
--- a/src/main/java/org/lumijiez/Main.java
+++ b/src/main/java/org/lumijiez/Main.java
@@ -1,5 +1,6 @@
 package org.lumijiez;
 
+import com.fasterxml.jackson.core.JsonProcessingException;
 import org.antlr.v4.runtime.*;
 import org.antlr.v4.runtime.tree.ParseTree;
 import org.lumijiez.models.Package;
@@ -8,11 +9,13 @@ import org.lumijiez.parser.WinxParser;
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 
+import java.awt.Desktop;
 import java.io.File;
 import java.io.IOException;
 import java.net.URISyntaxException;
 import java.nio.file.Files;
 import java.nio.file.Path;
+import java.nio.file.Paths;
 import java.util.List;
 import java.util.Objects;
 
@@ -38,17 +41,36 @@ public class Main {
 
             // Retrieve the collected data and save it to JSON
             List<Package> packages = collector.getPackages();
-            saveAsJson(packages, "output.json");
+            String json = saveAsJson(packages, "output.json");
 
             System.out.println("Data successfully saved to 'output.json'.");
+
+            Path templatePath = Path.of(Objects.requireNonNull(Main.class.getResource("/graph.html")).toURI());
+            String htmlTemplate = Files.readString(templatePath);
+
+            // Replace placeholder with JSON
+            String finalHtmlContent = htmlTemplate.replace("const jsonData = null;", "const jsonData = " + json + ";");
+
+            // Save the modified HTML to a temporary file and open in a browser
+            Path tempFile = Files.createTempFile("output", ".html");
+            Files.writeString(tempFile, finalHtmlContent);
+            Desktop.getDesktop().browse(tempFile.toUri());
+
+            System.out.println("HTML with JSON data successfully opened in a browser.");
+
         } catch (IOException | URISyntaxException e) {
             System.err.println("Error processing the input file: " + e.getMessage());
         }
     }
 
-    private static void saveAsJson(List<Package> packages, String filePath) throws IOException {
+    private static String saveAsJson(List<Package> packages, String filePath) throws IOException {
         ObjectMapper mapper = new ObjectMapper();
-        // Write JSON output to a file with pretty printing
-        mapper.writerWithDefaultPrettyPrinter().writeValue(new File(filePath), packages);
+        try {
+            String jsonString = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(packages);
+            Files.writeString(Paths.get(filePath), jsonString);
+            return jsonString;
+        } catch (JsonProcessingException e) {
+            throw new IOException("Failed to serialize data to JSON", e);
+        }
     }
 }
diff --git a/src/main/java/org/lumijiez/WinxCollector.java b/src/main/java/org/lumijiez/WinxCollector.java
index 7822ec3..5e0ef46 100644
--- a/src/main/java/org/lumijiez/WinxCollector.java
+++ b/src/main/java/org/lumijiez/WinxCollector.java
@@ -57,6 +57,10 @@ public class WinxCollector extends WinxBaseVisitor<Void> {
 
         function.addReturnType(new Variable(ctx.function_body().return_type().variable().type().getText(), ctx.function_body().return_type().variable().ID().getText()));
 
+        if (ctx.importance() != null) {
+            function.setImportance(ctx.importance().getText());
+        }
+
         if (ctx.impls() != null) function.setImplemented_interface(ctx.impls().ID().getText());
 
         if (ctx.function_body().specification_entry() != null)
diff --git a/src/main/java/org/lumijiez/models/FunctionSpec.java b/src/main/java/org/lumijiez/models/FunctionSpec.java
index 0f760c4..1bfe6d6 100644
--- a/src/main/java/org/lumijiez/models/FunctionSpec.java
+++ b/src/main/java/org/lumijiez/models/FunctionSpec.java
@@ -6,6 +6,7 @@ public class FunctionSpec {
     private final String name;
     private String access_modifier;
     private String implemented_interface = "none";
+    private String importance = "none";
     private final List<Variable> inputTypes = new ArrayList<>();
     private final List<Variable> returnTypes = new ArrayList<>();
     private final List<SpecificationEntry> specificationEntries = new ArrayList<>();
@@ -57,5 +58,13 @@ public class FunctionSpec {
     public void setImplemented_interface(String implemented_interface) {
         this.implemented_interface = implemented_interface;
     }
+
+    public String getImportance() {
+        return importance;
+    }
+
+    public void setImportance(String importance) {
+        this.importance = importance;
+    }
 }
 
diff --git a/src/main/resources/TestProgram.txt b/src/main/resources/TestProgram.txt
index 7ca7cd1..d715729 100644
--- a/src/main/resources/TestProgram.txt
+++ b/src/main/resources/TestProgram.txt
@@ -32,6 +32,25 @@ package Database {
             @MaxReturnVals : "10s";
             return INT x;
         }
+
+        critical public GetUserdList(FLOAT[] x, STRING ag) implements Database {
+                    @ExecTime : "10s";
+                    @MaxReturnVals : "10s";
+                    return INT x;
+                }
+
+        critical public GetUserdfList(FLOAT[] x, STRING ag) implements Database {
+                    @ExecTime : "10s";
+                    @MaxReturnVals : "10s";
+                    return INT x;
+                }
+
+        critical public GetUsesfrList(FLOAT[] x, STRING ag) implements Database {
+                    @ExecTime : "10s";
+                    @MaxReturnVals : "10s";
+                    return INT x;
+                }
+
     }
 }
 
diff --git a/src/main/resources/graph.html b/src/main/resources/graph.html
new file mode 100644
index 0000000..88f610e
--- /dev/null
+++ b/src/main/resources/graph.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Graph Visualization</title>
+    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+    <style>
+        #mynetwork {
+            width: 100%;
+            height: 100vh;
+            border: 1px solid lightgray;
+        }
+    </style>
+</head>
+<body>
+    <div id="mynetwork"></div>
+
+    <script>
+        const jsonData = null;
+
+        function generateVisData(data) {
+        const nodes = [];
+        const edges = [];
+
+        data.forEach(pkg => {
+            const pkgId = `pkg-${pkg.name}`;
+            nodes.push({
+                id: pkgId,
+                label: `Package: ${pkg.name}`,
+                shape: 'box'
+            });
+
+            const interfaceIds = {};
+
+            pkg.interfaces.forEach(iface => {
+                const ifaceId = `iface-${iface.name}`;
+                interfaceIds[iface.name] = ifaceId;  
+                nodes.push({
+                    id: ifaceId,
+                    label: formatInterface(iface),
+                    shape: 'box'
+                });
+                edges.push({ from: pkgId, to: ifaceId });
+
+                iface.functions.forEach(func => {
+                    const funcId = `func-${iface.name}-${func.name}`;
+                    nodes.push({
+                        id: funcId,
+                        label: formatFunction(func),
+                        shape: 'box'
+                    });
+                    edges.push({ from: ifaceId, to: funcId });
+
+                    if (func.implemented_interface && func.implemented_interface !== "none" && interfaceIds[func.implemented_interface]) {
+                        edges.push({ from: funcId, to: interfaceIds[func.implemented_interface] });
+                    }
+                });
+            });
+
+            pkg.specifications.forEach(spec => {
+                const specId = `spec-${spec.name}`;
+                nodes.push({
+                    id: specId,
+                    label: formatSpecification(spec),
+                    shape: 'box'
+                });
+                edges.push({ from: pkgId, to: specId });
+
+                spec.functions.forEach(func => {
+                    const funcId = `func-${spec.name}-${func.name}`;
+                    nodes.push({
+                        id: funcId,
+                        label: formatFunction(func),
+                        shape: 'box'
+                    });
+                    edges.push({ from: specId, to: funcId });
+
+                    if (func.implemented_interface && func.implemented_interface !== "none" && interfaceIds[func.implemented_interface]) {
+                        edges.push({ from: funcId, to: interfaceIds[func.implemented_interface] });
+                    }
+                });
+            });
+        });
+
+        return { nodes: new vis.DataSet(nodes), edges: new vis.DataSet(edges) };
+    }
+
+    function formatInterface(iface) {
+        return `Interface: ${iface.name}`;
+    }
+
+    function formatFunction(func) {
+        let label = `Function: ${func.name}\nAccess: ${func.access_modifier}`;
+        label += `\nImplements: ${func.implemented_interface}`;
+        label += `\nImportance: ${func.importance}`;
+        func.inputTypes.forEach(input => {
+            label += `\nInput: ${input.type} ${input.identifier}`;
+        });
+        func.returnTypes.forEach(ret => {
+            label += `\nReturn: ${ret.type} ${ret.identifier}`;
+        });
+        func.specificationEntries.forEach(entry => {
+            label += `\n${entry.key}: ${entry.value}`;
+        });
+        return label;
+    }
+
+    function formatSpecification(spec) {
+        let label = `Specification: ${spec.name}\nImplements: ${spec.implementedInterface}`;
+        spec.requirements.forEach(req => {
+            label += `\nRequirement: ${req.name}`;
+            req.annotations.forEach(anno => {
+                label += `\n - ${anno.name} (${anno.importance})`;
+            });
+        });
+        spec.results.forEach(result => {
+            label += `\nResult: ${result.name} (${result.importance})`;
+        });
+        return label;
+    }
+
+    const { nodes, edges } = generateVisData(jsonData);
+
+    const container = document.getElementById('mynetwork');
+    const data = {
+        nodes: nodes,
+        edges: edges
+    };
+    const options = {
+        nodes: {
+            font: {
+                multi: 'html',
+                size: 14
+            }
+        },
+        layout: {
+            randomSeed: undefined,
+            improvedLayout: true,
+            clusterThreshold: 150,
+            hierarchical: {
+                enabled: true, 
+                levelSeparation: 150,
+                nodeSpacing: 300,
+                treeSpacing: 200,
+                blockShifting: true,
+                edgeMinimization: true,
+                parentCentralization: true,
+                direction: 'UD',  
+                sortMethod: 'directed'  
+            }
+        },
+        edges: {
+            smooth: {
+                type: 'dynamic',
+                roundness: 0.5
+            },
+            length: 400  
+        }
+    };
+    const network = new vis.Network(container, data, options);
+    </script>
+</body>
+</html>