diff --git a/core/scripts/webpanel/app.py b/core/scripts/webpanel/app.py
index 08f44b4..2802366 100644
--- a/core/scripts/webpanel/app.py
+++ b/core/scripts/webpanel/app.py
@@ -51,6 +51,7 @@ def create_app() -> FastAPI:
     # Set up Routers
     app.include_router(routers.basic.router, prefix='', tags=['Basic Routes[Web]'])  # Add basic router
     app.include_router(routers.login.router, prefix='', tags=['Authentication[Web]'])  # Add authentication router
+    app.include_router(routers.config.router, prefix='/config', tags=['Config Management[Web]'])  # Add config router
     app.include_router(routers.user.router, prefix='/users', tags=['User Management[Web]'])  # Add user router
     app.include_router(routers.api.v1.api_v1_router, prefix='/api/v1', tags=['API Version 1'])  # Add API version 1 router # type: ignore
 
diff --git a/core/scripts/webpanel/routers/__init__.py b/core/scripts/webpanel/routers/__init__.py
index 4ee5e34..c956f4d 100644
--- a/core/scripts/webpanel/routers/__init__.py
+++ b/core/scripts/webpanel/routers/__init__.py
@@ -2,3 +2,4 @@ from . import basic
 from . import api
 from . import user
 from . import login
+from . import config
diff --git a/core/scripts/webpanel/routers/config/__init__.py b/core/scripts/webpanel/routers/config/__init__.py
new file mode 100644
index 0000000..69fedd5
--- /dev/null
+++ b/core/scripts/webpanel/routers/config/__init__.py
@@ -0,0 +1 @@
+from .config import router
diff --git a/core/scripts/webpanel/routers/config/config.py b/core/scripts/webpanel/routers/config/config.py
new file mode 100644
index 0000000..b919654
--- /dev/null
+++ b/core/scripts/webpanel/routers/config/config.py
@@ -0,0 +1,10 @@
+from fastapi import APIRouter, Depends, Request
+from fastapi.templating import Jinja2Templates
+from dependency import get_templates
+
+router = APIRouter()
+
+
+@router.get('/')
+async def config(request: Request, templates: Jinja2Templates = Depends(get_templates)):
+    return templates.TemplateResponse('config.html', {'request': request})
diff --git a/core/scripts/webpanel/templates/base.html b/core/scripts/webpanel/templates/base.html
index e4df83e..dfd2c53 100644
--- a/core/scripts/webpanel/templates/base.html
+++ b/core/scripts/webpanel/templates/base.html
@@ -67,6 +67,12 @@
                                 <p>Users</p>
                             </a>
                         </li>
+                        <li class="nav-item">
+                            <a href="{{ url_for('config') }}" class="nav-link {% if request.path == url_for('config') %}active{% endif %}">
+                                <i class="nav-icon fas fa-cog"></i>
+                                <p>Config</p>
+                            </a>
+                        </li>
                     </ul>
                 </nav>
             </div>
diff --git a/core/scripts/webpanel/templates/config.html b/core/scripts/webpanel/templates/config.html
new file mode 100644
index 0000000..48db66b
--- /dev/null
+++ b/core/scripts/webpanel/templates/config.html
@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+
+{% block title %}Config Editor{% endblock %}
+
+{% block content %}
+<br>
+<div class="" style="margin-left: 20px; margin-right: 20px; margin-bottom: 20px;">
+    <div class="flex justify mb-4 space-x-2">
+        <button onclick="restoreJson()" class="px-4 py-2 bg-blue text-black rounded-lg ">Restore JSON</button>
+        <button onclick="saveJson()" class="px-4 py-2 bg-green text-black rounded-lg duration-200">Save JSON</button>
+    </div>
+
+    <div id="jsoneditor" class="border rounded-lg shadow-lg" style="height: 700px; width: 100%;"></div>
+</div>
+{% endblock %}
+
+{% block javascripts%}
+<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.1.0/dist/jsoneditor.min.css" />
+<script>
+    const container = document.getElementById("jsoneditor");
+    const editor = new JSONEditor(container, {
+        mode: "tree",
+        modes: ["code", "tree"]
+    });
+
+
+    function restoreJson() {
+        fetch("/api/json-file")
+            .then(response => response.json())
+            .then(json => editor.set(json))
+            .catch(error => console.error("Error loading JSON:", error));
+    }
+
+    function saveJson() {
+        fetch("/api/json-file", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(editor.get())
+        }).then(() => alert("Saved successfully!"))
+            .catch(error => console.error("Error saving JSON:", error));
+    }
+</script>
+{% endblock %}
\ No newline at end of file