diff --git a/store/templates/items.html b/store/templates/items.html
index 7f7c46477394a56bd2b9967ae50fd9b506ac8d9d..a60fb2bdd143dd2d6a741ba5c62d86928414a079 100644
--- a/store/templates/items.html
+++ b/store/templates/items.html
@@ -1,55 +1,24 @@
 {%extends 'base.html' %}
-
-
-
-{% block content %}
 {% block title %} Items | Antiques Online {% endblock %}
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-  }
-
-  .grid-item {
-    grid-row: span 1;
-    grid-column: span 1;
-    padding: 10px;
-  }
-
-  .grid-item img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .grid-item h2 {
-    margin: 10px 0;
-    font-size: 18px;
-
-  }
-
-  .grid-item p {
-    margin: 5px 0;
-    font-size: 14px;
-  }
-</style>
-
-<div class="grid">
-  {% if items %}
-  {% for item in items %}
-  <div class="grid-item">
-
-    <img src="static\image_placeholder.png" alt="{{ item.description }}">
-    <h2>{{ item.description }}</h2>
-    <p>£{{ item.price }}</p>
-    <a href="{{url_for('item_page', item_id = item.id)}}">View
-      Details</a>
-
+{% block content %}
+<!-- https://getbootstrap.com/docs/4.0/layout/grid/ -->
+<div class="container">
+  <div class="row">
+    {% if items %}
+    {% for item in items %}
+    <div class="col text-center">
+      <div class="align-items-center">
+        <img class="align-self-center" src="static\image_placeholder.png" alt="{{ item.description }}"
+          style="width: 200px; height: 200px;"> <!-- Set image size to ensure content is always fitting. -->
+        <h2>{{ item.description }}</h2>
+        <p>£{{ item.price }}</p>
+        <a href="{{url_for('item_page', item_id = item.id)}}">View Details</a>
+      </div>
+    </div>
+    {% endfor %}
+    {% else %}
+    <p>No items available</p>
+    {% endif %}
   </div>
-  {% endfor %}
-  {% else %}
-  <p>No items available</p>
-  {% endif %}
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file