diff --git a/templates/interfaces.html b/templates/interfaces.html
index 90cacfe..ad8cb3e 100644
--- a/templates/interfaces.html
+++ b/templates/interfaces.html
@@ -1,40 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AS215085 - Router tools | Interfaces</title>
-    <link rel="icon" type="image/png" href="../static/img/cropped-Pixelhosting-logo-favicon-32x32.png">
-    <script src="../static/js/bootstrap.bundle.min.js"></script>
-    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
-    <link href="../static/css/style.css" rel="stylesheet">
-</head>
-<body>
-    <header>
-        <div class="header-content">
-            <a href="/"> <img src="../static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
-            <h2><b>core1.doet.pixelhosting.nl</b></h2>
-            <p><b>Proudly delivering the backbone for PixelHosting’s services</b></p>
-        </div>
-    </header>
-    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
-        <div class="container-fluid">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav justify-content-center w-100">
-                    <li class="nav-item"><a class="nav-link text-white" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp">BGP summary</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp-route">BGP route</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/arp">ARP table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/neighbors">Neighbors table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/interfaces">Interfaces table</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main>
+{% extends "base.html" %}
+
+{% block title %}AS215085 - Router tools | Interfaces{% endblock %}
+
+{% block content %}
+    <script src="../static/js/pages/interfaces.js"></script>
     <section id="interfaces">
         <div class="input-group mb-3">
             <input type="text" id="interfaceSearch" class="form-control" placeholder="Search in Interface table..." onkeyup="filterTable('interfaceSearch', 'interfaceTable')">
@@ -69,129 +38,4 @@
         </table>
         <p><a href="/interfaces/json">JSON version</a></p>
     </section>
-    </main>
-    <footer>
-        <p>&copy; 2020 – <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
-        <script> document.getElementById("year").textContent = new Date().getFullYear(); </script>
-    </footer>
-    <script src="../static/js/materialize.min.js"></script>
-    <script>
-        function filterTable(searchInputId, tableId) {
-            const input = document.getElementById(searchInputId);
-            const filter = input.value.toUpperCase();
-            const table = document.getElementById(tableId);
-            const tr = table.getElementsByTagName("tr");
-
-            for (let i = 1; i < tr.length; i++) {
-                tr[i].style.display = "none";
-                const td = tr[i].getElementsByTagName("td");
-                for (let j = 0; j < td.length; j++) {
-                    if (td[j]) {
-                        const txtValue = td[j].textContent || td[j].innerText;
-                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                            tr[i].style.display = "";
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-
-        function sortTable(tableId, columnIndex, th) {
-            const table = document.getElementById(tableId);
-            const tbody = table.tBodies[0];
-            const rows = Array.from(tbody.rows);
-            const headers = Array.from(th.parentNode.children);
-
-            // Reset other headers
-            headers.forEach(header => {
-                if (header !== th) {
-                    header.classList.remove('asc', 'desc');
-                    header.setAttribute('data-sort-state', 'none');
-                }
-            });
-
-            let currentState = th.getAttribute('data-sort-state') || 'none';
-            let newState = currentState === 'none' ? 'asc' : currentState === 'asc' ? 'desc' : 'none';
-
-            th.classList.remove('asc', 'desc');
-            if (newState !== 'none') th.classList.add(newState);
-            th.setAttribute('data-sort-state', newState);
-
-            if (newState === 'none') {
-                rows.sort((a, b) => parseInt(a.getAttribute('data-index')) - parseInt(b.getAttribute('data-index')));
-            } else {
-                rows.sort((a, b) => {
-                    const aText = a.cells[columnIndex].textContent.trim();
-                    const bText = b.cells[columnIndex].textContent.trim();
-                    const aNum = parseFloat(aText.replace(/[^0-9.-]/g, ''));
-                    const bNum = parseFloat(bText.replace(/[^0-9.-]/g, ''));
-                    const isNumeric = !isNaN(aNum) && !isNaN(bNum);
-
-                    return newState === 'asc'
-                        ? (isNumeric ? aNum - bNum : aText.localeCompare(bText))
-                        : (isNumeric ? bNum - aNum : bText.localeCompare(aText));
-                });
-            }
-
-            rows.forEach(row => tbody.appendChild(row));
-        }
-		
-        async function loadInterfaceTable() {
-            const tableBody = document.getElementById("interfaceTableBody");
-            const loadingRow = document.getElementById("interface-loading-row");
-
-            try {
-                const response = await fetch("/interfaces/json");
-                const data = await response.json();
-
-                // Leeg de body
-                tableBody.innerHTML = "";
-
-                if (!data.interface_table || data.interface_table.length === 0) {
-                    tableBody.innerHTML = "<tr><td colspan='7' class='text-center'>Geen data beschikbaar.</td></tr>";
-                    return;
-                }
-
-                data.interface_table.forEach((entry, index) => {
-                        const row = document.createElement("tr");
-                    row.setAttribute("data-index", index);
-                    row.innerHTML = `
-                        <td>${entry.interface}</td>
-                                <td>${entry.ip_address}</td>
-                            <td>${entry.mac_address}</td>
-                        <td>${entry.vrf}</td>
-                        <td>${entry.mtu}</td>
-                        <td>${entry.status}</td>
-                        <td>${entry.description}</td>
-                    `;
-                    tableBody.appendChild(row);
-                });
-
-            } catch (err) {
-                tableBody.innerHTML = "<tr><td colspan='7' class='text-center text-danger'>Fout bij ophalen van data.</td></tr>";
-            }
-        }
-
-        window.addEventListener("DOMContentLoaded", () => {
-            loadInterfaceTable();
-        });
-		
-        function refreshTable() {
-            const searchInput = document.getElementById("interfaceSearch");
-            const refreshIcon = document.getElementById("refreshIcon");
-            const refreshSpinner = document.getElementById("refreshSpinner");
-
-            searchInput.value = ""; // Leegmaken van het zoekveld
-
-            refreshIcon.classList.add("d-none");
-            refreshSpinner.classList.remove("d-none");
-
-            loadInterfaceTable().then(() => {
-                refreshIcon.classList.remove("d-none");
-                refreshSpinner.classList.add("d-none");
-            });
-        }
-    </script>
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
