diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss
index 0f5e2104f..3f9a90956 100644
--- a/app/assets/stylesheets/client/common.css.scss
+++ b/app/assets/stylesheets/client/common.css.scss
@@ -31,3 +31,6 @@ $text: #f3f1ee;
 
 $gradient-diff: 30%; $link: $color8;
 $border: hsl(210, 50%, 45%);
+
+
+
diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss
index ace5a2dc5..3736d6df4 100644
--- a/app/assets/stylesheets/client/jamkazam.css.scss
+++ b/app/assets/stylesheets/client/jamkazam.css.scss
@@ -28,6 +28,7 @@ a {
     cursor:pointer;
     color: $ColorLink;
     text-decoration: none;
+    display: inline-block;
 }
 
 a:hover {
@@ -97,6 +98,16 @@ input[type="button"] {
     font-weight:300;
     cursor:pointer;
     color:#ccc;
+.clearall {
+	clear:both;
+}
+
+.left {
+	float:left;
+}
+
+.right {
+	float:right;
 }
 
 .hidden {
diff --git a/app/assets/stylesheets/client/screen_common.css.scss b/app/assets/stylesheets/client/screen_common.css.scss
index ff716320b..04385caac 100644
--- a/app/assets/stylesheets/client/screen_common.css.scss
+++ b/app/assets/stylesheets/client/screen_common.css.scss
@@ -9,6 +9,27 @@
     border: 1px solid $ColorScreenPrimary;
     background-color:$ColorScreenBackground;
 
+    .button-grey {
+        margin:0px 8px 0px 8px;
+        height: 16px;
+        background-color:#666;
+        border: solid 1px #868686;
+        outline:solid 2px #666;
+        padding:3px 10px;
+        font-family:raleway;
+        font-size:12px;
+        font-weight:300;
+        cursor:pointer;
+        color:#ccc;
+        text-decoration:none;
+    }
+
+    .button-grey:hover {
+        background-color:#999;
+        color:#FFF;
+    }
+
+
     .footer button {
         margin:1em 0em 1em 1em;
     }
@@ -55,6 +76,11 @@
     padding:4px;
     background-color:#ED3618;
 
+    .content-icon {
+        margin-right:10px;
+        float:left;
+    }
+
     h1 {
         margin: -3px 0px 0px 0px;
         padding:0;
diff --git a/app/assets/stylesheets/client/session.css.scss b/app/assets/stylesheets/client/session.css.scss
index ca24110a9..2aa6192bd 100644
--- a/app/assets/stylesheets/client/session.css.scss
+++ b/app/assets/stylesheets/client/session.css.scss
@@ -1,49 +1,88 @@
 @import "client/common.css.scss";
 
-/* Session Tracks */
-.session-track {
-    width: 125px;
-    height: 300px;
-    border: 1px solid #fff;
-    position:relative;
-    float:left;
-}
-.session-track [track-role] { margin:4px; }
-.session-track .latency { text-align:center; }
-.session-track .latency.good { color:#00ff00; }
-.session-track .latency.medium { color:#ffff00; }
-.session-track .latency.bad { color:#ff0000; }
+[layout-id="session"] {
 
-.session-track .mute { 
-    background-color:#bbb; color:#000; 
-    position: absolute;
-    bottom: 80px;
-    width: 117px;
-    text-align: center;
-}
+    .settings {
+        margin-left:15px;
+    }
 
-.session-track .name { 
-    background-color:#ddd; color:#000; 
-    position: absolute;
-    bottom: 60px;
-    width: 117px;
-    text-align: center;
-}
-.session-track .part { 
-    background-color:#fff; color:#000; 
-    position: absolute;
-    bottom: 40px;
-    width: 117px;
-    text-align: center;
-}
+    #session-controls {
+
+        width:100%;
+        padding:11px 0px 11px 0px;
+        background-color:#4c4c4c;
+        min-height:20px;
+        overflow-x:hidden;
+    }
+
+    #volume {
+        position:relative;
+        font-size:12px;
+        margin-top:5px;
+        margin-left:12px;
+        color:#ccc;
+        float:left;
+        width:120px;
+        /*background-image:url(../images/content/bkg_volume.png);*/
+        background-image: url('/assets/content/bkg_volume.png');
+        background-position:right;
+        background-repeat:no-repeat;
+    }
+
+    .slider-volume {
+        position:absolute;
+        top:2px;
+        right:30px;
+        width:8px;
+        height:17px;
+    }
+
+    /* Session Tracks */
+    .session-track {
+        width: 125px;
+        height: 300px;
+        border: 1px solid #fff;
+        position:relative;
+        float:left;
+    }
+    .session-track [track-role] { margin:4px; }
+    .session-track .latency { text-align:center; }
+    .session-track .latency.good { color:#00ff00; }
+    .session-track .latency.medium { color:#ffff00; }
+    .session-track .latency.bad { color:#ff0000; }
+
+    .session-track .mute { 
+        background-color:#bbb; color:#000; 
+        position: absolute;
+        bottom: 80px;
+        width: 117px;
+        text-align: center;
+    }
+
+    .session-track .name { 
+        background-color:#ddd; color:#000; 
+        position: absolute;
+        bottom: 60px;
+        width: 117px;
+        text-align: center;
+    }
+    .session-track .part { 
+        background-color:#fff; color:#000; 
+        position: absolute;
+        bottom: 40px;
+        width: 117px;
+        text-align: center;
+    }
+
+    .session-track .avatar { 
+        position:absolute;
+        width: 32px;
+        height: 32px;
+        bottom:4px;
+        left: 46px;
+    }
+    .session-track .avatar img {
+        width: 32px; height: 32px;
+    }
 
-.session-track .avatar { 
-    position:absolute;
-    width: 32px;
-    height: 32px;
-    bottom:4px;
-    left: 46px;
-}
-.session-track .avatar img {
-    width: 32px; height: 32px;
 }
diff --git a/app/views/clients/_session.html.erb b/app/views/clients/_session.html.erb
index a278155a6..34485374d 100644
--- a/app/views/clients/_session.html.erb
+++ b/app/views/clients/_session.html.erb
@@ -1,11 +1,35 @@
 <!-- Actual Session Screen -->
 <div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
-    <div class="breadcrumb">
-        <p layout-link="home">Home &gt; </p>
-        <p class="current">Session</p>
+    <div class="content-head">
+        <div class="content-icon">
+            <%= image_tag "shared/icon_session.png", {:height => 19, :width => 19} %>
+        </div>
+        <h1>session</h1>
+        <%= render "screen_navigation" %>
     </div>
+
+    <!-- session controls -->
+    <div id="session-controls">
+        <a class="button-grey settings left" href="#">
+            <%= image_tag "content/icon_settings_sm.png", {:align => "texttop", :height => 12, :width => 12} %>
+            SETTINGS
+        </a>
+        <a class="button-grey left" href="#">
+            <%= image_tag "content/icon_share.png", {:align => "texttop"} %> 
+            SHARE
+        </a>
+        <div id="volume">VOLUME
+            <div class="slider-volume">
+                <%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
+            </div>
+        </div>
+            
+        <a class="button-grey right leave" href="#">X&nbsp;&nbsp;LEAVE</a>
+    </div>
+    <!-- end session controls -->
+
     <div id="session-contents">
-        <div id="session-info"></div>
+        <div id="session-info" style="display:none;"></div>
         <div id="session-tracks"></div>
     </div>
 </div>