diff --git a/open_humans/templates/account/login-modal-bs4.html b/open_humans/templates/account/login-modal-bs4.html
new file mode 100644
index 000000000..ebb8518fd
--- /dev/null
+++ b/open_humans/templates/account/login-modal-bs4.html
@@ -0,0 +1,48 @@
+{% load account %}
+{% load socialaccount %}
+{% load static %}
+{% load utilities %}
+
+<div class="modal fade" id="login-modal-bs4" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+          <h4 class="modal-title">Log in to Open Humans</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-lg">
+            {% include 'account/login-form.html' %}
+              <input type="submit" form="login-form" id="login"
+                    class="btn btn-primary redirect-storage-link"
+                    value="Log in">
+              <hr class="d-lg-none">
+            </div>
+            <div class="col-lg text-center">
+              <h4>or</h4>
+              {% include 'account/login-social-bs4.html' %}
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <div class="text-center w-100">
+          <a class="redirect-storage-link"
+             href="{% url 'account_reset_password' %}">Reset&nbsp;password</a>
+          |
+          <a href="{% url 'account_signup' %}" data-dismiss="modal"
+            data-toggle="modal" data-target="#signup-modal-bs4">
+            Sign up</a>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/open_humans/templates/account/login-social-bs4.html b/open_humans/templates/account/login-social-bs4.html
new file mode 100644
index 000000000..cbaea9e87
--- /dev/null
+++ b/open_humans/templates/account/login-social-bs4.html
@@ -0,0 +1,28 @@
+{% load socialaccount %}
+{% load static %}
+{% load utilities %}
+
+<!-- Facebook button style based on the appearance here:
+https://developers.facebook.com/docs/facebook-login/web/login-button
+
+And using image asset from here:
+https://en.facebookbrand.com/#brand-guidelines-assets -->
+
+<div class="login-button-div">
+  <a href="{% provider_login_url "facebook" method="oauth2" %}"
+     class="btn social-login-button fb-button redirect-storage-link mb-3">
+    <img alt="Facebook Login" title="Facebook login"
+        src="{% static 'images/FB-F.png' %}" width="24" height="24" style="margin-right:8px;"> Continue with Facebook
+  </a>
+</div>
+
+
+<!-- Adapted Google logo silohuette and brand colors from assets here:
+https://developers.google.com/identity/branding-guidelines -->
+<div class="login-button-div">
+  <a href="{% provider_login_url "google" %}"
+     class="btn login-button google-button redirect-storage-link mb-3">
+    <img alt="Google Login" title="Google Login"
+         src="{% static 'images/g-normal.png' %}" width="24" height="24" style="margin-right:8px;"> Continue with Google
+  </a>
+</div>
diff --git a/open_humans/templates/account/login-social.html b/open_humans/templates/account/login-social.html
index 78ebb8595..988723733 100644
--- a/open_humans/templates/account/login-social.html
+++ b/open_humans/templates/account/login-social.html
@@ -2,8 +2,6 @@
 {% load static %}
 {% load utilities %}
 
-<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-
 <!-- Facebook button style based on the appearance here:
 https://developers.facebook.com/docs/facebook-login/web/login-button
 
diff --git a/open_humans/templates/account/signup-modal-bs4.html b/open_humans/templates/account/signup-modal-bs4.html
new file mode 100644
index 000000000..749ed4636
--- /dev/null
+++ b/open_humans/templates/account/signup-modal-bs4.html
@@ -0,0 +1,44 @@
+{% load static %}
+
+<div class="modal fade" id="signup-modal-bs4" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+
+        <div class="modal-header">
+            <h4 class="modal-title">Create an Open Humans account</h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+    
+
+        <div class="modal-body">
+          <div class="text-center">
+
+            {% include 'account/login-social-bs4.html' %}
+
+            <h4>or</h4>
+
+            <a href="{% url 'email_signup' %}"
+              class="btn btn-primary login-button redirect-storage-link mb-3">
+              <img alt="Email login" title="Email login"
+                  src="{% static 'images/email-icon.png' %}" width="24" height="24" style="margin-right:8px;">
+              Continue with Email
+            </a>
+
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <div class="text-center w-100">
+            Already have an account?
+            <a href="{% url 'account_login' %}" data-dismiss="modal"
+            data-toggle="modal" data-target="#login-modal-bs4">
+            Log&nbsp;in.</a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/open_humans/templates/base-bs4.html b/open_humans/templates/base-bs4.html
new file mode 100644
index 000000000..d46a20280
--- /dev/null
+++ b/open_humans/templates/base-bs4.html
@@ -0,0 +1,196 @@
+{% load static %}
+{% load utilities %}
+<!doctype html>
+<html lang="en" class="h-100">
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="{% block meta_description %}Open Humans empowers people with their personal data. From genomes to GPS: you can explore data analyses, do citizen science, and donate data to research.{% endblock meta_description %}">
+
+      <title>{% block head_title %}{% endblock head_title %}{% block head_title_suffix %} - Open Humans{% endblock head_title_suffix %}</title>
+
+
+
+    {# Application JavaScript - Note: popper is needed by bootstrap 4 #}
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.min.js" integrity="sha256-ixgfZ1KX2FiT8fYtfpU1l3NgfV4X18K1XxyQkdIAd+E=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js" integrity="sha256-FcVIknBiVRk5KLQeIBb9VQdtFRMqwffXyZ+D8q0gQro=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <script src="{% static 'js/main-bs4.js' %}"></script>
+
+    {# Per-page JavaScript #}
+    {% page_bundle %}
+
+    {# But some URLs are dynamic, e.g. '/members/username'. #}
+    {% block extra_js %}{% endblock %}
+
+    <link rel="icon" type="image/png" href="{% static 'images/open_humans_favicon.png' %}">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://static.openhumans.org/css/oh-fonts.css">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/oh-proj-theming.css' %}">
+
+    {# For internal CSS stylesheets. #}
+    {% block extra_css %}{% endblock %}
+
+  </head>
+
+  <body id="{% page_body_id %}-2" class="d-flex flex-column h-100 oh-proj-template {% page_body_class %}">
+
+    <header>
+      <!-- Fixed navbar -->
+      <nav class="navbar navbar-expand-md fixed-top navbar-open-humans">
+        <div class="container d-flex">
+          <a class="navbar-brand" href="/">
+            <img class="navbar-img" src="{% static 'images/open-humans-logo-horizontal-80px.png' %}">
+          </a>
+          <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon custom-toggler"></span>
+          </button>
+          <div class="collapse navbar-collapse text-right" id="navbarCollapse">
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item mt-2 mt-md-0 mr-md-2{% active 'add-data' %}">
+                <a class="nav-link" href="{% url 'add-data' %}">Add data</a>
+              </li>
+              <li class="nav-item mr-md-2 {% active 'explore-share' %}">
+                <a class="nav-link" href="{% url 'explore-share' %}">Explore &amp; share</a>
+              </li>
+              <li class="nav-item mr-md-3 {% active 'create' %}">
+                <a class="nav-link" href="{% url 'create' %}">Create</a>
+              </li>
+              {% if user.is_authenticated %}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  My account
+                </a>
+                <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
+                  <a class="dropdown-item" href="{% url 'my-member-dashboard' %}">Public profile</a>
+                  <a class="dropdown-item" href="{% url 'my-member-joined' %}">Projects joined</a>
+                  <a class="dropdown-item" href="{% url 'my-member-data' %}">My data</a>
+                  <a class="dropdown-item" href="{% url 'my-member-settings' %}">Account settings</a>
+                  {% if user.member.datarequestproject_set.exists %}
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item" href="{% url 'direct-sharing:manage-projects' %}">Manage projects</a>
+                  {% endif %}
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item logout-link" href="{% url 'account_logout' %}">
+                      Log out</a>
+                </div>
+              </li>
+              {% else %}
+              <li class="nav-item {% active 'login' %} mr-md-4 mt-2 mt-md-1">
+                <button type="button" class="btn btn-sm btn-default"
+                data-toggle="modal" data-target="#login-modal-bs4">
+                  Log in
+                </button>
+              </li>
+
+              <li class="nav-item {% active 'signup' %} mt-3 mt-md-1 mb-2 mb-md-0">
+                <button type="button" class="btn btn-sm btn-primary signup-link"
+                  data-toggle="modal" data-target="#signup-modal-bs4">
+                  Join now!
+                </button>
+              </li>
+              {% endif %}
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <!-- Page content -->
+    <main role="main" class="flex-shrink-0">
+      <div class="container">
+
+        {% if request.user.is_authenticated and not request.user.member.primary_email.verified %}
+        <div class="alert alert-warning">
+          Please
+          <a href="{% url 'my-member-send-confirmation-email' %}?next={{ request.path }}">verify
+            your email address</a>! As good stewards of your data, we want to
+            be able to contact you.
+        </div>
+        {% endif %}
+        {% block messages_block %}
+          {% if messages %}
+            <div class="mt-2">
+            {% for message in messages %}
+              <div class="alert {% if message.tags %}
+                  alert-{% ifequal message.tags 'error' %}danger{% else %}{{ message.tags }}{% endifequal %}
+                  {% endif %}">
+                {{ message }}
+              </div>
+            {% endfor %}
+            </div>
+          {% endif %}
+        {% endblock messages_block %}
+
+        {% block main %}
+        <h1 class="mt-5">Sample top header</h1>
+        <p class="lead">Sample lead paragraph text.</p>
+        <p>Sample standard paragraph text. This <a href="#">is a sample</a> link.</a> <code>This is some code.</code></p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+          mollit anim id est laborum.
+        </p>
+        </p>
+        <div class="mb-2">
+          <btn class="btn btn-xs btn-primary">button 1</btn>
+          <btn class="btn btn-xs btn-default">button 2</btn>
+          <btn class="btn btn-xs btn-primary-hollow">button 3</btn>
+          <btn class="btn btn-xs btn-info">button 4</btn>
+        </div>
+        <div class="mb-2">
+          <btn class="btn btn-sm btn-primary">button 1</btn>
+          <btn class="btn btn-sm btn-default">button 2</btn>
+          <btn class="btn btn-sm btn-primary-hollow">button 3</btn>
+          <btn class="btn btn-sm btn-info">button 4</btn>
+        </div>
+        <div class="mb-2">
+          <btn class="btn btn-primary">button 1</btn>
+          <btn class="btn btn-default">button 2</btn>
+          <btn class="btn btn-primary-hollow">button 3</btn>
+          <btn class="btn btn-info">button 4</btn>
+        </div>
+        <div>
+          <btn class="btn btn-lg btn-primary">button 1</btn>
+          <btn class="btn btn-lg btn-default">button 2</btn>
+          <btn class="btn btn-lg btn-primary-hollow">button 3</btn>
+          <btn class="btn btn-lg btn-info">button 4</btn>
+        </div>
+        {% endblock main %}
+
+      </div>
+    </main>
+
+    <footer class="footer mt-auto pb-3 pt-5">
+      <div class="container">
+        <div class="text-center">
+          <a href="{% url 'about' %}">About&nbsp;Us</a> |
+          <a href="http://blog.openhumans.org/">Blog</a> |
+          <a href="http://slackin.openhumans.org">Chat</a> |
+          <a href="{% url 'jobs' %}">Jobs</a> |
+          <a href="{% url 'member-list' %}">Member list</a></li> |
+          <a href="{% url 'statistics' %}">Statistics</a></li> |
+          <a href="https://twitter.com/OpenHumansOrg"><img src="{% static 'images/twitter-xs-logo.png' %}" alt="Twitter" style="max-height:15px"></a> |
+          <a href="https://www.facebook.com/openhumansorg/"><img src="{% static 'images/FB-f-Logo__blue_29.png' %}" alt="Facebook" style="max-height:15px"></a> |
+          <a href="{% url 'contact_us' %}">Contact&nbsp;Us</a> |
+          <a href="{% url 'community_guidelines' %}">Community&nbsp;Guidelines</a> |
+          <a href="{% url 'terms-of-use' %}">Terms&nbsp;of&nbsp;Use</a> |
+          <a href="{% url 'data-use-policy' %}">Data&nbsp;Use&nbsp;Policy</a>
+        </div>
+      </div>
+    </footer>
+
+    {% include 'account/signup-modal-bs4.html' %}
+    {% include 'account/login-modal-bs4.html' %}
+
+    {% block extra_modals %}{% endblock %}
+  </body>
+</html>
diff --git a/open_humans/templates/member/activity.html b/open_humans/templates/member/activity.html
new file mode 100644
index 000000000..f4cd529c4
--- /dev/null
+++ b/open_humans/templates/member/activity.html
@@ -0,0 +1,173 @@
+{% extends 'base-bs4.html' %}
+{% load static %}
+{% load utilities %}
+
+{% block head_title %}{{ activity.verbose_name }}{% endblock %}
+
+{% block meta_description %}&quot;{{ activity.verbose_name }}&quot; on Open Humans: {{ activity.description }}{% endblock meta_description %}
+
+{% block main %}
+<div class="d-flex mt-4">
+    <div class="flex-grow-1 mb-3">
+        <div class="d-none d-sm-inline-block">
+            <h1>{{ project.name }}</h1>
+            {% include 'partials/activity-info-short-bs4.html' %}
+        </div>
+        <div class="d-flex justify-content-center d-sm-none">
+          <div class="w-25 m-2">
+            <img class="img-fluid" src="{% static 'images/default-badge.png' %}">
+          </div>
+        </div>
+        <div class="d-flex justify-content-center d-sm-none text-center">
+            <h1 class="justify-content-center">{{ project.name }}</h1>
+        </div>
+        <div class="d-flex justify-content-center d-sm-none">
+            {% include 'partials/activity-info-short-bs4.html' %}
+        </div>
+    </div>
+    <div class="d-none d-sm-inline-block w-25">
+        <img class="img-fluid max-width px-sm-1 pt-sm-1 px-md-3 pt-md-2" src="{% static 'images/default-badge.png' %}" style="max-height:10rem;">
+    </div>
+</div>
+<h2>About {{ project.name }}</h2>
+<p>{{ project.long_description|markdown }}</p>
+
+<hr>
+
+<div class="row">
+  <div class="col-md">
+    <h2>Project membership</h2>
+    <p>You have not joined <b>{{ project.name }}</b> yet.</p>
+    <div class="d-flex mb-3">
+      <div class="pr-3">
+        <a class="btn btn-primary btn-md" href="{{ project.join_url }}">Join&nbsp;project</a>
+      </div>
+      <div class="text-muted">
+        You'll review terms and permissions before finalizing authorization.
+      </div>
+    </div>
+    {% if requests_permissions %}
+    <h3>Permissions</h3>
+    {% include 'partials/activity-permissions-bs4.html' %}
+    {% endif %}
+    <hr class="d-md-none">
+  </div>
+  <div class="col-md">
+    {% if requesting_projects %}
+      <h2>Projects &amp; studies</h2>
+      <p class="mb-1">
+        You can use &amp; share your data from {{ project.name }} with the
+        following other projects:
+      </p>
+      <div class="d-flex flex-wrap p-2">
+        {% for req_project in requesting_projects %}
+        <div class="w-25">
+          <a href="{% url 'activity' req_project.slug %}">
+            <div class="d-flex justify-content-center">
+              <div>
+                <img src="{% static 'images/default-badge.png' %}" style="height:3rem;">
+              </div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <div class="small text-center" style="line-height:1.2;">{{ req_project.name }}</div>
+            </div>
+          </a>
+        </div>
+        {% endfor %}
+      </div>
+      <hr>
+    {% endif %}
+    {% if notebooks %}
+      <h2>Notebooks</h2>
+      <p>You can explore your data from {{ project.name }} with the
+        following <a href="{% url 'activity' 'junos-personal-data-exploratory' %}">personal
+        data notebooks</a>.
+      </p>
+      <ul>
+      {% for notebook in notebooks %}
+        <li><a href="{{ notebook.details_url }}">{{ notebook.name }}</a>
+          by <a href="{% url 'member-detail-direct' notebook.user %}">{{ notebook.user }}</a>
+        </li>
+      {% endfor %}
+      </ul>
+      <hr>
+    {% endif %}
+    <h2>Recent Members</h2>
+    <div class="d-flex py-2">
+      {% for member in recent_members %}
+      <div class="w-25">
+        <a href="{% url 'member-detail-direct' member.user.username %}">
+          <div class="d-flex justify-content-center">
+            <img src="{% static 'images/profile-placeholder.png' %}" style="height:2.5rem;">
+          </div>
+          <div class="d-flex justify-content-center">
+            <div class="small text-center" style="line-height:1.2;">{{ member.name }}</div>
+          </div>
+        </a>
+      </div>
+      {% endfor %}
+    </div>
+    <p>
+      <a href="{% url 'api:members-by-source' %}?source={{ project.id_label }}">See
+        all members...</a>
+    </p>
+    <hr>
+    <h2>Project information</h2>
+    <div>
+
+      {# repeat short partial from above w/ coordinator #}
+      {% include 'partials/activity-info-short-bs4.html' %}
+
+      {# member count, public data, launch date, info url, and contact email #}
+      <div class="mb-1">
+        <b class="mr-2">Joined by:</b>
+        <a href="{% url 'api:members-by-source' %}?source={{ project.id_label }}">
+        {{ project.authorized_members }} members</a>
+      </div>
+      {% if public_count %}
+      <div class="mb-1">
+        <b class="mr-2">Public data:</b> shared by
+        <a href="{% url 'api:public-data' %}?source={{ project.id_label }}">
+          {{ public_count }} members</a>
+      </div>
+      {% endif %}
+      <div class="mb-1">
+        <b class="mr-2">Launched:</b> {{ project.project_approval_date|date }}
+      </div>
+      <div class="mb-1">
+        <b class="mr-2">Project website:</b>
+        <a href="{{ project.info_url }}">{{ project.info_url }}</a>
+      </div>
+      <div class="mb-1">
+          <b class="mr-2">Contact email:</b>
+          <a href="mailto:{{ project.contact_email }}">{{ project.contact_email }}</a>
+      </div>
+
+      {# terms link for OAuth2 projects #}
+      {% if project.oauth2datarequestproject %}
+      <div class="mb-1">
+        <b class="mr-2">Project terms:</b>
+        <a href="{% if project.terms_url %}{{ project.terms_url }}{% else %}{{ project.info_url }}{% endif %}">Read here</a>
+      </div>
+      {% endif %}
+
+      {# describe permissions if any are requested #}
+      {% if requests_permissions %}
+      {% include 'partials/activity-permissions-bs4.html' %}
+      {% endif %}
+
+      {# describe returned data if source #}
+      {% if project.returned_data_description %}
+      <div class="d-flex mb-1">
+          <div class="pr-3">
+              <b>Uploaded&nbsp;data:</b>
+          </div>
+          <div class="text-muted">
+            {{ project.returned_data_description }}
+          </div>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endblock main %}
diff --git a/open_humans/templates/partials/activity-info-short-bs4.html b/open_humans/templates/partials/activity-info-short-bs4.html
new file mode 100644
index 000000000..a11f972c9
--- /dev/null
+++ b/open_humans/templates/partials/activity-info-short-bs4.html
@@ -0,0 +1,9 @@
+<div class="d-flex mb-1">
+  <div class="pr-3"><b>Managed by:</b></div>
+  <div>
+    {{ project.leader }}
+    {% if project.organization %}
+    <br><span class="text-muted">{{ project.organization}}</span>
+    {% endif %}
+  </div>
+</div>
\ No newline at end of file
diff --git a/open_humans/templates/partials/activity-permissions-bs4.html b/open_humans/templates/partials/activity-permissions-bs4.html
new file mode 100644
index 000000000..c2390ed3e
--- /dev/null
+++ b/open_humans/templates/partials/activity-permissions-bs4.html
@@ -0,0 +1,14 @@
+<div class="d-flex mb-1">
+    <div class="pr-3">
+        <b>Requested permissions:</b>
+    </div>
+    <div>
+        {% for source_project in project.requested_sources.all %}
+        <a href="{% url 'activity-management' source_project.slug %}">
+        {{ source_project.name }}</a><br>
+        {% endfor %}
+        {% if project.request_username_access %}
+        Username
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/open_humans/urls.py b/open_humans/urls.py
index 6c5ed95bc..c4992405b 100644
--- a/open_humans/urls.py
+++ b/open_humans/urls.py
@@ -34,6 +34,7 @@
     path("public-data/", include(public_data.urls, namespace="public-data")),
     # Simple pages
     path("", views.HomeView.as_view(), name="home"),
+    path("testview/", views.TestView.as_view(), name="testview"),
     path(
         "statistics/",
         views.StatisticView.as_view(template_name="pages/statistics.html"),
@@ -226,6 +227,11 @@
         member_views.MemberEmailView.as_view(),
         name="member-email",
     ),
+    re_path(
+        r"^activity2/(?P<slug>[A-Za-z0-9_-]+)/$",
+        views.ActivityView.as_view(),
+        name="activity",
+    ),
     re_path(
         r"^activity/(?P<source>[A-Za-z0-9_-]+)/$",
         views.ActivityManagementView.as_view(),
diff --git a/open_humans/views.py b/open_humans/views.py
index 39e2d4c82..472ee4734 100644
--- a/open_humans/views.py
+++ b/open_humans/views.py
@@ -8,9 +8,11 @@
 from django.shortcuts import redirect, render
 from django.urls import reverse, reverse_lazy
 from django.views.generic.base import TemplateView, View
+from django.views.generic.detail import DetailView
 from django.views.generic.edit import DeleteView, FormView
 
 import feedparser
+import requests
 
 from common.activities import activity_from_data_request_project
 from common.mixins import LargePanelMixin, NeverCacheMixin, PrivateMixin
@@ -288,6 +290,89 @@ def get_context_data(self, **kwargs):
         return context
 
 
+class TestView(NeverCacheMixin, TemplateView):
+    """
+    A view testing various global styles.
+    """
+
+    def dispatch(self, request, *args, **kwargs):
+        django_messages.error(request, "Test error message.")
+        django_messages.warning(request, "Test warning message.")
+        django_messages.success(request, "Test success message.")
+        django_messages.info(request, "Test info message.")
+        return super().dispatch(request, *args, **kwargs)
+
+    template_name = "base-bs4.html"
+
+
+class ActivityView(NeverCacheMixin, DetailView):
+    """
+    A public 'home' view for current and potential project members.
+    """
+
+    model = DataRequestProject
+    context_object_name = "project"
+    template_name = "member/activity.html"
+
+    def get_notebooks(self):
+        resp = requests.get(
+            "https://exploratory.openhumans.org/notebook_by_source/",
+            params={"source": self.object.name},
+        )
+        if not resp.status_code == 200:
+            return None
+
+        notebooks = resp.json()["notebooks"]
+        for notebook in notebooks:
+            if notebook["name"].endswith(".ipynb"):
+                notebook["name"] = notebook["name"][:-6]
+        return notebooks
+
+    def get_recent_members(self):
+        recent_members = self.object.project_members.filter(joined=True).order_by(
+            "-created"
+        )[:5]
+        return [pm.member for pm in recent_members]
+
+    def get_public_count(self):
+        public_users = [
+            pda.user
+            for pda in PublicDataAccess.objects.filter(data_source=self.object.id_label)
+            .filter(is_public=True)
+            .annotate(user=F("participant__member__user"))
+        ]
+        public_count = (
+            self.object.projectdatafile_set.exclude(completed=False)
+            .distinct("user")
+            .filter(user__in=public_users)
+            .count()
+        )
+        return public_count
+
+    def get_context_data(self, *args, **kwargs):
+        context = super().get_context_data(*args, **kwargs)
+
+        requesting_projects_filtered = self.object.requesting_projects.filter(
+            active=True
+        ).filter(approved=True)
+        requests_permissions = (
+            self.object.request_username_access
+            or self.object.requested_sources.exists()
+        )
+
+        context.update(
+            {
+                "notebooks": self.get_notebooks(),
+                "public_count": self.get_public_count(),
+                "recent_members": self.get_recent_members(),
+                "requesting_projects": requesting_projects_filtered,
+                "requests_permissions": requests_permissions,
+            }
+        )
+
+        return context
+
+
 class ActivityManagementView(NeverCacheMixin, LargePanelMixin, TemplateView):
     """
     A 'home' view for each activity, with sections for describing the activity,
diff --git a/static/css/oh-proj-theming.css b/static/css/oh-proj-theming.css
new file mode 100644
index 000000000..2bc195991
--- /dev/null
+++ b/static/css/oh-proj-theming.css
@@ -0,0 +1,261 @@
+/*-------------------------------------------------- */
+/* Colors
+-------------------------------------------------- */
+/* Text styles */
+body {
+  color: #333333;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 0.82rem;
+}
+body h1 {
+  font-size: 1.64rem;
+}
+body h2 {
+  font-size: 1.312rem;
+}
+body h3 {
+  font-size: 1.107rem;
+}
+body h4 {
+  font-size: 0.943rem;
+}
+
+footer {
+  font-size: 0.738rem;
+}
+
+@media (min-width: 576px) {
+  body {
+    font-size: 0.861rem;
+  }
+  body h1 {
+    font-size: 1.722rem;
+  }
+  body h2 {
+    font-size: 1.3776rem;
+  }
+  body h3 {
+    font-size: 1.16235rem;
+  }
+  body h4 {
+    font-size: 0.99015rem;
+  }
+
+  footer {
+    font-size: 0.7749rem;
+  }
+}
+@media (min-width: 768px) {
+  body {
+    font-size: 0.902rem;
+  }
+  body h1 {
+    font-size: 1.804rem;
+  }
+  body h2 {
+    font-size: 1.4432rem;
+  }
+  body h3 {
+    font-size: 1.2177rem;
+  }
+  body h4 {
+    font-size: 1.0373rem;
+  }
+
+  footer {
+    font-size: 0.8118rem;
+  }
+}
+@media (min-width: 992px) {
+  body {
+    font-size: 0.943rem;
+  }
+  body h1 {
+    font-size: 1.886rem;
+  }
+  body h2 {
+    font-size: 1.5088rem;
+  }
+  body h3 {
+    font-size: 1.27305rem;
+  }
+  body h4 {
+    font-size: 1.08445rem;
+  }
+
+  footer {
+    font-size: 0.8487rem;
+  }
+}
+@media (min-width: 1200px) {
+  body {
+    font-size: 0.984rem;
+  }
+  body h1 {
+    font-size: 1.968rem;
+  }
+  body h2 {
+    font-size: 1.5744rem;
+  }
+  body h3 {
+    font-size: 1.3284rem;
+  }
+  body h4 {
+    font-size: 1.1316rem;
+  }
+
+  footer {
+    font-size: 0.8856rem;
+  }
+}
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  color: #4d4d4d;
+  font-weight: 300;
+}
+
+code {
+  background-color: #fff1eb;
+  color: #f7763e;
+}
+
+a {
+  color: #009fa8;
+}
+a:hover, a:focus {
+  color: #008c94;
+  text-decoration: underline;
+}
+
+/* Navbar styles */
+body.oh-proj-template > main > div.container {
+  padding-top: 3.6rem;
+}
+
+.navbar-toggler-icon.custom-toggler {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74,193,200, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+}
+
+.navbar-toggler.custom-toggler {
+  border: 1px solid #009fa888;
+}
+
+.navbar.navbar-open-humans {
+  background-color: white;
+  border-radius: 0px;
+  border: 0px;
+  border-bottom: 1px solid #c9ecef;
+  font-size: 0.9rem;
+}
+.navbar.navbar-open-humans a.navbar-brand > img {
+  height: 1.3rem;
+}
+.navbar.navbar-open-humans .nav-item.active a {
+  color: #008c94;
+  background-color: #e6f9fa;
+}
+.navbar.navbar-open-humans .nav-link:hover {
+  text-decoration: underline;
+}
+.navbar.navbar-open-humans a.dropdown-item {
+  font-size: 0.9rem;
+  color: #009fa8;
+}
+.navbar.navbar-open-humans a.dropdown-item:hover, .navbar.navbar-open-humans a.dropdown-item:focus, .navbar.navbar-open-humans a.dropdown-item:active {
+  color: #008c94;
+  text-decoration: underline;
+  background-color: #e6f9fa;
+}
+
+/* Button styles */
+.btn-default {
+  background-color: white;
+  border: 2px solid #009fa8;
+  color: #009fa8;
+}
+.btn-default:hover, .btn-default:focus {
+  background-color: #e6f9fa;
+  border: 2px solid #009fa8;
+  color: #008c94;
+}
+
+.btn-primary-hollow {
+  background-color: white;
+  border: 2px solid #ff9161;
+  color: #009fa8;
+}
+.btn-primary-hollow:hover, .btn-primary-hollow:focus {
+  background-color: #fff1eb;
+  border: 2px solid #f7763e;
+  color: #008c94;
+}
+
+.btn-primary {
+  background-color: #ff9161;
+  border: 2px solid #ff9161;
+  color: white;
+}
+.btn-primary:hover, .btn-primary:focus {
+  background-color: #f7763e;
+  border-color: #f7763e;
+  color: white;
+}
+
+.btn-info {
+  background-color: #009fa8;
+  border: 2px solid #009fa8;
+}
+.btn-info:hover, .btn-info:focus {
+  background-color: #008c94;
+  border-color: #008c94;
+}
+
+.btn-xs {
+  padding: 3px 6px;
+  font-size: 0.75rem;
+}
+
+.login-button {
+  display: inline-block;
+  text-align: left;
+  width: 16rem;
+  color: white;
+}
+.login-button:hover, .login-button:focus {
+  color: white;
+  text-decoration: none;
+}
+
+.fb-button {
+  background-color: #4267B2;
+  border-color: #4267B2;
+  color: white;
+}
+.fb-button:hover, .fb-button:focus {
+  background-color: #34518c;
+  border-color: #34518c;
+  color: white;
+}
+.fb-button:hover:active, .fb-button:hover .active, .fb-button:focus:active, .fb-button:focus .active {
+  background-color: #34518c;
+  border-color: #34518c;
+  color: white;
+}
+
+.google-button {
+  background-color: #4285F4;
+  border-color: #4285F4;
+  color: white;
+}
+.google-button:hover, .google-button:focus {
+  background-color: #3367d6;
+  border-color: #3367d6;
+  color: white;
+}
+.google-button:hover:active, .google-button:hover .active, .google-button:focus:active, .google-button:focus .active {
+  background-color: #3367d6;
+  border-color: #3367d6;
+  color: white;
+}
+
+/*# sourceMappingURL=oh-proj-theming.css.map */
diff --git a/static/images/default-badge.png b/static/images/default-badge.png
index 44f404336..2d596fbc1 100644
Binary files a/static/images/default-badge.png and b/static/images/default-badge.png differ
diff --git a/static/images/default-badge.svg b/static/images/default-badge.svg
new file mode 100644
index 000000000..99d1a8347
--- /dev/null
+++ b/static/images/default-badge.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg9259"
+   width="95.199997"
+   height="95.199997"
+   viewBox="0 0 95.199997 95.199997"
+   sodipodi:docname="default-badge.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   inkscape:export-filename="/home/mad/projects/open-humans/static/images/default-badge.png"
+   inkscape:export-xdpi="540.84003"
+   inkscape:export-ydpi="540.84003">
+  <metadata
+     id="metadata9265">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs9263" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3066"
+     inkscape:window-height="1689"
+     id="namedview9261"
+     showgrid="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-nodes="true"
+     inkscape:zoom="3.8051472"
+     inkscape:cx="-109.01589"
+     inkscape:cy="73.075165"
+     inkscape:window-x="134"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg9259">
+    <inkscape:grid
+       type="xygrid"
+       id="grid9286" />
+  </sodipodi:namedview>
+  <circle
+     style="opacity:1;fill:#ffceb9;fill-opacity:1;stroke:none;stroke-width:4.67436981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:1.41420996;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path9269"
+     cx="47.5"
+     cy="47.699997"
+     r="44.5" />
+  <ellipse
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#4ac1c8;stroke-width:7.67122459;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:1.41420996;stroke-dasharray:15.34244941, 15.34244941;stroke-dashoffset:0;stroke-opacity:1"
+     id="path9269-3"
+     cx="47.5"
+     cy="47.699997"
+     rx="43.664387"
+     ry="43.664391" />
+</svg>
diff --git a/static/js/main-bs4.js b/static/js/main-bs4.js
new file mode 100644
index 000000000..684e01754
--- /dev/null
+++ b/static/js/main-bs4.js
@@ -0,0 +1,95 @@
+/*global webshim:true*/
+
+'use strict';
+
+var enableCsrf = require('./lib/enable-csrf.js');
+
+require('drmonty-garlicjs');
+require('webshim');
+
+enableCsrf($);
+
+// Specifically so IE will support the HTML5 form attribute on <input> elements
+webshim.setOptions('basePath', '/static/vendor/shims/');
+webshim.polyfill('forms');
+
+function parsleyForm(element) {
+  return $(element).parsley({
+    successClass: 'has-success',
+    errorClass: 'has-error',
+    trigger: 'change keyup focusout',
+    classHandler: function (field) {
+      if (field.$element.attr('type') === 'radio') {
+        return $('input[type=radio][name=' + field.$element.attr('name') + ']')
+          .parents('.radio');
+      }
+
+      return field.$element.parents('.form-group');
+    },
+    errorsContainer: function (field) {
+      var $field = field.$element;
+
+      if (field.$element.attr('type') === 'radio') {
+        $field = $('input[type=radio][name=' + field.$element.attr('name') +
+          ']:last').parent().parent();
+
+        return $('<span></span>').insertAfter($field);
+      }
+
+      if (field.$element.parent('.input-group')) {
+        $field = field.$element.parent('.input-group');
+      }
+
+      return $('<span></span>').insertAfter($field);
+    },
+    errorsWrapper: '<span class="help-block"></span>',
+    errorTemplate: '<div></div>'
+  });
+}
+
+function showModal(modalId) {
+  return function (e) {
+    // Allow for middle-clicking, control-clicking, and command-clicking
+    if (e.isDefaultPrevented() || e.metaKey || e.ctrlKey) {
+      return;
+    }
+
+    e.preventDefault();
+
+    $(modalId).modal({remote: false});
+  };
+}
+
+function storeRedirect(){
+  var location = window.location.href;
+
+  // Make a POST, but not asynchronously!
+  $.ajax({ type: 'POST',
+           url: '/account/storeredirect/',
+           data: {next_url: location},
+           success: function(){},
+           async:false });
+}
+
+$(function () {
+  $('[rel=persist]').garlic();
+
+  parsleyForm('form');
+
+  $('.logout-link').click(function (e) {
+    console.log("Clicked logout link");
+    e.preventDefault();
+
+    $.post($(this).attr('href'), function () {
+      location.reload();
+    });
+  });
+
+  // Add these modals with JavaScript rather than data- attributes to prevent
+  // AJAX loading of modal content by Bootstrap.
+  $('.login-link').click(showModal('#login-modal'));
+  $('.signup-link').click(showModal('#signup-modal'));
+
+  // POST current URL to be stored as a redirect link upon login/signup
+  $('.redirect-storage-link').click(storeRedirect);
+});
diff --git a/static/scss/oh-proj-theming.scss b/static/scss/oh-proj-theming.scss
new file mode 100644
index 000000000..11486bc94
--- /dev/null
+++ b/static/scss/oh-proj-theming.scss
@@ -0,0 +1,299 @@
+/*-------------------------------------------------- */
+/* Colors
+-------------------------------------------------- */
+$oh-teal-verylight: #e6f9fa;
+$oh-teal-light: #c9ecef;
+$oh-teal: #4ac1c8;
+$oh-teal-dark: #009fa8;
+$oh-teal-verydark: #008c94;
+
+$oh-orange-verylight: #fff1eb;
+$oh-orange-light: #ffceb9;
+$oh-orange: #ff9161;
+$oh-orange-dark: #f7763e;
+
+$oh-gray-dark: #4d4d4d;
+$oh-gray-verydark: #333333;
+
+$xs-text-base: 0.82rem;
+$text-footer-mult: 0.9;
+$text-h1-mult: 2.0;
+$text-h2-mult: 1.6;
+$text-h3-mult: 1.35;
+$text-h4-mult: 1.15;
+$text-sm-mult: 1.05;
+$text-md-mult: 1.1;
+$text-lg-mult: 1.15;
+$text-xl-mult: 1.2;
+
+/* Text styles */
+
+body {
+  color: $oh-gray-verydark;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+  font-size: $xs-text-base;
+  h1 {
+    font-size: $xs-text-base * $text-h1-mult;
+  }
+  h2 {
+    font-size: $xs-text-base * $text-h2-mult;
+  }
+  h3 {
+    font-size: $xs-text-base * $text-h3-mult;
+  }
+  h4 {
+    font-size: $xs-text-base * $text-h4-mult;
+  }
+}
+footer {
+  font-size: $xs-text-base * $text-footer-mult;
+}
+@media (min-width: 576px) {
+  body {
+    font-size: $xs-text-base * $text-sm-mult;
+    h1 {
+      font-size: $xs-text-base * $text-h1-mult * $text-sm-mult;
+    }
+    h2 {
+      font-size: $xs-text-base * $text-h2-mult * $text-sm-mult;
+    }
+    h3 {
+      font-size: $xs-text-base * $text-h3-mult * $text-sm-mult;
+    }
+    h4 {
+      font-size: $xs-text-base * $text-h4-mult * $text-sm-mult;
+    }
+  }
+  footer {
+    font-size: $xs-text-base * $text-footer-mult * $text-sm-mult;
+  }
+}
+@media (min-width: 768px) {
+  body {
+    font-size: $xs-text-base * $text-md-mult;
+    h1 {
+      font-size: $xs-text-base * $text-h1-mult  * $text-md-mult;
+    }
+    h2 {
+      font-size: $xs-text-base * $text-h2-mult * $text-md-mult;
+    }
+    h3 {
+      font-size: $xs-text-base * $text-h3-mult * $text-md-mult;
+    }
+    h4 {
+      font-size: $xs-text-base * $text-h4-mult * $text-md-mult;
+    }
+  }
+  footer {
+    font-size: $xs-text-base * $text-footer-mult * $text-md-mult;
+  }
+}
+@media (min-width: 992px) {
+  body {
+    font-size: $xs-text-base * $text-lg-mult;
+    h1 {
+      font-size: $xs-text-base * $text-h1-mult  * $text-lg-mult;
+    }
+    h2 {
+      font-size: $xs-text-base * $text-h2-mult * $text-lg-mult;
+    }
+    h3 {
+      font-size: $xs-text-base * $text-h3-mult * $text-lg-mult;
+    }
+    h4 {
+      font-size: $xs-text-base * $text-h4-mult * $text-lg-mult;
+    }
+  }
+  footer {
+    font-size: $xs-text-base * $text-footer-mult * $text-lg-mult;
+  }
+}
+@media (min-width: 1200px) {
+  body {
+    font-size: $xs-text-base * $text-xl-mult;
+    h1 {
+      font-size: $xs-text-base * $text-h1-mult  * $text-xl-mult;
+    }
+    h2 {
+      font-size: $xs-text-base * $text-h2-mult * $text-xl-mult;
+    }
+    h3 {
+      font-size: $xs-text-base * $text-h3-mult * $text-xl-mult;
+    }
+    h4 {
+      font-size: $xs-text-base * $text-h4-mult * $text-xl-mult;
+    }
+  }
+  footer {
+    font-size: $xs-text-base * $text-footer-mult * $text-xl-mult;
+  }
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  color: $oh-gray-dark;
+  font-weight: 300;
+}
+
+code {
+  background-color: $oh-orange-verylight;
+  color: $oh-orange-dark;
+}
+
+a {
+  color: $oh-teal-dark;
+
+  &:hover, &:focus {
+    color: $oh-teal-verydark;
+    text-decoration: underline;
+  }
+}
+
+/* Navbar styles */
+
+body.oh-proj-template > main > div.container {
+  padding-top: 3.6rem;
+}
+
+.navbar-toggler-icon.custom-toggler {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74,193,200, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+}
+
+.navbar-toggler.custom-toggler {
+  border: 1px solid #009fa888;
+}
+
+.navbar.navbar-open-humans {
+  background-color: white;
+  border-radius: 0px;
+  border: 0px;
+  border-bottom: 1px solid $oh-teal-light;
+  font-size: 0.9rem;
+
+  a.navbar-brand > img {
+    height: 1.3rem;
+  }
+
+  .nav-item.active {
+    a {
+      color: $oh-teal-verydark;
+      background-color: $oh-teal-verylight;
+    }
+  }
+
+  .nav-link:hover {
+    text-decoration: underline;
+  }
+
+  a.dropdown-item {
+    font-size: 0.9rem;
+    color: $oh-teal-dark;
+
+    &:hover, &:focus, &:active {
+      color: $oh-teal-verydark;
+      text-decoration: underline;
+      background-color: $oh-teal-verylight;
+    }
+  }
+}
+
+/* Button styles */
+
+.btn-default {
+  background-color: white;
+  border: 2px solid $oh-teal-dark;
+  color: $oh-teal-dark;
+
+  &:hover, &:focus {
+    background-color: $oh-teal-verylight;
+    border: 2px solid $oh-teal-dark;
+    color: $oh-teal-verydark;
+  }
+}
+
+.btn-primary-hollow {
+  background-color: white;
+  border: 2px solid $oh-orange;
+  color: $oh-teal-dark;
+
+  &:hover, &:focus {
+    background-color: $oh-orange-verylight;
+    border: 2px solid $oh-orange-dark;
+    color: $oh-teal-verydark;
+  }
+}
+
+.btn-primary {
+  background-color: $oh-orange;
+  border: 2px solid $oh-orange;
+  color: white;
+
+  &:hover, &:focus {
+    background-color: $oh-orange-dark;
+    border-color: $oh-orange-dark;
+    color: white;
+  }
+}
+
+.btn-info {
+  background-color: $oh-teal-dark;
+  border: 2px solid $oh-teal-dark;
+
+  &:hover, &:focus {
+    background-color: $oh-teal-verydark;
+    border-color: $oh-teal-verydark;
+  }
+}
+
+.btn-xs {
+  padding: 3px 6px;
+  font-size: 0.75rem;
+}
+
+.login-button {
+  display: inline-block;
+  text-align: left;
+  width: 16rem;
+  color: white;
+
+  &:hover, &:focus {
+    color: white;
+    text-decoration: none;
+  }
+}
+
+.fb-button {
+  background-color: #4267B2;
+  border-color: #4267B2;
+  color: white;
+
+  &:hover, &:focus {
+    background-color: #34518c;
+    border-color: #34518c;
+    color: white;
+
+    &:active, .active {
+      background-color: #34518c;
+      border-color: #34518c;
+      color: white;
+    }
+  }
+}
+
+.google-button {
+  background-color: #4285F4;
+  border-color: #4285F4;
+  color: white;
+
+  &:hover, &:focus {
+    background-color: #3367d6;
+    border-color: #3367d6;
+    color: white;
+
+    &:active, .active {
+      background-color: #3367d6;
+      border-color: #3367d6;
+      color: white;
+    }
+  }
+}