diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs
index 72e9646..35874fa 100644
--- a/client/public/components/compact-listing.mjs
+++ b/client/public/components/compact-listing.mjs
@@ -9,8 +9,17 @@ class CompactProductListing extends Component {
 
     Render() {
         return {
-            template: SideLoad('./components/templates/compact-listing.html'),
-            style: SideLoad('./components/css/compact-listing.css'),
+            template: `
+                {this.state.name}
+                {this.state.desc}
+                £{this.state.price}
+                <img src="{this.state.image}"></img>
+            `,
+            style: `
+                compact-listing-component {    
+                    display: flex;        
+                }
+            `,
         };
     }
 
diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs
index 2863c3b..5efd143 100644
--- a/client/public/components/components.mjs
+++ b/client/public/components/components.mjs
@@ -2,8 +2,6 @@
 // neccesary is fetched from the server
 const preLoadCache = [];
 export function SideLoad(path) {
-    console.log(preLoadCache);
-
     return new Promise((resolve) => {
         if (preLoadCache[path]) {
             resolve(preLoadCache[path]);
@@ -34,9 +32,9 @@ export class Component extends HTMLElement {
     }
 
     // Override these
-    Render() { this.__WARN('Render'); }
-    OnceRendered() { this.__WARN('Render'); }
-    static __IDENTIFY() { this.__WARN('identify'); }
+    Render() { Component.__WARN('Render'); }
+    OnceRendered() { Component.__WARN('Render'); }
+    static __IDENTIFY() { Component.__WARN('identify'); }
 
     connectedCallback() {
         // set up to watch all attributes for changes
@@ -45,9 +43,11 @@ export class Component extends HTMLElement {
         // if there are any attributes related to the element
         // be sure to include them in the state to be sure that
         // they can be resolved
+        let stateUpdateQueue = { ...this.state };
         for (const attribute of this.attributes) {
-            this.SetState({ ...this.state, [attribute.name]: attribute.value });
+            stateUpdateQueue = { ...stateUpdateQueue, [attribute.name]: attribute.value };
         }
+        this.setState(stateUpdateQueue);
 
         if (this.attributes.length === 0) {
             this.__INVOKE_RENDER();
@@ -72,27 +72,36 @@ export class Component extends HTMLElement {
 
     attributeChangedCallback(name, newValue) {
         console.log(`attribute changed: ${name} ${newValue}`);
-        this.SetState({ ...this.state, [name]: newValue });
+        this.setState({ ...this.state, [name]: newValue });
         this.__INVOKE_RENDER();
     }
 
-    get GetState() {
+    get getState() {
         return this.state;
     }
 
-    SetState(newState) {
+    setState(newState) {
         this.state = newState;
         this.__INVOKE_RENDER(Object.bind(this));
     }
 
     async __INVOKE_RENDER() {
-        const res = this.Render(Object.bind(this));
+        let res = this.Render(Object.bind(this));
 
-        if (!res.template || !res.style) {
-            this.__ERR('no template or style');
+        if (res instanceof Promise) {
+            res = await res;
+        }
+
+        if (res.template === undefined || res.style === undefined) {
+            Component.__ERR('no template or style');
             return;
         }
 
+        // way to formally update state WITHOUT triggering a re-render
+        if (res.state) {
+            this.state = res.state;
+        }
+
         // if res.template is a promise, we need to wait to resolve it
         if (res.template instanceof Promise) {
             res.template = await res.template;
@@ -113,6 +122,7 @@ 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);
                 if (stateValue === undefined) {
                     continue;
                 }
diff --git a/client/public/components/css/compact-listing.css b/client/public/components/css/compact-listing.css
deleted file mode 100644
index e69de29..0000000
diff --git a/client/public/components/css/storefront.css b/client/public/components/css/storefront.css
deleted file mode 100644
index e69de29..0000000
diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs
new file mode 100644
index 0000000..eddd16b
--- /dev/null
+++ b/client/public/components/product-list.mjs
@@ -0,0 +1,48 @@
+import { RegisterComponent, Component } from './components.mjs';
+
+class ProductList extends Component {
+    static __IDENTIFY() { return 'product-list'; }
+
+    constructor() {
+        super(ProductList);
+    }
+
+    async Render() {
+        const route = this.state.getroute;
+        const products = await fetch(route).then(response => response.json());
+
+        return {
+            template: `
+                <h1>{this.state.title}</h1>
+                <div class="product-list">
+                    ${products.data.map(product => {
+                        return `<compact-listing-component name="${product.name}"
+                                    desc="${product.description}"
+                                    image="${product.image}"
+                                    price="${product.price}"></compact-listing-component>`;
+                    })}
+                </div>
+            `,
+            style: `
+                .product-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin: 0 auto;
+                    max-width: 800px;
+                }
+            `,
+            state: {
+                ...this.getState,
+                products,
+            },
+        };
+    }
+
+
+    OnceRendered() {
+
+
+    }
+}
+
+RegisterComponent(ProductList);
diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs
index 0c172f4..bce326b 100644
--- a/client/public/components/storefront.mjs
+++ b/client/public/components/storefront.mjs
@@ -1,4 +1,4 @@
-import { RegisterComponent, Component, SideLoad } from './components.mjs';
+import { RegisterComponent, Component } from './components.mjs';
 
 class StoreFront extends Component {
     static __IDENTIFY() { return 'storefront'; }
@@ -9,18 +9,22 @@ class StoreFront extends Component {
 
     Render() {
         return {
-            template: SideLoad('./components/templates/storefront.html'),
-            style: SideLoad('./components/css/storefront.css'),
+            template: `
+                <product-list-component id="featured"
+                                        title="Featured Lego Sets"
+                                        getroute="/api/sets/featured">
+                </product-list-component>
+                `,
+            style: `
+                product-list-component {
+                    display: block;
+                    margin: 0 auto;
+                }`,
         };
     }
 
     OnceRendered() {
-        const items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
-        for (const item of items) {
-            const itemElement = document.createElement('compact-listing-component');
-            itemElement.setAttribute('item', item);
-            this.root.appendChild(itemElement);
-        }
+
     }
 }
 
diff --git a/client/public/components/templates/compact-listing.html b/client/public/components/templates/compact-listing.html
deleted file mode 100644
index 7f2c95f..0000000
--- a/client/public/components/templates/compact-listing.html
+++ /dev/null
@@ -1 +0,0 @@
-{this.state.item}
\ No newline at end of file
diff --git a/client/public/components/templates/storefront.html b/client/public/components/templates/storefront.html
deleted file mode 100644
index 466b38b..0000000
--- a/client/public/components/templates/storefront.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="product-list">
-    
-</div>
diff --git a/client/public/index.html b/client/public/index.html
index b7eb9a3..eb036ca 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -13,6 +13,7 @@
 	<script type="module" src="components/navbar.mjs"></script>
 	<script type="module" src="components/notificationbar.mjs"></script>
 	<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="index.mjs"></script>
@@ -24,8 +25,7 @@
 		<navbar-component></navbar-component>
 		
 		<storefront-component></storefront-component>
-
-
+		
 		<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->
 		<!-- <canvas id="webglviewer" width="300" height="300"></canvas>
 		<canvas id="webglviewer" width="300" height="300"></canvas>
diff --git a/docs/API.md b/docs/API.md
index e14109d..b0f3cd0 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -13,6 +13,7 @@ automatically every request
 | GET   | /api/search/          | query, page   | no  | |
 | GET   | /api/bricks/          | query, page   | no  | |
 | GET   | /api/sets/            | query, page   | no  | |
+| GET   | /api/sets/featured    | page          | no  | |
 | GET   | /api/brick/:id/       |               | no  | | 
 | GET   | /api/set/:id/         |               | no  | |
 | GET   | /api/cdn/:id/         |               | no  | |
@@ -27,6 +28,8 @@ automatically every request
 
 ## Query structure
 
+
+
 ### /api/search/
 ### /api/bricks/
 
diff --git a/docs/CLIENT-FRAMEWORK.md b/docs/CLIENT-FRAMEWORK.md
index 5224292..0eff435 100644
--- a/docs/CLIENT-FRAMEWORK.md
+++ b/docs/CLIENT-FRAMEWORK.md
@@ -25,7 +25,7 @@ class MyComponent extends Component {
 
 That is the simplest form a component can be, it won't render but it
 will register it's self in the DOM and be accessable with the
-`<mycomponent-component></mycomponent-component>` tag within the DOM.
+`<mycomponent></mycomponent>` tag within the DOM.
 
 In order to get some stuff rendering in there, it is important to
 override the `Render` method, returning an object with a template
@@ -76,7 +76,7 @@ a given component has a state which can be user-defined `this.state.x=`
 or an attribute to the component tag in the HTML, or both. When the
 state changes, the component is re-renderered.
 
-State is updated with `SetState()`.
+State is updated with `setState()`.
 
 Within the HTML, any instance of `{this.state.}` will be replaced with
 the internal state of the component.
diff --git a/src/routes/api.js b/src/routes/api.js
index 49e08ba..194616c 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -10,6 +10,7 @@ function Init() {
     Server.App.get('/api/search/', []);
     Server.App.get('/api/bricks/', Bricks.Query);
     Server.App.get('/api/sets/');
+    Server.App.get('/api/sets/featured/', Sets.Featured);
     Server.App.get('/api/brick/:id/');
     Server.App.get('/api/set/:id/');
 
diff --git a/src/routes/sets-router.js b/src/routes/sets-router.js
index e69de29..a3071f3 100644
--- a/src/routes/sets-router.js
+++ b/src/routes/sets-router.js
@@ -0,0 +1,49 @@
+const Controller = require('../controllers/set-controller.js');
+
+function Featured(req, res, next) {
+    const query = req.query;
+
+    res.send(JSON.stringify({
+        data: [
+            {
+                id: '1',
+                name: 'Brick 1',
+                description: 'Brick 1 description',
+                price: '1.00',
+                image: 'https://via.placeholder.com/300x300',
+            },
+            {
+                id: '2',
+                name: 'Brick 2',
+                description: 'Brick 2 description',
+                price: '2.00',
+                image: 'https://via.placeholder.com/300x300',
+            },
+            {
+                id: '3',
+                name: 'Brick 3',
+                description: 'Brick 3 description',
+                price: '3.00',
+                image: 'https://via.placeholder.com/300x300',
+            },
+        ],
+    }));
+
+    // Validation
+    // const validation = Controller.ValidateQuery(query);
+    // if (!validation.isValid) {
+    //     return res.status(400).json({
+    //         error: {
+    //             short: validation.error,
+    //             long: validation.longError,
+    //         },
+    //     });
+    // }
+
+
+    // next();
+}
+
+module.exports = {
+    Featured,
+};