diff --git a/app/static/split_line.js b/app/static/split_line.js
new file mode 100644
index 0000000..18c9ca5
--- /dev/null
+++ b/app/static/split_line.js
@@ -0,0 +1,25 @@
+const addLineButton = document.getElementById("add-line-button");
+const lineContainer = document.getElementById('table-body');
+
+function addLine(){
+    const columns = ['Amount', 'Vendor', 'Confirmation Code', 'Note'];
+    var tr = document.createElement('tr');
+    var counter = 2;
+    columns.forEach(column => {
+        var td = document.createElement('td');
+        var ip = document.createElement('input');
+        ip.type = 'text'
+        ip.classList = 'form-control'
+        ip.name = `${column}-${counter++}`
+        ip.placeholder = column
+        td.appendChild(ip)
+        tr.appendChild(td)
+    })
+    lineContainer.appendChild(tr)
+    
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    addLineButton.addEventListener('click', addLine)
+})
\ No newline at end of file
diff --git a/app/templates/split_line.html b/app/templates/split_line.html
new file mode 100644
index 0000000..3cc5d81
--- /dev/null
+++ b/app/templates/split_line.html
@@ -0,0 +1,56 @@
+{% extends 'base.html' %}
+{% block title %}Split Line{% endblock title %}
+
+{% block content %}
+
+<main>
+    <div class="container mt-5">
+        <div class="card">
+            <div class="card-header bg-primary text-white">
+                Split Line
+            </div>
+            <!-- Display Details Section -->
+            <div class="card-body">
+                <h5 class="card-title">Details</h5>
+                <div class="table-responsive">
+                    <table class="table table-borderless">
+                        <tbody>
+                            <tr>
+                                <th scope="row">Total Amount:</th>
+                                <td>{{ li.amount }}</td>
+                            </tr>
+                            <tr>
+                                <th scope="row">Vendor:</th>
+                                <td>{{ li.get_vendor().name }}</td>
+                            </tr>
+                            <tr>
+                                <th scope="row">Date:</th>
+                                <td>{{ li.display_date() }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card-body">
+                <form action="{{ url_for('split_line_endpoint') }}" method="POST">
+                    <div class="table-responsive">
+                        <table class="table table-bordered">
+                            <tbody id="table-body">
+                                <tr>
+                                    <td><input type="text" class="form-control" name="Amount-1" placeholder="Amount"></td>
+                                    <td><input type="text" class="form-control" name="Vendor-1" placeholder="Vendor"></td>
+                                    <td><input type="text" class="form-control" name="Confirmation Code-1" placeholder="Confirmation Code"></td>
+                                    <td><input type="text" class="form-control" name="Note-1" placeholder="Note"></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <button type="button" class="btn btn-primary" id="add-line-button">Add Another Line?</button>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script src="{{url_for('.static', filename='split_line.js')}}"></script>
+</main>
+{% endblock content %}
\ No newline at end of file