diff --git a/templates/adjustment-new-stock-form.html b/templates/adjustment-new-stock-form.html
index 4510840..cc52379 100644
--- a/templates/adjustment-new-stock-form.html
+++ b/templates/adjustment-new-stock-form.html
@@ -1,28 +1,30 @@
 
 <form hx-post="/item/{{item_id}}/adjustment/new-stock" hx-target="this" hx-swap="outerHTML" >
-    <div>
-        <label for="amount">Amount</label>
-        <input id="amount" name="amount" type="number" required
+    <div class="mb-3">
+        <label for="amount" class="form-label">Amount</label>
+        <input id="amount" class="form-control" name="amount" type="number" required
                {% if !amount_error.is_empty() -%}
                aria-invalid="true"
                aria-describedby="invalid-amount"
                {% endif -%}
         />
         {% if !amount_error.is_empty() -%}
-        <small id="invalid-amount">{{ amount_error }}</small>
+        <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
         {% endif -%}
     </div>
-    <div>
-        <label for="price">Price</label>
-        <input id="price" name="price" required
+    <div class="mb-3">
+        <label for="price" class="form-label">Price</label>
+        <input id="price" class="form-control" name="price" required
                {% if !price_error.is_empty() -%}
                aria-invalid="true"
                aria-describedby="invalid-price"
                {% endif -%}
         />
         {% if !price_error.is_empty() -%}
-        <small id="invalid-price">{{ price_error }}</small>
+        <small id="invalid-price" class="invalid-feedback">{{ price_error }}</small>
         {% endif -%}
     </div>
-    <button class="btn primary">Add Stock</button>
+    <div class="mb-3">
+        <button class="btn btn-primary">Add Stock</button>
+    </div>
 </form>
diff --git a/templates/adjustment-sale-form.html b/templates/adjustment-sale-form.html
index 804a9a1..6e239f3 100644
--- a/templates/adjustment-sale-form.html
+++ b/templates/adjustment-sale-form.html
@@ -1,16 +1,18 @@
 
 <form hx-post="/item/{{item_id}}/adjustment/sale" hx-target="this" hx-swap="outerHTML" >
-    <div>
-        <label for="amount">Amount</label>
-        <input id="amount" name="amount" type="number" step="0.01" required
+    <div class="mb-3">
+        <label for="amount" class="form-label">Amount</label>
+        <input id="amount" class="form-control" name="amount" type="number" step="0.01" required
            {% if !amount_error.is_empty() -%}
                aria-invalid="true"
                aria-describedby="invalid-amount"
            {% endif -%}
         />
         {% if !amount_error.is_empty() -%}
-            <small id="invalid-amount">{{ amount_error }}</small>
+            <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
         {% endif -%}
     </div>
-    <button class="btn primary">Record Sale</button>
+    <div class="mb-3">
+        <button class="btn btn-primary">Record Sale</button>
+    </div>
 </form>
diff --git a/templates/adjustments-table-fragment.html b/templates/adjustments-table-fragment.html
index 4387b66..cd6352c 100644
--- a/templates/adjustments-table-fragment.html
+++ b/templates/adjustments-table-fragment.html
@@ -1,5 +1,5 @@
 
-<table hx-get="/item/{{item_id}}/adjustments" hx-trigger="new-adjustment from:body" hx-swap="outerHTML">
+<table class="table" hx-get="/item/{{item_id}}/adjustments" hx-trigger="new-adjustment from:body" hx-swap="outerHTML">
     <thead>
     <tr>
         <th scope="col">Date</th>
diff --git a/templates/catalog.html b/templates/catalog.html
index dd5d849..96db39e 100644
--- a/templates/catalog.html
+++ b/templates/catalog.html
@@ -4,21 +4,24 @@
 
 {% block content %}
 
-<p>
-    <input id="search" type="search" name="q"
-           placeholder="Filter"
-           aria-label="Search"
-           value='{{ query.search.as_deref().unwrap_or("") }}'
-           hx-get="/items"
-           hx-trigger="search, keyup delay:500ms changed"
-           hx-target="#items"
-           hx-push-url="true"
-    />
-</p>
+<div class="container">
+    <p class="container d-flex justify-content-center">
+        <input id="search" class="form-control"
+               type="search" name="q"
+               placeholder="Filter"
+               aria-label="Search"
+               value='{{ query.search.as_deref().unwrap_or("") }}'
+               hx-get="/items"
+               hx-trigger="search, keyup delay:500ms changed"
+               hx-target="#items"
+               hx-push-url="true"
+        />
+    </p>
 
-<div id="items" class="container">
-    {% include "catalog_item_fragment.html" %}
-</div>
+    <div id="items" class="container">
+        {% include "catalog_item_fragment.html" %}
+    </div>
 
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/catalog_item_fragment.html b/templates/catalog_item_fragment.html
index 3e9cfe1..f67e95d 100644
--- a/templates/catalog_item_fragment.html
+++ b/templates/catalog_item_fragment.html
@@ -1,8 +1,11 @@
-
-{% for item in items %}
-<article id="item-{{item.id}}-card">
-  <div class="grid">
-    <div><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
-  </div>
-</article>
-{% endfor %}
\ No newline at end of file
+<div class="card">
+  <ul class="list-group list-group-flush">
+    {% for item in items %}
+    <li id="item-{{item.id}}-entry" class="list-group-item">
+      <div class="row">
+        <div class="col-6"><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/templates/history.html b/templates/history.html
index ed89ce7..f33d1c9 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -6,34 +6,33 @@
 
 <h1>Audit Log (Coming soon)</h1>
 
-<form action="/history" hx-get="/history" hx-trigger="change" hx-target="#items">
-    <div class="grid">
-        <fieldset>
-            <label for="start-date">Start Date</label>
-            <input type="date" id="start-date" name="start-date" value="{{ start_date }}" />
-        </fieldset>
-        <fieldset>
-            <label for="start-time">Start Time</label>
-            <input type="time" id="start-time" name="start-time" value="{{ start_time }}"/>
-            <small>Timezone {{ time_zone }}</small>
-        </fieldset>
-    </div>
+<section class="container mb-4">
+    <form action="/history" hx-get="/history" hx-trigger="change" hx-target="#items">
+        <div class="row">
+            <div class="col-sm-2">
+                <label for="start-date" class="form-label">Start Date</label>
+                <input type="date" id="start-date" name="start-date" value="{{ start_date }}" class="form-control" />
+            </div>
+            <div class="col-sm-2">
+                <label for="start-time" class="form-label">Start Time</label>
+                <input type="time" id="start-time" name="start-time" value="{{ start_time }}" class="form-control"/>
+                <small class="form-text">Timezone {{ time_zone }}</small>
+            </div>
+            <div class="col-sm-2">
+                <label for="end-date" class="form-label">End Date</label>
+                <input type="date" id="end-date" name="end-date" value="{{ end_date }}" class="form-control"/>
+            </div>
+            <div class="col-sm-2">
+                <label for="end-time" class="form-label">End Time</label>
+                <input type="time" id="end-time" name="end-time" value="{{ end_time }}" class="form-control"/>
+                <small class="form-text">Timezone {{ time_zone }}</small>
+            </div>
+        </div>
+    </form>
+</section>
 
-    <div class="grid">
-        <fieldset>
-            <label for="end-date">End Date</label>
-            <input type="date" id="end-date" name="end-date" value="{{ end_date }}"/>
-        </fieldset>
-        <fieldset>
-            <label for="end-time">End Time</label>
-            <input type="time" id="end-time" name="end-time" value="{{ end_time }}"/>
-            <small>Timezone {{ time_zone }}</small>
-        </fieldset>
-    </div>
-</form>
-
-<div id="items" class="container">
+<section id="items" class="container">
     {% include "history_item_fragment.html" %}
-</div>
+</section>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/history_item_fragment.html b/templates/history_item_fragment.html
index 0eded54..655ab33 100644
--- a/templates/history_item_fragment.html
+++ b/templates/history_item_fragment.html
@@ -1,18 +1,22 @@
 
-{% for item in items %}
-<article>
-  <div class="grid">
-    <p>{{ item.create_date }}</p>
-    <p>{{ item.item_name }}</p>
-    <p>{{ item.user_name }}</p>
-    <p>
-    {% match item.item_type %}
-    {% when HistoryItemEntry::PositiveAdjustment with (entry) %}
-      {{ entry.amount }} @ {{ entry.unit_value }}
-    {% when HistoryItemEntry::NegativeAdjustment with (entry) %}
-      {{ entry.amount }} {{ entry.reason }}
-    {% endmatch %}
-    </p>
-  </div>
-</article>
-{% endfor %}
\ No newline at end of file
+<div class="card">
+  <ul class="list-group list-group-flush">
+    {% for item in items %}
+    <li class="list-group-item">
+      <div class="row">
+        <p class="col">{{ item.create_date }}</p>
+        <p class="col">{{ item.item_name }}</p>
+        <p class="col">{{ item.user_name }}</p>
+        <p class="col">
+          {% match item.item_type %}
+          {% when HistoryItemEntry::PositiveAdjustment with (entry) %}
+          {{ entry.amount }} @ {{ entry.unit_value }}
+          {% when HistoryItemEntry::NegativeAdjustment with (entry) %}
+          {{ entry.amount }} {{ entry.reason }}
+          {% endmatch %}
+        </p>
+      </div>
+    </li>
+  {% endfor %}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index c9c18b9..4438ccb 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -4,20 +4,24 @@
 
 {% block content %}
 
-<p>
-    <input id="search" type="search" name="q"
-           placeholder="Search"
-           aria-label="Search"
-           value='{{ query.search.as_deref().unwrap_or("") }}'
-           hx-get="/home/search"
-           hx-trigger="search, keyup delay:500ms changed"
-           hx-target="#items"
-           hx-push-url="true"
-    />
-</p>
+<div class="container">
+    <p class="container d-flex justify-content-center">
+        <input id="search"
+               class="form-control"
+               type="search" name="q"
+               placeholder="Search"
+               aria-label="Search"
+               value='{{ query.search.as_deref().unwrap_or("") }}'
+               hx-get="/home/search"
+               hx-trigger="search, keyup delay:500ms changed"
+               hx-target="#items"
+               hx-push-url="true"
+        />
+    </p>
 
-<div id="items" class="container">
-    {% include "home_search_item_fragment.html" %}
+    <div id="items" class="container">
+        {% include "home_search_item_fragment.html" %}
+    </div>
 </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/home_search_item_fragment.html b/templates/home_search_item_fragment.html
index 6a5b883..2db42c7 100644
--- a/templates/home_search_item_fragment.html
+++ b/templates/home_search_item_fragment.html
@@ -1,9 +1,16 @@
-{% for item in items %}
-<article id="item-{{item.id}}-card">
-  <div class="grid">
-    <div><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
-    <div>Count: <span id="item-{{item.id}}-count" hx-get="/item/{{item.id}}/count" hx-trigger="load">0</span></div>
-    <div>Reorder Point: {{ item.reorder_point }}</div>
-  </div>
-</article>
-{% endfor %}
+
+{% if items.len() > 0 %}
+<div class="card">
+  <ul class="list-group list-group-flush">
+  {% for item in items %}
+  <li id="item-{{item.id}}-entry" class="list-group-item">
+    <div class="row">
+      <div class="col-6"><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
+      <div class="col">Count: <span id="item-{{item.id}}-count" hx-get="/item/{{item.id}}/count" hx-trigger="load">0</span></div>
+      <div class="col">Reorder Point: {{ item.reorder_point }}</div>
+    </div>
+  </li>
+  {% endfor %}
+  </ul>
+</div>
+{% endif %}
diff --git a/templates/item-stats-fragment.html b/templates/item-stats-fragment.html
index f11f778..547d65c 100644
--- a/templates/item-stats-fragment.html
+++ b/templates/item-stats-fragment.html
@@ -1,6 +1,6 @@
 
-<div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="grid">
-    <article>Amount in stock: {{amount}} {{unit_abbreviation}}</article>
-    <article>Total Value: {{value}}</article>
+<div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="row">
+    <div class="col">Amount in stock: {{amount}} {{unit_abbreviation}}</div>
+    <div class="col">Total Value: {{value}}</div>
 </div>
 
diff --git a/templates/item.html b/templates/item.html
index 18ef5fa..57792a1 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -4,8 +4,9 @@
 
 {% block content %}
 
-<h2>{{item.name}} {% if !item.active %} <mark>Inactive</mark> {% endif %}</h2>
-<section>
+<h2>{{item.name}} {% if !item.active %}<span class="badge text-bg-danger">Inactive</span> {% endif %}</h2>
+
+<section class="container">
     <div hx-get="/item/{{item_id}}/stats" hx-trigger="load" hx-swap="outerHTML">
     </div>
 
@@ -15,24 +16,21 @@
 </section>
 
 {% if item.active %}
-<section>
-<div class="grid">
-    <article>
-        <h3>Sale</h3>
-        <div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML">
+<section class="container-fluid">
+    <div class="row">
+        <div class="col-sm-6">
+            <div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML">
+            </div>
         </div>
-    </article>
-
-    <article>
-        <h3>New Stock</h3>
-        <div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
+        <div class="col-sm-6">
+            <div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
+            </div>
         </div>
-    </article>
-</div>
+    </div>
 </section>
 {% endif %}
 
-<section>
+<section class="container">
     <div hx-get="/item/{{item_id}}/adjustments" hx-trigger="load" hx-swap="outerHTML">
     </div>
 </section>
diff --git a/templates/main.html b/templates/main.html
index dafc015..5350f0a 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,29 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="light dark">
-    <link rel="stylesheet" href="/css/pico.min.css" >
+    <!-- <link rel="stylesheet" href="/css/pico.min.css" > -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--TODO Vendor css-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
     <script src="/js/htmx.min.js"></script>
     <!--TODO Vendor this script -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <title>{% block title %}Title{% endblock %}</title>
 </head>
 <body>
-<header class="container">
-    <nav class="container">
-        <ul>
-            <li><h1><a class="secondary" href="/home">Inventory App</a></h1></li>
-        </ul>
-        <ul>
-            <li><a class="secondary" href="/overview">Overview</a></li>
-            <li><a class="secondary" href="/catalog">Catalog</a></li>
-            <li><a class="secondary" href="/upload">Upload</a></li>
-            <li><a class="secondary" href="/reports">Reports</a></li>
-            <li><a class="secondary" href="/history">History</a></li>
-            <li><a class="contrast" href="/auth/logout">Logout</a></li>
-        </ul>
+<header class="container mb-4">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/home">Inventory App</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+                <ul class="navbar-nav ">
+                    <li class="nav-item"><h1></h1></li>
+                    <li class="nav-item"><a class="nav-link" href="/overview">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/catalog">Catalog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/upload">Upload</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/reports">Reports</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/history">History</a></li>
+                </ul>
+                <div class="d-flex">
+                    <a class="btn btn-primary" href="/auth/logout">Logout</a>
+                </div>
+            </div>
+        </div>
     </nav>
 </header>
 <main class="container">
@@ -31,5 +43,6 @@
 </main>
 <footer class="container-fluid">
 </footer>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
 </html>
\ No newline at end of file