diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm
index 4dc68e5..285c06b 100644
--- a/src/Scylla/Views.elm
+++ b/src/Scylla/Views.elm
@@ -4,8 +4,8 @@ import Scylla.Sync exposing (..)
 import Scylla.Route exposing (..)
 import Url.Builder
 import Json.Decode as Decode
-import Html exposing (Html, div, input, text, button, div, span, a)
-import Html.Attributes exposing (type_, value, href)
+import Html exposing (Html, div, input, text, button, div, span, a, h2)
+import Html.Attributes exposing (type_, value, href, class)
 import Html.Events exposing (onInput, onClick)
 import Dict
 
@@ -45,8 +45,9 @@ roomListView s jr =
         a [ href <| Url.Builder.absolute [ "room", s ] [] ] [ text name ]
 
 loginView : Model -> Html Msg
-loginView m = div []
-    [ input [ type_ "text", value m.loginUsername, onInput ChangeLoginUsername] []
+loginView m = div [ class "login-wrapper" ]
+    [ h2 [] [ text "Log In" ]
+    , input [ type_ "text", value m.loginUsername, onInput ChangeLoginUsername] []
     , input [ type_ "password", value m.loginPassword, onInput ChangeLoginPassword ] []
     , input [ type_ "text", value m.apiUrl, onInput ChangeApiUrl ] []
     , button [ onClick AttemptLogin ] [ text "Log In" ]
diff --git a/static/scss/style.scss b/static/scss/style.scss
new file mode 100644
index 0000000..e5012cb
--- /dev/null
+++ b/static/scss/style.scss
@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+$primary-color: #53C0FA;
+$primary-color-highlight: #4298C7;
+$primary-color-light: #9FDBFB;
+$active-input-color: white;
+$transition-duration: .125s;
+
+$inactive-input-color: darken($active-input-color, 3%);
+$active-input-border-color: $primary-color;
+$inactive-input-border-color: darken($inactive-input-color, 10%);
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    margin: 0px;
+}
+
+@mixin input-common {
+    padding: 5px;
+    border-radius: 3px;
+    outline: none;
+
+    transition: background-color $transition-duration;
+}
+
+div.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    margin: auto;
+    margin-top: 20px;
+
+    input, button {
+        margin: 3px;
+    }
+
+    h2 {
+        margin: 0px;
+        margin-bottom: 3px;
+    }
+}
+
+input {
+    @include input-common();
+    background-color: $inactive-input-color;
+    color: black;
+    border: .5px solid $inactive-input-border-color;
+
+    &:focus {
+        background-color: $active-input-color;
+        border-color: $active-input-border-color;
+    }
+}
+
+button {
+    @include input-common();
+    border: none;
+    background-color: $primary-color;
+    color: white;
+
+    &:hover, &:focus {
+        background-color: $primary-color-highlight;
+    }
+}