diff --git a/templates/csv_preview.html b/templates/csv_preview.html
index 0bca849..df46834 100644
--- a/templates/csv_preview.html
+++ b/templates/csv_preview.html
@@ -5,77 +5,139 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSV Preview</title>
     {% include 'favicon.html' %}
-    <script src="{{ url_for('static', filename='js/edited_csv.js') }}"></script>
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
+    <style>
+        /* Custom styles for the preview page */
+        .table-container {
+            overflow-x: auto;
+            margin-bottom: 2rem;
+            border: 1px solid #dee2e6;
+            border-radius: 0.25rem;
+        }
+        .table-valid-entries {
+            background-color: rgba(212, 237, 218, 0.1);
+        }
+        .table-invalid-entries {
+            background-color: rgba(248, 215, 218, 0.1);
+        }
+        [contenteditable="true"] {
+            padding: 0.5rem;
+            min-width: 100px;
+        }
+        [contenteditable="true"]:focus {
+            outline: 2px solid #86b7fe;
+            background-color: white;
+        }
+        .sticky-actions {
+            position: sticky;
+            bottom: 0;
+            background: white;
+            padding: 1rem 0;
+            border-top: 1px solid #dee2e6;
+            margin-top: 2rem;
+        }
+        .error-details {
+            background-color: #f8d7da;
+            border-left: 4px solid #dc3545;
+            padding: 1rem;
+            margin-bottom: 2rem;
+        }
+        .error-details summary {
+            font-weight: bold;
+            cursor: pointer;
+        }
+    </style>
 </head>
 <body>
     {% include 'header.html' %}
-    <main class="container mt-5 pt-3">
-        <h1>CSV Preview</h1>
+    
+    <main class="container-fluid mt-5 pt-3 px-4">
+        <h1 class="mb-4">CSV Preview</h1>
 
-    <!-- Display error messages -->
-    {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-            <details>
-                <summary>Errors found during submission (click to expand):</summary>
-                <ul>
-                    {% for category, message in messages %}
-                        <li><strong>{{ category }}:</strong> {{ message }}</li>
-                    {% endfor %}
-                </ul>
-            </details>
-        {% endif %}
-    {% endwith %}
-
-    <!-- Render tables for new, existing, and invalid entries -->
-    {% for table_name, entries, editable, tableclass in [
-        ('New Entries', new_entries, true, 'table-valid-entries'),
-        ('Existing Entries', existing_entries, true, 'table-valid-entries'),
-        ('Invalid Entries', invalid_entries, false, 'table-invalid-entries')
-    ] %}
-        {% if entries %}
-            <h2>{{ table_name }}</h2>
-            {% if table_name == 'Invalid Entries' %}
-                {% if mode == 'import' %}
-                <p>These entries already exist:</p>
-                {% elif mode == 'edit' %}
-                <p>These entries do not exist:</p>
-                {% endif %}
-            {% endif %}
-            <table border="1" class="{{ tableclass }}">
-                <thead>
-                    <tr>
-                        {% for attrib in item_attributes %}
-                            <th data-attrib="{{ attrib.attrib_name }}">{{ attrib.display_name }}</th>
-                        {% endfor %}
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for entry in entries %}
-                        <tr>
-                            {% for attrib in item_attributes %}
-                                <td {% if editable %}contenteditable="true"{% endif %}>
-                                    {{ entry[attrib.attrib_name] }}
-                                </td>
+        <!-- Display error messages -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                <div class="error-details mb-4">
+                    <details open>
+                        <summary>Errors found during submission (click to expand/collapse):</summary>
+                        <ul class="mt-2 mb-0">
+                            {% for category, message in messages %}
+                                <li><strong>{{ category }}:</strong> {{ message }}</li>
                             {% endfor %}
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
-    {% endfor %}
+                        </ul>
+                    </details>
+                </div>
+            {% endif %}
+        {% endwith %}
 
-    <!-- Form button to confirm and save data -->
-    {% if new_entries or existing_entries %}
-    <form action="/confirm_save" method="POST" onsubmit="return collectEditedData(event)">
-        <button type="submit">Confirm and Save to Database</button>
-    </form>
-    {% endif %}
+        <!-- Render tables for new, existing, and invalid entries -->
+        {% for table_name, entries, editable, tableclass in [
+            ('New Entries', new_entries, true, 'table-valid-entries'),
+            ('Existing Entries', existing_entries, true, 'table-valid-entries'),
+            ('Invalid Entries', invalid_entries, false, 'table-invalid-entries')
+        ] %}
+            {% if entries %}
+                <div class="mb-4">
+                    <h2 class="h4 mb-3">{{ table_name }}</h2>
+                    {% if table_name == 'Invalid Entries' %}
+                        <div class="alert alert-warning mb-3">
+                            {% if mode == 'import' %}
+                                These entries already exist and won't be imported
+                            {% elif mode == 'edit' %}
+                                These entries don't exist and can't be edited
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                    
+                    <div class="table-container">
+                        <table class="table table-bordered table-hover mb-0 {{ tableclass }}">
+                            <thead class="table-light">
+                                <tr>
+                                    {% for attrib in item_attributes %}
+                                        <th data-attrib="{{ attrib.attrib_name }}">{{ attrib.display_name }}</th>
+                                    {% endfor %}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for entry in entries %}
+                                    <tr>
+                                        {% for attrib in item_attributes %}
+                                            <td {% if editable %}contenteditable="true" class="editable-cell"{% endif %}>
+                                                {{ entry[attrib.attrib_name] }}
+                                            </td>
+                                        {% endfor %}
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
 
-    <!-- Cancel button that redirects to the home page -->
-    <button type="button" onclick="window.location.href='/'">Cancel</button>
+        <!-- Sticky action buttons -->
+        <div class="sticky-actions">
+            <div class="d-flex justify-content-between">
+                <button type="button" 
+                        onclick="window.location.href='/'" 
+                        class="btn btn-outline-secondary">
+                    <i class="bi bi-x-circle me-1"></i>Cancel
+                </button>
+                
+                {% if new_entries or existing_entries %}
+                <form action="/confirm_save" method="POST" onsubmit="return collectEditedData(event)" class="mb-0">
+                    <button type="submit" class="btn btn-primary">
+                        <i class="bi bi-check-circle me-1"></i>Confirm and Save
+                    </button>
+                </form>
+                {% endif %}
+            </div>
+        </div>
     </main>
-    <!-- Bootstrap JS (for dropdowns) -->
+
+    <!-- JavaScript -->
     <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/edited_csv.js') }}"></script>
 </body>
 </html>
\ No newline at end of file
