diff --git a/Gemfile b/Gemfile
index f04db6c..11ae070 100644
--- a/Gemfile
+++ b/Gemfile
@@ -27,6 +27,7 @@ gem 'bcrypt', '~> 3.1.7'
 gem 'bootsnap', '>= 1.4.2', require: false
 
 gem 'state_machines-activerecord'
+gem 'slim-rails'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
diff --git a/Gemfile.lock b/Gemfile.lock
index 41da6db..f86e973 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -179,6 +179,13 @@ GEM
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
+    slim (4.1.0)
+      temple (>= 0.7.6, < 0.9)
+      tilt (>= 2.0.6, < 2.1)
+    slim-rails (3.2.0)
+      actionpack (>= 3.1)
+      railties (>= 3.1)
+      slim (>= 3.0, < 5.0)
     sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -193,6 +200,7 @@ GEM
     state_machines-activerecord (0.6.0)
       activerecord (>= 4.1)
       state_machines-activemodel (>= 0.5.0)
+    temple (0.8.2)
     thor (1.0.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
@@ -236,6 +244,7 @@ DEPENDENCIES
   rubocop
   sass-rails (>= 6)
   selenium-webdriver
+  slim-rails
   state_machines-activerecord
   web-console (>= 3.3.0)
   webdrivers
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d05ea0f..095fd41 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1,15 +1,19 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+//= require material-design-lite/material.min.css
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#main {
+  flex: 1 0 auto;
+}
+
+.page-content {
+  padding: 20px;
+}
+
+.page-content .mdl-textfield {
+  display: block;
+}
\ No newline at end of file
diff --git a/app/controllers/web/application_controller.rb b/app/controllers/web/application_controller.rb
new file mode 100644
index 0000000..cfc7b65
--- /dev/null
+++ b/app/controllers/web/application_controller.rb
@@ -0,0 +1,2 @@
+class Web::ApplicationController < ApplicationController
+end
diff --git a/app/controllers/web/boards_controller.rb b/app/controllers/web/boards_controller.rb
new file mode 100644
index 0000000..3d87c3b
--- /dev/null
+++ b/app/controllers/web/boards_controller.rb
@@ -0,0 +1,4 @@
+class Web::BoardsController < Web::ApplicationController
+  def show
+  end
+end
diff --git a/app/controllers/web/sessions_controller.rb b/app/controllers/web/sessions_controller.rb
new file mode 100644
index 0000000..a96229b
--- /dev/null
+++ b/app/controllers/web/sessions_controller.rb
@@ -0,0 +1,4 @@
+class Web::SessionsController < Web::ApplicationController
+  def new
+  end
+end
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index c5c71d5..06f7228 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -7,6 +7,7 @@ require("@rails/ujs").start()
 require("@rails/activestorage").start()
 require("channels")
 
+import 'material-design-lite/material.js';
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
deleted file mode 100644
index b0772fa..0000000
--- a/app/views/layouts/application.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>App</title>
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= stylesheet_link_tag 'application', media: 'all' %>
-    <%= javascript_pack_tag 'application' %>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
-</html>
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
new file mode 100644
index 0000000..dcf4060
--- /dev/null
+++ b/app/views/layouts/application.html.slim
@@ -0,0 +1,32 @@
+doctype html
+html lang="en"
+  head
+    meta charset="utf-8"
+    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
+    meta name="viewport" content="width=device-width, initial-scale=1.0"
+    title= content_for?(:title) ? yield(:title) : "Task Manager"
+    link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"
+    = stylesheet_link_tag "application", media: "all"
+    = csrf_meta_tags
+    - if !Rails.env.development?
+      = stylesheet_packs_with_chunks_tag "application", media: "all"
+
+
+  body
+    = javascript_packs_with_chunks_tag 'application'
+    header.mdl-layout__header
+      .mdl-layout__header-row
+        .material-icons tab
+        label.mdl-button.mdl-js-button.mdl-button--icon
+          i.material-icons
+        span.mdl-layout-title
+          = "Task Manager"
+        .mdl-layout-spacer
+        nav.mdl-navigation
+    main#main.mdl-layout__content
+      .page-content
+        = yield
+    footer#footer.mdl-mini-footer
+      .mdl-mini-footer__left-section
+        .mdl-logo
+          | &copy; Dualboot Learn 2020
\ No newline at end of file
diff --git a/app/views/web/boards/show.html.slim b/app/views/web/boards/show.html.slim
new file mode 100644
index 0000000..10e18d3
--- /dev/null
+++ b/app/views/web/boards/show.html.slim
@@ -0,0 +1,2 @@
+h1 Web::Boards#show
+p Find me in app/views/web/boards/show.html.slim
diff --git a/app/views/web/sessions/new.html.slim b/app/views/web/sessions/new.html.slim
new file mode 100644
index 0000000..67cd334
--- /dev/null
+++ b/app/views/web/sessions/new.html.slim
@@ -0,0 +1,2 @@
+h1 Web::Sessions#new
+p Find me in app/views/web/sessions/new.html.slim
diff --git a/config/application.rb b/config/application.rb
index a6c63a9..311c4ef 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -11,6 +11,7 @@ class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
 
+    config.assets.paths << Rails.root.join('node_modules') 
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded after loading
diff --git a/config/initializers/simple_form_materialize.rb b/config/initializers/simple_form_materialize.rb
new file mode 100644
index 0000000..dc959da
--- /dev/null
+++ b/config/initializers/simple_form_materialize.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  config.error_notification_class = 'alert alert-danger'
+  config.button_class = 'mdl-button mdl-js-button mdl-button--raised'
+  config.boolean_label_class = nil
+  config.boolean_style = :inline
+  config.item_wrapper_tag = :p
+
+  config.wrappers :materialize_form, tag: 'div', class: 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label', error_class: 'is-invalid' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :input, class: 'mdl-textfield__input'
+    b.use :label, class: 'mdl-textfield__label'
+    b.use :error, wrap_with: { tag: 'span', class: 'mdl-textfield__error' }
+  end
+
+  config.default_wrapper = :materialize_form
+end
diff --git a/config/routes.rb b/config/routes.rb
index c06383a..559447f 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,3 +1,8 @@
 Rails.application.routes.draw do
-  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+  root :to => "web/boards#show"
+
+  scope module: :web do
+    resource :board, only: :show
+    resource :session, only: :new
+  end
 end
diff --git a/package.json b/package.json
index 8a0024e..895f32f 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "4.3.0"
+    "@rails/webpacker": "4.3.0",
+    "material-design-lite": "^1.3.0"
   },
   "version": "0.1.0",
   "devDependencies": {
diff --git a/test/controllers/web/boards_controller_test.rb b/test/controllers/web/boards_controller_test.rb
new file mode 100644
index 0000000..bedaf84
--- /dev/null
+++ b/test/controllers/web/boards_controller_test.rb
@@ -0,0 +1,8 @@
+require 'test_helper'
+
+class Web::BoardsControllerTest < ActionController::TestCase
+  test 'should get new' do
+    get :show
+    assert_response :success
+  end
+end
diff --git a/test/controllers/web/sessions_controller_test.rb b/test/controllers/web/sessions_controller_test.rb
new file mode 100644
index 0000000..8d54cd1
--- /dev/null
+++ b/test/controllers/web/sessions_controller_test.rb
@@ -0,0 +1,8 @@
+require 'test_helper'
+
+class Web::SessionsControllerTest < ActionController::TestCase
+  test 'should get new' do
+    get :new
+    assert_response :success
+  end
+end
diff --git a/test/factories/sequence.rb b/test/factories/sequence.rb
index 06d12d5..64660e1 100644
--- a/test/factories/sequence.rb
+++ b/test/factories/sequence.rb
@@ -34,4 +34,8 @@
   sequence :expired_at do |n|
     "expired_at 2020-04-#{n}"
   end
+
+  sequence :string do |n|
+    "string#{n}"
+  end
 end
diff --git a/yarn.lock b/yarn.lock
index dae0a7b..fe29b0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4303,6 +4303,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-design-lite@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/material-design-lite/-/material-design-lite-1.3.0.tgz#d004ce3fee99a1eeb74a78b8a325134a5f1171d3"
+  integrity sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"