diff --git a/static/css/style.css b/static/css/style.css
index 76f98a0..78ee679 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -252,93 +252,143 @@ canvas {
   font-weight: bold;
 }
 
+.bgprtv-container { 
+    max-width: 100%; 
+    margin: 0 auto; 
+    padding: 0px; 
+}
+.bgprtv-h1 { 
+    text-align: center; 
+    color: #212529; 
+}
+.bgprtv-form-container {
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+.bgprtv-input {
+    width: calc(100% - 110px);
+    padding: 12px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    font-size: 16px;
+}
+.bgprtv-submit {
+    width: 100px;
+    padding: 12px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-left: 10px;
+}
+#bgprtv-mynetwork {
+    width: 100%;
+    min-height: 60vh;
+    height: 60vh;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin-top: 20px;
+}
+#bgprtv-mynetwork .vis-network,
+#bgprtv-mynetwork canvas {
+    height: 100% !important;
+}
+.bgprtv-legend-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+.bgprtv-legend-symbol {
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+.bgprtv-legend-line {
+    height: 0;
+    width: 40px;
+}
+.bgprtv-legend-line.best-path {
+    border-top: 3px solid #C0392B;
+}
+.bgprtv-legend-line.alt-path {
+    border-top: 2px dashed #2C3E50;
+}
+.bgprtv-legend-node {
+    display: inline-block;
+    width: 25px;
+    height: 20px;
+    border: 2px solid #343a40;
+    border-radius: 3px;
+}
+.bgprtv-legend-node.best-path-node {
+    background-color: #FADBD8;
+}
+.bgprtv-legend-node.alt-path-node {
+    background-color: #D6DBDF;
+}
 
-        .bgprtv-container { 
-            max-width: 100%; 
-            margin: 0 auto; 
-            padding: 0px; 
-        }
-        .bgprtv-h1 { 
-            text-align: center; 
-            color: #212529; 
-        }
-        .bgprtv-form-container { 
-            background-color: #fff; 
-            padding: 30px; 
-            border-radius: 8px; 
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
-            margin-bottom: 20px; 
-        }
-        .bgprtv-input { 
-            width: calc(100% - 110px); 
-            padding: 12px; 
-            border: 1px solid #ced4da; 
-            border-radius: 4px; 
-            font-size: 16px; 
-        }
-        .bgprtv-submit { 
-            width: 100px; 
-            padding: 12px; 
-            background-color: #007bff; 
-            color: white; 
-            border: none; 
-            border-radius: 4px; 
-            cursor: pointer; 
-            font-size: 16px; 
-            margin-left: 10px; 
-        }
-        #bgprtv-mynetwork {
-            width: 100%;
-            min-height: 60vh; /* Geef de container een goede minimale hoogte */
-            height: 60vh;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            margin-top: 20px;
-        }
-        #bgprtv-mynetwork .vis-network, 
-        #bgprtv-mynetwork canvas {
-            height: 100% !important; /* Forceer het canvas om de container te vullen */
-        }
-        .bgprtv-legend-container {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            gap: 25px;
-            padding: 10px;
-            margin-bottom: 20px;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            background-color: #fff;
-        }
-        .bgprtv-legend-item {
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-        }
-        .bgprtv-legend-symbol {
-            margin-right: 10px;
-            flex-shrink: 0;
-        }
-        .bgprtv-legend-line {
-            height: 0;
-            width: 40px;
-        }
-        .bgprtv-legend-line.best-path {
-            border-top: 3px solid #C0392B;
-        }
-        .bgprtv-legend-line.alt-path {
-            border-top: 2px dashed #2C3E50;
-        }
-        .bgprtv-legend-node {
-            display: inline-block;
-            width: 25px;
-            height: 20px;
-            border: 2px solid #343a40;
-            border-radius: 3px;
-        }
-        .bgprtv-legend-node.best-path-node {
-            background-color: #FADBD8;
-        }
-        .bgprtv-legend-node.alt-path-node {
-            background-color: #D6DBDF;
-        }
\ No newline at end of file
+.bgprtv-legend-line.multipath {
+    border-top: 2px solid #F39C12;
+}
+
+.bgprtv-legend-node.multipath-node {
+    background-color: #FDEBD0;
+}
+
+.bgprtv-filter-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: bold;
+    color: #555;
+}
+
+.bgprtv-legend-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 15px 25px;
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    background-color: #fff;
+}
+
+.bgprtv-filter-container {
+    flex-basis: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #eee;
+}
+
+#bgprtv-filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 15px;
+    align-items: center;
+}
+
+#bgprtv-filter-controls label {
+    margin: 0;
+    font-weight: normal;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer;
+}
+
+.bgprtv-filter-separator {
+    display: inline-block;
+    border-left: 1px solid #ccc;
+    height: 16px;
+    margin: 0 5px;
+}
\ No newline at end of file