diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
deleted file mode 100644
index 610204ac9..000000000
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
+++ /dev/null
@@ -1,89 +0,0 @@
-{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
-<h3> Add Content to Bank</h3>
-<form id="add_content_to_bank">
-    <div class="row">
-        <div class="col">
-            <input class="form-control" type="file" name="file" required>
-        </div>
-        <div class="col">
-            <select class="form-select" name="bank_name" required>
-                <option selected disabled value="">Select bank</option>
-                {% for b in bankList %}
-                <option value="{{b['name']}}">{{b['name']}}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div class="col">
-            <select class="form-select" name="content_type" required>
-                <option selected disabled value="">Select content type</option>
-                {% for c in content %}
-                    {% if c['enabled'] %}
-                        <option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
-                    {% endif %}
-                {% endfor %}
-            </select>
-        </div>
-        <div class="col">
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </div>
-    </div>
-</form>
-<div id="content_result">
-    <!-- Added to by javascript -->
-</div>
-<script>
-    const add_content_to_bank_form = document.getElementById("add_content_to_bank");
-    const content_result = document.getElementById("content_result");
-
-    add_content_to_bank_form.addEventListener("submit", (event) => {
-        event.preventDefault();
-        const formData = new FormData(event.target);
-        formData.append(event.target.content_type.value, event.target.file.files[0]);
-        formData.delete("file");
-
-        fetch(`/c/bank/${event.target.bank_name.value}/content`, {
-            method: 'POST',
-            body: formData
-        })
-            .then(response => response.json())
-            .then(data => {
-                // Handle the response from the server here
-                renderAddBankResult(data);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-    })
-
-    const renderAddBankResult = (result) => {
-        const hashHeader = `
-                <h4>Added Hashes:</h4>
-                <p>Content ID: ${result.id}</p>
-            `;
-
-        // Render hashes table
-        const hashesTableHTML = renderHashTable(result.signals);
-
-        // render on HTML
-        content_result.innerHTML = hashHeader + hashesTableHTML;
-    }
-
-    const renderHashTable = (hashes) => {
-        return `
-                    <h3>Hash Values:</h3>
-                    <table>
-                        <tr>
-                            <th>Key</th>
-                            <th>Value</th>
-                        </tr>
-                        ${Object.entries(hashes).map(([key, value]) => `
-                            <tr>
-                                <td>${key}</td>
-                                <td>${value}</td>
-                            </tr>
-                        `).join('')}
-                    </table>
-                `;
-    }
-
-</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
new file mode 100644
index 000000000..8bc0697b5
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
@@ -0,0 +1,6 @@
+<div class="mt-4 mb-4">
+    {% include "components/banks/match_form.html.j2" %}
+    <div class="d-flex mt-5 mb-4 justify-content-end">
+        {% include 'components/banks/create_new_bank.html.j2' %}
+    </div>
+</div>
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
new file mode 100644
index 000000000..326df0f11
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
@@ -0,0 +1,37 @@
+{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
+<button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#{{bank_title}}">Add content</button>
+<!-- Modal -->
+<div class="modal fade" id="{{bank_title}}" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
+        <div class="modal-content modal-xl" style="padding: 20px">
+            <form id="add_content_to_bank_{{ bank_title }}">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5">Add Content: {{ bank_title }}</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
+                </div>
+                <div class="modal-body">
+                        <div class="row" style="width: 80%">
+                                <input class="form-control" type="file" name="file" required  style="margin-bottom: 20px">
+                                <select class="form-select" name="content_type" required>
+                                    <option selected disabled value="">Select content type</option>
+                                    {% for c in content %}
+                                        {% if c['enabled'] %}
+                                            <option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
+                                        {% endif %}
+                                    {% endfor %}
+                                </select>
+                        </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-success">Add</button>
+                </div>
+            </form>
+            <div id="hash_result_{{ bank_title }}">
+                <!-- Added to by javascript -->
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+
+</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
new file mode 100644
index 000000000..fa9ecfd04
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
@@ -0,0 +1,121 @@
+{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
+<h1>Banks</h1>
+<p class="text-secondary">Banks are like folders. You can do the following on this page:</p>
+<ul class="text-secondary">
+    <li>Create new banks</li>
+    <li>Add content: Add content to each bank</li>
+    <li>Search by content: Find banks that contain a certain piece of content</li>
+</ul>
+{% include 'components/banks/actions_bar.html.j2' %}
+
+<div class="row row-cols-1 row-cols-md-4 g-4">
+    <table class="table table-hover">
+        <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">Bank Name</th>
+                <th scope="col">Matching Enabled Ratio</th>
+                <th scope="col">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for bank in bankList %}
+            <tr id="bank_item_{{bank['name']}}">
+                <th scope="row" style="background-color: transparent;">{{ loop.index }}</th>
+                <td style="background-color: transparent;">{{ bank['name'] }}</td>
+                <td style="background-color: transparent;">{{ bank['matching_enabled_ratio'] }}</td>
+                <td style="background-color: transparent;">
+                    {% with bank_title=bank['name'] %}
+                        {% include 'components/banks/add_to_bank_form.html.j2' %}
+                    {% endwith %}
+                </td>
+            </tr>
+        {% endfor %}
+        </tbody>
+        
+    </table>
+</div>
+<script>
+    const banksData = [
+        {% for bank in bankList %}
+        {
+            name: "{{ bank.name|e }}"
+        }{% if not loop.last %},{% endif %}
+        {% endfor %}
+    ];
+
+    banksData.forEach(function(bank) {
+        const bankTitle=bank.name;
+        const addContentModal = document.getElementById(bankTitle);
+        const addContentToBankForm = document.getElementById("add_content_to_bank_" + bankTitle);
+        const formContent = addContentToBankForm.innerHTML;
+        addContentToBankForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.target);
+            formData.append(event.target.content_type.value, event.target.file.files[0]);
+            formData.delete("file");
+
+            fetch(`/c/bank/${bankTitle}/content`, {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    // Handle the response from the server here
+                    renderAddBankResult(data);
+
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+        })
+
+
+
+        // reset modal innerHTML
+        addContentModal.addEventListener('hidden.bs.modal', function () {
+            addContentToBankForm.innerHTML = formContent;
+        });
+
+        const renderAddBankResult = (result) => {
+            // Render hashes table
+            const hashTable = HashTable(result);
+
+            // render on HTML
+            addContentToBankForm.innerHTML =  hashTable;
+        }
+
+        const HashTable = (result) => {
+            return `
+                        <div class="modal-header">
+                            <h3 class="text-success">Success!</h3>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
+                        </div>
+                        <div class="modal-body">
+                            <h4>Added Hashes:</h4>
+                            <p>Content ID: ${result.id}</p>
+                            <h4>Hash Values:</h4>
+                            <table class="table table-hover" =>
+                                <thead>
+                                    <tr>
+                                        <th>Key</th>
+                                        <th>Value</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    ${Object.entries(result.signals).map(([key, value]) => `
+                                        <tr>
+                                            <td>${key}</td>
+                                            <td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
+                                        </tr>
+                                    `).join('')}
+                                </tbody>
+                            
+                            </table>
+                        </div>
+                    `;
+        }
+
+  });
+    
+</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
similarity index 59%
rename from hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
rename to hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
index 2ca841c15..62b6b5ac6 100644
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks_grid.html.j2
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
@@ -1,27 +1,27 @@
 {# Copyright (c) Meta Platforms, Inc. and affiliates. #}
-<h3> Banks </h3>
-<div class="w-50 my-1">
-    <form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
-        <div class="input-group mb-3">
-            <input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
-            <button type="submit" class="btn btn-outline-success" id="create_bank_submit">Create New Bank</button>
-        </div>
-        <span id="bank-name-error" class="text-danger"></span>
-    </form>
-</div>
-<div class="row row-cols-1 row-cols-md-4 g-4">
-    {% for b in bankList %}
-    <div class="col">
-        <div class="card">
-            <div class="card-header bg-info">
-                <h5 class="my-0 fw-normal">{{b['name']}}</h4>
-            </div>
-            <div class="card-body">
-                <p class="card-text">We'll add stats here later.</p>
-            </div>
+<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_new_bank_modal">Create New Bank</button>
+
+<!-- Modal -->
+<div class="modal fade" id="create_new_bank_modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
+        <div class="modal-content modal-xl" style="padding: 20px">
+            <form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5">Create New Bank</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
+                </div>
+                <div class="modal-body">
+                    <div class="input-group mb-3">
+                        <input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
+                    </div>
+                    <span id="bank-name-error" class="text-danger"></span>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-success" id="create_bank_submit">Create</button>
+                </div>
+            </form>
         </div>
     </div>
-    {% endfor %}
 </div>
 <script>
     document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
@@ -66,5 +66,4 @@
                 }
             });
     })
-
 </script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
new file mode 100644
index 000000000..d40c71738
--- /dev/null
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
@@ -0,0 +1,102 @@
+{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
+<div class="card">
+    <div class="card-header">Find Content in Banks</div>
+    <form id="match_file" class="card-body">
+        <div class="row">
+            <div class="col">
+                <input class="form-control" type="file" name="file" required />
+            </div>
+            <div class="col">
+                <select class="form-select" name="media" id="content-type" required>
+                    <option selected disabled value="">Select content type</option>
+                    {% for c in content %}
+                        {% if c['enabled'] %}
+                            <option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
+                        {% endif %}
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="col">
+                <button type="submit" class="btn btn-primary">Find</button>
+            </div>
+            <div class="col">
+                <!-- for spacing -->
+            </div>
+        </div>
+    </form>
+    <div id="matches">
+        <!-- Added to by javascript -->
+    </div>
+</div>
+
+<script>
+    const match_form = document.getElementById("match_file");
+    const matches = document.getElementById("matches");
+    let banks = [];
+    match_form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const formData = new FormData();
+
+        // Append the selected file and content type to the FormData
+        formData.append(event.target.media.value, event.target.file.files[0]);
+
+        fetch('/ui/query', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                // Handle the response from the server here
+                banks = data.banks;
+                renderMatchResult(data);
+                highlightMatchedResults(data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    })
+
+    
+    const clearMatches = () => {
+        matches.innerHTML = "";
+        banks.forEach((bankName) => {
+            document.getElementById(`bank_item_${bankName}`).classList.remove("bg-light");
+        })
+    }
+    
+    const renderMatchResult = (result) => {
+        // Render matched banks
+        const banksList = result.banks.map(bank => `<li>${bank}</li>`).join('');
+        const content = `
+                <div class="card-body">
+                    <h5>Matched Banks</h5>
+                    <ul>${banksList}</ul>
+                    <h5>Hash Values:</h5>
+                    <table class="table table-hover" style="max-height: 100px;">
+                        <tr>
+                            <th>Key</th>
+                            <th>Value</th>
+                        </tr>
+                        ${Object.entries(result.hashes).map(([key, value]) => `
+                            <tr>
+                                <td>${key}</td>
+                                <td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
+                            </tr>
+                        `).join('')}
+                    </table>
+                    <button type="button" class="btn btn-secondary" onclick="clearMatches()">Clear</button>
+                </div>
+        `
+        // Append both the banks and hashes sections to the "matches" element
+        matches.innerHTML = content;
+    }
+
+    const highlightMatchedResults = (result) => {
+        // Render matched banks
+        result.banks.forEach((bankName) => {
+            document.getElementById(`bank_item_${bankName}`).classList.add("bg-light");
+        })
+    }
+    
+    
+</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2
deleted file mode 100644
index 6ac6fc978..000000000
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_form.html.j2
+++ /dev/null
@@ -1,81 +0,0 @@
-{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
-<h3>Match File</h3>
-<form id="match_file">
-    <div class="row">
-        <div class="col">
-            <input class="form-control" type="file" name="file" required />
-        </div>
-        <div class="col">
-            <select class="form-select" name="media" id="content-type" required>
-                <option selected disabled value="">Select content type</option>
-                {% for c in content %}
-                    {% if c['enabled'] %}
-                        <option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
-                    {% endif %}
-                {% endfor %}
-            </select>
-        </div>
-        <div class="col">
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </div>
-        <div class="col">
-            <!-- for spacing -->
-        </div>
-    </div>
-</form>
-<div id="matches">
-    <!-- Added to by javascript -->
-</div>
-<script>
-    const match_form = document.getElementById("match_file");
-    const matches = document.getElementById("matches");
-
-    match_form.addEventListener("submit", (event) => {
-        event.preventDefault();
-        const formData = new FormData();
-
-        // Append the selected file and content type to the FormData
-        formData.append(event.target.media.value, event.target.file.files[0]);
-
-        fetch('/ui/query', {
-            method: 'POST',
-            body: formData
-        })
-            .then(response => response.json())
-            .then(data => {
-                // Handle the response from the server here
-                renderMatchResult(data);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-    })
-
-    const renderMatchResult = (result) => {
-        // Render matched banks
-        const banksList = result.banks.map(bank => `<li>${bank}</li>`).join('');
-        const banksHTML = `
-            <h4>Matched Banks</h4>
-            <ul>${banksList}</ul>
-        `;
-
-        const hashesTableHTML = `
-                <h3>Hash Values:</h3>
-                <table>
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                    ${Object.entries(result.hashes).map(([key, value]) => `
-                        <tr>
-                            <td>${key}</td>
-                            <td>${value}</td>
-                        </tr>
-                    `).join('')}
-                </table>
-            `;;
-
-        // Append both the banks and hashes sections to the "matches" element
-        matches.innerHTML = banksHTML + hashesTableHTML;
-    }
-</script>
\ No newline at end of file
diff --git a/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2 b/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
index 37e14cd5e..5dca12068 100644
--- a/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
+++ b/hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/banks.html.j2
@@ -1,12 +1,4 @@
 {# Copyright (c) Meta Platforms, Inc. and affiliates. #}
 <div class="container my-3">
-    {% include "components/banks_grid.html.j2" %}
-</div>
-
-<div class="container my-3">
-    {% include "components/add_to_bank_form.html.j2" %}
-</div>
-
-<div class="container my-3">
-    {% include "components/match_form.html.j2" %}
+    {% include "components/banks/banks_grid.html.j2" %}
 </div>
\ No newline at end of file