diff --git a/app/controllers/Home/Controller.php b/app/controllers/Home/Controller.php
index ca63253..ce4a77f 100644
--- a/app/controllers/Home/Controller.php
+++ b/app/controllers/Home/Controller.php
@@ -11,29 +11,30 @@ class Controller extends \App\Controllers\Controller
     public function index()
     {
 
-        $servers = [
-                ['type' => 'Minecraft'
-                , 'servers' => [ 
-                        [
-                            'name' => 'survival.mc.aney.co.uk'
-                            ,'description' => 'An open to all survival minecraft server.'
-                        ]
-                        ,[
-                            'name' => 'creative.mc.aney.co.uk'
-                            ,'description' => 'Creative minecraft server.'
-                        ]
-                    ]
-                ]
-                ,['type' => 'Factorio'
-                , 'servers' => [
-                        [
-                            'name' => 'factorio.aney.co.uk'
-                                ,'description' => 'The factory must grow.'
-                        ]
-                    ]
-                ]
-                ,['type' => 'misc', 'servers' =>  []]
-            ];
+        $servers = \App\Models\Helper::servers();
+        // $servers = [
+        //         ['type' => 'Minecraft'
+        //         , 'servers' => [ 
+        //                 [
+        //                     'name' => 'survival.mc.aney.co.uk'
+        //                     ,'description' => 'An open to all survival minecraft server.'
+        //                 ]
+        //                 ,[
+        //                     'name' => 'creative.mc.aney.co.uk'
+        //                     ,'description' => 'Creative minecraft server.'
+        //                 ]
+        //             ]
+        //         ]
+        //         ,['type' => 'Factorio'
+        //         , 'servers' => [
+        //                 [
+        //                     'name' => 'factorio.aney.co.uk'
+        //                         ,'description' => 'The factory must grow.'
+        //                 ]
+        //             ]
+        //         ]
+        //         ,['type' => 'misc', 'servers' =>  []]
+        //     ];
 
             
         response()->render('index', [
diff --git a/app/controllers/Page/Controller.php b/app/controllers/Page/Controller.php
index 4a967be..1ff09e6 100644
--- a/app/controllers/Page/Controller.php
+++ b/app/controllers/Page/Controller.php
@@ -10,5 +10,11 @@ class Controller extends \App\Controllers\Controller
         response()->render('sf');
         // response()->render('sf-trying-swiper');
     }
+    public function example(){ 
+        $mainNav = \App\Models\Helper::mainNav();
+        response()->render('example',
+            ['mainNav' => $mainNav]
+        );
+    }
 
 }
diff --git a/app/models/Helper.php b/app/models/Helper.php
new file mode 100644
index 0000000..bdd3dbf
--- /dev/null
+++ b/app/models/Helper.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+class Helper extends \Leaf\Model {
+    
+    public static function mainNav() {
+        $nav = array();
+
+        $nav['about'] = ['title' => 'About', 'link' => '/about'];
+        $nav['servers'] = ['title' => 'Servers', 'link' => '/#servers'];
+        $servers = self::servers();
+        foreach ($servers as $server) {
+            $nav['servers']['children'][] = ['title' => $server['type'], 'link' => 'LINK'];
+        }
+        $nav['sf'] = ['title' => 'Simple Floor', 'link' => '/sf'];
+        $nav['example'] = ['title' => 'Example', 'link' => '/example'];
+        $nav['faq'] = ['title' => 'FAQs', 'link' => '/#faq'];
+
+        return $nav;
+    }
+
+    public static function servers(){
+        $servers = [
+            ['type' => 'Minecraft'
+            , 'servers' => [ 
+                    [
+                        'name' => 'survival.mc.aney.co.uk'
+                        ,'description' => 'An open to all survival minecraft server.'
+                    ]
+                    ,[
+                        'name' => 'creative.mc.aney.co.uk'
+                        ,'description' => 'Creative minecraft server.'
+                    ]
+                ]
+            ]
+            ,['type' => 'Factorio'
+            , 'servers' => [
+                    [
+                        'name' => 'factorio.aney.co.uk'
+                            ,'description' => 'The factory must grow.'
+                    ]
+                ]
+            ]
+            ,['type' => 'misc', 'servers' =>  []]
+        ];
+
+        return $servers;
+    }
+}
diff --git a/app/routes/_app.php b/app/routes/_app.php
index 45bda46..6b51824 100644
--- a/app/routes/_app.php
+++ b/app/routes/_app.php
@@ -19,6 +19,7 @@ app()->get('/', 'Home\Controller@index');
 app()->get('/about', 'Page\Controller@about');
 
 app()->get('/simple', 'Page\Controller@simple');
+app()->get('/example', 'Page\Controller@example');
 
 app()->get('/discord', ['name' => 'discord', function() {
     response()->redirect('https://discord.gg/mpqKaktn9w'); // Temporary member discord invite
diff --git a/app/views/components/header.blade.php b/app/views/components/header.blade.php
index 3aac33f..666040d 100644
--- a/app/views/components/header.blade.php
+++ b/app/views/components/header.blade.php
@@ -7,7 +7,7 @@
             </div>
 
             <div class="col col-fill">
-                <ul class="nav-list">
+                <ul class="nav-list nav-list--inline">
                     <li class="nav-list__item"><a href="/about">About</a></li>
                     <li class="nav-list__item nav-list__item--has-dropdown"><a href="#servers">Servers</a>
                         @if(!empty($servers))
@@ -23,6 +23,7 @@
                         @endif
                     </li>
                     <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
+                    <li class="nav-list__item"><a href="/example">Example</a></li>
                     <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                 </ul>
             </div>
diff --git a/app/views/example.blade.php b/app/views/example.blade.php
new file mode 100644
index 0000000..72bde99
--- /dev/null
+++ b/app/views/example.blade.php
@@ -0,0 +1,96 @@
+@extends('layouts.basePage', [
+    'title' => 'SFs Dupe',
+    'breadcrumbs' => [
+        [
+            'title' => 'Home',
+            'href' => '/',
+        ]
+    ]
+])
+
+@section('content')
+
+    <!-- Header on mobile -->
+    <header>
+
+    </header>
+
+    <div class="container container--no-gap"><div class="row"> <!-- no-gap should probably be the default tbf -->
+        <!-- Sidenav desktop + mobile (via burger) -->
+        <nav class="col hide-xs hide-sm col-3 nav" style="height: 100vh;">
+            <!-- Change to not be inline also, with manual click dropdowns that perma open/close -->
+            <ul class="nav-list">
+                @foreach($mainNav as $item)
+                    <li class="nav-list__item {{ !empty($item['children']) ? 'nav-list__item--has-dropdown' : '' }}">
+                        <a href="{{ $item['link'] }}">{{ $item['title'] }}</a>
+                        @if(!empty($item['children']))
+                        <ul class="nav-list__item__dropdown">
+                        @foreach($item['children'] as $child)
+                            <div class="nav-list__item__dropdown__content">
+                                <li class="nav-list__item__dropdown__item"><a href="{{ $child['link'] }}">{{ $child['title']; }}</a></li>
+                            </div>
+                        @endforeach
+                        </ul>
+                        @endif
+                    </li>
+                @endforeach
+            </ul>
+        </nav>
+        
+        <div class="col col-xs-12 col-sm-12 col-9 main right" style="height: 100vh; transition: max-width .3s linear;">
+            <main>
+                <!-- Header h1, etc. -->
+                <div class="row row--align-center" style="padding-top: 12px">
+                    <div class="col col-6">
+                        <h1 class="no-margin">Title</h1>
+                    </div>
+                    <div class="col col-6 tar">
+                        <span class="tag">t1</span>
+                        <span class="tag">t1</span>
+                    </div>
+                </div>
+
+                <!-- Hero -->
+                <div class="row">
+                    <div class="col col-12">
+                        <div class="hero">
+                            <img src="https://placehold.co/1200x800">
+                            <div class="hero__content">
+                                <h2>Main Text</h2>
+                                <p>Secondary text</p>
+                                <a href="#" class="button">Button</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Items/etc -->
+                <div class="row">
+                    <div class="col col-12">
+                        <p>8 items</p>
+                    </div>
+
+                    @for ($i = 0; $i < 8; $i++)
+                    <div class="col col-3">
+                        <div style="position: relative">
+                            @if($i%3 == 1)
+                                <div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">Sale</p></div>
+                            @elseif($i%5 == 1)
+                                <div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">NEW</p></div>
+                            @endif
+                            <img src="https://placehold.co/400x500">
+                            <p>Item tile here</p>
+                            <p><strong>£21.99</strong></p>
+                        </div>
+                    </div>
+                    @endfor
+                </div>
+            </main>
+            
+            <footer class="footer">
+                <p>Footer</p>
+            </footer>
+        </div>
+    </div></div>
+
+@endsection
\ No newline at end of file
diff --git a/app/views/sf.blade.php b/app/views/sf.blade.php
index 9632ac5..5955346 100644
--- a/app/views/sf.blade.php
+++ b/app/views/sf.blade.php
@@ -66,7 +66,7 @@
                         <div class="row" style="margin-top: auto;">
                             <div class="col col-12">
                                 
-                                <ul class="nav-list">
+                                <ul class="nav-list nav-list--inline">
                                     <li class="nav-list__item"><a href="/about">About</a></li>
                                     <li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
                                         <ul class="nav-list__item__dropdown">
@@ -76,6 +76,7 @@
                                         </ul>
                                     </li>
                                     <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
+                                    <li class="nav-list__item"><a href="/example">Example</a></li>
                                     <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                                 </ul>
 
@@ -113,6 +114,7 @@
     </div>
     <!-- END Header -->
 
+    <main>
     <!-- Hero and content -->
     <div style="position: relative;">
         <img class="image--center" src="https://placehold.co/1920x640">
@@ -532,20 +534,20 @@
             </div>
         </div>
 
-        <div class="row gallery-fancy">
-            <div class="col col-3">
+        <div class="row gallery-fancy"> <!-- flex -->
+            <div class="col col-xs-12 col-sm-6 col-3">
                 <img src="https://placehold.co/250x350">
                 <img src="https://placehold.co/240x240">
             </div>
-            <div class="col col-3">
+            <div class="col col-xs-12 col-sm-6 col-3">
                 <img src="https://placehold.co/240x240">
                 <img src="https://placehold.co/240x180">
             </div>
-            <div class="col col-3">
+            <div class="col col-xs-12 col-sm-6 col-3">
                 <img src="https://placehold.co/240x180">
                 <img src="https://placehold.co/250x350">
             </div>
-            <div class="col col-3">
+            <div class="col col-xs-12 col-sm-6 col-3">
                 <img src="https://placehold.co/250x240">
                 <img src="https://placehold.co/250x240">
             </div>
@@ -565,7 +567,7 @@
             });
         </script>
     </div>
-
+    </main>
 
     <!-- Footer -->
     <footer style="margin-top: auto;">