diff --git a/templates/viewList.html b/templates/viewList.html
index 26da1e6..4b774d4 100644
--- a/templates/viewList.html
+++ b/templates/viewList.html
@@ -6,41 +6,63 @@
<title>View Inventory</title>
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+ <style>
+ /* Minimal custom CSS for table responsiveness */
+ .table-container {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ margin-bottom: 1rem;
+ }
+ .action-buttons {
+ white-space: nowrap;
+ }
+ </style>
</head>
-<body align="center">
+<body>
{% include 'header.html' %}
- <main class="container mt-5 pt-3">
- <h2 class="mb-4">Item Inventory</h2>
- <table class="">
- <tr>
- <!-- Table headers -->
- {% for attrib in item_attributes %}
- <th>{{ attrib.display_name }}</th>
- {% endfor %}
- <th colspan="2">Actions</th>
- </tr>
- <!-- Table rows -->
- {% for item in items %}
- <tr>
- {% for attrib in item_attributes %}
- <td>{{ item[attrib.attrib_name] }}</td>
- {% endfor %}
- <td>
- <form action="/update/{{ item[primary_attrib] }}" method="get">
- <button type="submit">Edit</button>
- </form>
- </td>
- <td>
- <form action="/delete/{{ item[primary_attrib] }}" method="get">
- <button type="submit">Delete</button>
- </form>
- </td>
- </tr>
- {% endfor %}
- </table>
+ <main class="container-fluid mt-5 pt-3 px-4">
+ <div class="d-flex justify-content-between align-items-center mb-4">
+ <h2>Item Inventory</h2>
+ </div>
+
+ <div class="table-container">
+ <table class="table table-striped table-hover table-bordered">
+ <thead class="table-light">
+ <tr>
+ {% for attrib in item_attributes %}
+ <th>{{ attrib.display_name }}</th>
+ {% endfor %}
+ <th class="action-buttons">Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in items %}
+ <tr>
+ {% for attrib in item_attributes %}
+ <td>{{ item[attrib.attrib_name] }}</td>
+ {% endfor %}
+ <td class="action-buttons">
+ <div class="d-flex gap-2">
+ <a href="/update/{{ item[primary_attrib] }}"
+ class="btn btn-sm btn-outline-primary">
+ Edit
+ </a>
+ <form action="/delete/{{ item[primary_attrib] }}" method="get" class="d-inline">
+ <button type="submit"
+ class="btn btn-sm btn-outline-danger">
+ Delete
+ </button>
+ </form>
+ </div>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
</main>
- <!-- Bootstrap JS (for dropdowns) -->
+
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>
\ No newline at end of file