4 files changed, 67 insertions, 6 deletions
diff --git a/src/client/react/components/page/Index.js b/src/client/react/components/page/Index.js
index ac6c4f6..b2ebbcb 100644
--- a/src/client/react/components/page/Index.js
+++ b/src/client/react/components/page/Index.js
@@ -22,10 +22,12 @@ import React from 'react';
 import Search from '../container/Search';
 import HelpBox from '../container/HelpBox';
 
+import './Index.scss';
+
 class IndexPage extends React.Component {
   render() {
     return (
-      <div className="page-index">
+      <div className="IndexPage">
         <div className="container">
           <img src="/icons/mml-logo.png" alt="Metis" />
           <Search />
diff --git a/src/client/react/components/page/Index.scss b/src/client/react/components/page/Index.scss
new file mode 100644
index 0000000..f47b36d
--- /dev/null
+++ b/src/client/react/components/page/Index.scss
@@ -0,0 +1,33 @@
+.IndexPage {
+  background-color: #ececec;
+  padding-top: calc(50vh - 310px);
+  height: 100vh;
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 8px;
+
+    img {
+      display: block;
+      margin: 64px auto;
+    }
+
+    .Search {
+      z-index: 1; // Position search above help-box
+    }
+  }
+}
+
+
+@media (max-height: 510px) {
+  .IndexPage {
+    padding-top: 0px;
+
+    .container {
+      img {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js
index 00fde7e..6f9373f 100644
--- a/src/client/react/components/page/User.js
+++ b/src/client/react/components/page/User.js
@@ -28,6 +28,8 @@ import { userFromMatch } from '../../lib/url';
 import WeekSelector from '../container/WeekSelector';
 import RoomFinder from '../container/RoomFinder';
 
+import './User.scss';
+
 class UserPage extends React.Component {
   static propTypes = {
     // react-router
@@ -43,15 +45,15 @@ class UserPage extends React.Component {
     }
 
     return (
-      <div className="page-user">
-        <div className="search-wrapper">
-          <div className="search-container">
+      <div className="UserPage">
+        <div className="searchWrapper">
+          <div className="searchContainer">
             <Search />
           </div>
         </div>
         <Elevation z={2}>
-          <div className="menu">
-            <div className="menu-container">
+          <div className="headerWrapper">
+            <div className="header">
               <RoomFinder />
               <WeekSelector />
             </div>
diff --git a/src/client/react/components/page/User.scss b/src/client/react/components/page/User.scss
new file mode 100644
index 0000000..f56a593
--- /dev/null
+++ b/src/client/react/components/page/User.scss
@@ -0,0 +1,24 @@
+.UserPage {
+  .searchWrapper {
+    position: fixed;
+    z-index: 1; // Position the search bar abore the schedule
+    width: 100%;
+
+    .searchContainer {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 8px;
+    }
+  }
+
+  .headerWrapper {
+    background-color: #F44336;
+    padding-top: 54px;
+
+    .header {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 8px;
+    }
+  }
+}