diff --git a/static/js/pages/firewall.js b/static/js/pages/firewall.js
new file mode 100644
index 0000000..c22fc67
--- /dev/null
+++ b/static/js/pages/firewall.js
@@ -0,0 +1,80 @@
+document.addEventListener("DOMContentLoaded", function () {
+    fetchFirewallData();
+});
+
+function renderRulesets(container, rulesets, ipVersion) {
+    container.innerHTML = "";
+
+    if (!rulesets || rulesets.length === 0) {
+        container.innerHTML = `<p class="text-muted">No ${ipVersion} firewall rulesets found.</p>`;
+        return;
+    }
+
+    rulesets.forEach(ruleset => {
+        const card = document.createElement("div");
+        card.className = "card mb-4";
+
+        let tableRows = '';
+        ruleset.rules.forEach(rule => {
+            tableRows += `
+                <tr>
+                    <td>${rule.rule}</td>
+                    <td>${rule.action}</td>
+                    <td>${rule.protocol}</td>
+                    <td>${rule.packets}</td>
+                    <td>${rule.bytes}</td>
+                    <td style="word-break: break-all;">${rule.conditions}</td>
+                </tr>
+            `;
+        });
+
+        card.innerHTML = `
+            <div class="card-header">
+                <strong>Firewall:</strong> ${ruleset.name}
+            </div>
+            <div class="table-responsive">
+                <table class="table table-striped table-bordered mb-0">
+                    <thead class="table-light">
+                        <tr>
+                            <th>Rule</th>
+                            <th>Action</th>
+                            <th>Protocol</th>
+                            <th>Packets</th>
+                            <th>Bytes</th>
+                            <th>Conditions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${tableRows}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.appendChild(card);
+    });
+}
+
+async function fetchFirewallData() {
+    const ipv4Container = document.getElementById("ipv4-rulesets-container");
+    const ipv6Container = document.getElementById("ipv6-rulesets-container");
+
+    try {
+        const response = await fetch("/firewall/json");
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        if (data.error) {
+            throw new Error(data.details || data.error);
+        }
+
+        renderRulesets(ipv4Container, data.ipv4, 'IPv4');
+        renderRulesets(ipv6Container, data.ipv6, 'IPv6');
+
+    } catch (error) {
+        console.error("Error fetching firewall data:", error);
+        ipv4Container.innerHTML = `<div class="alert alert-danger">Error loading IPv4 firewall data.</div>`;
+        ipv6Container.innerHTML = `<div class="alert alert-danger">Error loading IPv6 firewall data.</div>`;
+    }
+}
\ No newline at end of file