diff --git a/Gemfile b/Gemfile
index 53a46175..464451b6 100644
--- a/Gemfile
+++ b/Gemfile
@@ -41,9 +41,11 @@ gem 'omniauth-google-oauth2'
 gem 'bigbluebutton-api-ruby'
 
 # Front-end.
-gem 'bootstrap-sass', '3.3.0.0'
-gem 'bootstrap-social-rails', '~> 4.12'
-gem 'font-awesome-sass', '4.7.0'
+gem 'bootstrap', '~> 4.1.1'
+gem 'tabler-rubygem'
+
+# Fontawesome icons.
+gem "font-awesome-sass", '~> 5.0.13'
 
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development
diff --git a/Gemfile.lock b/Gemfile.lock
index 0af93c99..b3cb64d2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -39,14 +39,16 @@ GEM
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (7.1.4)
+    autoprefixer-rails (8.5.0)
+      execjs
     bcrypt (3.1.11)
     bigbluebutton-api-ruby (1.6.0)
       xml-simple (~> 1.1)
     bindex (0.5.0)
-    bootstrap-sass (3.3.0.0)
-      sass (~> 3.2)
-    bootstrap-social-rails (4.12.0)
-      railties (>= 3.1)
+    bootstrap (4.1.1)
+      autoprefixer-rails (>= 6.0.3)
+      popper_js (>= 1.12.9, < 2)
+      sass (>= 3.5.2)
     builder (3.2.3)
     byebug (10.0.2)
     coffee-rails (4.2.2)
@@ -75,8 +77,8 @@ GEM
     faraday (0.12.2)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.23)
-    font-awesome-sass (4.7.0)
-      sass (>= 3.2)
+    font-awesome-sass (5.0.13)
+      sassc (>= 1.11)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     hashie (3.5.7)
@@ -131,6 +133,7 @@ GEM
     omniauth-twitter (1.4.0)
       omniauth-oauth (~> 1.1)
       rack
+    popper_js (1.12.9)
     puma (3.11.4)
     rack (2.0.5)
     rack-test (0.6.3)
@@ -194,6 +197,10 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (1.11.4)
+      bundler
+      ffi (~> 1.9.6)
+      sass (>= 3.3.0)
     spring (2.0.2)
       activesupport (>= 4.2)
     spring-watcher-listen (2.0.1)
@@ -207,6 +214,8 @@ GEM
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     sqlite3 (1.3.13)
+    tabler-rubygem (0.1.2)
+      autoprefixer-rails (>= 6.0.3)
     thor (0.20.0)
     thread_safe (0.3.6)
     tilt (2.0.8)
@@ -233,14 +242,13 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (~> 3.1.7)
   bigbluebutton-api-ruby
-  bootstrap-sass (= 3.3.0.0)
-  bootstrap-social-rails (~> 4.12)
+  bootstrap (~> 4.1.1)
   byebug
   coffee-rails (~> 4.2)
   dotenv-rails
   factory_bot_rails
   faker
-  font-awesome-sass (= 4.7.0)
+  font-awesome-sass (~> 5.0.13)
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
@@ -255,6 +263,7 @@ DEPENDENCIES
   spring
   spring-watcher-listen (~> 2.0.0)
   sqlite3
+  tabler-rubygem
   turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index b12018d0..5ecdd253 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -10,7 +10,7 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
+//= require tabler
+//= require tabler.plugins
 //= require turbolinks
 //= require_tree .
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5bb4b9f4..0ba8de4b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -30,12 +30,42 @@
 // You should have received a copy of the GNU Lesser General Public License along
 // with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
+@import "font-awesome-sprockets";
+@import "font-awesome";
+
+@import "tabler/variables";
 @import "bootstrap";
+@import "tabler";
+@import "tabler.plugins";
+
+$background-color: #d1e2ff;
+$rule-color: lightblue;
+
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+
+iframe{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+ }
 
 html, body {
   width: 100%;
   height: 100%;
-  background: #ffffff;
+  background: linear-gradient(180deg, $background-color 50%, white 50%);
+}
+
+.small-rule {
+  width: 25%;
+  border-width: 3px;
+  background-color: $rule-color;
 }
 
 .container-fluid {
@@ -158,4 +188,4 @@ body[data-controller=landing].app-background {
   top: 0;
   right: 0;
   padding-right: 3px;
-}
\ No newline at end of file
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6cc921c1..a0bd83ef 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,8 +10,7 @@
 
   <body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>"
     data-resource="<%= params[:resource] %>"
-    data-current-user="<%= current_user.try(:encrypted_id) %>"
-    style="background-image:url(<%= image_path('background.png') if params[:controller] == 'main' %>);">
+    data-current-user="<%= current_user.try(:encrypted_id) %>">
 
     <!-- Messages -->
     <div id='alerts'>
@@ -27,17 +26,10 @@
       </div>
     </div>
 
-  <!-- Header -->
-    <div class='header'>
-      <span class="logo-wrapper pull-left">
-        <% if current_user %>
-          <%= link_to image_tag("bbb_logo.png", :alt => "BigBlueButton", :class => "logo"), room_path(current_user) %>
-        <% else %>
-          <%= link_to image_tag("bbb_logo.png", :alt => "BigBlueButton", :class => "logo"), root_path %>
-        <% end %>
-      </span>
-    </div>
+    <%= render "shared/header" %>
 
     <%= yield %>
+
+    <%= render "shared/footer" %>
   </body>
 </html>
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index df729989..a4644d5f 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -1,36 +1,18 @@
-<% content_for :title do %>
-  <div class="title">
-    <h2>Landing Title</h2>
-  </div>
-<% end %>
+<div class="container">
+	<h1 class="display-3 text-center text-primary">Teach Students Online</h1>
+	<hr class="small-rule">
 
-<div class="page-wrapper meetings">
-  <div class="container-fluid">
+  <%= render "shared/start_meeting" %>
 
-    <div class="center-panel-wrapper">
-      <%= render layout: 'shared/center_panel' do %>
-        <div class="center-block center-panel-content-size col-xs-12">
-          <%= form_for(:meeting, url: create_meeting_path) do |f| %>
-            <div class="input-field col s12">
-              <%= f.label :name, "Name" %>
-              <%= f.text_field :name %>
-            </div>
-            <br>
-            <%= f.submit "Start Meeting", class: "btn white-text light-green" %>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
+  <br>
 
-    <% unless configured_providers.empty? %>
-      <div class="center-block col-xs-6 login">
-        <%= render 'shared/signup' %>
-      </div>
-    <% end %>
-
-    <div class="text-center" style="padding-top:20px;">
-      <iframe width="560" height="315" src="https://www.youtube.com/embed/yGX3JCv7OVM" frameborder="0" allowfullscreen></iframe>
-    </div>
-
-  </div>
+  <%= render "shared/features" %>
 </div>
+
+<%= render "shared/video_modal" %>
+
+<script>
+$(window).on('load',function(){
+  $('#welcomeModal').modal('show');
+});
+</script>
diff --git a/app/views/shared/_features.html.erb b/app/views/shared/_features.html.erb
new file mode 100644
index 00000000..a0586ce2
--- /dev/null
+++ b/app/views/shared/_features.html.erb
@@ -0,0 +1,11 @@
+<h1 class="text-center text-primary">Features</h1>
+<hr class="small-rule">
+
+<div class="row text-center">
+  <div class="col-6">
+    <h1>Feature One</h1>
+  </div>
+  <div class="col-6">
+    <h1>Feature Two</h1>
+  </div>
+</div>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
new file mode 100644
index 00000000..7ca0198d
--- /dev/null
+++ b/app/views/shared/_footer.html.erb
@@ -0,0 +1,3 @@
+<div class="footer">
+  <h5 class="text-center">Powered by BigBlueButton.</h5>
+</div>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
new file mode 100644
index 00000000..faa8b949
--- /dev/null
+++ b/app/views/shared/_header.html.erb
@@ -0,0 +1,27 @@
+<div class="header py-4">
+	<div class="container">
+		<div class="d-flex">
+			<a class="header-brand" href="{{ site.base }}/index.html">
+				<%= image_tag("bbb_logo.png", class: "header-brand-img") %>
+			</a>
+
+			<div class="d-flex order-lg-2 ml-auto">
+				<% if current_user %>
+					<div class="dropdown">
+						<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
+							<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
+							<span class="ml-2 d-none d-lg-block">
+								<span class="text-default">{{ user.name }} {{ user.surname }}</span>
+								<small class="text-muted d-block mt-1">Administrator</small>
+							</span>
+						</a>
+					</div>
+				<% else %>
+					<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
+
+					<%= render "shared/login_modal" %>
+				<% end %>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/app/views/shared/_login_modal.html.erb b/app/views/shared/_login_modal.html.erb
new file mode 100644
index 00000000..a14c9a82
--- /dev/null
+++ b/app/views/shared/_login_modal.html.erb
@@ -0,0 +1,35 @@
+<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content text-center">
+      <div class="modal-body">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h3>Login</h3>
+          </div>
+
+          <hr class="small-rule">
+          <% configured_providers.each do |provider| %>
+            <%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
+               <i class="fab fa-<%= provider %>"></i>&ensp;<%= "Login with #{provider.capitalize}" %>
+            <% end %>
+          <% end %>
+
+          <hr>
+          <div class="form-group">
+            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
+          </div>
+          <div class="form-group">
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+          </div>
+          <div class="form-footer">
+            <button type="submit" class="btn btn-outline-primary btn-block btn-pill">Login</button>
+          </div>
+        </div>
+        <div class="card-footer">
+          <%= link_to "Don't have an account, sign up!", "google.com" %>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
diff --git a/app/views/shared/_start_meeting.html.erb b/app/views/shared/_start_meeting.html.erb
new file mode 100644
index 00000000..21d583e3
--- /dev/null
+++ b/app/views/shared/_start_meeting.html.erb
@@ -0,0 +1,15 @@
+<div class="card text-center">
+  <div class="card-body">
+    <div class="col-8 offset-2 form-group">
+      <div class="input-group">
+        <input type="text" class="form-control" placeholder="Enter a meeting name to start!">
+        <span class="input-group-append">
+          <button class="btn btn-primary" type="button">Start Meeting</button>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="card-footer">
+    Invite URL and stuff goes here.
+  </div>
+</div>
diff --git a/app/views/shared/_video_modal.html.erb b/app/views/shared/_video_modal.html.erb
new file mode 100644
index 00000000..c16c8054
--- /dev/null
+++ b/app/views/shared/_video_modal.html.erb
@@ -0,0 +1,23 @@
+<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content text-center">
+      <div class="modal-body">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h3>Welcome</h3>
+          </div>
+          <hr class="small-rule">
+
+          <div class="video-container">
+            <iframe src="https://www.youtube.com/embed/yGX3JCv7OVM" frameborder="0" allowfullscreen></iframe>
+          </div>
+
+          <div class="col-6 offset-3">
+            <button type="submit" class="btn btn-outline-primary btn-block btn-pill mt-5" data-dismiss="modal">Enter Site</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>