diff --git a/public/lib/item.php b/public/lib/item.php
index 511868d..5260d0b 100644
--- a/public/lib/item.php
+++ b/public/lib/item.php
@@ -12,11 +12,13 @@ class Item {
 
     private $itemid = null;
     private $itemdata = [];
+    private $itemimages = [];
 
     function __construct($itemid) {
         global $binstack;
         $this->itemdata = $binstack->get('items', ['itemid', 'catid', 'name', 'text1', 'qty', 'want', 'cost', 'price'], ['itemid' => $itemid]);
         $this->itemid = $itemid;
+        $this->itemimages = $binstack->select('images', ['imagename', 'primary', 'imageid'], ['itemid' => $itemid, 'ORDER' => ['primary' => 'DESC']]);
     }
 
     function getId() {
@@ -59,6 +61,68 @@ class Item {
         return $this->itemdata['catid'];
     }
 
+    function getImageCount() {
+        return count($this->itemimages);
+    }
+
+    function getPrimaryImage(): ItemImage {
+        if (count($this->itemimages) > 0) {
+            foreach ($this->itemimages as $i) {
+                if ($i['primary'] == true) {
+                    return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
+                }
+            }
+            $i = $this->itemimages[0];
+            return new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
+        }
+        return null;
+    }
+
+    function getImages(): array {
+        $images = [];
+
+        foreach ($this->itemimages as $i) {
+            $images[] = new ItemImage($i['imagename'], $i['imageid'], $i['primary'] == true, $this->itemid);
+        }
+        return $images;
+    }
+
+}
+
+class ItemImage {
+
+    private $url = "";
+    private $primary = false;
+    private $imageid = 0;
+    private $itemid = 0;
+
+    function __construct(string $url, int $imageid, bool $primary, int $itemid) {
+        $this->url = $url;
+        $this->imageid = $imageid;
+        $this->primary = $primary;
+        $this->itemid = $itemid;
+    }
+
+    function getName(): string {
+        return $this->url;
+    }
+
+    function getAbsoluteUrl(): string {
+        return BINSTACK_URL_IMAGEPHP . "?i=" . $this->url;
+    }
+
+    function isPrimary(): bool {
+        return $this->primary == true;
+    }
+
+    function getID(): int {
+        return $this->imageid;
+    }
+
+    function getItemID(): int {
+        return $this->itemid;
+    }
+
 }
 
 class RenderItem {
@@ -69,13 +133,29 @@ class RenderItem {
         $catid = $item->getCategoryId();
         $catname = $item->getCategoryName();
         $price = $item->getPrice();
+        $image = "";
+        if ($item->getImageCount() > 0) {
+            $image = '<img class="card-img-top" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
+        }
+        /* $html = <<<END
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
+          <div class="card mb-4">
+          $image
+          <div class="card-body d-flex flex-column justify-content-end align-items-center">
+          <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
+          <span>$$price</span>
+          </div>
+          </div>
+          </div>
+          END; */
         $html = <<<END
-<div class="card m-2">
-    <div class="card-body text-center">
-        <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
-        <span>$$price</span>
+    <div class="card">
+        $image
+        <div class="card-body d-flex flex-column justify-content-end align-items-center">
+           <a href="./?page=item&id=$id" class="font-weight-bold">$name</a><br />
+            <span>$$price</span>
+        </div>
     </div>
-</div>
 END;
         return $html;
     }
@@ -86,8 +166,13 @@ END;
         $catid = $item->getCategoryId();
         $catname = $item->getCategoryName();
         $price = $item->getPrice();
+        $image = "";
+        if ($item->getImageCount() > 0) {
+            $image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
+        }
         $html = <<<END
 <div class="list-group-item d-flex flex-wrap">
+    $image
     <div>
         <h4><a href="./?page=item&id=$id">$name</a></h4>
         <span>$$price</span>
@@ -116,8 +201,13 @@ END;
         $catname = $item->getCategoryName();
         $price = $item->getPrice();
         $linetotal = number_format($price * $qty, 2);
+        $image = "";
+        if ($item->getImageCount() > 0) {
+            $image = '<img class="d-inline-block mr-2 item-line-img" src="' . $item->getPrimaryImage()->getAbsoluteUrl() . '" alt="' . $name . '" />';
+        }
         $html = <<<END
 <div class="list-group-item d-flex flex-wrap">
+    $image
     <div>
         <h4><a href="./?page=item&id=$id">$name</a></h4>
         <span>$$price</span>
diff --git a/public/parts/footer.php b/public/parts/footer.php
index 2b47ec7..81110c5 100644
--- a/public/parts/footer.php
+++ b/public/parts/footer.php
@@ -11,4 +11,5 @@ if (!defined('NICKELBOX')) {
 }
 ?>
 <script src="static/jquery-3.3.1.min.js"></script>
-<script src="static/bootstrap.min.js"></script>
\ No newline at end of file
+<script src="static/bootstrap.min.js"></script>
+<script src="static/script.js"></script>
\ No newline at end of file
diff --git a/public/parts/head.php b/public/parts/head.php
index f4fb915..6b75d6a 100644
--- a/public/parts/head.php
+++ b/public/parts/head.php
@@ -15,6 +15,7 @@ if (!defined('NICKELBOX')) {
 <title><?php echo $settings['sitename']; ?></title>
 <link rel="stylesheet" href="themes/<?php echo $settings['theme']; ?>/bootstrap.min.css" />
 <link rel="stylesheet" href="static/fa-svg-with-js.css" />
+<link rel="stylesheet" href="static/style.css" />
 <script nonce="<?php echo $SECURE_NONCE; ?>">
     FontAwesomeConfig = {autoAddCss: false};
 </script>
diff --git a/public/parts/home.php b/public/parts/home.php
index e20fbf4..a27ed8b 100644
--- a/public/parts/home.php
+++ b/public/parts/home.php
@@ -7,7 +7,7 @@
 
 if (!defined('NICKELBOX')) {
     die("Direct access denied.");
-}   
+}
 
 $dbitems = $binstack->select('items', 'itemid', ['AND' => ['price[>]' => 0], 'LIMIT' => 20]);
 
@@ -41,11 +41,13 @@ foreach ($dbitems as $i) {
         </div>
 
         <div class="col-md-8 col-xl-9 d-flex flex-wrap">
-            <?php
-            foreach ($items as $i) {
-                echo RenderItem::card($i);
-            }
-            ?>
+            <div class="card-columns">
+                <?php
+                foreach ($items as $i) {
+                    echo RenderItem::card($i);
+                }
+                ?>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/public/parts/item.php b/public/parts/item.php
index 7cb5c13..2f5cf18 100644
--- a/public/parts/item.php
+++ b/public/parts/item.php
@@ -14,7 +14,31 @@ $item = new Item($_GET['id']);
 <div class="container">
     <div class="row">
         <div class="col-md-4">
-            <!-- Item image(s) go here -->
+            <?php
+            $image = "";
+            if ($item->getImageCount() > 0) {
+                $primary = $item->getPrimaryImage();
+                $image = '<div id="bigImageBox"><img class="mt-4 mb-2" id="bigImage" src="' . $primary->getAbsoluteUrl() . '" alt="" data-imgid="' . $primary->getID() . '" /></div>';
+                echo $image;
+                ?>
+                <div class="d-flex flex-wrap justify-content-center">
+                    <?php
+                    foreach ($item->getImages() as $img) {
+                        ?>
+                        <div class="card m-1 item-picker<?php
+                        if ($img->getID() == $primary->getID()) {
+                            echo " border-primary";
+                        }
+                        ?>" data-imgid="<?php echo $img->getID(); ?>" data-imgurl="<?php echo $img->getAbsoluteUrl(); ?>">
+                            <img class="item-picker-img" src="<?php echo $img->getAbsoluteUrl(); ?>" />
+                        </div>
+                        <?php
+                    }
+                    ?>
+                </div>
+                <?php
+            }
+            ?>
         </div>
 
         <div class="col-md-8">
@@ -37,7 +61,7 @@ $item = new Item($_GET['id']);
     </div>
     <div class="row mt-4 mt-sm-0">
         <div class="col-12">
-            <div class="card">
+            <div class="card mt-4">
                 <div class="card-body">
                     <h5 class="card-title">Description</h5>
 
diff --git a/public/parts/nav.php b/public/parts/nav.php
index a4311a6..10cf1b4 100644
--- a/public/parts/nav.php
+++ b/public/parts/nav.php
@@ -53,7 +53,11 @@ foreach ($cats as $c) {
             <ul class="navbar-nav">
                 <li class="nav-item">
                     <a class="nav-link" href="./?page=cart">
-                        <i class="fas fa-shopping-cart"></i> Cart
+                        <i class="fas fa-shopping-cart"></i> Cart<?php
+                        if (!empty($_SESSION['cart'])) {
+                            echo ' (' . count($_SESSION['cart']) . ')';
+                        }
+                        ?>
                     </a>
                 </li>
                 <li class="nav-item">
diff --git a/public/static/script.js b/public/static/script.js
new file mode 100644
index 0000000..dc9702e
--- /dev/null
+++ b/public/static/script.js
@@ -0,0 +1,12 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$(".item-picker").on('click', function () {
+    $("#bigImage").attr('src', $(this).data('imgurl'));
+    $(".item-picker").removeClass('border-primary');
+    $(this).addClass('border-primary');
+});
\ No newline at end of file
diff --git a/public/static/style.css b/public/static/style.css
new file mode 100644
index 0000000..419c696
--- /dev/null
+++ b/public/static/style.css
@@ -0,0 +1,23 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+.item-line-img {
+    height: 4rem;
+}
+
+.item-picker-img {
+    height: 4rem;
+    width: 4rem;
+}
+
+#bigImage {
+    display: block;
+    max-height: 18rem;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/settings.template.php b/settings.template.php
index d17f4e0..8c537a5 100644
--- a/settings.template.php
+++ b/settings.template.php
@@ -25,6 +25,9 @@ define("BINSTACK_DB_USER", "inventory");
 define("BINSTACK_DB_PASS", "");
 define("BINSTACK_DB_CHARSET", "utf8");
 
+// Absolute path to image.php in the BinStack installation folder
+// Required for item images to load
+define("BINSTACK_URL_IMAGEPHP", "/binstack/image.php");
 
 // Name of the app.
 define("SITE_TITLE", "NickelBox");