diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs
index d14d12b..394bdc2 100644
--- a/client/public/components/components.mjs
+++ b/client/public/components/components.mjs
@@ -28,6 +28,7 @@ export class Component extends HTMLElement {
     }
 
     // Override these
+    PostLoad() { }
     Update() { }
     Render() { Component.__WARN('Render'); }
     OnceRendered() { Component.__WARN('Render'); }
@@ -46,10 +47,12 @@ export class Component extends HTMLElement {
         }
         this.setState(stateUpdateQueue);
 
-        this.Update();
+        this.PostLoad(Object.bind(this));
+
+        this.Update(Object.bind(this));
 
         if (this.attributes.length === 0) {
-            this.__INVOKE_RENDER();
+            this.__INVOKE_RENDER(Object.bind(this));
         }
     }
 
@@ -122,12 +125,12 @@ export class Component extends HTMLElement {
             if (m[1].startsWith('this.state')) {
                 const stateKey = m[1].substring(11);
                 const stateValue = this.state[stateKey];
-                console.log('attempting to replace', m[0], 'with', stateValue);
+                // console.log('attempting to replace', m[0], 'with', stateValue);
                 if (stateValue === undefined) {
                     continue;
                 }
 
-                console.log('replacing', m[0], 'with', stateValue);
+                // console.log('replacing', m[0], 'with', stateValue);
                 resolved = resolved.replace(m[0], stateValue);
             }
         }
diff --git a/client/public/components/css/notificationbar.css b/client/public/components/css/notificationbar.css
index 3c68835..e1f61f1 100644
--- a/client/public/components/css/notificationbar.css
+++ b/client/public/components/css/notificationbar.css
@@ -44,11 +44,11 @@
 }
 
 .notification-bar-close:active {
-    color: #fff;
+    color: #F5F6F6;
 }
 
 .notification-bar-close:hover {
-    color: #fff;
+    color: #F5F6F6;
 }
 
 .notification-bar-close:focus {
diff --git a/client/public/components/notificationbar.mjs b/client/public/components/notificationbar.mjs
index 261c20a..69d8dca 100644
--- a/client/public/components/notificationbar.mjs
+++ b/client/public/components/notificationbar.mjs
@@ -7,6 +7,43 @@ class NotificationBar extends Component {
         super(NotificationBar);
     }
 
+    daysHoursMinutesSecondsUntil(time) {
+        const now = new Date();
+        const end = new Date(time);
+        const diff = end.getTime() - now.getTime();
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+        return {
+            days,
+            hours,
+            minutes,
+            seconds,
+        };
+    }
+
+    async PostLoad() {
+        const data = await fetch('/api/special').then(response => response.json());
+        const { days, hours, minutes, seconds } = this.daysHoursMinutesSecondsUntil(data.data.end);
+
+        this.setState({
+            title: data.data.title,
+            endTime: data.data.end,
+            timePretty: `${days}d ${hours}h ${minutes}m ${seconds}s`,
+        });
+    }
+
+    Update() {
+        setInterval(() => {
+            const { days, hours, minutes, seconds } = this.daysHoursMinutesSecondsUntil(this.state.endTime);
+            this.setState({
+                ...this.getState,
+                timePretty: `${days}d ${hours}h ${minutes}m ${seconds}s`,
+            });
+        }, 1000);
+    }
+
     Render() {
         return {
             template: SideLoad('./components/templates/notificationbar.html'),
diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs
index af064be..243ff7f 100644
--- a/client/public/components/product-list.mjs
+++ b/client/public/components/product-list.mjs
@@ -27,7 +27,8 @@ class ProductList extends Component {
                 </div>
                 <!--Infinite Loading-->
                 <div class="product-list-loader">
-                <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+                    <!-- https://loading.io/css/ -->
+                    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                 </div>
             `,
             style: `
@@ -57,41 +58,72 @@ class ProductList extends Component {
                     border: none;
                 }
 
-                .lds-ring {
+                .product-list-loader {
+                    display: flex;
+                    justify-content: center;
+                }
+
+                .lds-ellipsis {
                     display: inline-block;
                     position: relative;
                     width: 80px;
                     height: 80px;
                 }
-                .lds-ring div {
-                    box-sizing: border-box;
-                    display: block;
+                .lds-ellipsis div {
                     position: absolute;
-                    width: 64px;
-                    height: 64px;
-                    margin: 8px;
-                    border: 8px solid #fff;
+                    top: 33px;
+                    width: 13px;
+                    height: 13px;
                     border-radius: 50%;
-                    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-                    border-color: #fff transparent transparent transparent;
+                    background: #7F5CFF;
+                    animation-timing-function: cubic-bezier(0, 1, 1, 0);
                 }
-                .lds-ring div:nth-child(1) {
-                    animation-delay: -0.45s;
+                .lds-ellipsis div:nth-child(1) {
+                    left: 8px;
+                    animation: lds-ellipsis1 0.6s infinite;
                 }
-                .lds-ring div:nth-child(2) {
-                    animation-delay: -0.3s;
+                .lds-ellipsis div:nth-child(2) {
+                    left: 8px;
+                    animation: lds-ellipsis2 0.6s infinite;
                 }
-                .lds-ring div:nth-child(3) {
-                    animation-delay: -0.15s;
+                .lds-ellipsis div:nth-child(3) {
+                    left: 32px;
+                    animation: lds-ellipsis2 0.6s infinite;
                 }
-                @keyframes lds-ring {
+                .lds-ellipsis div:nth-child(4) {
+                    left: 56px;
+                    animation: lds-ellipsis3 0.6s infinite;
+                }
+                @keyframes lds-ellipsis1 {
                     0% {
-                        transform: rotate(0deg);
+                        transform: scale(0);
                     }
                     100% {
-                        transform: rotate(360deg);
+                        transform: scale(1);
                     }
-                }               
+                }
+                @keyframes lds-ellipsis3 {
+                    0% {
+                        transform: scale(1);
+                    }
+                    100% {
+                        transform: scale(0);
+                    }
+                }
+                @keyframes lds-ellipsis2 {
+                    0% {
+                        transform: translate(0, 0);
+                    }
+                    100% {
+                        transform: translate(24px, 0);
+                    }
+                }
+                            
+                @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+                    .product-list {
+                        /*justify-content: space-between;*/
+                    }
+                }
             `,
             state: {
                 ...this.getState,
diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs
new file mode 100644
index 0000000..114c884
--- /dev/null
+++ b/client/public/components/product-listing.mjs
@@ -0,0 +1,22 @@
+import { RegisterComponent, Component } from './components.mjs';
+
+class ProductListing extends Component {
+    static __IDENTIFY() { return 'product-listing'; }
+
+    constructor() {
+        super(ProductListing);
+    }
+
+    async Render() {
+        const route = this.state.getroute;
+        const productDetails = await fetch(route).then(response => response.json());
+    }
+
+
+    OnceRendered() {
+
+
+    }
+}
+
+RegisterComponent(ProductListing);
diff --git a/client/public/components/templates/notificationbar.html b/client/public/components/templates/notificationbar.html
index f7ed97f..5635b17 100644
--- a/client/public/components/templates/notificationbar.html
+++ b/client/public/components/templates/notificationbar.html
@@ -1,6 +1,6 @@
 <div class="notification-bar">
     <div class="notification-bar-text">
-        {this.state.notification}
+        {this.state.timePretty} - {this.state.title}
     </div>
     <button class="notification-toggler">
         <span class="cross-line cross-line-top"></span>
diff --git a/client/public/global.css b/client/public/global.css
index 5f729a9..ff543a8 100644
--- a/client/public/global.css
+++ b/client/public/global.css
@@ -22,17 +22,21 @@ limited-margin {
     max-width: 1400px;
 }
 
-/* responsive sidebar stop scrolling */
-/* also making sure this is applied any time it's on a mobile device */
-@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+/* small screen */
+@media screen and (max-width: 900px) {
+    limited-margin {
+        width: 90%;
+    }
+}
+
+/* mobile */
+@media (pointer:none), (pointer:coarse) {
     body {
         font-size: 25px;
     }
 
     limited-margin {
-        width: 90%;
-        /* padding-left: 1em;
-        padding-right: 1em; */
+        width: 95%;
     }
 }
 
diff --git a/client/public/index.html b/client/public/index.html
index 68d06db..50759e8 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -16,11 +16,12 @@
 	<script type="module" src="components/storefront.mjs"></script>
 	<script type="module" src="components/product-list.mjs"></script>
 	<script type="module" src="components/compact-listing.mjs"></script>
+	<script type="module" src="components/product-listing.mjs"></script>
 
 	<script type="module" src="index.mjs"></script>
 </head>
 <body>
-	<notificationbar-component notification="15:03:04 - New Limited Time Offer, Get Any Lego Set for £10 Using Code LEGO10"></notificationbar-component>
+	<notificationbar-component></notificationbar-component>
 
 	<limited-margin>
 		<navbar-component></navbar-component>
diff --git a/docs/API.md b/docs/API.md
index eee0b0b..4ba2dea 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -10,6 +10,8 @@ automatically every request
 
 | Type | Route | Queries | Auth? | Notes |
 | --- | --- | --- | -- | --- |
+| GET   | /api/special/         |               | no  | |
+| GET   | /api/type/:id         |               | no  | |
 | GET   | /api/search/          | query, page   | no  | Query endpoint |
 | GET   | /api/bricks/          | query, page   | no  | Query endpoint |
 | GET   | /api/sets/            | query, page   | no  | Query endpoint |
@@ -47,6 +49,33 @@ brick: brick to search for (absolute)
 
 set: brick to search for (absolute)
 
+### /api/special/
+
+GET /api/special/
+
+Response Object
+```json
+{
+    "data": {
+        "title": "Special 1",
+        "end": "2020-01-31T00:00:00.000Z",
+    }
+}
+```
+
+### /api/type/:id
+
+GET /api/type/:id
+
+Response Object
+```json
+{
+    "data": {
+        "type": "brick", // or set
+    }
+}
+```
+
 ### /api/search/
 
 GET /api/search?params
diff --git a/docs/CLIENT-FRAMEWORK.md b/docs/CLIENT-FRAMEWORK.md
index 72e786e..63a627c 100644
--- a/docs/CLIENT-FRAMEWORK.md
+++ b/docs/CLIENT-FRAMEWORK.md
@@ -90,6 +90,11 @@ State is updated with `setState()`.
 Within the HTML, any instance of `{this.state.}` will be replaced with
 the internal state of the component.
 
+The `PostLoad` method is called once the component has been loaded and
+attatched to the DOM. This is where you can do any post-load setup.
+It is only called once and it's return value becomes the state of the
+component.
+
 The `Update` method is called when the global state or the attribute
 state changes, and is expected to modify the internal state before
 rendering.
diff --git a/src/routes/api.js b/src/routes/api.js
index aeda77a..08a2f1d 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -1,12 +1,15 @@
 const Logger = require('../logger.js');
 const Server = require('./server.js');
 
+const Helpers = require('./helpers.js');
 const Bricks = require('./bricks-router.js');
 const Sets = require('./sets-router.js');
 const Query = require('./query-router.js');
 const Auth0 = require('./auth0-router.js');
 
 function Init() {
+    Server.App.get('/api/special/', Helpers.Special);
+
     Server.App.get('/api/search/', []);
     Server.App.get('/api/bricks/', Bricks.Query);
     Server.App.get('/api/sets/');
diff --git a/src/routes/helpers.js b/src/routes/helpers.js
index e69de29..7299bdb 100644
--- a/src/routes/helpers.js
+++ b/src/routes/helpers.js
@@ -0,0 +1,15 @@
+// 15 days from now
+const EndDate = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
+
+function Special(req, res, next) {
+    res.send({
+        data: {
+            title: '£10 off any LEGO set! Limited Time Only!',
+            end: EndDate,
+        },
+    });
+}
+
+module.exports = {
+    Special,
+};