diff --git a/src/main.tsx b/src/main.tsx
index d3ac22751..b8fc28e26 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -150,7 +150,9 @@ class LineCmd extends React.Component<{line : LineType, session : Session, chang
                         <div className="terminal" id={"term-" + getLineId(line)}></div>
                     </div>
                 </div>
-                <div onClick={this.doRefresh} className="button has-background-black has-text-white">Refresh</div>
+                <div onClick={this.doRefresh} className="button refresh-button has-background-black is-small">
+                    <span className="icon"><i className="fa fa-refresh"/></span>
+                </div>
             </div>
         );
     }
@@ -209,7 +211,7 @@ class CmdInput extends React.Component<{session : Session, windowid : string}, {
             <div className="box cmd-input has-background-black">
                 <div className="cmd-input-context">
                     <div className="has-text-white">
-                        <span className="bold term-bright-green">[ mike@imac27 master ~/work/gopath/src/github.com/sawka/darktile-termutil ]</span>
+                        <span className="bold term-bright-green">[mike@local ~]</span>
                     </div>
                 </div>
                 <div className="cmd-input-field field has-addons">
@@ -277,6 +279,87 @@ class SessionView extends React.Component<{session : SessionType}, {}> {
     }
 }
 
+@mobxReact.observer
+class MainSideBar extends React.Component<{}, {}> {
+    collapsed : mobx.IObservableValue<boolean> = mobx.observable.box(false);
+
+    @boundMethod
+    toggleCollapsed() {
+        mobx.action(() => {
+            this.collapsed.set(!this.collapsed.get());
+        })();
+    }
+    
+    render() {
+        return (
+            <div className={cn("main-sidebar", {"collapsed": this.collapsed.get()})}>
+                <div className="collapse-container">
+                    <div className="arrow-container" onClick={this.toggleCollapsed}>
+                        <If condition={!this.collapsed.get()}><i className="fa fa-arrow-left"/></If>
+                        <If condition={this.collapsed.get()}><i className="fa fa-arrow-right"/></If>
+                    </div>
+                </div>
+                <div className="menu">
+                    <p className="menu-label">
+                        Shared Sessions
+                    </p>
+                    <ul className="menu-list">
+                        <li><a className="is-active">#default</a></li>
+                        <li><a>#server-status</a></li>
+                        <li><a className="activity">#bug-3458 <div className="tag is-link">3</div></a></li>
+                        <li><a>#dev-build</a></li>
+                        <li className="new-session"><a className="new-session"><i className="fa fa-plus"/> New Session</a></li>
+                    </ul>
+                    <p className="menu-label">
+                        Private Sessions
+                    </p>
+                    <ul className="menu-list">
+                        <li><a>#default</a></li>
+                        <li className="new-session"><a className="new-session"><i className="fa fa-plus"/> New Session</a></li>
+                    </ul>
+                    <p className="menu-label">
+                        Direct Messages
+                    </p>
+                    <ul className="menu-list">
+                        <li><a>
+                            <i className="user-status status fa fa-circle"/>
+                            <img className="avatar" src="https://i.pravatar.cc/48?img=4"/>
+                            Mike S <span className="sub-label">you</span>
+                        </a></li>
+                        <li><a>
+                            <i className="user-status status offline fa fa-circle"/>
+                            <img className="avatar" src="https://i.pravatar.cc/48?img=8"/>                            
+                            Matt P
+                        </a></li>
+                        <li><a>
+                            <i className="user-status status offline fa fa-circle"/>
+                            <img className="avatar" src="https://i.pravatar.cc/48?img=12"/>
+                            Adam B
+                        </a></li>
+                        <li><a className="activity">
+                            <i className="user-status status fa fa-circle"/>
+                            <img className="avatar" src="https://i.pravatar.cc/48?img=6"/>
+                            Michelle T <div className="tag is-link">2</div>
+                        </a></li>
+                    </ul>
+                    <div className="spacer"></div>
+                    <p className="menu-label">
+                        Remotes
+                    </p>
+                    <ul className="menu-list">
+                        <li><a><i className="status fa fa-circle"/>local</a></li>
+                        <li><a><i className="status fa fa-circle"/>local-sudo</a></li>
+                        <li><a><i className="status offline fa fa-circle"/>mike@app01.ec2</a></li>
+                        <li><a><i className="status fa fa-circle"/>mike@test01.ec2</a></li>
+                        <li><a><i className="status offline fa fa-circle"/>root@app01.ec2</a></li>
+                    </ul>
+                    <div className="bottom-spacer"></div>
+                </div>
+            </div>
+        );
+    }
+}
+
 @mobxReact.observer
 class Main extends React.Component<{}, {}> {
     constructor(props : any) {
@@ -286,12 +369,15 @@ class Main extends React.Component<{}, {}> {
     render() {
         let session = getDefaultSession();
         return (
-            <div className="main">
+            <div id="main">
                 <h1 className="title scripthaus-logo-small">
                     <div className="title-cursor">&#9608;</div>
                     ScriptHaus
                 </h1>
-                <SessionView session={session}/>
+                <div className="main-content">
+                    <MainSideBar/>
+                    <SessionView session={session}/>
+                </div>
             </div>
         );
     }
diff --git a/src/sh2.less b/src/sh2.less
index 3452934c3..df8265861 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -1,4 +1,8 @@
-.main {
+#main {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    
     .title.scripthaus-logo-small {
         padding-left: 10px;
         padding-top: 8px;
@@ -10,6 +14,7 @@
         color: rgb(0, 177, 10);
         position: relative;
         font-size: 1.5rem;
+        border-bottom: 2px solid #ddd;
 
         .title-cursor {
             position: absolute;
@@ -22,11 +27,163 @@
         }
     }
 
-    .session-view {
+    .main-content {
+        display: flex;
+        flex-direction: row;
         background-color: black;
+        flex-grow: 1;
+
+        .main-sidebar {
+            border-right: 1px solid #aaa;
+            padding: 0 5px 5px 5px;
+            width: 200px;
+            overflow-x: auto;
+            display: flex;
+            flex-direction: column;
+            color: #ddd;
+            position: relative;
+
+            .menu {
+                padding-top: 10px;
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+
+                .spacer {
+                    flex-grow: 1;
+                }
+
+                .bottom-spacer {
+                    height: 10px;
+                }
+            }
+
+            .menu-label {
+                color: #bbb;
+            }
+
+            p.menu-label {
+                margin-bottom: 0px;
+            }
+
+            .menu-list li.new-session {
+                a.new-session {
+                    color: #666;
+                    font-size: 13px;
+                }
+                
+                .fa {
+                    font-size: 10px;
+                }
+            }
+
+            .menu-list li a {
+                color: #bbb;
+                white-space: nowrap;
+                padding: 5px 5px 5px 12px;
+                vertical-align: middle;
+                position: relative;
+
+                
+
+                .user-status {
+                    position: absolute !important;
+                    top: 24px !important;
+                    left: 32px !important;
+                }
+
+                .avatar {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 5px;
+                    vertical-align: middle;
+                }
+
+                &.is-active {
+                    color: #ddd;
+                    font-weight: bold;
+                }
+
+                .sub-label {
+                    font-size: 12px;
+                    font-style: italic;
+                }
+
+                &.activity {
+                    font-weight: bold;
+                    color: #ddd;
+
+                    .tag {
+                        margin-left: 4px;
+                        padding: 0 5px 0 5px;
+                        position: relative;
+                        top: -1px;
+                    }
+                }
+
+                &.is-active:hover {
+                    background-color: #3273dc;
+                }
+
+                &:hover {
+                    background-color: #444;
+                    color: #ddd;
+                }
+
+                .status {
+                    font-size: 8px;
+                    margin-right: 5px;
+                    position: relative;
+                    top: -3px;
+                    color: #4e9a06;
+
+                    &.offline {
+                        color: #cc0000;
+                    }
+                }
+            }
+
+            &.collapsed {
+                width: 50px;
+
+                .collapse-container {
+                    right: 12px;
+                }
+
+                .menu {
+                    display: none;
+                }
+            }
+
+            .collapse-container {
+                position: absolute;
+                right: 3px;
+                top: -4px;
+
+                .arrow-container {
+                    color: #777;
+                    padding: 5px;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #ddd;
+                    }
+                }
+            }
+        }
+
+        .session-view {
+            flex-grow: 1;
+
+            display: flex;
+            flex-direction: column;
+        }
     }
 }
 
+.main-sidebar {
+}
+
 .line {
     padding: 10px 5px 5px 5px;
     margin: 0px 5px 5px 5px;
@@ -143,6 +300,17 @@ body .xterm .xterm-viewport {
 }
 
 .line.line-cmd {
+    .button.refresh-button {
+        border-color: #777;
+        color: #777;
+
+        &:hover {
+            border-color: #fff;
+            .icon i {
+                color: #fff;
+            }
+        }
+    }
 }
 
 .line.line-invalid {
@@ -159,7 +327,7 @@ body .xterm .xterm-viewport {
     padding-bottom: 10px;
     padding-top: 10px;
     padding-right: 15px;
-    border-top: 2px solid #ddd;
+    flex-grow: 1;
 }
 
 .cmd-input {
diff --git a/src/sh2.ts b/src/sh2.ts
index 8704ac35a..d5c99bc63 100644
--- a/src/sh2.ts
+++ b/src/sh2.ts
@@ -13,7 +13,7 @@ window.ScriptHausClientId = uuidv4();
 document.addEventListener("DOMContentLoaded", () => {
     GlobalWS.reconnect();
     let reactElem = React.createElement(Main, null, null);
-    let elem = document.getElementById("main");
+    let elem = document.getElementById("app");
     let root = createRoot(elem);
     root.render(reactElem);
 });
diff --git a/static/index.html b/static/index.html
index 04998a752..4279632c0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,7 +12,7 @@
   </head>
   <body>
 
-    <div id="main"></div>
+    <div id="app"></div>
   
   </body>
 </html>