diff --git a/public/css/main.css b/public/css/main.css
index 036bce7..57be5bc 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -15,14 +15,7 @@ body {
 a, a:hover, a:focus {
     color: #03a9f4;
 }
-.noPadding{
-    padding-left: 0px;
-    padding-right:0px;
-}
-.noMargin{
-    margin-right: 0px;
-    margin-left: 0px;
-}
+
 .page {
     display: none;
     overflow:hidden;
@@ -53,11 +46,6 @@ iframe {
     border: 0px;
 }
 
-.form-control:focus, .form-control.focus {
-  border: 0;
-  background-image: linear-gradient(#03a9f4,#03a9f4),linear-gradient(#d2d2d2,#d2d2d2);
-}
-
 .transparent {
     background: rgba(255, 255, 255, 0) !important;
 }
@@ -66,9 +54,7 @@ iframe {
     border-bottom-right-radius: 3px;
 }
 
-.btn {
-    padding:0px;
-}
+
 div.userTools {
     position: absolute;
     right: 5px;
@@ -108,27 +94,7 @@ div.userTools {
 .innerContent {
     background: white;
 }
-#roomListContent tr:last-child{
-      border-bottom: 1px solid #413939;
-}
-#serverStatsDiv {
-    position: absolute;
-    left: 4px;
-    bottom: -18px;
-    font-size: 0.5em;
-}
-#groopRoomSearch {
-    position: relative;
-    top: -10px;
-    width:200px; 
-    color:white; 
-    background-image: none; 
-    margin-right: 12px; 
-    background-color: #74747454; 
-    padding-left: 10px; 
-    border-radius: 4px; 
-    float: right;
-}
+
 #userToolDiv{
     display: none;
     position: absolute;
@@ -338,18 +304,7 @@ div.userTools {
 	background-color: #03a9f4 !important;
 }
 
-#leftContainer{
-    display: block;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    padding: 10px 7px 10px 5px;
-    position: fixed;
-    z-index: 1000;
-    height:100%;
-	background-color: rgba(189,189,189,0.35); 
-    box-shadow: 6px 0px 5px -5px #000;
-}
+
 #startScreenShareBtn{
     background-color: #03a9f4;
     margin-left: auto;
@@ -411,55 +366,6 @@ div.userTools {
     margin: 5px 1px;
 }
 
-#slidePageDisplayWrapper {
-    position: absolute;
-    bottom: -12px;
-    background: #595959;
-    left: 50px;
-    font-size: 0.8em;
-    height: 12px;
-    display: block;
-    text-align: center;
-    width: 79px;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    color: white;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-}
-
-#praesiSettingsWrapper {
-    position: absolute;
-    bottom: -12px;
-    background: #595959;
-    left: 49px;
-    font-size: 0.7em;
-    height: 12px;
-    display: block;
-    text-align: center;
-    width: 50px;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    color: white;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-}
-
-#d3praesiSettingsWrapper {
-    position: absolute;
-    bottom: -12px;
-    background: #595959;
-    left: 100px;
-    font-size: 0.7em;
-    height: 12px;
-    display: block;
-    text-align: center;
-    width: 53px;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    color: white;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-}
 
 .groupLimitInput {
     padding-left: 5px;
@@ -495,8 +401,7 @@ div.userTools {
 }
 
 h1 {
-    font-family: 'Rock Salt', cursive !important;
-    text-shadow: -1px -1px 1px rgba(0,0,0,0.67);
+    
 }
 .placeHolderHeading{
     padding-top:90px;
@@ -541,23 +446,13 @@ h1 {
     margin-bottom: 5px;
 }
 
-#rightContainer{
-    height:100%;
-    display: block;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
 #bottomContainer{
     position: fixed;
     width: 83.33333%;
     padding-right: 45px;
     bottom: 5px;
 }
-#topContainer{
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 5px;
-}
+
 #mainContainer{
     height: 100%;
     z-index: 998;
@@ -569,9 +464,7 @@ h1 {
     width: 1300px;
     min-height: 550px !important;
 }
-.moderatorTools {
-    display:none;
-}
+
 .placeHolderIcon{
     font-size: 16em;
     color:#dcdcdc;
@@ -580,21 +473,9 @@ h1 {
     display:none;
 }
 
-.buttonToolbar{
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    text-shadow: 0px 2px 3px #666;
-    box-shadow: none;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-}
 
 /* ### LeftContainer Components ####*/
-#moderatorDiv{
-    border:0px solid silver;
-    min-height:80px;
-    margin-bottom:0px;
-}
+
 #moderatorPlaceholder {
 	border:1px solid black;
 	background-color: #888;
@@ -727,11 +608,6 @@ h1 {
     background: none;
 }
 
-.modal-content {
-    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
-    box-shadow: 0 5px 15px rgba(0,0,0,.5);
-    background-color: #e6e6e6;
-}
 
 hr {
     border-top: 1px solid #717070;
@@ -817,27 +693,12 @@ hr {
     color: black;
 }
 
-.modalSaveBtn, .modalOkBtn {
-    height: 30px;
-}
-
-.modalOkBtn {
-    background-color: gray !important;
-}
-
 /* ### TopContainer Components ####*/
 #buttonPanelTopRight button{
     float:right;
     background-color:#03a9f4;
 }
 /* ### BottomContainer Components ####*/
-.toolbarWrapper{
-    display: -webkit-box;
-    -webkit-box-pack:center;
-    width:100%;
-    display:-moz-box;
-    -moz-box-pack:center;
-}
 
 #userToolbar > .buttonToolbar{
     display: inline-block;
@@ -852,43 +713,7 @@ hr {
     border-bottom-right-radius: 0 !important;
     border-top-right-radius: 0 !important;
 }
-.toolbar-icon {
-    background-color: #595959 !important;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    margin-left: -4px;
-    padding: 6px 12px;
-    border-top:1px solid #6B6B6B;
-    border-bottom:1px solid #3B3B3B;
-    border-left:1px solid #3B3B3B;
-    border-right:1px solid #6B6B6B;
-    text-align: center;
-}
-.toolbar-icon:hover{
-     border-top:1px solid #6B6B6B;
-     border-bottom:1px solid #3B3B3B;
-     border-left:1px solid #3B3B3B;
-     border-right:1px solid #6B6B6B;
- }
-.toolbar-icon:active{
-    border-top:1px solid #6B6B6B;
-    border-bottom:1px solid #3B3B3B;
-    border-left:1px solid #3B3B3B;
-    border-right:1px solid #6B6B6B;
-}
-.toolbar-icon:focus{
-    border-top:1px solid #6B6B6B;
-    border-bottom:1px solid #3B3B3B;
-    border-left:1px solid #3B3B3B;
-    border-right:1px solid #6B6B6B;
-}
 
-.toolbar-icon i {
-    text-shadow: 0px 1px 1px #000;
-    color:#FFF;
-    font-size:1.7em;
-}
 
 #silenceBtn{
     padding-top: 8px;
@@ -1073,12 +898,7 @@ hr {
 	-moz-box-shadow: 0px 0px 5px 1px rgba(3,169,244,1);
 	box-shadow: 0px 0px 5px 1px rgba(3,169,244,1);
 }
-.alert-danger {
-    background-color: #03a9f4 !important;
-}
-.alert-error {
-    background-color: darkOrange !important;
-}
+
 #chatButtonWrapper{
     width:100%;
     background-color: #03a9f4 !important;
@@ -1097,4 +917,295 @@ hr {
     overflow: auto;
     padding:5px;
     box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+}
+
+
+/* --- --- --- --- refactor --- --- --- --- */
+
+:root {
+    --color-primary: hsl(0, 0%, 100%);
+    --text-color-primary: hsl(0, 0%, 100%);
+    --text-color-secondary: hsla(0, 0%, 100%, 0.67);
+    --modal-background-1: hsla(0, 0%, 50%, 0.69);
+    --modal-foreground-1: hsl(0, 0%, 90%);
+
+    /* --- temp --- */
+    --margin-outer-top-1: 2%;
+    --margin-inner-top-1: 5px;
+    --margin-inner-bottom-1: 20px;
+    --margin-inner-right-1: 12px;
+    --margin-inner-right-2: 10px;
+    --padding-inner-left-1: 5px;
+
+
+}
+
+.textPrimary {color: var(--text-color-primary);}
+.textSecondary {color: var(--text-color-secondary);}
+.noPadding {padding: 0px}
+.noMargin {margin: 0px;}
+.posRel {position: relative;}
+
+/*  --- temp  --- */
+.margin-outer-top-1 {margin-top: var(--margin-outer-top-1);}
+.margin-inner-top-1 {margin-top: var(--margin-inner-top-1);}
+.margin-inner-bottom-1 {margin-bottom: var(--margin-inner-bottom-1);}
+.margin-inner-right-1 {margin-right: var(--margin-inner-right-1);}
+.margin-inner-right-2 {margin-right: var(--margin-inner-right-2);}
+.padding-inner-left-1 {padding-left: var(--padding-inner-left-1);}
+
+.margin-top-20 {margin-top: 20%;}
+.margin-top-15 {margin-top: 15%}
+
+.displayFont {
+    font-family: 'Rock Salt', cursive !important;
+    text-shadow: -1px -1px 1px var(--text-color-secondary);
+}
+
+/* TODO war in main.css aber macht hier buttons kaputt
+.btn {padding:0px;} */
+
+.btn-md {
+    padding: 5px;
+}
+
+.btn-2 {
+    margin: 3px !important;
+    padding: 3px !important;
+}
+
+.form-control:focus, .form-control.focus {
+  border: 0;
+  background-image: linear-gradient(#03a9f4,#03a9f4),linear-gradient(#d2d2d2,#d2d2d2);
+}
+
+.modal {
+    background: var(--modal-background-1);
+}
+
+.modal-content {
+    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    background-color: var(--modal-foreground-1);
+}
+
+.modalSaveBtn, .modalOkBtn {
+    height: 30px;
+}
+
+.modalOkBtn {
+    background-color: gray !important;
+}
+
+.buttonToolbar{
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    text-shadow: 0px 2px 3px #666;
+    box-shadow: none;
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+}
+
+.toolbar-icon {
+    background-color: #595959 !important;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-left: -4px;
+    padding: 6px 12px;
+    border-top:1px solid #6B6B6B;
+    border-bottom:1px solid #3B3B3B;
+    border-left:1px solid #3B3B3B;
+    border-right:1px solid #6B6B6B;
+    text-align: center;
+}
+.toolbar-icon:hover{
+     border-top:1px solid #6B6B6B;
+     border-bottom:1px solid #3B3B3B;
+     border-left:1px solid #3B3B3B;
+     border-right:1px solid #6B6B6B;
+ }
+.toolbar-icon:active{
+    border-top:1px solid #6B6B6B;
+    border-bottom:1px solid #3B3B3B;
+    border-left:1px solid #3B3B3B;
+    border-right:1px solid #6B6B6B;
+}
+.toolbar-icon:focus{
+    border-top:1px solid #6B6B6B;
+    border-bottom:1px solid #3B3B3B;
+    border-left:1px solid #3B3B3B;
+    border-right:1px solid #6B6B6B;
+}
+
+.toolbar-icon i {
+    text-shadow: 0px 1px 1px #000;
+    color:#FFF;
+    font-size:1.7em;
+}
+
+.alert-danger {background-color: #03a9f4 !important;}
+
+.alert-error {background-color: darkOrange !important;}
+
+
+/* --- Login --- */
+
+#loginUserIcon {
+    position:absolute;
+    right:15px;
+    z-index:2;
+    top:7px;
+}
+
+#notConnected {
+    display:none;
+    padding-top: 20px;
+    padding-left: 0px;
+    float: left;
+}
+
+.privacyPolicy {
+    padding: 5px;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+}
+
+/* --- Room Page --- */
+#serverStatsDiv {
+    position: absolute;
+    left: 4px;
+    bottom: -18px;
+    font-size: 0.5em;
+}
+
+#groopRoomSearch {
+    position: relative;
+    top: -10px;
+    width:200px; 
+    color:white; 
+    background-image: none; 
+    background-color: #74747454; 
+    padding-left: 10px; 
+    border-radius: 4px; 
+    float: right;
+}
+
+#roomListContainer {
+    max-height: 475px;
+    overflow: auto;
+    padding-right: 10px;
+}
+
+#roomListContent tr:last-child{
+      border-bottom: 1px solid #413939;
+}
+
+#supportedBrowsers {
+    padding: 5px;
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+}
+
+/* --- --- main page --- --- */
+
+
+#leftContainer {
+    display: block;
+    left: 0;
+    max-width: 320px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 10px 7px 10px 5px;
+    position: fixed;
+    z-index: 1000;
+    height:100%;
+    background-color: rgba(189,189,189,0.35); 
+    box-shadow: 6px 0px 5px -5px #000;
+}
+
+#rightContainer{
+    position: relative;
+    height:100%;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#topContainer{
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5px;
+}
+
+/* --- left container --- */
+#leftContainerBackground {
+    z-index: -10;
+    position:absolute;
+    top:0px;
+    left:0px;
+    height: 100%;
+    opacity: 0.07;"
+}
+
+#moderatorDiv{
+    border:0px solid silver;
+    min-height:80px;
+    margin-bottom:0px;
+}
+
+
+/* --- Moderator Toolbar ---*/
+.toolbarWrapper{
+    display: -webkit-box;
+    -webkit-box-pack:center;
+    width:100%;
+    display:-moz-box;
+    -moz-box-pack:center;
+}
+
+
+.moderatorTools {
+    display:none;
+    font-size: 0.7em;
+}
+
+.subToolbarWrapper {
+    position: absolute;
+    bottom: -12px;
+    background: #595959;
+    height: 12px;
+    display: block;
+    text-align: center;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    color: white;
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+}
+
+.subToolbarContent {
+    position: relative;
+    top:-1px;
+}
+
+
+#praesiSettingsWrapper {
+    left: 49px;
+    width: 50px;
+    cursor: pointer;
+}
+
+#d3praesiSettingsWrapper {
+    left: 100px;
+    width: 53px;
+    cursor: pointer;
+}
+
+
+#slidePageDisplayWrapper {
+    left: 50px;
+    font-size: 0.8em;
+    width: 79px;
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index f696284..2977a71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,22 +66,23 @@
         <div class="row">
             <div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4">
                 <!--- take care about the offset :) !-->
-                <h1 style="color:white; text-shadow: -2px -2px 1px rgba(0,0,0,0.67);"><img style="width:60px;"
-                        src="./img/logogross.png"> Accelerator</h1>
-                <div style="margin-top: 20%;">
-                    <h3 style="margin-top: 50px; color:white">Enter as guest, please provide your name</h3>
-                    <div style="padding: 0px;" class="noMargin row">
-                        <div style="padding:0px;" class="col-xs-11">
-                            <div style="padding:0px;" class="noMargin row">
-                                <div style="padding:0px; position:relative;" class="input-group col-xs-12">
+                <h1 class="displayFont textPrimary">
+                    <img style="width:60px;" src="./img/logogross.png"> Accelerator
+                </h1>
+                <div class="margin-top-20">
+                    <h3 class="textPrimary" style="margin-top: 50px;">Enter as guest, please provide your name</h3>
+                    <div class="noMargin noPadding row">
+                        <div class="noPadding col-xs-11">
+                            <div class="noMargin noPadding row">
+                                <div style="position:relative;" class="noPadding input-group col-xs-12">
                                     <input style="position:relative; left:0px;" type="text" class="form-control"
                                         id="inputUser" placeholder="Username">
-                                    <span id="loginUserIcon" style="position:absolute; right:15px; z-index:2; top:7px;">
+                                    <span id="loginUserIcon">
                                         <i class="fa fa-user"></i></span>
                                 </div>
                             </div>
-                            <div style="padding:0px; display: none;" class="noMargin row">
-                                <div style="padding:0px; position:relative;" class="input-group col-xs-12">
+                        <!--<div style="display: none;" class="noMargin noPadding row">
+                                <div style="position:relative;" class="noPadding input-group col-xs-12">
                                     <label id="pwField" style="padding-top: 10px; margin-bottom:0px;"
                                         for="inputPassword" class="col-xs-12"></label>
                                     <input style="position:relative; left:0px;" type="password" class="form-control"
@@ -90,17 +91,16 @@ <h3 style="margin-top: 50px; color:white">Enter as guest, please provide your na
                                         style="position:absolute; right:15px; z-index:2; top:20px;"> <i
                                             class="fa fa-key"></i></span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                         <div class="noPadding col-xs-1">
-                            <button style="height: 40px;" class="btn btn-primary" id="loginBtn"><i
-                                    class="fa fa-unlock"></i></button>
+                            <button style="height: 40px;" class="btn btn-primary" id="loginBtn">
+                                <i class="fa fa-unlock"></i></button>
                         </div>
                     </div>
-                    <div id="notConnected"
-                        style="display:none; padding-top: 20px; padding-left: 0px; float: left; color: white;">No
-                        connection to the server!</div>
-                    <div style="color:white; padding: 5px; position: fixed; bottom: 0px; left: 0px;">
+                    <div id="notConnected" class="textPrimary">No                      connection to the server!
+                    </div>
+                    <div class="privacyPolicy">
                         <a target="#" href="./privacy.html">Privacy Policy</a>
                     </div>
                 </div>
@@ -112,19 +112,22 @@ <h3 style="margin-top: 50px; color:white">Enter as guest, please provide your na
     <div class="page" id="roomPage">
         <div class="row">
             <div class="col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
-                <h1 style="color:white">Choose Room</h1>
-                <button id="setupCheckBtn" style="padding: 5px;" class="btn btn-primary"><i
-                        class="fa fa-headphones"></i> Setup audio / video</button>
-                <div style="margin-top: 2%;" class="lableContainer">
-                    <h3 style="margin-top: 5px; margin-bottom: 20px; position: relative;">Room Overview <span>
+                <h1 class="textPrimary">Choose Room</h1>
+                <button id="setupCheckBtn" class="btn btn-primary btn-md"><i class="fa fa-headphones"></i> Setup audio / video
+                </button>
+                <div class="lableContainer margin-outer-top-1">
+                    <h3 class="margin-inner-top-1 margin-inner-bottom-1 posRel">
+                        Room Overview 
+                        <span>
                             <div id="serverStatsDiv"></div>
                             <form autocomplete="off"><input type="text" autocomplete="off" style="display:none"><input
-                                    autocomplete="rutjfkde" id="groopRoomSearch" type="text" class="form-control"
+                                    autocomplete="rutjfkde" id="groopRoomSearch" type="text" class="form-control margin-inner-right-1"
                                     placeholder="search room..."></form>
-                        </span></h3>
+                        </span>
+                    </h3>
                     <div class="noPadding noMargin row">
-                        <div id="roomListContainer" style="max-height: 475px; overflow: auto; padding-right: 10px;"
-                            class="noPadding col-sm-12">
+                        <div id="roomListContainer" style=""
+                            class="noPadding margin-inner-right-2 col-sm-12">
                             <table class="table" style="width: 100%;" id="roomListContent">
                                 <tbody></tbody>
                             </table>
@@ -138,7 +141,7 @@ <h3 style="margin-top: 5px; margin-bottom: 20px; position: relative;">Room Overv
                                 type="password">
                             <i id="roomPwLockIcon" class="fa fa-unlock-alt" aria-hidden="true"></i>
                         </div>
-                        <div style="padding-left:5px;" class="noPadding col-xs-1">
+                        <div class="noPadding col-xs-1 padding-inner-left-1">
                             <button id="createNewRoomBtn" class="btn btn-primary">
                                 <i class="fa fa-plus"></i>
                             </button>
@@ -147,10 +150,10 @@ <h3 style="margin-top: 5px; margin-bottom: 20px; position: relative;">Room Overv
                 </div>
             </div>
         </div>
-        <div style="color:white; padding: 5px; position: fixed; bottom: 0px; left: 0px;">
+        <div class="privacyPolicy">
             <a target="#" href="./privacy.html">Privacy Policy</a>
         </div>
-        <div style="color:white; padding: 5px; position: fixed; bottom: 0px; right: 0px;">
+        <div id="supportedBrowsers" class="textPrimary">
             <b>Supported Browsers: </b>
             <a title="Chrome" href="https://www.google.de/chrome/browser/desktop/"><img style="width: 50px;"
                     src="./img/chrome.png"></a>
@@ -163,7 +166,7 @@ <h3 style="margin-top: 5px; margin-bottom: 20px; position: relative;">Room Overv
         </div>
 
         <!-- Connect direclty Modal -!-->
-        <div style="background: #808080b0;" id="connectModal" class="modal">
+        <div id="connectModal" class="modal">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -177,11 +180,11 @@ <h4 class="modal-title">Direct connect!</h4>
                     <div class="modal-footer">
                         <div class="row">
                             <div class="col-lg-12">
-                                <button style="margin:3px; padding:3px;" data-dismiss="modal" type="button"
-                                    class="btn btn-default pull-right" id="abortDirektConnect">Cancel
+                                <button data-dismiss="modal" type="button"
+                                    class="btn btn-default btn-2 pull-right" id="abortDirektConnect">Cancel
                                 </button>
-                                <button style="margin:3px; padding:3px;" data-dismiss="modal" type="button"
-                                    class="btn btn-primary pull-right" id="acceptDirectConnect">Connect
+                                <button data-dismiss="modal" type="button"
+                                    class="btn btn-primary btn-2 pull-right" id="acceptDirectConnect">Connect
                                 </button>
                             </div>
                         </div>
@@ -189,14 +192,14 @@ <h4 class="modal-title">Direct connect!</h4>
                 </div>
             </div>
         </div>
-        <!-- End direclty Modal -!-->
+        <!-- End Connect direclty Modal -!-->
     </div>
 
     <!---accessMicPage -----------------------------------------------------------------------------------------------------------!-->
     <div class="page" id="accessMicPage">
         <div class="row">
-            <div style="margin-top: 15%;" class="col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
-                <h2 style="color:white">↖ Please allow microphone access <i class="fa fa-microphone"
+            <div class="margin-top-15 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
+                <h2 class="textPrimary">↖ Please allow microphone access <i class="fa fa-microphone"
                         aria-hidden="true"></i></h2>
             </div>
         </div>
@@ -206,10 +209,10 @@ <h2 style="color:white">↖ Please allow microphone access <i class="fa fa-micro
     <!---joinRoomPage -----------------------------------------------------------------------------------------------------------!-->
     <div class="page" id="joinRoomPage">
         <div class="row">
-            <div style="margin-top: 15%;" class="col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
-                <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug" aria-hidden="true"></i>
+            <div class="col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
+                <h2 class="textPrimary margin-top-15">Connecting to room, please wait... <i class="fa fa-plug" aria-hidden="true"></i>
                 </h2>
-                <div style="color:white" id="joinRoomError"></div>
+                <div id="joinRoomError" class="textPrimary"></div>
             </div>
         </div>
     </div>
@@ -227,8 +230,8 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
         </div>
         <div class="row">
             <!--- LeftContainer -------------------------------------------------------------------------------!-->
-            <div style="max-width: 320px;" class="col-xs-3 col-md-2" id="leftContainer">
-                <img style="z-index: -10; position:absolute; top:0px; left:0px; height: 100%; opacity: 0.07;"
+            <div id="leftContainer" class="col-xs-3 col-md-2">
+                <img id="leftContainerBackground" 
                     src="./img/logogross.png">
 
                 <!--- Moderator Stuff ----!-->
@@ -268,13 +271,12 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
             </div>
 
             <!--- RightContainer -------------------------------------------------------------------------------!-->
-            <div style="position: relative;" class="col-xs-9 col-xs-offset-3 col-md-10 col-md-offset-2"
-                id="rightContainer">
+            <div id="rightContainer" class="col-xs-9 col-xs-offset-3 col-md-10 col-md-offset-2">
                 <div id="handsUpAlertDivContainer">
                 </div>
 
                 <!--- TopContainer --------------------------------------------------------------------------------!-->
-                <div class="row" id="topContainer">
+                <div id="topContainer" class="row" >
 
                     <!-- Moderator Toolbar -!-->
 
@@ -291,9 +293,8 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
                                     class="praesiTab mainTab toolbar-icon btn btn-default">
                                     <img style="height: 25px;" src="./img/presentation.svg">
                                 </button>
-                                <div class="praesiUpload" id="praesiSettingsWrapper">
-                                    <span id="praesiSettingsContent"
-                                        style="position: relative; top:-1px; cursor: pointer;">
+                                <div id="praesiSettingsWrapper" class="praesiUpload subToolbarWrapper">
+                                    <span id="praesiSettingsContent" class="subToolbarContent">
                                         <i class="fa fa-cog"></i>
                                     </span>
                                 </div>
@@ -301,9 +302,8 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
                                     type="button" class="praesiTab mainTab toolbar-icon btn btn-default">
                                     <img style="height: 25px;" src="./img/3dIconWhiteS.png">
                                 </button>
-                                <div class="3dObjUpload" id="d3praesiSettingsWrapper">
-                                    <span id="d3praesiSettingsContent"
-                                        style="position: relative; top:-1px; cursor: pointer;">
+                                <div id="d3praesiSettingsWrapper" class="3dObjUpload subToolbarWrapper">
+                                    <span id="d3praesiSettingsContent" class="subToolbarContent">
                                         <i class="fa fa-cog"></i>
                                     </span>
                                 </div>
@@ -340,9 +340,8 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
                                     class="notActiveBtn toolbar-icon btn btn-default">
                                     <i class="fa fa-step-forward"></i>
                                 </button>
-                                <div class="moderatorTools" id="slidePageDisplayWrapper">
-                                    <span id="slidePageDisplayContent" style="position: relative; top:-1px;">0 /
-                                        0</span>
+                                <div class="moderatorTools subToolbarWrapper" id="slidePageDisplayWrapper">
+                                    <span id="slidePageDisplayContent subToolbarContent">0 / 0</span>
                                 </div>
                                 <button id="praesiENd" title="Jump to the end of the presentation" type="button"
                                     class="notActiveBtn toolbar-icon btn btn-default clap">
@@ -361,7 +360,7 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
                                     class="keepActiveBtn toolbar-icon btn btn-default">
                                     <i class="fa fa-search-plus"></i>
                                 </button>
-                                <button style="position: relative;" id="userTootlsBtn" type="button"
+                                <button id="userTootlsBtn" type="button"
                                     title="Enable/Disable UserItems (Textfields...) for the users"
                                     class="keepActiveBtn toolbar-icon btn btn-default">
                                     <i class="fa fa-pencil-square-o"></i>
@@ -375,6 +374,7 @@ <h2 style="color:white">Connecting to room, please wait... <i class="fa fa-plug"
                                 </button>
                             </div>
                         </div>
+<!-- refactor done til here -->
                         <div id="userTools" style="display:none;"
                             class="userTools btn-group contentOptions buttonToolbar">
                             <div style="width: 100px; height: 25px;">Draggables</div>