diff --git a/apps/home/static/home/js/tabs/filters.js b/apps/home/static/home/js/tabs/filters.js
index c8989d0..8c66c52 100644
--- a/apps/home/static/home/js/tabs/filters.js
+++ b/apps/home/static/home/js/tabs/filters.js
@@ -1,4 +1,5 @@
 const filterTableId = "#filterTable";
+const filterModalId = "#filterFormModal";
 
 
 // region Init Module
@@ -66,3 +67,15 @@ async function loadFilterData() {
     setTableFilter(filterTableId, "server", selectedServer.id);
     await loadTableData(filterTableId, "/api/filters/", "GET");
 }
+
+
+// region New/Edit Modal
+
+$(filterTableId).closest('.js-tableBody').siblings('.js-tableFilters').on("click", ".table-new-btn", async function() {
+    await openDataModal(filterModalId, -1);
+});
+
+$(filterTableId).on("click", ".edit-modal", async function() {
+    const id = $(filterTableId).DataTable().row($(this).closest("tr")).data().id;
+    await openDataModal(filterModalId, id, `/api/filters/${id}/`);
+});
diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html
index 0e9ff2d..247e8db 100644
--- a/apps/home/templates/home/index.html
+++ b/apps/home/templates/home/index.html
@@ -81,15 +81,15 @@
             </div>
             <div id="selectedServerContainer" class="row" style="display: none;">
                 <div class="col-12 bg-body-tertiary px-4 py-3 py-sm-4">
-                    <div class="row">
-                        <div class="col-sm-7 col-md-6 d-flex align-items-center">
+                    <div class="row d-none">
+                        <div class="col-sm-7 col-md-6 d-flex align-items-center d-none">
                             <img alt="Server Icon" class="resolve-to-server-icon rounded-3 d-none d-sm-block">
                             <div class="ms-sm-3" style="min-width: 0">
                                 <h3 class="mb-0 resolve-to-server-name text-truncate"></h3>
                                 <h5 class="mb-0 resolve-to-server-id text-truncate text-body-secondary text-monospace"></h5>
                             </div>
                         </div>
-                        <div class="col-sm-5 col-md-6 d-flex justify-content-sm-end align-items-center">
+                        <div class="col-sm-5 col-md-6 d-flex justify-content-sm-end align-items-center d-none">
                             <div class="mt-3 mt-sm-0">
                                 <button type="button" id="serverSettingsBtn" class="btn btn-outline-secondary rounded-1 me-3">
                                     <i class="bi bi-gear"></i>
diff --git a/apps/home/templates/home/modals/editFilter.html b/apps/home/templates/home/modals/editFilter.html
index ac4e0e3..692bb83 100644
--- a/apps/home/templates/home/modals/editFilter.html
+++ b/apps/home/templates/home/modals/editFilter.html
@@ -1,5 +1,72 @@
 
 <div id="filterFormModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-1">
+            <form id="filterForm" class="mb-0" novalidate>
+                <div class="modal-header border-bottom-0">
+                    <h5 class="modal-title ms-2">
+                        <span class="form-create">Add</span>
+                        <span class="form-edit">Edit</span>
+                    </h5>
+                </div>
+                <div class="modal-body p-4">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="mb-4">
+                                <label for="filterName" class="form-label">Name</label>
+                                <input type="text" name="filterName" id="filterName" class="form-control" data-field="name" tabindex="1">
+                                <div class="form-text"></div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="mb-4">
+                                <label for="filterMatchingAlgorithm" class="form-label"></label>
+                                <select name="filterMatchingAlgorithm" id="filterMatchingAlgorithm" class="select-2" data-field="matching_algorithm" tabindex="2">
+                                    <option value="">-----</option>
+                                </select>
+                                <div class="form-text"></div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="mb-4">
+                                <label for="filterMatch" class="form-label">Match</label>
+                                <input type="text" name="filterMatch" id="filterMatch" class="form-control" data-field="match" tabindex="3">
+                                <div class="form-text"></div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="form-check form-switch mb-4">
+                                <label for="filterIsInsensitive" class="form-check-label"></label>
+                                <input type="checkbox" name="filterIsInsensitive" id="filterIsInsensitive" class="form-check-input" data-field="is_insensitive" tabindex="4">
+                                <div class="form-text"></div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="form-check form-switch">
+                                <label for="filterIsWhitelist" class="form-check-label"></label>
+                                <input type="checkbox" name="filterIsWhitelist" id="filterIsWhitelist" class="form-check-input" data-field="is_whitelist" tabindex="5">
+                                <div class="form-text"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer border-top-0 px-4">
+                    <button type="button" class="btn btn-danger rounded-1 me-auto ms-0 form-edit" tabindex="6">
+                        <i class="bi bi-trash3"></i>
+                    </button>
+                    <button type="submit" class="btn btn-primary rounded-1 me-0 px-4" tabindex="7">
+                        <i class="bi bi-floppy"></i>
+                    </button>
+                    <button type="button" class="btn btn-secondary rounded-1 me-0 ms-3" data-bs-dismiss="modal" tabindex="8">
+                        <i class="bi bi-arrow-return-right"></i>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- <div id="filterFormModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content rounded-1">
             <form id="filterForm" class="mb-0" novalidate>
@@ -58,4 +125,4 @@
             </form>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file