diff --git a/app/theme.scss b/app/theme.scss
new file mode 100644
index 000000000..9ff3f04da
--- /dev/null
+++ b/app/theme.scss
@@ -0,0 +1,441 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'styles' with (
+  $theme-show-notifications: false,
+  $theme-image-path: '~/../node_modules/nasawds/src/img',
+  $theme-font-path: '~/../node_modules/nasawds/src/fonts'
+);
+
+@use 'uswds-core' as *;
+
+/*
+ * USWDS prose fix ups:
+ * - Unset max-width for paragraphs and list items in a grid container because
+ *   the intended maximum width is already provided by the grid container
+ *   itself.
+ * - No top margin for h1 if it is the first element in the containing element.
+ */
+.grid-container .usa-paragraph,
+.grid-container .usa-list > li {
+  max-width: none;
+}
+
+h1:first-child {
+  margin-top: 0;
+}
+
+/*
+ * Size and position the NASA meatball logo in the header. 
+ */
+
+#site-logo {
+  height: 2em;
+  padding-right: 0.25em;
+}
+
+@media all and (max-width: 64em) {
+  #site-logo {
+    vertical-align: middle;
+  }
+}
+
+@media all and (min-width: 64em) {
+  .usa-header--basic .usa-navbar {
+    width: 50%;
+  }
+
+  #site-title {
+    display: inline-block;
+    max-width: 70%;
+  }
+}
+
+/*
+ * Without this, the mobile nav menu button seems to extend one pixel below
+ * the header.
+ */
+
+.usa-header--dark .usa-navbar {
+  border-bottom-color: color('ink');
+}
+
+/*
+ * Pin the footer to the bottom of the screen.
+ * See https://css-tricks.com/a-clever-sticky-footer-technique/
+ */
+
+.usa-identifier {
+  position: sticky; /* instead of absolute */
+  top: 100vh;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+/*
+ * Set heading font to Helvetica
+ */
+
+@for $i from 1 through 6 {
+  h#{$i} > a {
+    font-family: family('lang');
+  }
+}
+
+.usa-footer__logo-heading {
+  font-family: family('lang');
+}
+
+/*
+ * Hover link indicator for headings (like in GitHub's display of Markdown)
+ */
+
+@for $i from 1 through 6 {
+  h#{$i} > a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  h#{$i} > a:hover::before {
+    content: url('~/../node_modules/nasawds/src/img/usa-icons/link.svg');
+    position: relative;
+    float: left;
+    width: 0;
+    right: 30px;
+  }
+}
+
+/*
+ * Background color for code samples
+ */
+
+code,
+code.hljs {
+  @extend .bg-base-lightest;
+}
+
+/*
+ * Styling for external links
+ */
+
+a[rel~='external'] {
+  @extend .usa-link--external;
+}
+
+/*
+ * Active nav links
+ */
+
+.active {
+  @extend .usa-current;
+}
+
+/*
+ * Disabled link visited color in contact links
+ */
+
+.contact-link a:visited {
+  @include u-text($theme-link-color);
+}
+
+/*
+ * Styles for notice cards
+ */
+
+.notice-card:hover .usa-card__container {
+  @include u-border('ink');
+}
+
+.notice-card {
+  text-decoration: none;
+}
+
+/*
+ * Accented cards
+ */
+
+.card-accent-cool {
+  & .usa-card__container {
+    @include u-border('accent-cool');
+    @include u-bg('accent-cool');
+  }
+
+  & .usa-card__body {
+    @include u-bg('white');
+  }
+}
+
+/*
+ * react-tag-autocomplete styles, adapted from
+ * https://github.com/i-like-robots/react-tags/blob/main/example/styles.css
+ */
+
+.react-tags {
+  position: relative;
+  padding: 6px 0 0 6px;
+  border: 1px solid #d1d1d1;
+  border-radius: 1px;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags.is-active {
+  @include focus-outline;
+}
+
+.react-tags__label {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.react-tags__list {
+  display: inline;
+  padding: 0;
+}
+
+.react-tags__list-item {
+  display: inline;
+  margin: 0 6px 6px 0;
+}
+
+.react-tags__combobox {
+  display: inline-block;
+
+  /* match tag layout */
+  padding: 7px 2px;
+  margin-bottom: 6px;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+}
+
+.react-tags__combobox-input,
+input.react-tags__combobox-input:focus {
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@media screen and (min-width: 30em) {
+  .react-tags__listbox {
+    width: 240px;
+  }
+}
+
+.react-tags__listbox {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 5px);
+  left: -2px;
+  right: -2px;
+  padding: 0;
+  list-style: none;
+  background: white;
+  border: 1px solid #d1d1d1;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__listbox-option {
+  border-bottom: 1px solid #ddd;
+  padding: 6px 8px;
+}
+
+.react-tags__listbox-option:hover {
+  cursor: pointer;
+  background: #eee;
+}
+
+.react-tags__listbox-option.is-active {
+  background: #b7cfe0;
+}
+
+.react-tags__listbox-option.is-disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
+
+/*
+ * Client credential cards
+ */
+
+.segmented-card-headline h3,
+.segmented-card-headline p,
+.segmented-card-headline small {
+  display: inline;
+  vertical-align: bottom;
+}
+
+.segmented-card-headline h3 {
+  font-weight: bold;
+}
+
+.client-cred-card-centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ * Indeterminate checkboxes
+ */
+
+.usa-checkbox__input:indeterminate {
+  &:not(:disabled) {
+    @include format-input {
+      @include add-background-svg('checkbox-indeterminate', '~/img');
+      background-size: 75%;
+      background-position: center;
+      background-color: #0050d8;
+      box-shadow: 0 0 0 2px #0050d8;
+    }
+  }
+  &:disabled {
+    @include format-input {
+      @include add-background-svg('checkbox-indeterminate', '~/img');
+      background-size: 75%;
+      background-position: center;
+      background-color: rgba(27, 27, 27, 0.3);
+    }
+  }
+}
+
+/*
+ Hero formatting
+*/
+
+.gcn-hero-background {
+  background-image: none;
+
+  @include at-media('tablet-lg') {
+    background-image: url('~/img/hero/center.jpg'), url('~/img/hero/left.jpg');
+    background-repeat: no-repeat, repeat-x;
+    background-size: auto 100%;
+    background-position-x: right;
+    background-position-y: top;
+    background-origin: padding-box;
+    padding-left: calc(0.5 * (100vw - units($theme-grid-container-max-width)));
+    box-sizing: content-box;
+    max-width: units($theme-grid-container-max-width);
+  }
+}
+
+.usa-hero__callout {
+  @include at-media('tablet-lg') {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.gcn-hero-background-right {
+  @include at-media('tablet-lg') {
+    background-image: url('~/img/hero/right.jpg');
+    background-repeat: repeat-x;
+    background-size: auto 100%;
+    background-position-x: left;
+    background-position-y: top;
+  }
+}
+
+.gcn-hero-image {
+  @include at-media('tablet-lg') {
+    display: none;
+  }
+}
+
+/*
+  General Responsiveness in missions page
+*/
+a {
+  word-break: break-word;
+}
+
+.overflow-table {
+  overflow-x: scroll;
+}
+
+/* 
+  Bottom aligned header rows 
+*/
+.bottom-aligned {
+  display: inline;
+  vertical-align: bottom;
+}
+
+/*
+  Fully span the row width for segmented columns
+*/
+.full-width-span {
+  flex: 1 1 100%;
+}
+
+.notice-types-overflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/*
+ * Suppress vertical margins for nested button groups inside button groups
+ */
+
+.usa-button-group__item .usa-button-group__item {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/*
+ * Override user nav text colors to add contrast when not desktop
+ * FIXME: remove once https://github.com/bruffridge/nasawds/issues/10 is fixed
+ */
+.usa-nav__primary a:not(.usa-button):not(.usa-current):not(.active) {
+  @media (max-width: 63.99em) {
+    color: white;
+  }
+}
+.usa-nav__primary a:not(.usa-button):not(.usa-current):hover {
+  @media (max-width: 63.99em) {
+    color: #0050d8;
+  }
+}
+
+ul#user {
+  @media (max-width: 63.99em) {
+    background-color: #1b1b1b;
+  }
+}
+
+/*
+ * Workaround for https://github.com/uswds/uswds/pull/5418
+ */
+.usa-nav__submenu {
+  @include at-media($theme-header-min-width) {
+    padding: units(1);
+  }
+}