diff --git a/client/static/app.css b/client/static/app.css
deleted file mode 100644
index 9fbec26..0000000
--- a/client/static/app.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/* Toolbar area */
-
-.menu {
-  background-color: transparent;
-  border: none;
-  height: 38px;
-  margin: 16px;
-  width: 36px;
-}
-
-
-md-toolbar h3 {
-  margin: auto;
-  font-weight: 500;
-}
-
-/* Sidenav area */
-
-md-list-item > button {
-  width:100%;
-  text-align:left !important;
-  height:70px;;
-}
-
-md-icon.avatar {
-  margin-right: 20px;
-}
-
-  md-list .md-button.selected {
-    color: #03a9f4;
-  }
-
-
-button#main {
-  margin-bottom: 10px;
-}
-
-md-sidenav > md-toolbar {
-  height:64px;
-}
-
-md-list-item {
-  overflow: hidden;
-}
-
-/* Primary content area */
-
-
-#content  {
-  padding-left: 40px;
-  padding-right: 40px;
-  padding-top: 5px;
-}
-
-#content .md-button.contact {
-  background-color: transparent;
-  border: none;
-  width: 48px;
-  height: 48px;
-  margin: 8px auto 16px 0;
-  position: absolute;
-  top: 10px;
-  right: 40px;
-}
-
-#content md-icon.avatar {
-  margin-top: 10px;
-}
-
-#content .md-button.contact > md-icon {
-  fill:black;
-  width:36px;
-  height:36px;
-}
-
-
-#content .md-button.contact:active > md-icon {
-  background-color: #dadada;
-  border-radius: 75%;
-  padding:4px;
-  transition: all 100ms ease-out 30ms;
-}
-
-
-/* Utils */
-
-/* Typography support coming in 0.8.0 */
-
-.avatar {
-  position:relative;
-  width: 54px;
-  height: 54px;
-  border: 1px solid #ddd;
-  border-radius: 50%;
-  display: inline-block;
-  overflow: hidden;
-  margin: 0px;
-  vertical-align: middle;
-
-}
-
-
-md-bottom-sheet  md-icon {
-  margin-right:20px;
-}
-
-span.name {
-  font-weight: bold;
-  font-size:1.1em;
-  padding-left:5px;
-}
diff --git a/client/static/index.html b/client/static/index.html
index ce40995..3a8d3d7 100644
--- a/client/static/index.html
+++ b/client/static/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en" ng-app="StarterApp">
   <head>
     <title>mpv remote</title>
 
@@ -8,91 +8,135 @@
     <meta name="description" content="">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 
-    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
     <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
-    <link rel="stylesheet" href="app.css"/>
 
     <style type="text/css">
-        /**
-         * Hide when Angular is not yet loaded and initialized
-         */
-        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
-          display: none !important;
-        }
+	md-content.md-default-theme {
+  background-color: #eee;
+}
+
+md-card {
+  background-color: #fff;
+  text-align: center;
+}
+md-card h2:first-of-type {
+  margin-top: 0;
+}
+
+md-toolbar .md-button.md-default-theme {
+  border-radius: 99%;
+}
+
+h2 {
+  font-weight: 400;
+}
+
+.md-toolbar-tools-bottom {
+  font-size: small;
+}
+.md-toolbar-tools-bottom :last-child {
+  opacity: 0.8;
+}
     </style>
 
   </head>
 
-  <body ng-app="starterApp" layout="row" ng-controller="UserController as ul">
-    
-  <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
-      md-component-id="left"
-      ng-click="ul.toggleList()" aria-label="Show User List"
-      md-is-locked-open="$mdMedia('gt-sm')">
-
-    <md-toolbar class="md-whiteframe-z1">
-      <h3>Users</h3>
-    </md-toolbar>
-
-    <md-list>
-      <md-list-item ng-repeat="it in ul.users">
-          <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
-            <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
-            {{it.name}}
-          </md-button>
-      </md-list-item>
-    </md-list>
-
-  </md-sidenav>
-
-
-  <div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
-
-    <md-toolbar layout="row" class="md-whiteframe-z1">
-      <md-button id="main" class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
-        <md-icon md-svg-icon="menu" ></md-icon>
-      </md-button>
-      <h3>Angular Material - Starter App</h3>
-    </md-toolbar>
-
-    <md-content flex id="content">
-        <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
-        <h2>{{ul.selected.name}}</h2>
-        <p>{{ul.selected.content}}</p>
-
-        <md-button class="contact" md-no-ink ng-click="ul.makeContact(ul.selected)" aria-label="Share with {{ ul.selected.name }}">
-          <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
-          <md-icon md-svg-icon="share"></md-icon>
+<body layout="row" ng-controller="MpvRemote">
+  <div layout="column" class="relative" layout-fill role="main">
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <h3>
+            mpv remote control
+          </h3>
+        <span flex></span>
+        <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
+          <ng-md-icon icon="more_vert"></ng-md-icon>
         </md-button>
-      </md-content>
-
+      </div>
+    </md-toolbar>
+    <md-content flex md-scroll-y>
+      <ui-view layout="column" layout-fill layout-padding>
+        <div class="inset" hide-sm></div>
+        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" layout="row" layout-align="center center">
+          <md-card flex-gt-sm="90" flex-gt-md="80">
+            <md-card-content>
+              <h2 ng-show=true>Current status: {{status}}</h2>
+              <md-button class="md-fab" aria-label="To start of file">
+            <<
+              </md-button>
+            <md-button class="md-fab" aria-label="Back 1 min">
+            <
+            </md-button>
+
+              <md-button class="md-fab" aria-label="Pause">
+                ||
+              </md-button>
+            <md-button class="md-fab" aria-label="Forward 1 min">
+            >
+            </md-button>
+              <md-button class="md-fab" aria-label="To end of file">
+            >>
+              </md-button>
+            </md-card-content>
+          </md-card>
+        </div>
+
+      </ui-view>
+    </md-content>
   </div>
-
+  
     <script src="../node_modules/angular/angular.js"></script>
     <script src="../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../node_modules/angular-aria/angular-aria.js"></script>
     <script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
+      <script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
 
     <script type="text/javascript">
-
-          angular
-              .module('starterApp', ['ngMaterial', 'users'])
-              .config(function($mdThemingProvider, $mdIconProvider){
-
-                  $mdIconProvider
-                      .defaultIconSet("./assets/svg/avatars.svg", 128)
-                      .icon("menu"       , "./assets/svg/menu.svg"        , 24)
-                      .icon("share"      , "./assets/svg/share.svg"       , 24)
-                      .icon("google_plus", "./assets/svg/google_plus.svg" , 512)
-                      .icon("hangouts"   , "./assets/svg/hangouts.svg"    , 512)
-                      .icon("twitter"    , "./assets/svg/twitter.svg"     , 512)
-                      .icon("phone"      , "./assets/svg/phone.svg"       , 512);
-
-                      $mdThemingProvider.theme('default')
-                          .primaryPalette('brown')
-                          .accentPalette('red');
-
-              });
+var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
+
+app.controller('MpvRemote', ['$scope', '$mdBottomSheet', function($scope, $mdBottomSheet){
+  $scope.status = 'Playing';
+  $scope.alert = 'FFFFF';
+  $scope.showListBottomSheet = function($event) {
+    $scope.alert = '';
+    $mdBottomSheet.show({
+      template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
+      controller: 'ListBottomSheetCtrl',
+      targetEvent: $event
+    }).then(function(clickedItem) {
+      $scope.alert = clickedItem.name + ' clicked!';
+    });
+  };
+}]);
+  
+app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
+  $scope.items = [
+    { name: 'Share', icon: 'share' },
+  ];
+  
+  $scope.listItemClick = function($index) {
+    var clickedItem = $scope.items[$index];
+    $mdBottomSheet.hide(clickedItem);
+  };
+});
+
+app.config(function($mdThemingProvider) {
+  var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
+    'contrastDefaultColor': 'light',
+    'contrastDarkColors': ['50'],
+    '50': 'ffffff'
+  });
+  $mdThemingProvider.definePalette('customBlue', customBlueMap);
+  $mdThemingProvider.theme('default')
+    .primaryPalette('customBlue', {
+      'default': '500',
+      'hue-1': '50'
+    })
+    .accentPalette('red');
+  $mdThemingProvider.theme('input', 'default')
+        .primaryPalette('grey');
+});
 
     </script>
 
