diff --git a/generate-html.py b/generate-html.py
index 120f0da..9e0847b 100755
--- a/generate-html.py
+++ b/generate-html.py
@@ -448,6 +448,11 @@ as it's used in every single page.
 overlays_html is generated with all types for legacy reasons
 '''
 for overlay in overlays:
+    #image = None
+
+    #if 'image' in overlay:
+    #    image = overlay['image']
+    
     link = (overlay['page_url'], overlay['name'])
 
     overlays_html += [link]
@@ -468,7 +473,7 @@ for overlay in overlays:
         if o_class == 'board' and o_type not in overlay_subnav:
             overlay_subnav.append(o_type)
 
-        nav_html[o_class][o_type] += [link]
+        nav_html[o_class][o_type] += [overlay]
 
 
 
@@ -499,8 +504,26 @@ overlay_subnav = ''.join(map(lambda overlay_type: '<li class="group_{cls}" data-
 for overlay_type in nav_html.keys():
     for overlay_group, items in nav_html[overlay_type].iteritems():
         items.sort()
-        group_items = (''.join(map(lambda x: '<li><a href="{}{}">{}</a></li>'.format(base_url, x[0], x[1]), items)))
-        
+        featured = [x for x in items if 'image' in x]
+        regular = [x for x in items if 'image' not in x]
+
+        group_items = ''
+
+        group_items_pictures = (''.join(map(lambda x: '<li class="featured"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong><span>{description}</span></a></li>'.format(
+            image=x['image'],
+            name=x['name'],
+            page_url=x['page_url'],
+            base_url=base_url,
+            resource_url=resource_url,
+            description=x['description']), featured)))
+
+        group_items_normal = (''.join(map(lambda x: '<li><a href="{}{}">{}</a></li>'.format(base_url, x['page_url'], x['name']), regular)))
+
+        group_items = group_items_pictures + group_items_normal
+
+        if len(featured) > 0 and len(regular) > 0:
+                group_items = group_items_pictures + '<hr />' + group_items_normal
+
         nav_html[overlay_type][overlay_group] = '<div class="group group_' + overlay_group + '"><ul>' + group_items + '</ul></div>'
     nav_html[overlay_type] = ''.join(nav_html[overlay_type].values())
     
diff --git a/resources/boards/display-o-tron-hat.png b/resources/boards/display-o-tron-hat.png
new file mode 100644
index 0000000..204e692
Binary files /dev/null and b/resources/boards/display-o-tron-hat.png differ
diff --git a/resources/boards/explorer-hat-pro.png b/resources/boards/explorer-hat-pro.png
new file mode 100644
index 0000000..639895f
Binary files /dev/null and b/resources/boards/explorer-hat-pro.png differ
diff --git a/resources/boards/scroll-phat.png b/resources/boards/scroll-phat.png
new file mode 100644
index 0000000..2cffa86
Binary files /dev/null and b/resources/boards/scroll-phat.png differ
diff --git a/resources/boards/sense-hat.png b/resources/boards/sense-hat.png
new file mode 100644
index 0000000..9a1da8c
Binary files /dev/null and b/resources/boards/sense-hat.png differ
diff --git a/resources/pinout.css b/resources/pinout.css
index b9f5c0a..57c24d9 100644
--- a/resources/pinout.css
+++ b/resources/pinout.css
@@ -262,8 +262,15 @@ Drop down nav
 #sections .featured a {
 	background:none;
 }
+#sections .boards hr {
+	clear:both;
+	border:none;
+	border-top:3px solid #D33682;
+	margin-bottom:5px;
+	background:none;
+}
 
-#sections .featured a:hover {
+#sections .boards .featured a:hover {
 	background: #D33682;
 }
 #sections .featured strong {
diff --git a/src/en/overlay/display-o-tron-hat.md b/src/en/overlay/display-o-tron-hat.md
index 0a5720a..621e578 100644
--- a/src/en/overlay/display-o-tron-hat.md
+++ b/src/en/overlay/display-o-tron-hat.md
@@ -3,6 +3,7 @@
 class: board
 type: lcd
 name: Display-o-Tron HAT
+image: 'display-o-tron-hat.png'
 manufacturer: Pimoroni
 description: A 3-line character LCD with a 6-zone RGB backlight and 6 touch buttons
 url: https://github.com/pimoroni/dot3k
diff --git a/src/en/overlay/explorer-hat-pro.md b/src/en/overlay/explorer-hat-pro.md
index 40b07f2..207a7a7 100644
--- a/src/en/overlay/explorer-hat-pro.md
+++ b/src/en/overlay/explorer-hat-pro.md
@@ -3,6 +3,7 @@
 class: board
 type: multi
 name: Explorer HAT Pro
+image: 'explorer-hat-pro.png'
 manufacturer: Pimoroni
 description: An all-in-one light, input, motor, touch and output add-on board.
 url: https://github.com/pimoroni/explorer-hat
diff --git a/src/en/overlay/scroll-phat.md b/src/en/overlay/scroll-phat.md
index c174e01..f8489a4 100644
--- a/src/en/overlay/scroll-phat.md
+++ b/src/en/overlay/scroll-phat.md
@@ -4,6 +4,7 @@ class: board
 type: led
 name: Scroll pHAT
 manufacturer: Pimoroni
+image: 'scroll-phat.png'
 description: A 11 x 5 LED matrix.
 url: https://github.com/pimoroni/scroll-phat
 github: https://github.com/pimoroni/scroll-phat
diff --git a/src/en/overlay/sense-hat.md b/src/en/overlay/sense-hat.md
index 80eaf21..7c2a8b4 100644
--- a/src/en/overlay/sense-hat.md
+++ b/src/en/overlay/sense-hat.md
@@ -3,6 +3,7 @@
 class: board
 type: multi
 name: "Sense HAT"
+image: 'sense-hat.png'
 manufacturer: Raspberry Pi Foundation
 description: Add-on board that includes an 8×8 RGB LED matrix, 5-button joystick as well as IMU and environmental sensors
 url: https://www.raspberrypi.org/products/sense-hat/