diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index 48ad3a1c..f33d6f8d 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -1,15 +1,3 @@
 // Place all the styles related to the landing controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-
-// Bootstrap
-@import "bootstrap-sprockets";
-@import "bootstrap";
-@import "bootstrap-social";
-@import "font-awesome";
-
-.room {
-  .room-link {
-    margin: 0 auto;
-  }
-}
diff --git a/app/assets/stylesheets/narrow-jumbotron.css b/app/assets/stylesheets/narrow-jumbotron.css
deleted file mode 100644
index a2dbf869..00000000
--- a/app/assets/stylesheets/narrow-jumbotron.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/* Space out content a bit */
-body {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.marketing,
-.footer {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-/* Custom page header */
-.header {
-  padding-bottom: 1rem;
-  border-bottom: .05rem solid #e5e5e5;
-}
-/* Make the masthead heading the same height as the navigation */
-.header h3 {
-  margin-top: 0;
-  margin-bottom: 0;
-  line-height: 3rem;
-}
-
-/* Custom page footer */
-.footer {
-  padding-top: 1.5rem;
-  color: #777;
-  border-top: .05rem solid #e5e5e5;
-}
-
-/* Customize container */
-@media (min-width: 48em) {
-  .container {
-    max-width: 72rem;
-  }
-}
-.container-narrow > hr {
-  margin: 2rem 0;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
-  text-align: center;
-  border-bottom: .05rem solid #e5e5e5;
-}
-.jumbotron .btn {
-  padding: .75rem 1.5rem;
-  font-size: 1.5rem;
-}
-
-/* Supporting marketing content */
-.marketing {
-  margin: 3rem 0;
-}
-.marketing p + h4 {
-  margin-top: 1.5rem;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 48em) {
-  /* Remove the padding we set earlier */
-  .header,
-  .marketing,
-  .footer {
-    padding-right: 0;
-    padding-left: 0;
-  }
-  /* Space out the masthead */
-  .header {
-    margin-bottom: 2rem;
-  }
-  /* Remove the bottom border on the jumbotron for visual effect */
-  .jumbotron {
-    border-bottom: 0;
-  }
-}
diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss
index afa20028..cea5f60a 100644
--- a/app/assets/stylesheets/shared.scss
+++ b/app/assets/stylesheets/shared.scss
@@ -10,7 +10,7 @@ html, body {
 }
 
 .header {
-  margin: 20px 40px;
+  padding: 20px 40px;
 
   .logo {
     max-width: 150px;
@@ -19,20 +19,14 @@ html, body {
 }
 
 .footer {
-  margin: 20px;
+  padding: 20px;
 }
 
 .page-header {
-  margin-top: 60px;
+  margin-top: 100px;
   border: 0;
 }
 
-.vertical-center {
-  display: inline-block;
-  vertical-align: middle;
-  float: none;
-}
-
 .content-box {
   .center-block {
     float: none;
diff --git a/app/views/landing/_footer_message.html.erb b/app/views/landing/_footer_message.html.erb
deleted file mode 100644
index ed818a1e..00000000
--- a/app/views/landing/_footer_message.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="landing_page_footer_message">
-  <p>Bookmark this page to reuse this meeting URL<% if @resource == "meetings" %>, or click refresh button to generate a new meeting URL<% end %></p>
-</div>
diff --git a/app/views/landing/_footer_oauth_append.html.erb b/app/views/landing/_footer_oauth_append.html.erb
deleted file mode 100644
index 2c3f58c7..00000000
--- a/app/views/landing/_footer_oauth_append.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<div id="landing_page_footer_oauth_append">
-  <% if current_user.nil? %>
-  <p>You can have a personal URL (with recordings) by signing in below</p>
-
-  <div class="text-center">
-    <%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
-      <span class="fa fa-twitter"></span>
-    <% end %>
-    <%= link_to('/auth/google', :class => "btn icon btn-lg btn-social-icon btn-google") do %>
-      <span class="fa fa-google"></span>
-    <% end %>
-  </div>
-  <% end %>
-  </div>
-</div>
diff --git a/app/views/landing/_join_form.html.erb b/app/views/landing/_join_form.html.erb
deleted file mode 100644
index f3cf610f..00000000
--- a/app/views/landing/_join_form.html.erb
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="jumbotron">
-  <!-- Meeting URL -->
-  <h4 class="display-3">
-    <div id="landing_page_url" class="center-block">
-      <form id="url_form" class="form-inline">
-        <div class="form-group">
-          <span id="meeting_url"><%= resource_url(@resource, @meeting_token) %></span>
-        </div>
-        <% if @refreshable %>
-        <button id="url_form_button" type="button" class="btn btn-default" data-url="<%= new_meeting_path() %>">
-          <span class="glyphicon glyphicon-refresh"></span>
-        </button>
-        <% end %>
-      </form>
-    </div>
-  </h4>
-
-  <!-- Join form -->
-  <div id="landing_page_join">
-    <form id="join_form" class="form-inline">
-      <% if current_user.nil? %>
-      <div class="form-group">
-        <label for="join_form_name" class="sr-only">Name</label>
-        <input id="join_form_name" type="text" class="form-control input" placeholder="Your name" required>
-      </div>
-      <% else %>
-        <input id="join_form_name" type="hidden" value="<%= current_user.name %>">
-      <% end %>
-      <button id="join_form_button" type="button" class="btn btn-success" data-url="<%= bbb_join_path(@resource, @meeting_token) %>">Join</button>
-    </form>
-  </div>
-</div>
diff --git a/app/views/shared/_center_panel.html.erb b/app/views/shared/_center_panel.html.erb
new file mode 100644
index 00000000..cc3395ec
--- /dev/null
+++ b/app/views/shared/_center_panel.html.erb
@@ -0,0 +1,14 @@
+<div class="content-box">
+  <div class="row">
+    <div class="center-block col-sm-4">
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <h3 class="title-wrapper text-center">
+            <%= yield :title %>
+          </h3>
+          <%= yield %>
+      </div>
+      <%= yield :footer %>
+    </div>
+  </div>
+</div>
diff --git a/app/views/shared/_join_form.html.erb b/app/views/shared/_join_form.html.erb
new file mode 100644
index 00000000..16f45284
--- /dev/null
+++ b/app/views/shared/_join_form.html.erb
@@ -0,0 +1,9 @@
+<div class="input-group input-spacing">
+  <% @current_user = user %>
+  <%= text_field :current_user, :name, class: 'form-control meeting-user-name', placeholder: 'Enter your name' %>
+  <span class="input-group-btn">
+    <button type="button" class="btn btn-primary meeting-join">
+      Join
+    </button>
+  </span>
+</div>
diff --git a/app/views/shared/_meeting_url.html.erb b/app/views/shared/_meeting_url.html.erb
new file mode 100644
index 00000000..88056e75
--- /dev/null
+++ b/app/views/shared/_meeting_url.html.erb
@@ -0,0 +1,13 @@
+<div <%= "hidden" if hidden %> class="meetin-url-wrapper">
+  <div class="input-group">
+    <input type="text" readonly="readonly" class="form-control meeting-url" data-path="<%= @user.room_url if @user %>"/>
+    <span class="input-group-btn">
+      <button type="button" class="btn btn-default meeting-url-copy">
+        <i class="fa fa-paperclip" aria-hidden="true"></i>
+      </button>
+    </span>
+  </div>
+  <small>
+    <em>Copy this URL to invite others to the meeting</em>
+  </small>
+</div>
diff --git a/app/views/shared/_title.html.erb b/app/views/shared/_title.html.erb
new file mode 100644
index 00000000..21e3ea50
--- /dev/null
+++ b/app/views/shared/_title.html.erb
@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="page-header">
+    <h1 class="text-center">
+      <%= title %>
+    </h1>
+  </div>
+</div>