diff --git a/static/js/pages/bgp.js b/static/js/pages/bgp.js
new file mode 100644
index 0000000..d51410d
--- /dev/null
+++ b/static/js/pages/bgp.js
@@ -0,0 +1,169 @@
+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);
+
+    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 loadBgpTables(){
+    const ipv4SummaryEl=document.getElementById("ipv4Summary");
+    const ipv6SummaryEl=document.getElementById("ipv6Summary");
+    const ipv4Body=document.getElementById("ipv4TableBody");
+    const ipv6Body=document.getElementById("ipv6TableBody");
+
+    try{
+        const response=await fetch("/bgp/json");
+        const data=await response.json();
+
+        ipv4SummaryEl.innerHTML=`
+            <p>BGP Router ID:${data.ipv4_info.router_id},Local AS Number:${data.ipv4_info.local_as} VRF ID:${data.ipv4_info.vrf_id}</p>
+            <p>BGP Table Version:${data.ipv4_info.table_version}</p>
+            <p>RIB Entries:${data.ipv4_info.rib_entries},using ${data.ipv4_info.rib_memory}</p>
+            <p>Peers:${data.ipv4_info.peers},using ${data.ipv4_info.peers_memory}</p>
+        `;
+
+        ipv6SummaryEl.innerHTML=`
+            <p>BGP Router ID:${data.ipv6_info.router_id},Local AS Number:${data.ipv6_info.local_as} VRF ID:${data.ipv6_info.vrf_id}</p>
+            <p>BGP Table Version:${data.ipv6_info.table_version}</p>
+            <p>RIB Entries:${data.ipv6_info.rib_entries},using ${data.ipv6_info.rib_memory}</p>
+            <p>Peers:${data.ipv6_info.peers},using ${data.ipv6_info.peers_memory}</p>
+        `;
+
+        ipv4Body.innerHTML="";
+        if(data.ipv4_peers.length===0){
+            ipv4Body.innerHTML=`<tr><td colspan="12" class="text-center">Geen data beschikbaar.</td></tr>`;
+        }else{
+            data.ipv4_peers.forEach((peer,index)=>{
+                const row=document.createElement("tr");
+                row.setAttribute("data-index",index);
+                row.innerHTML=`
+                    <td>${peer.neighbor}</td>
+                    <td>${peer.version}</td>
+                    <td>${peer.as_number}</td>
+                    <td>${peer.msg_received}</td>
+                    <td>${peer.msg_sent}</td>
+                    <td>${peer.table_version}</td>
+                    <td>${peer.in_queue}</td>
+                    <td>${peer.out_queue}</td>
+                    <td>${peer.up_down}</td>
+                    <td>${peer.state_pfx_rcd}</td>
+                    <td>${peer.prefix_sent}</td>
+                    <td>${peer.description}</td>
+                `;
+                ipv4Body.appendChild(row);
+            });
+        }
+
+        ipv6Body.innerHTML="";
+        if(data.ipv6_peers.length===0){
+            ipv6Body.innerHTML=`<tr><td colspan="12" class="text-center">Geen data beschikbaar.</td></tr>`;
+        }else{
+            data.ipv6_peers.forEach((peer,index)=>{
+                const row=document.createElement("tr");
+                row.setAttribute("data-index",index);
+                row.innerHTML=`
+                    <td>${peer.neighbor}</td>
+                    <td>${peer.version}</td>
+                    <td>${peer.as_number}</td>
+                    <td>${peer.msg_received}</td>
+                    <td>${peer.msg_sent}</td>
+                    <td>${peer.table_version}</td>
+                    <td>${peer.in_queue}</td>
+                    <td>${peer.out_queue}</td>
+                    <td>${peer.up_down}</td>
+                    <td>${peer.state_pfx_rcd}</td>
+                    <td>${peer.prefix_sent}</td>
+                    <td>${peer.description}</td>
+                `;
+                ipv6Body.appendChild(row);
+            });
+        }
+    }catch(error){
+        ipv4SummaryEl.textContent="Fout bij ophalen IPv4 data.";
+        ipv6SummaryEl.textContent="Fout bij ophalen IPv6 data.";
+        ipv4Body.innerHTML=`<tr><td colspan="12" class="text-center text-danger">Fout bij ophalen van data.</td></tr>`;
+        ipv6Body.innerHTML=`<tr><td colspan="12" class="text-center text-danger">Fout bij ophalen van data.</td></tr>`;
+    }
+}
+
+window.addEventListener("DOMContentLoaded",()=>{
+    loadBgpTables();
+});
+
+function refreshBGPTable(){
+    const searchInput=document.getElementById("ipv4Search");
+    const searchInput2=document.getElementById("ipv6Search");
+    const refreshIcon=document.getElementById("refreshIcon");
+    const refreshIcon2=document.getElementById("refreshIcon2");
+    const refreshSpinner=document.getElementById("refreshSpinner");
+    const refreshSpinner2=document.getElementById("refreshSpinner2");
+
+    searchInput.value="";
+    searchInput2.value="";
+
+    refreshIcon.classList.add("d-none");
+    refreshIcon2.classList.add("d-none");
+    refreshSpinner.classList.remove("d-none");
+    refreshSpinner2.classList.remove("d-none");
+
+    loadBgpTables().then(()=>{
+        refreshIcon.classList.remove("d-none");
+        refreshIcon2.classList.remove("d-none");
+        refreshSpinner.classList.add("d-none");
+        refreshSpinner2.classList.add("d-none");
+    });
+}