diff --git a/spa/api/v1/MixResource.py b/spa/api/v1/MixResource.py
index 9d129c6..dc61984 100755
--- a/spa/api/v1/MixResource.py
+++ b/spa/api/v1/MixResource.py
@@ -59,9 +59,9 @@ class MixResource(BackboneCompatibleResource):
                 (self._meta.resource_name, trailing_slash()),
                 self.wrap_view('dispatch_detail'),
                 name="api_dispatch_detail"),
-            url(r"^(?P<resource_name>%s)/random/$" %
-                self._meta.resource_name, self.wrap_view('dispatch_random'),
-                name="api_dispatch_random"),
+            url(r"^(?P<resource_name>%s)/random%s$" %
+                (self._meta.resource_name, trailing_slash()),
+                self.wrap_view('dispatch_random'), name="api_dispatch_random"),
             url(r"^(?P<resource_name>%s)/(?P<slug>[\w\d-]+)%s$" %
                 (self._meta.resource_name, trailing_slash()),
                 self.wrap_view('dispatch_detail'), name="api_dispatch_detail"),
diff --git a/spa/models/activity.py b/spa/models/activity.py
index cacc8f9..21c4143 100755
--- a/spa/models/activity.py
+++ b/spa/models/activity.py
@@ -6,6 +6,7 @@ from django.db import models
 from model_utils.managers import InheritanceManager
 from open_facebook import OpenFacebook
 from core.utils.url import wrap_full
+from dss import settings
 
 from spa.models.notification import Notification
 from spa.models.userprofile import UserProfile
@@ -30,6 +31,9 @@ class Activity(BaseModel):
         return "%s" % self.get_object_name()
 
     def post_social(self):
+        if settings.DEBUG:
+            return
+
         try:
             verb = self.get_verb_past()
             object = self.get_object_singular()
diff --git a/static/css/dss.main.css b/static/css/dss.main.css
index 93abc4a..8b35b69 100644
--- a/static/css/dss.main.css
+++ b/static/css/dss.main.css
@@ -779,6 +779,6 @@ img.mix-listing-image {
     right: 0;
 }
 
-.btn-group a{
+.btn-group a {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/static/css/dss.overrides.css b/static/css/dss.overrides.css
index 49dd763..d070400 100644
--- a/static/css/dss.overrides.css
+++ b/static/css/dss.overrides.css
@@ -10,6 +10,10 @@
     width: 320px !important;
 }
 
-.profile-activity{
+.profile-activity {
     cursor: pointer !important;
+}
+
+.mix-item-container {
+    margin-right: 12px !important;
 }
\ No newline at end of file
diff --git a/static/js/dss/app.coffee b/static/js/dss/app.coffee
index fcbbcc3..c72fcda 100644
--- a/static/js/dss/app.coffee
+++ b/static/js/dss/app.coffee
@@ -11,7 +11,7 @@
         headerRegion: "#header"
         contentRegion: "#content"
         footerRegion: "#footer"
-        sidebarRegion: "#sidebar"
+        sidebarLeftRegion: "#sidebar-left"
 
     App.addInitializer ->
         @audioController = new App.Lib.AudioController()
@@ -19,7 +19,7 @@
 
     App.addInitializer ->
         @headerRegion.show(new App.HeaderApp.Views.Header())
-        @sidebarRegion.show(new App.SidebarApp.Views.SidebarView())
+        @sidebarLeftRegion.show(new App.SidebarApp.Views.SidebarLeftNav())
 
 
     App.addInitializer ->
diff --git a/static/js/dss/apps/header/views/headerView.coffee b/static/js/dss/apps/header/views/headerView.coffee
index c7b8be6..5114d54 100644
--- a/static/js/dss/apps/header/views/headerView.coffee
+++ b/static/js/dss/apps/header/views/headerView.coffee
@@ -3,11 +3,9 @@
         template: "header"
         className: "navbar navbar-default"
         events:
-            "click #header-random-button": "showRandom"
             "click #header-play-pause-button": "togglePlayState"
             "click #header-login-button": "login"
             "click #header-logout-button": "logout"
-            "click #header-donate-button": "donate"
             "click #header-live-button.btn-success": "playLive"
             "click #header-live-button.btn-danger": "pauseLive"
         ui:
@@ -28,19 +26,12 @@
             if com.podnoms.settings.currentUser != -1
                 @notificationsRegion.show(new App.NotificationApp.Views.NotificationsListView())
 
-        showRandom: ->
-            console.log("headerView: showRandom")
-            App.vent.trigger("mix:random")
-
         login: ->
             App.vent.trigger('app:login')
 
         logout: ->
             App.vent.trigger('app:logout')
 
-        donate: ->
-            App.vent.trigger('app:donate')
-
         trackChanged: (data) ->
             $(@el).find("#track-description").text data.title
             $(@el).find("#track-description").attr "href", "#" + data.item_url
diff --git a/static/js/dss/apps/sidebar/views/sidebarLeftNav.coffee b/static/js/dss/apps/sidebar/views/sidebarLeftNav.coffee
new file mode 100644
index 0000000..c91a68c
--- /dev/null
+++ b/static/js/dss/apps/sidebar/views/sidebarLeftNav.coffee
@@ -0,0 +1,40 @@
+@Dss.module "SidebarApp.Views", (Views, App, Backbone, Marionette, $, _, vent) ->
+    class Views.SidebarLeftNav extends Marionette.LayoutView
+        template: "sidebarleftnav"
+
+        events:
+            "click #button-mute": "muteAudio"
+            "click #header-random-button": "showRandom"
+            "click #header-donate-button": "donate"
+
+        ui:
+            muteButton: "#button-mute"
+            muteButtonIcon: "#button-mute-icon"
+
+        initialize: ->
+            @listenTo App.vent, "mix:play", @trackPlaying
+            @listenTo App.vent, "mix:pause", @trackPaused
+
+        muteAudio: ->
+            if App.audioController.audioState is 0
+                utils.showMessage("Hello", "Audio has been muted")
+                @ui.muteButton.removeClass('btn-success')
+                @ui.muteButton.addClass('btn-danger')
+                @ui.muteButtonIcon.removeClass('fa-volume-up')
+                @ui.muteButtonIcon.addClass('fa-volume-down')
+            else
+                @ui.muteButton.removeClass('btn-danger')
+                @ui.muteButton.addClass('btn-success')
+                @ui.muteButtonIcon.removeClass('fa-volume-down')
+                @ui.muteButtonIcon.addClass('fa-volume-up')
+
+            App.vent.trigger("audio:mute")
+
+        showRandom: ->
+            App.vent.trigger("mix:random")
+
+        donate: ->
+            App.vent.trigger('app:donate')
+
+    Views.SidebarView
+
diff --git a/static/js/dss/lib/audioController.coffee b/static/js/dss/lib/audioController.coffee
index 8beef87..5ad4b0a 100644
--- a/static/js/dss/lib/audioController.coffee
+++ b/static/js/dss/lib/audioController.coffee
@@ -1,16 +1,24 @@
 @Dss.module "Lib", (Lib, App, Backbone, Marionette, $    ) ->
     class Lib.AudioController extends Marionette.Controller
 
+        AudioStates =
+            unmuted: 0
+            muted: 1
+        @AUDIO_STATES = AudioStates
+
         initialize: (options) ->
             console.log "AudioController: initialize"
             @listenTo(App.vent, 'mix:init', @mixInit)
             @listenTo(App.vent, 'mix:play', @mixPlay)
             @listenTo(App.vent, 'mix:pause', @mixPause)
             @listenTo(App.vent, 'mix:resume', @mixResume)
+            @listenTo(App.vent, 'audio:mute', @audioMute)
             @listenTo(App.vent, 'playing:destroy', @playingDestroy)
             @listenTo(App.vent, 'live:play', @livePlay)
             @listenTo(App.vent, 'live:pause', @livePause)
 
+            @audioState = AudioStates.unmuted
+
             soundManager.setup
                 url: com.podnoms.settings.staticUrl + '/swf/sm/'
                 onready: ->
@@ -27,6 +35,8 @@
 
         setupPlayer: (el, url) ->
             peneloPlay.setupPlayer el, url
+            if @audioState is AudioStates.muted
+                peneloPlay.mute()
 
         setupPlayerEl: (el) ->
             peneloPlay.setupPlayer el
@@ -57,6 +67,14 @@
         getMixState: ->
             return peneloPlay.getMixState()
 
+        audioMute: ->
+            if @audioState is AudioStates.unmuted
+                @audioState = AudioStates.muted
+                peneloPlay.mute()
+            else
+                @audioState = AudioStates.unmuted
+                peneloPlay.unmute()
+
         mixPlay: ->
             console.log("AudioController: mixPlay")
             peneloPlay.resume();
diff --git a/static/js/dss/lib/controller.coffee b/static/js/dss/lib/controller.coffee
index b0bdead..43f00f1 100644
--- a/static/js/dss/lib/controller.coffee
+++ b/static/js/dss/lib/controller.coffee
@@ -52,7 +52,7 @@
             mix = new App.MixApp.Models.MixItem({id: 'random'})
             mix.fetch(
                 success: ->
-                    App.contentRegion.show(new MixDetailView({model: mix}))
+                    App.contentRegion.show(new App.MixApp.Views.MixDetailView({model: mix}))
             )
             Backbone.history.navigate "/random", trigger: false
 
diff --git a/static/js/dss/lib/peneloPlay.coffee b/static/js/dss/lib/peneloPlay.coffee
index 9cc4b52..4d2e95a 100644
--- a/static/js/dss/lib/peneloPlay.coffee
+++ b/static/js/dss/lib/peneloPlay.coffee
@@ -146,6 +146,14 @@
         @_hookupMouseEntryEvents()
         return
 
+    mute: ->
+        if _player
+            _player.mute()
+
+    unmute: ->
+        if _player
+            _player.unmute()
+
     pause: ->
         _player.pause()  if _player.playState is 1
         return
@@ -158,7 +166,7 @@
         if not _player or _player.playState is 0
             return 0
         else return 2  if _player.paused
-        1
+        return 1
 
     playLive: (args)->
         @stopPlaying()
diff --git a/static/js/dss/templates/header.jst b/static/js/dss/templates/header.jst
index 1c4d70d..c695a09 100644
--- a/static/js/dss/templates/header.jst
+++ b/static/js/dss/templates/header.jst
@@ -1,84 +1,64 @@
 <div class="navbar-container">
+    <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
+        <span class="sr-only">Toggle sidebar</span>
+
+        <span class="icon-bar"></span>
+
+        <span class="icon-bar"></span>
+
+        <span class="icon-bar"></span>
+    </button>
     <div class="navbar-header pull-left">
         <a href="/" class="navbar-brand">
             Deep|South|Sounds
         </a>
     </div>
-    <div class="navbar-header">
-        <ul class="nav ace-nav">
-            <li><a href="/mixes"><i class="ace-icon fa fa-music fa fa-white"></i>Mixes</a></li>
-            <li><a href="/users"><i class="ace-icon fa fa-user fa fa-white"></i>Users</a></li>
-            <% if (com.podnoms.settings.currentUser != -1) { %>
-                <li><a href="/stream" title="Show mixes from people you follow" id="header-stream-button"><i
-                        class="ace-icon fa fa-dot-circle-o fa-white"></i>Stream</a></li>
-            <% } %>
-            <li><a data-bypass="true" title="Show random mix from our vaults" id="header-random-button"><i
-                    class="ace-icon fa fa-cogs fa fa-white"></i>Random</a></li>
-            <li><a data-bypass="true" target="_blank" href="/podcast"><i class="ace-icon fa fa-rss fa fa-white"></i>Podcast</a>
-            </li>
-            <% if (com.podnoms.settings.liveEnabled ) { %>
-                <li class="purple">
-                    <a data-bypass="true" class="btn-success" id="header-live-button">&nbsp;Listen Live
-                        <i class="ace-icon fa fa-headphones fa fa-white" id="header-live-icon"></i>
-                    </a>
-                </li>
-            <% } %>
-            <% if (com.podnoms.settings.currentUser != -1) { %>
-                <li class="purple">
-                    <a href="/mix/upload" id='upload'>Upload
-                        <i class="ace-icon fa fa-upload fa fa-white"></i>
-                    </a>
-                </li>
-            <% } %>
-        </ul>
-    </div>
-    <div class="navbar-header pull-right" role="navigation">
+
+    <div class="navbar-buttons navbar-header pull-right" role="navigation">
         <ul class="nav ace-nav">
             <li id="header-search"></li>
-            <li><a class="btn-danger" data-bypass="true" id="header-donate-button"><i class="ace-icon fa fa-euro"/>Donate</a>
-            </li>
             <li class="nav ace-nav" id="header-notifications">
                 <!-- End Notifications li -->
             </li>
             <% if (com.podnoms.settings.currentUser != -1) { %>
-                <li class="light-blue">
-                    <a data-toggle="dropdown" data-bypass="true" href="#" class="dropdown-toggle">
-                        <img id="nav-profile-image" class="nav-user-photo"
-                             src="<%= com.podnoms.settings.avatarImage %>"
-                             alt="AAProfileImg"/>
+            <li class="light-blue">
+                <a data-toggle="dropdown" data-bypass="true" href="#" class="dropdown-toggle">
+                    <img id="nav-profile-image" class="nav-user-photo"
+                         src="<%= com.podnoms.settings.avatarImage %>"
+                         alt="Profile Image"/>
                         <span class="user-info">
                             <small>Welcome,</small>
                             <%= com.podnoms.settings.userName %>
                         </span>
-                        <i class="ace-icon fa fa-caret-down"></i>
-                    </a>
-                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
-                        <li>
-                            <a href="/me">
-                                <i class="ace-icon fa fa-cog"></i>
-                                Settings
-                            </a>
-                        </li>
-                        <li>
-                            <a href="<%= com.podnoms.settings.userUrl %>">
-                                <i class="ace-icon fa fa-user"></i>
-                                Profile
-                            </a>
-                        </li>
-                        <li class="divider"></li>
-                        <li>
-                            <a data-bypass="true" id="header-logout-button">
-                                <i class="ace-icon fa fa-off"></i>
-                                Logout
-                            </a>
-                            <input type="hidden" name="user_id" value="{{ user.id }}"/>
-                        </li>
-                    </ul>
-                </li>
+                    <i class="ace-icon fa fa-caret-down"></i>
+                </a>
+                <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
+                    <li>
+                        <a href="/me">
+                            <i class="ace-icon fa fa-cog"></i>
+                            Settings
+                        </a>
+                    </li>
+                    <li>
+                        <a href="<%= com.podnoms.settings.userUrl %>">
+                            <i class="ace-icon fa fa-user"></i>
+                            Profile
+                        </a>
+                    </li>
+                    <li class="divider"></li>
+                    <li>
+                        <a data-bypass="true" id="header-logout-button">
+                            <i class="ace-icon fa fa-off"></i>
+                            Logout
+                        </a>
+                        <input type="hidden" name="user_id" value="{{ user.id }}"/>
+                    </li>
+                </ul>
+            </li>
             <% } else { %>
-                <li>
-                    <a data-bypass="true" id="header-login-button">Login/Signup</a>
-                </li>
+            <li>
+                <a data-bypass="true" id="header-login-button">Login/Signup</a>
+            </li>
             <% } %>
         </ul>
     </div>
diff --git a/static/js/dss/templates/mixitemview.jst b/static/js/dss/templates/mixitemview.jst
index 2c9b04b..fcc2896 100644
--- a/static/js/dss/templates/mixitemview.jst
+++ b/static/js/dss/templates/mixitemview.jst
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row mix-item-container">
     <div class="col-md-2 mix-profile-container">
         <div class="mix-image-container">
             <img alt="mix-logo" class="mix-image-image img-rounded img-polaroid" src="<%= mix_image %>"/>
diff --git a/static/js/dss/templates/sidebarleftnav.jst b/static/js/dss/templates/sidebarleftnav.jst
new file mode 100644
index 0000000..fb3f73c
--- /dev/null
+++ b/static/js/dss/templates/sidebarleftnav.jst
@@ -0,0 +1,106 @@
+<% if (com.podnoms.settings.currentUser != -1) { %>
+<div class="sidebar-shortcuts" id="sidebar-shortcuts">
+
+    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
+        <a class="btn btn-success" data-bypass="true" title="Mute" id="button-mute">
+            <i class="menu-icon fa fa-volume-up" id="button-mute-icon"></i>
+        </a>
+
+        <a href="/user/<%= com.podnoms.settings.userSlug %>/mixes" class="btn btn-info" data-bypass="true">
+            <i class="menu-icon fa fa-pencil"></i>
+        </a>
+
+        <a href="<%= com.podnoms.settings.userUrl %>" data-bypass="true" class="btn btn-warning" title="Profile">
+            <i class="menu-icon fa fa-users"></i>
+        </a>
+
+        <a href="/me" class="btn btn-purple" data-bypass="true" title="Settings">
+            <i class="menu-icon fa fa-cogs"></i>
+        </a>
+    </div>
+
+    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
+        <span class="btn btn-success"></span>
+
+        <span class="btn btn-info"></span>
+
+        <span class="btn btn-warning"></span>
+
+        <span class="btn btn-danger"></span>
+    </div>
+</div><!-- /.sidebar-shortcuts -->
+<% } %>
+
+<ul class="nav nav-list">
+
+    <li>
+        <a href="/mixes">
+            <i class="menu-icon fa fa-music "></i>
+            <span class="menu-text"> Mixes </span>
+        </a>
+        <b class="arrow"></b>
+    </li>
+
+    <li>
+        <a href="/users">
+            <i class="menu-icon fa fa-user "></i>
+            <span class="menu-text"> Users </span>
+        </a>
+    </li>
+    <% if (com.podnoms.settings.currentUser != -1) { %>
+    <li>
+        <a href="/stream" title="Show mixes from people you follow" id="header-stream-button">
+            <i class="menu-icon fa fa-dot-circle-o fa-white"></i>
+            <span class="menu-text"> Stream </span>
+        </a>
+    </li>
+    <% } %>
+    <li>
+        <a data-bypass="true" title="Show random mix from our vaults" id="header-random-button">
+            <i class="menu-icon fa fa-cogs "></i>
+            <span class="menu-text"> Random </span>
+        </a>
+    </li>
+    <li>
+        <a data-bypass="true" target="_blank" href="/podcast">
+            <i class="menu-icon fa fa-rss "></i>
+            <span class="menu-text"> Podcast </span>
+        </a>
+    </li>
+    <% if (com.podnoms.settings.liveEnabled ) { %>
+    <li class="purple">
+        <a data-bypass="true" class="btn-success" id="header-live-button">
+            <i class="menu-icon fa fa-headphones " id="header-live-icon"></i>
+            <span class="menu-text"> Listen Live </span>
+        </a>
+    </li>
+    <% } %>
+    <% if (com.podnoms.settings.currentUser != -1) { %>
+    <li class="purple">
+        <a href="/mix/upload" id='upload'>
+            <i class="menu-icon fa fa-upload fa-white"></i>
+            <span class="menu-text"> Upload </span>
+        </a>
+    </li>
+    <% } %>
+    <li>
+        <a class="btn btn-danger" data-bypass="true" id="header-donate-button">
+            <i class="menu-icon fa fa-euro "></i>
+            <span class="menu-text"> Donate </span>
+        </a>
+    </li>
+
+</ul>
+<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
+    <i class="menu-icon fa fa-angle-double-left" data-icon1="menu-icon fa fa-angle-double-left"
+       data-icon2="menu-icon fa fa-angle-double-right"></i>
+</div>
+<!--
+
+
+<div class="navbar-header navbar-collapse">
+    <ul class="nav ace-nav">
+
+    </ul>
+</div>
+-->
\ No newline at end of file
diff --git a/templates/__debugging.html b/templates/__debugging.html
index c407354..3461131 100644
--- a/templates/__debugging.html
+++ b/templates/__debugging.html
@@ -1,83 +1,485 @@
-<!doctype html>
-<html>
-<head>
-    <title>Deep South Sounds</title>
-    <meta charset="utf-8">
-    <meta name="keywords" content="deep, house, cork, share, audio, dj, mix, share, music, tech">
-    <meta name="description" content="A selection of deep house music with a Cork flavour.">
-    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -->
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="google-site-verification" content="QklO8eTY9nWJdxpkPtHme9XpNDTjUOPoW5hcJJEkwUU"/>
+<div id="sidebar" class="sidebar                  responsive">
+<script type="text/javascript">
+    try {
+        ace.settings.check('sidebar', 'fixed')
+    } catch (e) {
+    }
+</script>
 
+<div class="sidebar-shortcuts" id="sidebar-shortcuts">
+    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
+        <button class="btn btn-success">
+            <i class="ace-icon fa fa-signal"></i>
+        </button>
 
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300"/>
+        <button class="btn btn-info">
+            <i class="ace-icon fa fa-pencil"></i>
+        </button>
 
+        <button class="btn btn-warning">
+            <i class="ace-icon fa fa-users"></i>
+        </button>
 
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/uncompressed/bootstrap.css"/>
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/uncompressed/font-awesome.css"/>
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/jasny/jasny-bootstrap.css">
+        <button class="btn btn-danger">
+            <i class="ace-icon fa fa-cogs"></i>
+        </button>
+    </div>
 
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/uncompressed/ace.css"/>
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/uncompressed/ace-skins.css"/>
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/bootstrap-editable.css"/>
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/ace/jquery.gritter.css"/>
+    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
+        <span class="btn btn-success"></span>
 
+        <span class="btn btn-info"></span>
 
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/select2.css">
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/jquery.fileupload-ui.css">
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/com.podnoms.player.css">
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/toastr.css">
-
-    <link rel="stylesheet" href="http://ext-test.deepsouthsounds.com/DSSStatic/css/deepsouthsounds.css">
-
-
-</head>
-<body>
-<div id="fb-root"></div>
-<script>(function (d, s, id) {
-    var js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return;
-    js = d.createElement(s);
-    js.id = id;
-    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=154504534677009";
-    fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
-
-
-<!-- Google Analytics not included because you haven't set the settings.GOOGLE_ANALYTICS_CODE variable! -->
-
-<!-- Piwik -->
-
-<!-- End Piwik Code -->
-<!--[if lt IE 9]>
-    <p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
-<![endif]-->
-
-
-<div id="header"></div>
-<div class="space-6"></div>
-<div class="body-content col-md-9" id="content">
-
+        <span class="btn btn-warning"></span>
 
+        <span class="btn btn-danger"></span>
+    </div>
 </div>
-<div id="side-content" class="col-md-3">
+<!-- /.sidebar-shortcuts -->
 
+<ul class="nav nav-list">
+<li class="">
+    <a href="index.html">
+        <i class="menu-icon fa fa-tachometer"></i>
+        <span class="menu-text"> Dashboard </span>
+    </a>
 
-    <div id="sidebar"></div>
-    <div id="site-content-fill"></div>
+    <b class="arrow"></b>
+</li>
+
+<li class="active open">
+    <a href="#" class="dropdown-toggle">
+        <i class="menu-icon fa fa-desktop"></i>
+        <span class="menu-text"> UI &amp; Elements </span>
+
+        <b class="arrow fa fa-angle-down"></b>
+    </a>
+
+    <b class="arrow"></b>
+
+    <ul class="submenu">
+        <li class="active open">
+            <a href="#" class="dropdown-toggle">
+                <i class="menu-icon fa fa-caret-right"></i>
+
+                Layouts
+                <b class="arrow fa fa-angle-down"></b>
+            </a>
+
+            <b class="arrow"></b>
+
+            <ul class="submenu">
+                <li class="">
+                    <a href="top-menu.html">
+                        <i class="menu-icon fa fa-caret-right"></i>
+                        Top Menu
+                    </a>
+
+                    <b class="arrow"></b>
+                </li>
+
+                <li class="active">
+                    <a href="mobile-menu-1.html">
+                        <i class="menu-icon fa fa-caret-right"></i>
+                        Default Mobile Menu
+                    </a>
+
+                    <b class="arrow"></b>
+                </li>
+
+                <li class="">
+                    <a href="mobile-menu-2.html">
+                        <i class="menu-icon fa fa-caret-right"></i>
+                        Mobile Menu 2
+                    </a>
+
+                    <b class="arrow"></b>
+                </li>
+
+                <li class="">
+                    <a href="mobile-menu-3.html">
+                        <i class="menu-icon fa fa-caret-right"></i>
+                        Mobile Menu 3
+                    </a>
+
+                    <b class="arrow"></b>
+                </li>
+            </ul>
+        </li>
+
+        <li class="">
+            <a href="typography.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Typography
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="elements.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Elements
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="buttons.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Buttons &amp; Icons
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="treeview.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Treeview
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="jquery-ui.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                jQuery UI
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="nestable-list.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Nestable Lists
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="#" class="dropdown-toggle">
+                <i class="menu-icon fa fa-caret-right"></i>
+
+                Three Level Menu
+                <b class="arrow fa fa-angle-down"></b>
+            </a>
+
+            <b class="arrow"></b>
+
+            <ul class="submenu">
+                <li class="">
+                    <a href="#">
+                        <i class="menu-icon fa fa-leaf green"></i>
+                        Item #1
+                    </a>
+
+                    <b class="arrow"></b>
+                </li>
+
+                <li class="">
+                    <a href="#" class="dropdown-toggle">
+                        <i class="menu-icon fa fa-pencil orange"></i>
+
+                        4th level
+                        <b class="arrow fa fa-angle-down"></b>
+                    </a>
+
+                    <b class="arrow"></b>
+
+                    <ul class="submenu">
+                        <li class="">
+                            <a href="#">
+                                <i class="menu-icon fa fa-plus purple"></i>
+                                Add Product
+                            </a>
+
+                            <b class="arrow"></b>
+                        </li>
+
+                        <li class="">
+                            <a href="#">
+                                <i class="menu-icon fa fa-eye pink"></i>
+                                View Products
+                            </a>
+
+                            <b class="arrow"></b>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</li>
+
+<li class="">
+    <a href="#" class="dropdown-toggle">
+        <i class="menu-icon fa fa-list"></i>
+        <span class="menu-text"> Tables </span>
+
+        <b class="arrow fa fa-angle-down"></b>
+    </a>
+
+    <b class="arrow"></b>
+
+    <ul class="submenu">
+        <li class="">
+            <a href="tables.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Simple &amp; Dynamic
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="jqgrid.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                jqGrid plugin
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+    </ul>
+</li>
+
+<li class="">
+    <a href="#" class="dropdown-toggle">
+        <i class="menu-icon fa fa-pencil-square-o"></i>
+        <span class="menu-text"> Forms </span>
+
+        <b class="arrow fa fa-angle-down"></b>
+    </a>
+
+    <b class="arrow"></b>
+
+    <ul class="submenu">
+        <li class="">
+            <a href="form-elements.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Form Elements
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="form-wizard.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Wizard &amp; Validation
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="wysiwyg.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Wysiwyg &amp; Markdown
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="dropzone.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Dropzone File Upload
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+    </ul>
+</li>
+
+<li class="">
+    <a href="widgets.html">
+        <i class="menu-icon fa fa-list-alt"></i>
+        <span class="menu-text"> Widgets </span>
+    </a>
+
+    <b class="arrow"></b>
+</li>
+
+<li class="">
+    <a href="calendar.html">
+        <i class="menu-icon fa fa-calendar"></i>
+
+							<span class="menu-text">
+								Calendar
+
+								<span class="badge badge-transparent tooltip-error" title="2 Important Events">
+									<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
+								</span>
+							</span>
+    </a>
+
+    <b class="arrow"></b>
+</li>
+
+<li class="">
+    <a href="gallery.html">
+        <i class="menu-icon fa fa-picture-o"></i>
+        <span class="menu-text"> Gallery </span>
+    </a>
+
+    <b class="arrow"></b>
+</li>
+
+<li class="">
+    <a href="#" class="dropdown-toggle">
+        <i class="menu-icon fa fa-tag"></i>
+        <span class="menu-text"> More Pages </span>
+
+        <b class="arrow fa fa-angle-down"></b>
+    </a>
+
+    <b class="arrow"></b>
+
+    <ul class="submenu">
+        <li class="">
+            <a href="profile.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                User Profile
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="inbox.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Inbox
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="pricing.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Pricing Tables
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="invoice.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Invoice
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="timeline.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Timeline
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="email.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Email Templates
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="login.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Login &amp; Register
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+    </ul>
+</li>
+
+<li class="">
+    <a href="#" class="dropdown-toggle">
+        <i class="menu-icon fa fa-file-o"></i>
+
+							<span class="menu-text">
+								Other Pages
+
+								<span class="badge badge-primary">5</span>
+							</span>
+
+        <b class="arrow fa fa-angle-down"></b>
+    </a>
+
+    <b class="arrow"></b>
+
+    <ul class="submenu">
+        <li class="">
+            <a href="faq.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                FAQ
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="error-404.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Error 404
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="error-500.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Error 500
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="grid.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Grid
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+
+        <li class="">
+            <a href="blank.html">
+                <i class="menu-icon fa fa-caret-right"></i>
+                Blank Page
+            </a>
+
+            <b class="arrow"></b>
+        </li>
+    </ul>
+</li>
+</ul>
+<!-- /.nav-list -->
+
+<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
+    <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
+       data-icon2="ace-icon fa fa-angle-double-right"></i>
 </div>
-<div id="footer"></div>
-</body>
-<script src="/js/settings/"></script>
-<script src="http://ext-test.deepsouthsounds.com/DSSStatic/js/libs/require.js"
-        data-main="http://ext-test.deepsouthsounds.com/DSSStatic/js/main.js"></script>
 
-
-<script src="http://ext-test.deepsouthsounds.com/DSSStatic/js/libs/sm/soundmanager2.js"></script>
-
-<script src="http://ext-test.deepsouthsounds.com/DSSStatic/js/libs/modernizr.js"></script>
-<script src="http://ext-test.deepsouthsounds.com/DSSStatic/js/com.podnoms.storage.js"></script>
-<script src="http://ext-test.deepsouthsounds.com/DSSStatic/js/com.podnoms.player.js"></script>
-
-
-</html>
+<script type="text/javascript">
+    try {
+        ace.settings.check('sidebar', 'collapsed')
+    } catch (e) {
+    }
+</script>
+</div>
diff --git a/templates/base.html b/templates/base.html
index f5432e7..578d5e7 100755
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,30 +17,37 @@
     <!--if lt IE 9script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
     -->
 </head>
-<body>
+<body class="skin-2">
 {% include 'inc/analytics.html' %}
 <div id="fb-root"></div>
-<div id="header"></div>
+
+<div id="header" class="navbar navbar-default"></div>
+
 <div class="space-6"></div>
-<div class="col-md-12" id="full-content">
-    <div class="body-content col-md-9 page-content-area">
-        <div class="row">
-            <div class="ua-message">{{ ua_html|safe }}</div>
-        </div>
-        <div class="row">
-            <div id="content"></div>
-        </div>
-        {% block content %}
-        {% endblock %}
+
+<div class="main-container" id="main-container">
+    <div id="sidebar-left" class="sidebar responsive">
     </div>
-    <div id="side-content" class="col-md-3 hidden-phone">
-        {% block sidecontent %}
-        {% endblock %}
-        <div id="sidebar"></div>
-        <div id="site-content-fill"></div>
+    <div class="main-content">
+        <div class="page-content">
+            <div class="page-content-area">
+                <div class="col-xs-12" id="full-content">
+                    <div class="row">
+                        <div class="ua-message">{{ ua_html|safe }}</div>
+                    </div>
+                    <div class="row">
+                        <div id="content"></div>
+                    </div>
+                    {% block content %}
+                    {% endblock %}
+                </div>
+            </div>
+        </div>
     </div>
 </div>
+
 <div id="footer"></div>
+
 <script src="/js/settings/"></script>
 <script type="text/javascript">
     var burst = Date.now();