diff --git a/bdit-flashcrow.code-workspace b/bdit-flashcrow.code-workspace
index c759a085d..eb22aba6d 100644
--- a/bdit-flashcrow.code-workspace
+++ b/bdit-flashcrow.code-workspace
@@ -3,10 +3,10 @@
 		"recommendations": [
 			"cpylua.language-postcss",
 			"dbaeumer.vscode-eslint",
-			"jcbuisson.vue",
 			"ms-python.python",
-			"ms-vscode-remote.vscode-remote-extensionpack",
-			"thibaudcolas.stylelint"
+      "ms-vscode-remote.vscode-remote-extensionpack",
+      "octref.vetur",
+			"stylelint.vscode-stylelint"
 		]
 	},
 	"folders": [
diff --git a/lib/Constants.js b/lib/Constants.js
index 186755155..32a2f5b55 100644
--- a/lib/Constants.js
+++ b/lib/Constants.js
@@ -524,7 +524,7 @@ class StudyHours extends Enum {
       return 'Please specify your desired schedule below';
     }
     const { times } = this;
-    const timesParts = times.map(([start, end]) => `${start}\u2013${end}`);
+    const timesParts = times.map(([start, end]) => `${start} -- ${end}`);
     return timesParts.join(', ');
   }
 }
diff --git a/lib/controller/AuthController.js b/lib/controller/AuthController.js
index fe09e4e77..8889e1818 100644
--- a/lib/controller/AuthController.js
+++ b/lib/controller/AuthController.js
@@ -100,7 +100,7 @@ AuthController.push({
       return h.redirect(config.PUBLIC_PATH);
     } catch (err) {
       request.log(LogTag.ERROR, err);
-      return h.redirect('/login');
+      return h.redirect('/');
     }
   },
 });
diff --git a/lib/i18n/Strings.js b/lib/i18n/Strings.js
index 8dffbc9ec..f8bb627cb 100644
--- a/lib/i18n/Strings.js
+++ b/lib/i18n/Strings.js
@@ -43,6 +43,15 @@ const REQUEST_STUDY_NOT_FOUND = {
   text: 'Could not find study request.',
 };
 
+/*
+ * @memberof Strings
+ * @type {StringMessage}
+ */
+const REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE = {
+  variant: 'info',
+  text: 'Please provide a due date for this request.',
+};
+
 /*
  * @memberof Strings
  * @type {StringMessage}
@@ -148,6 +157,7 @@ const Strings = {
   OPTIONAL,
   REQUEST_STUDY_FORBIDDEN,
   REQUEST_STUDY_NOT_FOUND,
+  REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
   REQUEST_STUDY_PROVIDE_URGENT_REASON,
   REQUEST_STUDY_REQUIRES_LOCATION,
   REQUEST_STUDY_REQUIRES_REASONS,
@@ -165,6 +175,7 @@ export {
   OPTIONAL,
   REQUEST_STUDY_FORBIDDEN,
   REQUEST_STUDY_NOT_FOUND,
+  REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
   REQUEST_STUDY_PROVIDE_URGENT_REASON,
   REQUEST_STUDY_REQUIRES_LOCATION,
   REQUEST_STUDY_REQUIRES_REASONS,
diff --git a/lib/reports/format/FormatCss.js b/lib/reports/format/FormatCss.js
index 8522b9e0b..7b29bff92 100644
--- a/lib/reports/format/FormatCss.js
+++ b/lib/reports/format/FormatCss.js
@@ -11,7 +11,7 @@ import { InvalidCssVariableError } from '@/lib/error/MoveErrors';
  */
 
 /**
- * Parses CSS variables from `web/css/main.postcss`.
+ * Parses CSS variables from `web/css/main.scss`.
  */
 class FormatCss {
   /**
@@ -53,7 +53,7 @@ class FormatCss {
   }
 
   /**
-   * Initializes `FormatCss.vars` from `main.postcss`.
+   * Initializes `FormatCss.vars` from `main.scss`.
    *
    * @returns {Promise<undefined>}
    */
@@ -66,7 +66,7 @@ class FormatCss {
       try {
         const tdsPostcssPath = path.resolve(
           __dirname,
-          '../../../web/css/main.postcss',
+          '../../../web/css/main.scss',
         );
         const tdsPostcss = readline.createInterface({
           input: fs.createReadStream(tdsPostcssPath),
diff --git a/lib/time/DateTime.js b/lib/time/DateTime.js
index d20e11ab8..d3d6041b0 100644
--- a/lib/time/DateTime.js
+++ b/lib/time/DateTime.js
@@ -46,4 +46,9 @@ DateTime.fromJSON = function fromJSON(value) {
   return DateTime.fromSQL(value);
 };
 
+DateTime.fromLocaleString = function fromLocaleString(str) {
+  // TODO: get format from locale
+  return DateTime.fromFormat(str, 'M/d/yyyy');
+};
+
 export default DateTime;
diff --git a/package.json b/package.json
index 15717460a..fbbbf838f 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "*.js": [
       "vue-cli-service lint"
     ],
-    "*.postcss": [
+    "*.scss": [
       "stylelint"
     ],
     "*.py": [
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 000000000..2e7d3101d
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,7 @@
+/*
+ * This file indicates to `vuetify-loader` that Vuetify variable overrides are found at
+ * `@/styles/variables.scss`.  However, we map `@` to the application root in order to
+ * share code between client and server.
+ *
+ * You can edit these styles at `styles/variables.scss` (without `src` in front).
+ */
diff --git a/styles/variables.scss b/styles/variables.scss
new file mode 100644
index 000000000..ddf524f0b
--- /dev/null
+++ b/styles/variables.scss
@@ -0,0 +1,53 @@
+$headings: (
+  'h1': (
+    'size': 3rem,
+    'weight': normal,
+    'line-height': 3.5rem
+  ),
+  'h2': (
+    'size': 2.25rem,
+    'weight': normal,
+    'line-height': 2.5rem
+  ),
+  'h3': (
+    'size': 1.5rem,
+    'weight': 500,
+    'line-height': 1.6875rem
+  ),
+  'h4': (
+    'size': 1.25rem,
+    'weight': normal,
+    'line-height': 1.4375rem
+  ),
+  'h5': (
+    'size': 1rem,
+    'weight': 500,
+    'line-height': 1.25rem
+  ),
+  'h6': (
+    'size': 0.875rem,
+    'weight': 500,
+    'line-height': 1.25rem
+  ),
+  'subtitle-1': (
+    'size': 0.875rem,
+    'weight': normal,
+    'line-height': 1rem
+  ),
+  'subtitle-2': (
+    'size': 0.75rem,
+    'weight': normal,
+    'line-height': 1rem
+  ),
+  'body-1': (
+    'size': 0.875rem,
+    'weight': normal,
+    'line-height': 1.25rem
+  )
+);
+
+$data-table-regular-header-font-size: map-get(map-get($headings, 'h6'), 'size');
+$data-table-regular-row-font-size: map-get(map-get($headings, 'body-1'), 'size');
+$tab-font-size: map-get(map-get($headings, 'h6'), 'size');
+$tab-font-weight: map-get(map-get($headings, 'h6'), 'weight');
+$tabs-item-letter-spacing: 0;
diff --git a/tests/jest/unit/time/DateTime.spec.js b/tests/jest/unit/time/DateTime.spec.js
index ccc6534aa..50517ea86 100644
--- a/tests/jest/unit/time/DateTime.spec.js
+++ b/tests/jest/unit/time/DateTime.spec.js
@@ -14,6 +14,16 @@ test('DateTime.local', () => {
   });
 });
 
+test('DateTime.fromLocaleString', () => {
+  const actual = DateTime.fromLocaleString('2/18/2020');
+  const expected = DateTime.fromObject({
+    year: 2020,
+    month: 2,
+    day: 18,
+  });
+  expect(actual.equals(expected)).toBe(true);
+});
+
 test('DateTime.fromJSDate', () => {
   const dt = DateTime.fromJSDate(new Date());
   expect(dt.zone).toEqual({
diff --git a/web/App.vue b/web/App.vue
index 1a527e5e3..b917405d5 100644
--- a/web/App.vue
+++ b/web/App.vue
@@ -1,32 +1,14 @@
 <template>
   <v-app id="fc_app">
-    <div class="d-none">
-      <form
-        v-if="auth.loggedIn"
-        ref="formSignOut"
-        method="POST"
-        action="/api/auth/logout">
-        <input type="hidden" name="csrf" :value="auth.csrf" />
-      </form>
-      <form
-        v-if="$route.name !== 'adfsCallback'"
-        ref="formSignIn"
-        method="POST"
-        action="/api/auth/adfs-init">
-        <input type="hidden" name="csrf" :value="auth.csrf" />
-        <input type="hidden" name="nonce" :value="nonce" />
-      </form>
-    </div>
     <v-snackbar
       v-if="hasToast"
       v-model="hasToast"
-      :color="toast.variant">
-      {{toast.text}}
-      <v-btn
-        text
-        @click="hasToast = false">
-        Close
-      </v-btn>
+      bottom
+      class="fc-toast"
+      :color="toast.variant"
+      left
+      :timeout="10000">
+      <span class="body-1">{{toast.text}}</span>
     </v-snackbar>
     <v-navigation-drawer
       app
@@ -43,6 +25,13 @@
         class="d-flex fill-height flex-column justify-center"
         dense>
         <FcDashboardNavItem
+          :active-route-names="[
+            'requestStudyEdit',
+            'requestStudyNew',
+            'requestStudyView',
+            'viewDataAtLocation',
+            'viewReportsAtLocation',
+          ]"
           icon="map"
           label="View Map"
           :to="{ name: 'viewData' }" />
@@ -52,38 +41,7 @@
           :to="{ name: 'requestsTrack' }" />
       </v-list>
       <template v-slot:append>
-        <div class="text-center pb-2">
-          <v-menu
-            v-if="auth.loggedIn"
-            top>
-            <template v-slot:activator="{ on }">
-              <v-btn
-                v-on="on"
-                icon
-                small>
-                <v-icon>mdi-account</v-icon>
-              </v-btn>
-            </template>
-            <v-list>
-              <v-list-item
-                v-for="({ label, value }, i) in userActions"
-                :key="i"
-                @click="onUserAction(value)">
-                <v-list-item-title>{{label}}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-          <v-btn
-            v-else
-            :disabled="$route.name === 'adfsCallback'"
-            fab
-            icon
-            :loading="$route.name === 'adfsCallback'"
-            small
-            @click="onClickLogin">
-            <v-icon>mdi-login</v-icon>
-          </v-btn>
-        </div>
+        <FcDashboardNavUser />
       </template>
     </v-navigation-drawer>
     <v-content>
@@ -97,27 +55,19 @@
 </template>
 
 <script>
-import Vue from 'vue';
-import {
-  mapActions,
-  mapGetters,
-  mapMutations,
-  mapState,
-} from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
-import '@/web/css/main.postcss';
+import '@/web/css/main.scss';
 
-import ClientNonce from '@/lib/auth/ClientNonce';
-import FcDashboardNavItem from '@/web/components/FcDashboardNavItem.vue';
+import FcDashboardNavItem from '@/web/components/nav/FcDashboardNavItem.vue';
+import FcDashboardNavUser from '@/web/components/nav/FcDashboardNavUser.vue';
 
 export default {
   name: 'App',
   components: {
     FcDashboardNavItem,
-  },
-  data() {
-    return { nonce: null };
+    FcDashboardNavUser,
   },
   computed: {
     hasToast: {
@@ -130,46 +80,32 @@ export default {
         }
       },
     },
-    userActions() {
-      return [{ label: 'Log out', value: 'logout' }];
-    },
     ...mapState([
       'auth',
       'location',
       'toast',
     ]),
-    ...mapGetters(['username']),
   },
   methods: {
-    onClickLogin() {
-      this.nonce = ClientNonce.get(16);
-      window.localStorage.setItem('nonce', this.nonce);
-      Vue.nextTick(() => {
-        this.$refs.formSignIn.submit();
-      });
-    },
-    onModalToggle() {
-      if (!this.$refs.modalToggle.checked) {
-        this.clearModal();
-      }
-    },
-    onUserAction(action) {
-      if (action === 'logout') {
-        this.$refs.formSignOut.submit();
-      }
-    },
-    onViewData() {
-      if (this.location === null) {
-        return;
-      }
-      const { centrelineId, centrelineType } = this.location;
-      this.$router.push({
-        name: 'viewDataAtLocation',
-        params: { centrelineId, centrelineType },
-      });
-    },
-    ...mapActions(['setToast']),
     ...mapMutations(['clearToast']),
   },
 };
 </script>
+
+<style lang="scss">
+#fc_app {
+  color: var(--v-default-base);
+  font-size: 0.875rem;
+  font-weight: normal;
+  line-height: 1.25rem;
+
+  & .fc-toast {
+    left: 76px;
+  }
+
+  & .v-input--selection-controls__input + .v-label {
+    color: var(--v-default-base);
+    padding-left: 24px;
+  }
+}
+</style>
diff --git a/web/components/FcCommentsStudyRequest.vue b/web/components/FcCommentsStudyRequest.vue
index 04b6101b0..b2761e9a0 100644
--- a/web/components/FcCommentsStudyRequest.vue
+++ b/web/components/FcCommentsStudyRequest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="fc-comments-study-request mb-4 pa-5">
-    <h2>Comments</h2>
+    <h2 class="headline">Comments</h2>
     <div class="fc-comment-new">
       <v-textarea
         v-model="commentText"
@@ -12,13 +12,13 @@
         placeholder="Compose message"
         rows="4"></v-textarea>
       <div class="text-right">
-        <v-btn
-          color="primary"
+        <FcButton
           :disabled="commentText.length === 0 || charsRemaining < 0"
           :loading="loadingAddComment"
+          type="primary"
           @click="actionAddComment">
           Submit
-        </v-btn>
+        </FcButton>
       </div>
     </div>
     <section
@@ -27,27 +27,27 @@
       class="mt-4">
       <header class="align-top d-flex">
         <div>
-          <div>
-            <strong
+          <div class="default--text font-weight-medium subtitle-2">
+            <span
               v-if="comment.userId === auth.user.id">
               {{auth.user.uniqueName}}
-            </strong>
-            <strong
+            </span>
+            <span
               v-else-if="studyRequestCommentUsers.has(comment.userId)">
               {{studyRequestCommentUsers.get(comment.userId).uniqueName}}
-            </strong>
+            </span>
           </div>
-          <div>
+          <div class="subtitle-1 mt-1">
             {{comment.createdAt | dateTime}}
           </div>
         </div>
         <div class="flex-fill"></div>
-        <v-btn
+        <FcButton
           v-if="auth.user.id === comment.userId"
-          icon
+          type="icon"
           @click="actionDeleteComment(i)">
           <v-icon>mdi-delete</v-icon>
-        </v-btn>
+        </FcButton>
       </header>
       <div class="mt-2 mb-4">
         {{ comment.comment }}
@@ -63,9 +63,13 @@ import {
   deleteStudyRequestComment,
   postStudyRequestComment,
 } from '@/lib/api/WebApi';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 
 export default {
   name: 'FcCommentsStudyRequest',
+  components: {
+    FcButton,
+  },
   props: {
     sizeLimit: Number,
     studyRequest: Object,
diff --git a/web/components/FcDataTable.vue b/web/components/FcDataTable.vue
index e63f6b6b0..915641aef 100644
--- a/web/components/FcDataTable.vue
+++ b/web/components/FcDataTable.vue
@@ -2,6 +2,7 @@
   <v-data-table
     v-model="internalValue"
     :caption="caption"
+    class="fc-data-table"
     :custom-sort="customSort"
     disable-filtering
     disable-pagination
@@ -45,10 +46,6 @@ export default {
       default: null,
     },
     columns: Array,
-    expandable: {
-      type: Boolean,
-      default: false,
-    },
     items: Array,
     loading: {
       type: Boolean,
@@ -87,3 +84,14 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.fc-data-table.v-data-table {
+  &.theme--light tbody tr.v-data-table__selected {
+    background: var(--v-accent-lighten2);
+    & .v-data-table__checkbox .v-icon.v-icon {
+      color: var(--v-primary-base);
+    }
+  }
+}
+</style>
diff --git a/web/components/FcDataTableStudies.vue b/web/components/FcDataTableStudies.vue
index 05cd710a0..dc5d12e4c 100644
--- a/web/components/FcDataTableStudies.vue
+++ b/web/components/FcDataTableStudies.vue
@@ -22,22 +22,23 @@
       </span>
     </template>
     <template v-slot:item.VIEW_REPORT="{ item }">
-      <v-btn
-        color="primary"
-        text
+      <FcButton
+        type="tertiary"
         @click="$emit('show-reports', item)">
         <span>View Report</span>
-      </v-btn>
+      </FcButton>
     </template>
   </FcDataTable>
 </template>
 
 <script>
 import FcDataTable from '@/web/components/FcDataTable.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 
 export default {
   name: 'FcDataTableStudies',
   components: {
+    FcButton,
     FcDataTable,
   },
   props: {
diff --git a/web/components/FcDetailsStudy.vue b/web/components/FcDetailsStudy.vue
index 83e909376..fc507c916 100644
--- a/web/components/FcDetailsStudy.vue
+++ b/web/components/FcDetailsStudy.vue
@@ -1,10 +1,9 @@
 <template>
   <section>
-    <v-divider class="my-3"></v-divider>
-    <h2>{{internalValue.studyType.label}}</h2>
+    <h2 class="display-1">{{internalValue.studyType.label}}</h2>
 
     <div class="mt-4">
-      <h3>Study Days</h3>
+      <h3 class="headline">Study Days</h3>
       <FcCheckboxGroupChips
         v-model="v.daysOfWeek.$model"
         :items="itemsDaysOfWeek"></FcCheckboxGroupChips>
@@ -15,7 +14,7 @@
     </div>
 
     <div v-if="internalValue.studyType.automatic" class="mt-4">
-      <h3>Study Duration</h3>
+      <h3 class="headline">Study Duration</h3>
       <FcRadioGroup
         v-model="v.duration.$model"
         :items="[
@@ -30,9 +29,10 @@
     <div
       v-else
       class="mt-4">
-      <h3>Study Hours</h3>
+      <h3 class="headline">Study Hours</h3>
       <FcRadioGroup
         v-model="internalValue.hours"
+        hide-details
         :items="itemsHours" />
     </div>
 
@@ -43,6 +43,7 @@
       :messages="messagesNotes"
       no-resize
       outlined
+      placeholder="Additional Information"
       rows="4"
       @blur="v.notes.$touch()"></v-textarea>
   </section>
diff --git a/web/components/FcDetailsStudyRequest.vue b/web/components/FcDetailsStudyRequest.vue
index 84a0f6967..d7d226776 100644
--- a/web/components/FcDetailsStudyRequest.vue
+++ b/web/components/FcDetailsStudyRequest.vue
@@ -1,18 +1,21 @@
 <template>
   <section>
     <div class="mt-4">
-      <h3>311 Information</h3>
-      <v-text-field
-        v-model="internalValue.serviceRequestId"
-        class="mt-2"
-        :messages="[OPTIONAL.text]"
-        outlined
-        placeholder="Service Number">
-      </v-text-field>
+      <h3 class="headline">311 Information</h3>
+      <v-row>
+        <v-col cols="8">
+          <v-text-field
+            v-model="internalValue.serviceRequestId"
+            :messages="[OPTIONAL.text]"
+            outlined
+            placeholder="Service Number">
+          </v-text-field>
+        </v-col>
+      </v-row>
     </div>
 
     <div class="mt-4">
-      <h3>Reasons</h3>
+      <h3 class="headline">Reasons</h3>
       <FcCheckboxGroupChips
         v-model="v.reasons.$model"
         :items="itemsReasons"></FcCheckboxGroupChips>
@@ -23,9 +26,10 @@
     </div>
 
     <div class="mt-4">
-      <h3>Escalate Priority</h3>
+      <h3 class="headline">Escalate Priority</h3>
       <v-checkbox
         v-model="internalValue.urgent"
+        class="mt-1"
         label="Urgent"
         :messages="[OPTIONAL.text]" />
       <template v-if="internalValue.urgent">
@@ -36,25 +40,35 @@
           :messages="[REQUEST_STUDY_PROVIDE_URGENT_REASON.text]"
           no-resize
           outlined
+          placeholder="Additional Information"
           rows="4"
           @blur="v.urgentReason.$touch()"></v-textarea>
-        <FcDatePicker
-          v-model="v.dueDate.$model"
-          class="mt-3"
-          label="Due Date"
-          :min="minDueDate">
-        </FcDatePicker>
+        <v-row>
+          <v-col cols="8">
+            <FcDatePicker
+              v-model="v.dueDate.$model"
+              class="mt-3"
+              :error-messages="errorMessagesDueDate"
+              :messages="[REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE.text]"
+              :min="minDueDate"
+              placeholder="Due Date">
+            </FcDatePicker>
+          </v-col>
+        </v-row>
       </template>
     </div>
 
     <div class="mt-4">
-      <h3>Inform Other Staff</h3>
-      <FcInputTextArray
-        v-model="v.ccEmails.$model" />
-      <v-messages
-        class="mt-1"
-        color="error"
-        :value="errorMessagesCcEmails"></v-messages>
+      <h3 class="headline">Inform Other Staff</h3>
+      <v-row>
+        <v-col cols="8">
+          <FcInputTextArray
+            v-model="v.ccEmails.$model"
+            :error-messages="errorMessagesCcEmails"
+            :messages="[OPTIONAL.text]"
+            placeholder="Staff Email" />
+        </v-col>
+      </v-row>
     </div>
   </section>
 </template>
@@ -62,11 +76,13 @@
 <script>
 import { mapState } from 'vuex';
 
+import ArrayUtils from '@/lib/ArrayUtils';
 import {
   StudyRequestReason,
 } from '@/lib/Constants';
 import {
   OPTIONAL,
+  REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
   REQUEST_STUDY_PROVIDE_URGENT_REASON,
   REQUEST_STUDY_REQUIRES_REASONS,
 } from '@/lib/i18n/Strings';
@@ -89,6 +105,7 @@ export default {
   data() {
     return {
       OPTIONAL,
+      REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
       REQUEST_STUDY_PROVIDE_URGENT_REASON,
     };
   },
@@ -108,6 +125,16 @@ export default {
       });
       return errors;
     },
+    errorMessagesDueDate() {
+      const errors = [];
+      if (!this.v.dueDate.$dirty) {
+        return errors;
+      }
+      if (!this.v.dueDate.required) {
+        errors.push(REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE.text);
+      }
+      return errors;
+    },
     errorMessagesReasons() {
       const errors = [];
       if (!this.v.reasons.$dirty) {
@@ -129,10 +156,11 @@ export default {
       return errors;
     },
     itemsReasons() {
-      return StudyRequestReason.enumValues.map((value) => {
+      const itemsReasons = StudyRequestReason.enumValues.map((value) => {
         const { text } = value;
         return { text, value };
       });
+      return ArrayUtils.sortBy(itemsReasons, ({ text }) => text);
     },
     minDueDate() {
       const { now, internalValue: { urgent } } = this;
diff --git a/web/components/FcDrawerRequestStudy.vue b/web/components/FcDrawerRequestStudy.vue
index d24f613ba..59b8804ed 100644
--- a/web/components/FcDrawerRequestStudy.vue
+++ b/web/components/FcDrawerRequestStudy.vue
@@ -1,18 +1,32 @@
 <template>
   <div class="fc-drawer-request-study d-flex fill-height flex-column">
-    <div class="align-center d-flex flex-grow-0 flex-shrink-0 px-3 py-2">
-      <v-btn
-        icon
+    <div class="align-center d-flex flex-grow-0 flex-shrink-0 px-3 py-2 shading">
+      <FcButton
+        v-if="isCreate"
+        type="icon"
         @click="actionNavigateBack">
         <v-icon>mdi-chevron-left</v-icon>
-      </v-btn>
-      <div class="flex-grow-1 text-center">
-        <span class="subtitle-1">
+      </FcButton>
+      <h1 class="flex-grow-1 headline text-center">
+        <span>
           {{title}}:
         </span>
-        <span>
+        <span class="font-weight-regular">
           {{subtitle}}
         </span>
+      </h1>
+      <div v-if="!isCreate">
+        <FcButton
+          type="tertiary"
+          @click="actionNavigateBack">
+          Cancel
+        </FcButton>
+        <FcButton
+          :disabled="$v.$invalid"
+          type="primary"
+          @click="onFinish">
+          Save
+        </FcButton>
       </div>
     </div>
     <v-divider></v-divider>
@@ -23,10 +37,11 @@
       <div
         v-else
         class="pl-5 py-5">
-        <v-messages :value="[REQUEST_STUDY_TIME_TO_FULFILL.text]"></v-messages>
+        <v-messages
+          v-bind="attrsMessagesTop"></v-messages>
 
         <section class="mt-5 pr-5">
-          <h3>Study Type</h3>
+          <h2 class="headline">Study Type</h2>
           <FcCheckboxGroupChips
             v-model="studyTypes"
             :items="itemsStudyType"></FcCheckboxGroupChips>
@@ -41,26 +56,33 @@
           class="pr-5"
           :v="$v.studyRequest" />
 
-        <FcDetailsStudy
-            v-for="(_, i) in studyRequest.studies"
-            :key="i"
+        <template v-for="(_, i) in studyRequest.studies">
+          <v-divider
+            :key="'divider_' + i"
+            class="my-3"></v-divider>
+          <FcDetailsStudy
+            :key="'study_' + i"
             v-model="studyRequest.studies[i]"
             class="pr-5"
             :v="$v.studyRequest.studies.$each[i]" />
+        </template>
 
-        <section class="pr-5">
-          <v-btn
-            block
-            class="mt-6"
-            color="primary"
-            :disabled="$v.$invalid"
-            @click="onFinish">
-            {{labelFinish}}
-          </v-btn>
-          <v-messages
-            class="mt-1"
-            color="error"
-            :value="errorMessagesLocation"></v-messages>
+        <section
+          v-if="isCreate"
+          class="pr-5 mt-6 text-right">
+          <div>
+            <FcButton
+              type="tertiary"
+              @click="actionNavigateBack">
+              Cancel
+            </FcButton>
+            <FcButton
+              :disabled="$v.$invalid"
+              type="primary"
+              @click="onFinish">
+              Submit Request
+            </FcButton>
+          </div>
         </section>
       </div>
     </section>
@@ -74,6 +96,7 @@ import {
   mapState,
 } from 'vuex';
 
+import ArrayUtils from '@/lib/ArrayUtils';
 import { StudyHours, StudyType } from '@/lib/Constants';
 import {
   getStudyRequest,
@@ -84,6 +107,7 @@ import {
   REQUEST_STUDY_TIME_TO_FULFILL,
 } from '@/lib/i18n/Strings';
 import ValidationsStudyRequest from '@/lib/validation/ValidationsStudyRequest';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcDetailsStudy from '@/web/components/FcDetailsStudy.vue';
 import FcDetailsStudyRequest from '@/web/components/FcDetailsStudyRequest.vue';
 import FcCheckboxGroupChips from '@/web/components/inputs/FcCheckboxGroupChips.vue';
@@ -122,6 +146,7 @@ export default {
   name: 'FcDrawerRequestStudy',
   mixins: [FcMixinRouteAsync],
   components: {
+    FcButton,
     FcCheckboxGroupChips,
     FcDetailsStudy,
     FcDetailsStudyRequest,
@@ -134,14 +159,18 @@ export default {
     };
   },
   computed: {
-    errorMessagesLocation() {
-      const errors = [];
+    attrsMessagesTop() {
       if (!this.$v.studyRequest.centrelineId.required
         || !this.$v.studyRequest.centrelineType.required
         || !this.$v.studyRequest.geom.required) {
-        errors.push(REQUEST_STUDY_REQUIRES_LOCATION.text);
+        return {
+          color: 'error',
+          value: [REQUEST_STUDY_REQUIRES_LOCATION.text],
+        };
       }
-      return errors;
+      return {
+        value: [REQUEST_STUDY_TIME_TO_FULFILL.text],
+      };
     },
     errorMessagesStudies() {
       const errors = [];
@@ -173,16 +202,11 @@ export default {
       return Object.prototype.hasOwnProperty.call(this.$route.query, 'isSupervisor');
     },
     itemsStudyType() {
-      return StudyType.enumValues.map((studyType) => {
+      const itemsStudyType = StudyType.enumValues.map((studyType) => {
         const { label: text } = studyType;
         return { text, value: studyType };
       });
-    },
-    labelFinish() {
-      if (this.isCreate) {
-        return 'Submit';
-      }
-      return 'Save';
+      return ArrayUtils.sortBy(itemsStudyType, ({ text }) => text);
     },
     routeFinish() {
       if (this.isCreate) {
@@ -247,7 +271,7 @@ export default {
       this.studyRequest.studies.push(item);
     },
     actionNavigateBack() {
-      if (this.isCreate) {
+      if (!this.isCreate) {
         const { id } = this.$route.params;
         this.$router.push({
           name: 'requestStudyView',
diff --git a/web/components/FcDrawerViewData.vue b/web/components/FcDrawerViewData.vue
index 3b27bcd8a..9b5b78382 100644
--- a/web/components/FcDrawerViewData.vue
+++ b/web/components/FcDrawerViewData.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="fc-drawer-view-data d-flex flex-column">
-    <div class="flex-grow-0 flex-shrink-0 pa-5">
+    <div class="flex-grow-0 flex-shrink-0 pa-5 shading">
       <FcSearchBarLocation />
     </div>
     <section class="flex-grow-1 flex-shrink-1 overflow-y-auto">
@@ -8,9 +8,9 @@
         v-if="loading"
         indeterminate />
       <template v-else>
-        <header class="px-5 pt-1 pb-5">
-          <h1 class="display-2">{{location.description}}</h1>
-          <div class="mt-2">
+        <header class="px-5 pt-1 pb-5 shading">
+          <h1 class="display-4">{{location.description}}</h1>
+          <div class="label mt-2">
             <span v-if="locationFeatureType !== null">
               {{locationFeatureType.description}} &#x2022;
             </span>
@@ -18,23 +18,25 @@
           </div>
           <v-row class="mt-5">
             <v-col cols="2">
-              <div>KSI</div>
-              <div class="headline">
+              <div class="label mb-1">KSI</div>
+              <h3 class="display-2">
                 {{collisionSummary.ksi}}
-              </div>
+              </h3>
             </v-col>
             <v-col cols="2">
-              <div>Collisions</div>
-              <div class="headline">
+              <div class="label mb-1">Collisions</div>
+              <h3 class="display-2">
                 {{collisionSummary.total}}
-              </div>
+              </h3>
             </v-col>
           </v-row>
           <div class="mt-5">
-            <div>Nearby</div>
-            <div class="mt-1">
-              <div v-if="!hasPoisNearby">
-                No points of interest nearby
+            <div class="label mb-1">Nearby</div>
+            <div>
+              <div
+                v-if="!hasPoisNearby"
+                class="display-2 secondary--text">
+                None
               </div>
               <v-tooltip
                 v-if="poiSummary.school !== null"
@@ -60,8 +62,8 @@
         <section>
           <header class="pa-5">
             <div class="align-center d-flex">
-              <h2 class="subtitle-1">Studies</h2>
-              <div class="caption pl-3">{{numCountsText}}</div>
+              <h5 class="headline">Studies</h5>
+              <div class="pl-3 subtitle-2">{{numCountsText}}</div>
               <v-spacer></v-spacer>
               <FcDialogStudyFilters
                 v-if="showFilters"
@@ -69,19 +71,21 @@
                 v-bind="filters"
                 @set-filters="setFilters">
               </FcDialogStudyFilters>
-              <v-btn
-                color="primary"
-                outlined
+              <FcButton
+                type="secondary"
                 @click.stop="showFilters = true">
-                <v-icon left>mdi-filter-variant</v-icon>
+                <v-icon
+                  :color="colorIconFilter"
+                  left>mdi-filter-variant</v-icon>
                 Filter
-              </v-btn>
-              <v-btn
+              </FcButton>
+              <FcButton
                 class="ml-3"
-                color="primary"
+                type="primary"
                 @click="actionRequestStudy">
+                <v-icon left>mdi-plus-box</v-icon>
                 Request Study
-              </v-btn>
+              </FcButton>
             </div>
 
             <div
@@ -90,10 +94,10 @@
               <v-chip
                 v-for="(filterChip, i) in filterChips"
                 :key="i"
-                class="mr-2"
-                close
-                color="blue lighten-4"
-                @click:close="removeFilter(filterChip)">
+                class="mb-2 mr-2 primary--text"
+                color="light-blue lighten-5"
+                @click="removeFilter(filterChip)">
+                <v-icon left>mdi-check</v-icon>
                 {{filterChip.label}}
               </v-chip>
             </div>
@@ -145,6 +149,7 @@ import DateTime from '@/lib/time/DateTime';
 import TimeFormatters from '@/lib/time/TimeFormatters';
 import FcDataTableStudies from '@/web/components/FcDataTableStudies.vue';
 import FcDialogStudyFilters from '@/web/components/dialogs/FcDialogStudyFilters.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcSearchBarLocation from '@/web/components/inputs/FcSearchBarLocation.vue';
 import FcMixinRouteAsync from '@/web/mixins/FcMixinRouteAsync';
 
@@ -152,6 +157,7 @@ export default {
   name: 'FcDrawerViewData',
   mixins: [FcMixinRouteAsync],
   components: {
+    FcButton,
     FcDataTableStudies,
     FcDialogStudyFilters,
     FcSearchBarLocation,
@@ -172,6 +178,12 @@ export default {
     };
   },
   computed: {
+    colorIconFilter() {
+      if (this.filterChips.length === 0) {
+        return 'unselected';
+      }
+      return 'primary';
+    },
     countSummaryHeaderText() {
       const n = this.countSummary.length;
       if (n === 0) {
diff --git a/web/components/FcDrawerViewReports.vue b/web/components/FcDrawerViewReports.vue
index c1b80c958..cac107eac 100644
--- a/web/components/FcDrawerViewReports.vue
+++ b/web/components/FcDrawerViewReports.vue
@@ -6,28 +6,29 @@
     <template v-else>
       <div>
         <div class="align-center d-flex flex-grow-0 flex-shrink-0 px-3 pt-2">
-          <v-btn
-            icon
+          <FcButton
+            type="icon"
             @click="actionNavigateBack">
             <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <h1 class="subtitle-1">Turning Movement Count</h1>
-          <div class="mx-1">&#x2022;</div>
-          <div>{{location.description}}</div>
-
-          <v-spacer></v-spacer>
-
+          </FcButton>
+          <h1 class="headline">{{studyType.label}}</h1>
+          <div
+            class="ml-1 font-weight-regular headline secondary--text">
+            <span>&#x2022; {{location.description}}</span>
+            <span v-if="filterChipsNoStudyTypes.length > 0"> &#x2022;</span>
+          </div>
           <div
             v-if="filterChipsNoStudyTypes.length > 0">
             <v-chip
               v-for="(filterChip, i) in filterChipsNoStudyTypes"
               :key="i"
-              class="mr-2"
-              color="blue lighten-4">
+              class="ml-2 my-1"
+              filter
+              :input-value="true">
               {{filterChip.label}}
             </v-chip>
           </div>
-
+          <v-spacer></v-spacer>
           <v-overflow-btn
             v-model="indexActiveCount"
             class="fc-select-active-count flex-grow-0 mt-0"
@@ -67,21 +68,23 @@
               :report-type="activeReportType"
               @set-report-parameters="setReportParameters">
             </FcDialogReportParameters>
-            <v-btn
+            <FcButton
               v-if="activeReportType.name === 'WARRANT_TRAFFIC_SIGNAL_CONTROL'"
+              type="secondary"
               @click.stop="showReportParameters = true">
-              <v-icon left>mdi-settings</v-icon>
+              <v-icon color="primary" left>mdi-settings</v-icon>
               Set Parameters
-            </v-btn>
+            </FcButton>
             <v-menu>
               <template v-slot:activator="{ on, attrs }">
-                <v-btn
+                <FcButton
                   v-bind="attrs"
                   v-on="on"
                   class="ml-2"
+                  type="secondary"
                   :loading="loadingDownload">
-                  <v-icon left>mdi-download</v-icon> Download
-                </v-btn>
+                  <v-icon color="primary" left>mdi-cloud-download</v-icon> Download
+                </FcButton>
               </template>
               <v-list>
                 <v-list-item
@@ -118,6 +121,7 @@ import {
 } from '@/lib/api/WebApi';
 import TimeFormatters from '@/lib/time/TimeFormatters';
 import FcDialogReportParameters from '@/web/components/dialogs/FcDialogReportParameters.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcReport from '@/web/components/reports/FcReport.vue';
 import FcMixinRouteAsync from '@/web/mixins/FcMixinRouteAsync';
 
@@ -130,6 +134,7 @@ export default {
   name: 'FcDrawerViewReports',
   mixins: [FcMixinRouteAsync],
   components: {
+    FcButton,
     FcDialogReportParameters,
     FcReport,
   },
diff --git a/web/components/FcDrawerViewRequest.vue b/web/components/FcDrawerViewRequest.vue
index 9de72c0a7..55cb2d0cf 100644
--- a/web/components/FcDrawerViewRequest.vue
+++ b/web/components/FcDrawerViewRequest.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="fc-drawer-view-request d-flex flex-column">
-    <div class="align-center d-flex flex-grow-0 flex-shrink-0 px-3 py-2">
-      <v-btn
-        outlined
+    <div class="align-center d-flex flex-grow-0 flex-shrink-0 px-3 py-2 shading">
+      <FcButton
+        type="secondary"
         @click="actionNavigateBack">
         <v-icon left>mdi-chevron-left</v-icon>
         Requests
-      </v-btn>
-      <div class="flex-grow-1 text-center">
-        <span class="subtitle-1">
+      </FcButton>
+      <h1 class="flex-grow-1 headline text-center">
+        <span>
           {{title}}:
         </span>
-        <span>
+        <span class="font-weight-regular">
           {{subtitle}}
         </span>
-      </div>
-      <v-btn
+      </h1>
+      <FcButton
         v-if="!loading && (auth.user.id === studyRequest.userId || isSupervisor)"
-        outlined
+        type="secondary"
         @click="actionEdit">
-        <v-icon left>mdi-pencil</v-icon> Edit
-      </v-btn>
+        <v-icon color="primary" left>mdi-pencil</v-icon> Edit
+      </FcButton>
     </div>
     <v-divider></v-divider>
     <section class="flex-grow-1 flex-shrink-1 overflow-y-auto">
@@ -28,13 +28,15 @@
         v-if="loading"
         indeterminate />
       <div v-else>
-        <div class="pa-5">
+        <div class="pl-5">
           <FcSummaryStudyRequest
+            class="pr-5"
             :study-request="studyRequest" />
           <template v-for="(study, i) in studyRequest.studies">
             <v-divider :key="'divider_' + i"></v-divider>
             <FcSummaryStudy
               :key="'study_' + i"
+              class="pr-5"
               :study="study" />
           </template>
         </div>
@@ -60,12 +62,14 @@ import {
 import FcCommentsStudyRequest from '@/web/components/FcCommentsStudyRequest.vue';
 import FcSummaryStudy from '@/web/components/FcSummaryStudy.vue';
 import FcSummaryStudyRequest from '@/web/components/FcSummaryStudyRequest.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcMixinRouteAsync from '@/web/mixins/FcMixinRouteAsync';
 
 export default {
   name: 'FcDrawerViewRequest',
   mixins: [FcMixinRouteAsync],
   components: {
+    FcButton,
     FcCommentsStudyRequest,
     FcSummaryStudy,
     FcSummaryStudyRequest,
diff --git a/web/components/FcPaneMap.vue b/web/components/FcPaneMap.vue
index bf87c641a..3a97c4cd1 100644
--- a/web/components/FcPaneMap.vue
+++ b/web/components/FcPaneMap.vue
@@ -10,15 +10,17 @@
     <FcSearchBarLocation
       v-if="!drawerOpen" />
     <div class="pane-map-mode">
-      <v-btn
+      <FcButton
         class="mr-2"
+        type="fab-text"
         @click="openGoogleMaps">
         Street View
-      </v-btn>
-      <v-btn
+      </FcButton>
+      <FcButton
+        type="fab-text"
         @click="toggleSatellite">
         {{ satellite ? 'Map' : 'Aerial' }}
-      </v-btn>
+      </FcButton>
     </div>
     <FcPaneMapPopup
       v-if="hoveredFeature"
@@ -45,6 +47,7 @@ import rootStyleDark from '@/lib/geo/theme/dark/root.json';
 import metadataDark from '@/lib/geo/theme/dark/metadata.json';
 import GeoStyle from '@/lib/geo/GeoStyle';
 import FcPaneMapPopup from '@/web/components/FcPaneMapPopup.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcSearchBarLocation from '@/web/components/inputs/FcSearchBarLocation.vue';
 
 const BOUNDS_TORONTO = new mapboxgl.LngLatBounds(
@@ -289,6 +292,7 @@ function injectSourcesAndLayers(rawStyle) {
 export default {
   name: 'FcPaneMap',
   components: {
+    FcButton,
     FcPaneMapPopup,
     FcSearchBarLocation,
   },
@@ -363,6 +367,15 @@ export default {
         zoom: MapZoom.MIN,
       });
       this.updateCoordinates();
+      this.map.addControl(
+        new mapboxgl.AttributionControl({
+          customAttribution: [
+            '<a href="https://docs.mapbox.com/mapbox-gl-js/overview/">Mapbox GL</a>',
+            'Powered by <a href="https://www.esri.com/">Esri</a>',
+          ],
+        }),
+        'bottom-right',
+      );
       this.map.addControl(
         new mapboxgl.ScaleControl({ maxWidth: 192, unit: 'metric' }),
         'bottom-right',
@@ -722,12 +735,32 @@ export default {
     z-index: var(--z-index-controls);
   }
   .mapboxgl-ctrl-bottom-right {
-    bottom: -2px;
-    right: 6px;
+    & > .mapboxgl-ctrl-group {
+      bottom: 25px;
+      position: absolute;
+      right: 6px;
+    }
     & > .mapboxgl-ctrl-scale {
-      background-color: transparent;
+      background-color: rgba(0, 0, 0, 0.2);
       border-color: #dcdee0;
+      bottom: 0;
+      color: #dcdee0;
+      font-size: 0.75rem;
+      height: 17px;
+      line-height: 0.875rem;
+      position: absolute;
+      right: 170px;
+    }
+    & > .mapboxgl-ctrl-attrib {
+      background-color: rgba(0, 0, 0, 0.2);
+      bottom: 10px;
       color: #dcdee0;
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      padding: 2px 5px;
+      position: absolute;
+      right: 5px;
+      width: 170px;
     }
   }
 }
diff --git a/web/components/FcPaneMapPopup.vue b/web/components/FcPaneMapPopup.vue
index a430bb4d1..e4cfa350d 100644
--- a/web/components/FcPaneMapPopup.vue
+++ b/web/components/FcPaneMapPopup.vue
@@ -8,12 +8,13 @@
         <strong v-if="description">{{description}}</strong>
         <span v-else> name unknown</span>
       </div>
-      <v-btn
+      <FcButton
         v-if="featureSelectable"
         class="mt-1"
+        type="secondary"
         @click="onViewData">
         <v-icon left>mdi-table-eye</v-icon> View Data
-      </v-btn>
+      </FcButton>
     </v-alert>
   </div>
 </template>
@@ -26,6 +27,7 @@ import { formatCountLocationDescription } from '@/lib/StringFormatters';
 import { getLineStringMidpoint } from '@/lib/geo/GeometryUtils';
 import DateTime from '@/lib/time/DateTime';
 import TimeFormatters from '@/lib/time/TimeFormatters';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 
 const SELECTABLE_LAYERS = [
   'counts',
@@ -35,6 +37,9 @@ const SELECTABLE_LAYERS = [
 
 export default {
   name: 'PaneMapPopup',
+  components: {
+    FcButton,
+  },
   props: {
     feature: Object,
     hover: Boolean,
diff --git a/web/components/FcSummaryStudy.vue b/web/components/FcSummaryStudy.vue
index eca514444..531e3ff35 100644
--- a/web/components/FcSummaryStudy.vue
+++ b/web/components/FcSummaryStudy.vue
@@ -1,33 +1,37 @@
 <template>
   <section class="fc-summary-study">
-    <h2 class="mt-6">{{study.studyType.label}}</h2>
+    <h2 class="headline mt-6">{{study.studyType.label}}</h2>
     <v-row class="mt-5 mb-6">
       <v-col cols="6">
-        <div>Study Days</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Study Days</div>
+        <div class="mt-1 display-1">
           {{study.daysOfWeek | daysOfWeek}}
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Study Hours</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Study Hours</div>
+        <div class="mt-1 display-1">
           <template v-if="study.studyType.automatic">
             <div>{{study.duration | durationHuman}}</div>
             <v-messages
+              class="mt-1"
               :value="[study.duration + ' hours']"></v-messages>
           </template>
           <template v-else>
             <div>{{study.hours.description}}</div>
             <v-messages
+              class="mt-1"
               :value="[study.hours.hint]"></v-messages>
           </template>
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Additional Information</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Additional Information</div>
+        <div class="mt-1 display-1">
           <span v-if="study.notes">{{study.notes}}</span>
-          <span v-else>None</span>
+          <span
+            v-else
+            class="unselected--text">None</span>
         </div>
       </v-col>
     </v-row>
diff --git a/web/components/FcSummaryStudyRequest.vue b/web/components/FcSummaryStudyRequest.vue
index 30b15e8da..0dae3daac 100644
--- a/web/components/FcSummaryStudyRequest.vue
+++ b/web/components/FcSummaryStudyRequest.vue
@@ -2,8 +2,8 @@
   <section class="fc-summary-study-request">
     <v-row class="mt-1 mb-6">
       <v-col cols="6">
-        <div>Status</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Status</div>
+        <div class="mt-1 display-1">
           <div class="align-center d-flex">
             <v-icon
               :color="studyRequest.status.color"
@@ -15,8 +15,8 @@
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Service Request Number</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Service Request Number</div>
+        <div class="mt-1 display-1">
           <span v-if="studyRequest.serviceRequestId">
             {{studyRequest.serviceRequestId}}
           </span>
@@ -24,32 +24,33 @@
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Submitted</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Submitted</div>
+        <div class="mt-1 display-1">
           {{studyRequest.createdAt | date}}
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Due Date</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Due Date</div>
+        <div class="mt-1 display-1">
           {{studyRequest.dueDate | date}}
         </div>
         <div
           v-if="studyRequest.urgent"
-          class="align-center d-flex">
+          class="align-center d-flex mt-1">
           <v-icon color="warning" left>mdi-clipboard-alert</v-icon>
           <v-messages
             :value="['This request has been marked as urgent.']"></v-messages>
         </div>
         <v-messages
           v-else
+          class="mt-1"
           :value="['Standard times to request counts are 2-3 months.']"></v-messages>
       </v-col>
       <v-col
         v-if="studyRequest.urgent"
         cols="6">
-        <div>Additional Information</div>
-        <div class="mt-1 title">
+        <div class="subtitle-1">Additional Information</div>
+        <div class="mt-1 display-1">
           <span v-if="studyRequest.urgentReason">
             {{studyRequest.urgentReason}}
           </span>
@@ -57,19 +58,20 @@
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Reasons</div>
-        <div class="mt-1 title">
-          <div
-            v-for="(reason, i) in studyRequest.reasons"
-            :key="i">
-            {{reason.text}}
-          </div>
+        <div class="subtitle-1">Reasons</div>
+        <div
+          v-for="(reason, i) in studyRequest.reasons"
+          :key="i"
+          class="mt-1 display-1">
+          {{reason.text}}
         </div>
       </v-col>
       <v-col cols="6">
-        <div>Informed Staff</div>
-        <div class="mt-1 title">
-          <span v-if="studyRequest.ccEmails.length === 0">None</span>
+        <div class="subtitle-1">Informed Staff</div>
+        <div class="mt-1 display-1">
+          <span
+            v-if="studyRequest.ccEmails.length === 0"
+            class="unselected--text">None</span>
           <div
             v-for="(ccEmail, i) in studyRequest.ccEmails"
             :key="i">
diff --git a/web/components/dialogs/FcDialogReportParameters.vue b/web/components/dialogs/FcDialogReportParameters.vue
index 337219247..e1192081a 100644
--- a/web/components/dialogs/FcDialogReportParameters.vue
+++ b/web/components/dialogs/FcDialogReportParameters.vue
@@ -14,14 +14,12 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn
-          color="primary"
-          text
-          @click="internalValue = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          text
-          @click="onClickSave">Save</v-btn>
+        <FcButton
+          type="tertiary"
+          @click="internalValue = false">Cancel</FcButton>
+        <FcButton
+          type="tertiary"
+          @click="onClickSave">Save</FcButton>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -29,6 +27,7 @@
 
 <script>
 import { ReportType } from '@/lib/Constants';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcReportParametersWarrantTrafficSignalControl
   from '@/web/components/reports/FcReportParametersWarrantTrafficSignalControl.vue';
 import FcMixinVModelProxy from '@/web/mixins/FcMixinVModelProxy';
@@ -37,6 +36,7 @@ export default {
   name: 'FcDialogReportParameters',
   mixins: [FcMixinVModelProxy(Boolean)],
   components: {
+    FcButton,
     FcReportParametersWarrantTrafficSignalControl,
   },
   props: {
diff --git a/web/components/dialogs/FcDialogStudyFilters.vue b/web/components/dialogs/FcDialogStudyFilters.vue
index 4ac56db5e..b6ca45e17 100644
--- a/web/components/dialogs/FcDialogStudyFilters.vue
+++ b/web/components/dialogs/FcDialogStudyFilters.vue
@@ -4,10 +4,18 @@
     max-width="300"
     scrollable>
     <v-card>
-      <v-card-title>Filter</v-card-title>
+      <v-card-title>
+        <h1 class="headline">Filter</h1>
+        <v-spacer></v-spacer>
+        <FcButton
+          type="secondary"
+          @click="actionClearAll">
+          Clear All
+        </FcButton>
+      </v-card-title>
       <v-divider></v-divider>
       <v-card-text>
-        <h2 class="subtitle-2 mt-4">Study Types</h2>
+        <h2 class="body-1 mt-4">Study Types</h2>
         <v-checkbox
           v-for="studyType in StudyType.enumValues"
           :key="studyType.name"
@@ -17,7 +25,7 @@
           :label="studyType.label"
           :value="studyType"></v-checkbox>
 
-        <h2 class="mt-4 subtitle-2">Days of the Week</h2>
+        <h2 class="body-1 mt-4">Days of the Week</h2>
         <v-checkbox
           v-for="(label, i) in DAYS_OF_WEEK"
           :key="i"
@@ -27,7 +35,7 @@
           :label="label"
           :value="i"></v-checkbox>
 
-        <h2 class="mt-4 subtitle-2">Dates from</h2>
+        <h2 class="body-1 mt-4">Dates from</h2>
         <v-radio-group
           v-model="internalDatesFrom"
           class="mt-2"
@@ -38,7 +46,7 @@
           <v-radio label="All" :value="-1"></v-radio>
         </v-radio-group>
 
-        <h2 class="mt-4 subtitle-2">Hours</h2>
+        <h2 class="body-1 mt-4">Hours</h2>
         <v-checkbox
           v-for="studyHours in StudyHours.enumValues"
           :key="studyHours.name"
@@ -51,14 +59,16 @@
       <v-divider></v-divider>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn
-          color="primary"
-          text
-          @click="internalValue = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          text
-          @click="onClickSave">Save</v-btn>
+        <FcButton
+          type="tertiary"
+          @click="internalValue = false">
+          Cancel
+        </FcButton>
+        <FcButton
+          type="tertiary"
+          @click="actionSave">
+          Save
+        </FcButton>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -70,11 +80,15 @@ import {
   StudyType,
 } from '@/lib/Constants';
 import TimeFormatters from '@/lib/time/TimeFormatters';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcMixinVModelProxy from '@/web/mixins/FcMixinVModelProxy';
 
 export default {
   name: 'FcDialogStudyFilters',
   mixins: [FcMixinVModelProxy(Boolean)],
+  components: {
+    FcButton,
+  },
   props: {
     datesFrom: Number,
     daysOfWeek: Array,
@@ -103,7 +117,13 @@ export default {
     },
   },
   methods: {
-    onClickSave() {
+    actionClearAll() {
+      this.internalDatesFrom = -1;
+      this.internalDaysOfWeek = [];
+      this.internalHours = [];
+      this.internalStudyTypes = [];
+    },
+    actionSave() {
       this.$emit('set-filters', this.internalFilters);
       this.internalValue = false;
     },
diff --git a/web/components/inputs/FcButton.vue b/web/components/inputs/FcButton.vue
new file mode 100644
index 000000000..dd6ae0ce3
--- /dev/null
+++ b/web/components/inputs/FcButton.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-btn
+    class="fc-button"
+    v-bind="{
+      ...typeAttrs,
+      ...$attrs,
+    }"
+    v-on="$listeners">
+    <slot></slot>
+  </v-btn>
+</template>
+
+<script>
+const BUTTON_ATTRS = {
+  primary: {
+    color: 'primary',
+  },
+  secondary: {
+    color: 'secondary',
+    outlined: true,
+  },
+  tertiary: {
+    color: 'primary',
+    text: true,
+  },
+  'fab-icon': {
+    fab: true,
+    icon: true,
+    small: true,
+  },
+  'fab-text': {
+    class: 'elevation-2',
+  },
+  icon: {
+    icon: true,
+  },
+};
+
+export default {
+  name: 'FcButton',
+  props: {
+    type: String,
+  },
+  computed: {
+    typeAttrs() {
+      return BUTTON_ATTRS[this.type];
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+button.fc-button.v-btn.secondary--text {
+  background-color: white;
+  & > .v-btn__content {
+    color: var(--v-default-base);
+  }
+}
+</style>
diff --git a/web/components/inputs/FcCheckboxGroupChips.vue b/web/components/inputs/FcCheckboxGroupChips.vue
index 467b88509..59ddbae04 100644
--- a/web/components/inputs/FcCheckboxGroupChips.vue
+++ b/web/components/inputs/FcCheckboxGroupChips.vue
@@ -7,7 +7,10 @@
       v-for="{ selected, text, value } in itemsNormalized"
       :key="'' + value"
       class="mr-2"
-      :color="selected ? 'blue lighten-4' : null"
+      :class="{
+        'primary--text': selected,
+      }"
+      :color="selected ? 'light-blue lighten-5' : null"
       filter
       :value="value">
       {{text}}
diff --git a/web/components/inputs/FcDatePicker.vue b/web/components/inputs/FcDatePicker.vue
index 002dc17b3..d67d2959f 100644
--- a/web/components/inputs/FcDatePicker.vue
+++ b/web/components/inputs/FcDatePicker.vue
@@ -11,10 +11,11 @@
         <v-text-field
           v-model="valueFormatted"
           append-icon="mdi-calendar"
-          hide-details
-          label="Due Date"
+          offset-y
           outlined
-          readonly
+          v-bind="$attrs"
+          @blur="resetValueFormatted"
+          @input="updateValueFormatted"
           v-on="on"></v-text-field>
       </template>
       <v-date-picker
@@ -39,6 +40,17 @@ function fromInternalValue(internalValue) {
   return DateTime.fromISO(internalValue);
 }
 
+function fromValueFormatted(valueFormatted) {
+  if (valueFormatted === null) {
+    return null;
+  }
+  const dt = DateTime.fromLocaleString(valueFormatted);
+  if (!dt.isValid) {
+    return null;
+  }
+  return dt;
+}
+
 function toInternalValue(value) {
   if (value === null) {
     return null;
@@ -49,10 +61,6 @@ function toInternalValue(value) {
 export default {
   name: 'FcDatePicker',
   props: {
-    label: {
-      type: String,
-      default: null,
-    },
     max: {
       type: DateTime,
       default() { return null; },
@@ -66,6 +74,7 @@ export default {
   data() {
     return {
       showMenu: false,
+      valueFormatted: TimeFormatters.formatDefault(this.value),
     };
   },
   computed: {
@@ -84,8 +93,22 @@ export default {
         this.$emit('input', value);
       },
     },
-    valueFormatted() {
-      return TimeFormatters.formatDefault(this.value);
+  },
+  watch: {
+    value() {
+      this.resetValueFormatted();
+    },
+  },
+  methods: {
+    resetValueFormatted() {
+      this.valueFormatted = TimeFormatters.formatDefault(this.value);
+    },
+    updateValueFormatted() {
+      const value = fromValueFormatted(this.valueFormatted);
+      if (value === null && this.valueFormatted !== '') {
+        return;
+      }
+      this.$emit('input', value);
     },
   },
 };
diff --git a/web/components/inputs/FcInputTextArray.vue b/web/components/inputs/FcInputTextArray.vue
index a5bea03b5..dae5b0490 100644
--- a/web/components/inputs/FcInputTextArray.vue
+++ b/web/components/inputs/FcInputTextArray.vue
@@ -5,9 +5,9 @@
     chips
     deletable-chips
     dense
-    hide-details
     multiple
-    outlined></v-combobox>
+    outlined
+    v-bind="$attrs"></v-combobox>
 </template>
 
 <script>
diff --git a/web/components/inputs/FcRadioGroup.vue b/web/components/inputs/FcRadioGroup.vue
index 66366ba43..3e78301b9 100644
--- a/web/components/inputs/FcRadioGroup.vue
+++ b/web/components/inputs/FcRadioGroup.vue
@@ -1,6 +1,7 @@
 <template>
   <v-radio-group
-    v-model="internalValue">
+    v-model="internalValue"
+    v-bind="$attrs">
     <template v-for="(item, i) in items">
       <v-radio
         :key="'radio_' + item.value"
@@ -16,7 +17,7 @@
             <span>{{item.label}}</span>
             <template v-if="item.sublabel">
               <br>
-              <span class="caption">{{item.sublabel}}</span>
+              <span class="subtitle-2">{{item.sublabel}}</span>
             </template>
           </div>
         </template>
diff --git a/web/components/inputs/FcSearchBarLocation.vue b/web/components/inputs/FcSearchBarLocation.vue
index d47e0e3af..ca36580a6 100644
--- a/web/components/inputs/FcSearchBarLocation.vue
+++ b/web/components/inputs/FcSearchBarLocation.vue
@@ -3,7 +3,7 @@
     v-model="keystring"
     append-icon="mdi-magnify"
     cache-items
-    class="fc-search-bar-location"
+    class="fc-search-bar-location elevation-2"
     dense
     hide-no-data
     hide-details
diff --git a/web/components/FcDashboardNavItem.vue b/web/components/nav/FcDashboardNavItem.vue
similarity index 59%
rename from web/components/FcDashboardNavItem.vue
rename to web/components/nav/FcDashboardNavItem.vue
index 0208544fb..f2cf00e42 100644
--- a/web/components/FcDashboardNavItem.vue
+++ b/web/components/nav/FcDashboardNavItem.vue
@@ -3,8 +3,11 @@
     <template v-slot:activator="{ on }">
       <v-list-item
         v-on="on"
-        active-class="fc-nav-item-active"
         class="fc-nav-item"
+        :class="{
+          'fc-nav-item-active': isActive,
+        }"
+        color="primary"
         :disabled="disabled"
         link
         :to="to">
@@ -24,6 +27,10 @@
 export default {
   name: 'FcDashboardNavItem',
   props: {
+    activeRouteNames: {
+      type: Array,
+      default() { return []; },
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -33,22 +40,26 @@ export default {
     to: Object,
   },
   computed: {
-    title() {
-      if (!this.disabled) {
-        return null;
-      }
-      const { label } = this;
-      return `${label} (Log in to access)`;
+    isActive() {
+      const { name } = this.$route;
+      const { name: toName } = this.to;
+      return name === toName || this.activeRouteNames.includes(name);
     },
   },
 };
 </script>
 
 <style lang="postcss">
-.fc-nav-item {
+.fc-nav-item.v-list-item {
   flex: 0;
   &.fc-nav-item-active {
-    border-right: 3px solid #3088d6;
+    border-right: 3px solid var(--v-primary-base);
+    &.v-list-item--link::before {
+      background-color: transparent;
+    }
+    & .v-icon.v-icon {
+      color: var(--v-primary-base);
+    }
   }
 }
 
diff --git a/web/components/nav/FcDashboardNavUser.vue b/web/components/nav/FcDashboardNavUser.vue
new file mode 100644
index 000000000..99cce2d1f
--- /dev/null
+++ b/web/components/nav/FcDashboardNavUser.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="text-center pb-2">
+    <div class="d-none">
+      <form
+        v-if="auth.loggedIn"
+        ref="formSignOut"
+        method="POST"
+        action="/api/auth/logout">
+        <input type="hidden" name="csrf" :value="auth.csrf" />
+      </form>
+      <form
+        v-if="$route.name !== 'adfsCallback'"
+        ref="formSignIn"
+        method="POST"
+        action="/api/auth/adfs-init">
+        <input type="hidden" name="csrf" :value="auth.csrf" />
+        <input type="hidden" name="nonce" :value="nonce" />
+      </form>
+    </div>
+    <v-menu
+      v-if="auth.loggedIn"
+      top>
+      <template v-slot:activator="{ on: onMenu }">
+        <v-tooltip right>
+          <template v-slot:activator="{ on: onTooltip }">
+            <FcButton
+              type="fab-icon"
+              v-on="{ ...onMenu, ...onTooltip }">
+              <v-icon>mdi-account-circle</v-icon>
+            </FcButton>
+          </template>
+          <span>{{username}}</span>
+        </v-tooltip>
+      </template>
+      <v-list>
+        <v-list-item
+          @click="actionSignOut()">
+          <v-list-item-title>Sign out</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-tooltip
+      v-else
+      right>
+      <template v-slot:activator="{ on }">
+        <FcButton
+          :disabled="$route.name === 'adfsCallback'"
+          :loading="$route.name === 'adfsCallback'"
+          type="fab-icon"
+          @click="actionSignIn()"
+          v-on="on">
+          <v-icon>mdi-login</v-icon>
+        </FcButton>
+      </template>
+      <span>Sign In</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { mapGetters, mapState } from 'vuex';
+
+import ClientNonce from '@/lib/auth/ClientNonce';
+import FcButton from '@/web/components/inputs/FcButton.vue';
+
+export default {
+  name: 'FcDashboardNavUser',
+  components: {
+    FcButton,
+  },
+  data() {
+    return { nonce: null };
+  },
+  computed: {
+    ...mapState(['auth']),
+    ...mapGetters(['username']),
+  },
+  methods: {
+    actionSignIn() {
+      this.nonce = ClientNonce.get(16);
+      window.localStorage.setItem('nonce', this.nonce);
+      Vue.nextTick(() => {
+        this.$refs.formSignIn.submit();
+      });
+    },
+    actionSignOut() {
+      this.$refs.formSignOut.submit();
+    },
+  },
+};
+</script>
diff --git a/web/components/reports/FcReport.vue b/web/components/reports/FcReport.vue
index 7b6a52878..1f5e5ae28 100644
--- a/web/components/reports/FcReport.vue
+++ b/web/components/reports/FcReport.vue
@@ -8,8 +8,8 @@
           width="175" />
       </div>
       <div class="ml-3">
-        <div>{{ORG_NAME}}</div>
-        <div class="title">{{type.label}}</div>
+        <div class="title">{{ORG_NAME}}</div>
+        <div class="display-1">{{type.label}}</div>
       </div>
     </header>
     <div>
diff --git a/web/components/reports/FcReportParametersWarrantTrafficSignalControl.vue b/web/components/reports/FcReportParametersWarrantTrafficSignalControl.vue
index 70b1e4b8c..7b97449e1 100644
--- a/web/components/reports/FcReportParametersWarrantTrafficSignalControl.vue
+++ b/web/components/reports/FcReportParametersWarrantTrafficSignalControl.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="fc-report-parameters fc-report-parameters-warrant-traffic-signal-control">
-    <hr class="mb-2">
     <v-checkbox
       name="adequateTrial"
       v-model="internalValue.adequateTrial">
diff --git a/web/css/main.postcss b/web/css/main.scss
similarity index 79%
rename from web/css/main.postcss
rename to web/css/main.scss
index f717d6ed2..fe3c5ec94 100644
--- a/web/css/main.postcss
+++ b/web/css/main.scss
@@ -16,30 +16,12 @@
   --primary-dark: #1a4480;  /* blue-warm-70v */
   --primary-darker: #162e51;  /* blue-warm-80v */
 
-  --info-lighter: #e7f6f8;  /* cyan-5 */
-  --info-light: #9ddfeb;  /* cyan-20 */
-  --info: #00bde3;  /* cyan-30v */
-  --info-dark: #009ec1;  /* cyan-40v */
-  --info-darker: #2e6276;  /* blue-cool-60 */
-
   --error-lighter: #f4e3db;  /* red-warm-10 */
   --error-light: #f39268;  /* red-warm-30v */
   --error: #d63e04;  /* red-warm-50v */
   --error-dark: #b51d09;  /* red-60v */
   --error-darker: #6f3331;  /* red-70 */
 
-  --warning-lighter: #faf3d1;  /* yellow-5 */
-  --warning-light: #fee685;  /* yellow-10v */
-  --warning: #ffbe2e;  /* gold-20v */
-  --warning-dark: #e5a000;  /* gold-30v */
-  --warning-darker: #936f38;  /* gold-50v */
-
-  --success-lighter: #ecf3ec;  /* green-cool-5 */
-  --success-light: #70e17b;  /* green-cool-20v */
-  --success: #00a91c;  /* green-cool-40v */
-  --success-dark: #4d8055;  /* green-cool-50 */
-  --success-darker: #446443;  /* green-cool-60 */
-
   --disabled-light: #e6e6e6;  /* gray-10 */
   --disabled: #c9c9c9;  /* gray-20 */
   --disabled-dark: #adadad;  /* gray-30 */
@@ -81,8 +63,15 @@ body {
   height: 100vh;
   margin: 0;
   min-height: 100vh;
-  padding: 0;
   overflow: hidden;
+  padding: 0;
+}
+
+/* VUETIFY OVERRIDES */
+.label,
+.subtitle-1,
+.subtitle-2 {
+  color: var(--v-secondary-base);
 }
 
 /* FLEX LAYOUT */
@@ -134,7 +123,6 @@ body {
 }
 
 /* ELEVATION */
-
 .elevation-n1 {
   box-shadow:
     inset 0 2px 1px -1px rgba(0, 0, 0, 0.2),
diff --git a/web/main.js b/web/main.js
index 696315bc9..6faab7956 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,7 +1,7 @@
 import { format } from 'd3-format';
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
-import Vuetify from 'vuetify/lib';
+import Vuetify from 'vuetify/lib/framework';
 
 import App from '@/web/App.vue';
 import router from '@/web/router';
@@ -23,9 +23,39 @@ Vue.filter('timeOfDay', TimeFormatters.formatTimeOfDay);
 
 Vue.config.productionTip = false;
 
+/*
+ * Vuetify offers two major entry points to customization: SASS variables (as in
+ * `styles/variables.scss`) and JavaScript options.
+ *
+ * In JavaScript options, we can define custom colors for light and dark themes.
+ * By also enabling `customProperties`, we can use these colors in several ways:
+ *
+ * - via classes (`.{color}` for backgrounds, `.{color}--text` for text);
+ * - via CSS variables (`--v-{color}-{shade}`);
+ * - via JavaScript (`this.$vuetify.theme.themes.light.primary`).
+ *
+ * This offers us flexibility in developing a standard look-and-feel across the application.
+ */
+const vuetify = new Vuetify({
+  theme: {
+    options: {
+      customProperties: true,
+    },
+    themes: {
+      light: {
+        default: '#272727',
+        primary: '#3088d6',
+        secondary: '#757575',
+        shading: '#fafafa',
+        unselected: '#acacac',
+      },
+    },
+  },
+});
+
 new Vue({
   render: h => h(App),
   router,
   store,
-  vuetify: new Vuetify({}),
+  vuetify,
 }).$mount('#app');
diff --git a/web/views/FcLayoutDrawerMap.vue b/web/views/FcLayoutDrawerMap.vue
index 21a6f4fc9..3935930ed 100644
--- a/web/views/FcLayoutDrawerMap.vue
+++ b/web/views/FcLayoutDrawerMap.vue
@@ -8,7 +8,11 @@
     }">
     <div
       v-if="hasDrawer"
-      class="pane-drawer-toggle elevation-n1 font-size-xl"
+      class="pane-drawer-toggle"
+      :class="{
+        'align-center': !vertical,
+        'd-flex': !vertical,
+      }"
       @click="setDrawerOpen(!drawerOpen)">
       <div class="text-center">
         <v-icon small>{{iconDrawerToggle}}</v-icon>
@@ -21,7 +25,7 @@
       }">
       <div
         v-show="showDrawer"
-        class="fc-drawer elevation-3 flex-grow-1 flex-shrink-0"
+        class="fc-drawer flex-grow-1 flex-shrink-0"
         :class="{
           'order-2': vertical,
         }">
@@ -84,6 +88,13 @@ export default {
   position: relative;
   width: 100%;
 
+  & .fc-drawer {
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.2),
+      0 1px 10px rgba(0, 0, 0, 0.12),
+      0 4px 5px rgba(0, 0, 0, 0.14);
+  }
+
   & > .fc-pane-wrapper > div {
     flex-basis: 0;
   }
@@ -96,7 +107,7 @@ export default {
     z-index: var(--z-index-controls);
 
     &:hover {
-      background-color: var(--base-lightest);
+      background-color: var(--v-shading-base);
     }
   }
 
@@ -113,13 +124,14 @@ export default {
 
   &.vertical {
     & > .pane-drawer-toggle {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       border-radius: var(--space-s) var(--space-s) 0 0;
       bottom: 50%;
       height: 16px;
       left: calc(50% - 19px);
       width: 38px;
       & i {
-        margin-top: -22px;
+        margin-top: -6px;
       }
     }
     & > .fc-pane-wrapper > div {
@@ -129,11 +141,14 @@ export default {
 
   &.drawer-open {
     &.horizontal > .pane-drawer-toggle {
+      border-left: 1px solid rgba(0, 0, 0, 0.12);
       left: 50%;
     }
     &.vertical {
       & > .pane-drawer-toggle {
+        border-left: 1px solid rgba(0, 0, 0, 0.12);
         border-radius: 0 0 var(--space-s) var(--space-s);
+        border-right: 1px solid rgba(0, 0, 0, 0.12);
         bottom: auto;
         top: 0;
       }
diff --git a/web/views/FcRequestsTrack.vue b/web/views/FcRequestsTrack.vue
index fad4014be..b0212b583 100644
--- a/web/views/FcRequestsTrack.vue
+++ b/web/views/FcRequestsTrack.vue
@@ -6,75 +6,76 @@
         <v-tab>Closed</v-tab>
       </v-tabs>
       <v-divider></v-divider>
-      <div class="pa-5">
-        <h1 class="display-2">
+      <div class="px-5">
+        <h1 class="display-4 mt-5">
           <span v-if="closed">Closed Requests</span>
           <span v-else>Open Requests</span>
         </h1>
         <div class="align-center d-flex mt-8 mb-2">
-          <v-btn
+          <FcButton
             v-if="selectedItems.length === 0"
             class="mr-2"
             :loading="loadingRefresh"
-            outlined
+            type="secondary"
             @click="actionRefresh()">
-            <v-icon left>mdi-refresh</v-icon>
+            <v-icon
+              color="primary"
+              left>mdi-refresh</v-icon>
             Refresh
-          </v-btn>
+          </FcButton>
           <template v-else>
-            <v-btn
+            <FcButton
               v-if="closed"
               class="mr-2"
-              outlined
+              type="secondary"
               @click="actionReopen(selectedItems)">
-              <v-icon left>mdi-lock-open-outline</v-icon>
+              <v-icon color="primary" left>mdi-lock-open-outline</v-icon>
               Reopen
-            </v-btn>
+            </FcButton>
             <template v-else>
               <template
                 v-if="isSupervisor">
-                <v-btn
+                <FcButton
                   class="mr-2"
-                  outlined
+                  type="secondary"
                   @click="actionApprove(selectedItems)">
-                  <v-icon left>mdi-thumb-up</v-icon>
+                  <v-icon color="primary" left>mdi-thumb-up</v-icon>
                   Approve
-                </v-btn>
-                <v-btn
+                </FcButton>
+                <FcButton
                   class="mr-2"
-                  outlined
+                  type="secondary"
                   @click="actionComplete(selectedItems)">
-                  <v-icon left>mdi-clipboard-check</v-icon>
+                  <v-icon color="primary" left>mdi-clipboard-check</v-icon>
                   Complete
-                </v-btn>
+                </FcButton>
               </template>
-              <v-btn
+              <FcButton
                 class="mr-2"
-                outlined
+                type="secondary"
                 @click="actionDownload(selectedItems)">
-                <v-icon left>mdi-cloud-download</v-icon>
+                <v-icon color="primary" left>mdi-cloud-download</v-icon>
                 Download
-              </v-btn>
-              <v-btn
+              </FcButton>
+              <FcButton
                 class="mr-2"
-                outlined
+                type="secondary"
                 @click="actionClose(selectedItems)">
-                <v-icon left>mdi-lock</v-icon>
+                <v-icon color="primary" left>mdi-lock</v-icon>
                 Close
-              </v-btn>
+              </FcButton>
             </template>
           </template>
         </div>
         <v-divider></v-divider>
       </div>
     </header>
-    <section class="flex-grow-1 flex-shrink-1 overflow-y-auto pa-5">
+    <section class="flex-grow-1 flex-shrink-1 overflow-y-auto px-5">
       <FcDataTable
         v-model="selectedItems"
         class="fc-data-table-requests"
         :class="{ supervisor: isSupervisor }"
         :columns="columns"
-        expandable
         :items="items"
         :loading="loading || loadingRefresh"
         must-sort
@@ -124,45 +125,37 @@
         </template>
         <template v-slot:item.ACTIONS="{ item }">
           <div class="text-right">
-            <v-btn
-              v-if="isSupervisor && !closed"
-              class="mr-2"
-              :color="item.urgent ? 'warning' : ''"
-              icon
-              @click="actionUrgentToggle(item)">
-              <v-icon>mdi-clipboard-alert</v-icon>
-            </v-btn>
             <v-icon
-              v-else-if="item.urgent"
+              v-if="item.urgent"
               class="mr-2"
               color="warning"
               title="Urgent">mdi-clipboard-alert</v-icon>
 
             <template v-if="isSupervisor && !closed">
-              <v-btn
+              <FcButton
                 class="mr-2"
-                :color="item.status === StudyRequestStatus.ACCEPTED ? 'primary' : ''"
-                icon
+                :color="item.status === StudyRequestStatus.ACCEPTED ? 'primary' : 'unselected'"
                 :title="'Approve Request #' + item.id"
+                type="icon"
                 @click="actionApprove([item])">
                 <v-icon>mdi-thumb-up</v-icon>
-              </v-btn>
-              <v-btn
+              </FcButton>
+              <FcButton
                 class="mr-2"
-                :color="item.status === StudyRequestStatus.REJECTED ? 'error' : ''"
-                icon
+                :color="item.status === StudyRequestStatus.REJECTED ? 'error' : 'unselected'"
                 :title="'Ask for Changes to Request #' + item.id"
+                type="icon"
                 @click="actionReject([item])">
                 <v-icon>mdi-clipboard-arrow-left</v-icon>
-              </v-btn>
+              </FcButton>
             </template>
 
-            <v-btn
-              icon
+            <FcButton
               :title="'View Request #' + item.id"
+              type="icon"
               @click="actionShowRequest(item)">
               <v-icon>mdi-file-eye</v-icon>
-            </v-btn>
+            </FcButton>
           </div>
         </template>
       </FcDataTable>
@@ -189,6 +182,7 @@ import {
 } from '@/lib/api/WebApi';
 import TimeFormatters from '@/lib/time/TimeFormatters';
 import FcDataTable from '@/web/components/FcDataTable.vue';
+import FcButton from '@/web/components/inputs/FcButton.vue';
 import FcMixinRouteAsync from '@/web/mixins/FcMixinRouteAsync';
 
 function getItemFields(item) {
@@ -265,6 +259,7 @@ export default {
   name: 'FcRequestsTrack',
   mixins: [FcMixinRouteAsync],
   components: {
+    FcButton,
     FcDataTable,
   },
   data() {
@@ -344,7 +339,7 @@ export default {
   },
   watch: {
     closed() {
-      this.selection = [];
+      this.selectedItems = [];
     },
   },
   methods: {
@@ -415,12 +410,6 @@ export default {
       }
       this.$router.push(route);
     },
-    actionUrgentToggle(item) {
-      const { urgent } = item;
-      this.setStudyRequests([item], {
-        urgent: !urgent,
-      });
-    },
     async loadAsyncForRoute() {
       const {
         studyRequests,
@@ -450,13 +439,7 @@ export default {
 
 <style lang="postcss">
 .fc-requests-track {
-  max-height: 100%;
+  max-height: 100vh;
   width: 100%;
-
-  .fc-data-table-requests {
-    .priority-urgent {
-      color: var(--error);
-    }
-  }
 }
 </style>