diff --git a/assets/img/bg_login.png b/assets/img/bg_login.png
new file mode 100644
index 0000000..54ab4bf
Binary files /dev/null and b/assets/img/bg_login.png differ
diff --git a/assets/img/flex-type.svg b/assets/img/flex-type.svg
new file mode 100644
index 0000000..bf5e620
--- /dev/null
+++ b/assets/img/flex-type.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+  <g id="Group_173248" data-name="Group 173248" transform="translate(-403.115 -635)">
+    <g id="Rectangle_1844" data-name="Rectangle 1844" transform="translate(403.115 635)" fill="#edf6fd" stroke="#dbe9f4" stroke-width="1">
+      <rect width="50" height="50" rx="4" stroke="none"/>
+      <rect x="0.5" y="0.5" width="49" height="49" rx="3.5" fill="none"/>
+    </g>
+    <g id="school-bus-front" transform="translate(413.537 640.5)">
+      <path id="Path_38269" data-name="Path 38269" d="M28.525,15.822h-1.7a.632.632,0,0,0-.631.631v2.67h-.609v-8.7c0-1.663-1.228-3.036-3.551-3.97a20.55,20.55,0,0,0-7.4-1.219h-.109a20.552,20.552,0,0,0-7.4,1.219c-2.323.934-3.551,2.307-3.551,3.97v8.7H2.959v-2.67c0-.348-.283-.805-.631-.805H.631c-.348,0-.631.458-.631.805v4.382a.632.632,0,0,0,.631.631H3.568v7.094A2.512,2.512,0,0,0,5.7,31.041V32.92a.847.847,0,0,0,.846.846H8.657A.847.847,0,0,0,9.5,32.92V31.069H19.654V32.92a.847.847,0,0,0,.846.846h2.106a.847.847,0,0,0,.846-.846V31.041a2.512,2.512,0,0,0,2.136-2.481V21.466h2.938a.632.632,0,0,0,.631-.631V16.453A.632.632,0,0,0,28.525,15.822ZM.832,20.635v-3.98h1.3v2.885a.416.416,0,0,0,.416.416H3.568v.679ZM8.671,32.92a.014.014,0,0,1-.014.014H6.551a.014.014,0,0,1-.014-.014V31.069H8.671V32.92Zm13.949,0a.014.014,0,0,1-.014.014H20.5a.014.014,0,0,1-.014-.014V31.069H22.62V32.92Zm2.136-4.36a1.678,1.678,0,0,1-1.676,1.677h-17A1.678,1.678,0,0,1,4.4,28.561V10.423c0-2.861,5.093-4.358,10.123-4.358h.109c5.031,0,10.123,1.5,10.123,4.358V28.561Zm3.569-7.926H25.588v-.679h1.025a.416.416,0,0,0,.416-.416V16.654h1.3v3.98Z" transform="translate(0)" fill="#162848"/>
+      <g id="Group_173312" data-name="Group 173312" transform="translate(5.704 6.729)">
+        <g id="Group_173300" data-name="Group 173300" transform="translate(0 4.296)">
+          <path id="Path_38270" data-name="Path 38270" d="M111.889,113.018h-14.3a1.726,1.726,0,0,1-1.724-1.724V104.3a1.726,1.726,0,0,1,1.724-1.723h14.3a1.726,1.726,0,0,1,1.724,1.723v6.994A1.726,1.726,0,0,1,111.889,113.018Zm-14.3-9.609a.893.893,0,0,0-.892.892v6.994a.893.893,0,0,0,.892.892h14.3a.893.893,0,0,0,.892-.892V104.3a.893.893,0,0,0-.892-.892Z" transform="translate(-95.865 -102.577)" fill="#162848"/>
+        </g>
+        <g id="Group_173301" data-name="Group 173301" transform="translate(14.299 16.328)">
+          <path id="Path_38271" data-name="Path 38271" d="M337.9,308.238a1.724,1.724,0,1,1,1.724-1.724A1.726,1.726,0,0,1,337.9,308.238Zm0-2.616a.892.892,0,1,0,.892.892A.893.893,0,0,0,337.9,305.622Z" transform="translate(-336.171 -304.79)" fill="#162848"/>
+        </g>
+        <g id="Group_173302" data-name="Group 173302" transform="translate(0 16.328)">
+          <path id="Path_38272" data-name="Path 38272" d="M97.589,308.238a1.724,1.724,0,1,1,1.723-1.724A1.726,1.726,0,0,1,97.589,308.238Zm0-2.616a.892.892,0,1,0,.891.892A.893.893,0,0,0,97.589,305.622Z" transform="translate(-95.865 -304.79)" fill="#162848"/>
+        </g>
+        <g id="Group_173303" data-name="Group 173303" transform="translate(1.794 0)">
+          <path id="Path_38273" data-name="Path 38273" d="M138.408,33.954H127.77c-1.634,0-1.761-.886-1.761-1.157,0-.815.926-1.435,2.833-1.9a17.478,17.478,0,0,1,8.5,0c1.906.462,2.833,1.083,2.833,1.9C140.169,33.069,140.042,33.954,138.408,33.954Zm-5.319-2.747a19.094,19.094,0,0,0-4.052.5c-1.738.421-2.2.9-2.2,1.089s.365.325.929.325h10.638c.565,0,.93-.128.93-.325s-.459-.668-2.2-1.089A19.1,19.1,0,0,0,133.089,31.208Z" transform="translate(-126.009 -30.376)" fill="#162848"/>
+        </g>
+        <g id="Group_173307" data-name="Group 173307" transform="translate(6.351 6.627)">
+          <g id="Group_173304" data-name="Group 173304">
+            <path id="Path_38274" data-name="Path 38274" d="M203.012,147.534a.416.416,0,0,1-.356-.63l2.975-4.947a.416.416,0,0,1,.713.429l-2.975,4.947A.416.416,0,0,1,203.012,147.534Z" transform="translate(-202.597 -141.755)" fill="#162848"/>
+          </g>
+          <g id="Group_173305" data-name="Group 173305" transform="translate(1.419 1.329)">
+            <path id="Path_38275" data-name="Path 38275" d="M226.855,168.536a.416.416,0,0,1-.356-.63l2.176-3.618a.416.416,0,1,1,.713.429l-2.176,3.618A.416.416,0,0,1,226.855,168.536Z" transform="translate(-226.44 -164.086)" fill="#162848"/>
+          </g>
+          <g id="Group_173306" data-name="Group 173306" transform="translate(2.837 2.657)">
+            <path id="Path_38276" data-name="Path 38276" d="M250.694,189.536a.416.416,0,0,1-.356-.63l1.377-2.29a.416.416,0,0,1,.713.429l-1.377,2.29A.416.416,0,0,1,250.694,189.536Z" transform="translate(-250.279 -186.414)" fill="#162848"/>
+          </g>
+        </g>
+        <g id="Group_173311" data-name="Group 173311" transform="translate(5.116 17.636)">
+          <g id="Group_173308" data-name="Group 173308" transform="translate(0 0)">
+            <path id="Path_38277" data-name="Path 38277" d="M188.947,327.6h-6.684a.416.416,0,1,1,0-.832h6.684a.416.416,0,1,1,0,.832Z" transform="translate(-181.847 -326.772)" fill="#162848"/>
+          </g>
+          <g id="Group_173309" data-name="Group 173309" transform="translate(0 1.724)">
+            <path id="Path_38278" data-name="Path 38278" d="M188.947,356.575h-6.684a.416.416,0,1,1,0-.832h6.684a.416.416,0,1,1,0,.832Z" transform="translate(-181.847 -355.743)" fill="#162848"/>
+          </g>
+          <g id="Group_173310" data-name="Group 173310" transform="translate(0 3.448)">
+            <path id="Path_38279" data-name="Path 38279" d="M188.947,385.546h-6.684a.416.416,0,0,1,0-.832h6.684a.416.416,0,0,1,0,.832Z" transform="translate(-181.847 -384.714)" fill="#162848"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/assets/img/osw-type.svg b/assets/img/osw-type.svg
new file mode 100644
index 0000000..714591d
--- /dev/null
+++ b/assets/img/osw-type.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+  <g id="Group_173248" data-name="Group 173248" transform="translate(-403.115 -635)">
+    <g id="Rectangle_1844" data-name="Rectangle 1844" transform="translate(403.115 635)" fill="#eff7e5" stroke="#dceacc" stroke-width="1">
+      <rect width="50" height="50" rx="4" stroke="none"/>
+      <rect x="0.5" y="0.5" width="49" height="49" rx="3.5" fill="none"/>
+    </g>
+    <path id="crosswalk" d="M15.654,12.02a.469.469,0,0,1-.469-.469V1.407a.47.47,0,0,0-.469-.469H10.9a.47.47,0,0,0-.469.469V11.551c0,.435.583.469.762.469H12.81a.469.469,0,0,1,.469.469V27.676a.469.469,0,0,1-.938,0V12.958H11.2a1.5,1.5,0,0,1-1.7-1.407V1.407A1.409,1.409,0,0,1,10.9,0h3.811a1.409,1.409,0,0,1,1.407,1.407V11.551A.469.469,0,0,1,15.654,12.02ZM13.719,9.7A.909.909,0,1,1,12.81,8.8.91.91,0,0,1,13.719,9.7Zm-.909-.029a.029.029,0,0,0,0,.059A.029.029,0,0,0,12.81,9.675Zm.909-3.2a.909.909,0,1,1-.909-.909A.91.91,0,0,1,13.719,6.479ZM12.81,6.45a.029.029,0,0,0,0,.059A.029.029,0,0,0,12.81,6.45Zm.909-3.2a.909.909,0,1,1-.909-.909A.91.91,0,0,1,13.719,3.254Zm-.909-.029a.029.029,0,0,0,0,.059A.029.029,0,0,0,12.81,3.225Zm8.238,17.767H18.7a.469.469,0,0,0-.439.3L15.919,27.51a.469.469,0,0,0,.439.635h4.691a.469.469,0,0,0,0-.938H17.036l1.991-5.277h1.552v3.049a.469.469,0,1,0,.938,0V21.461A.469.469,0,0,0,21.048,20.992Zm7.287,3a.469.469,0,0,0-.922.174l.574,3.044H24.429l1-5.277h1.957a.469.469,0,1,0,0-.938H25.035a.469.469,0,0,0-.461.382L23.4,27.589a.469.469,0,0,0,.461.556h4.691a.469.469,0,0,0,.461-.556ZM36.5,27.51,34.152,21.3a.469.469,0,0,0-.439-.3H31.368a.469.469,0,0,0,0,.938h2.021l1.991,5.277H31.837V23.835a.469.469,0,1,0-.938,0v3.841a.469.469,0,0,0,.469.469h4.691A.469.469,0,0,0,36.5,27.51Z" transform="translate(405.104 645.928)"/>
+  </g>
+</svg>
diff --git a/assets/img/pathways-type.svg b/assets/img/pathways-type.svg
new file mode 100644
index 0000000..2edfaa0
--- /dev/null
+++ b/assets/img/pathways-type.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50">
+  <defs>
+    <clipPath id="clip-path">
+      <path id="path4647" d="M0-682.665H28.945v28.945H0Z" transform="translate(0 682.665)" fill="#162848"/>
+    </clipPath>
+  </defs>
+  <g id="Group_173248" data-name="Group 173248" transform="translate(-403.115 -635)">
+    <g id="Rectangle_1844" data-name="Rectangle 1844" transform="translate(403.115 635)" fill="#fdf7e5" stroke="#f5ebcc" stroke-width="1">
+      <rect width="50" height="50" rx="4" stroke="none"/>
+      <rect x="0.5" y="0.5" width="49" height="49" rx="3.5" fill="none"/>
+    </g>
+    <g id="g4641" transform="translate(413.642 1328.192)">
+      <g id="g4643" transform="translate(0 -682.665)">
+        <g id="g4645" clip-path="url(#clip-path)">
+          <g id="g4651" transform="translate(1.347 6.189)">
+            <path id="path4653" d="M0-153.61v8.325a2.265,2.265,0,0,0,2.265,2.265H13.619a2.265,2.265,0,0,0,2.265-2.265v-12.861a2.265,2.265,0,0,0-2.265-2.265H2.265A2.265,2.265,0,0,0,0-158.147v2.84" transform="translate(0 160.412)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4655" transform="translate(2.651 9.731)">
+            <path id="path4657" d="M-108.21,0h-3.7A1.1,1.1,0,0,0-113,1.1V4.567a1.1,1.1,0,0,0,1.1,1.1h3.7a1.1,1.1,0,0,0,1.1-1.1V1.1A1.1,1.1,0,0,0-108.21,0Z" transform="translate(113.001)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4659" transform="translate(10.041 9.731)">
+            <path id="path4661" d="M0-24.749v3.472a1.1,1.1,0,0,0,1.1,1.1h3.7a1.1,1.1,0,0,0,1.1-1.1v-3.472a1.1,1.1,0,0,0-1.1-1.1H1.1A1.1,1.1,0,0,0,0-24.749Z" transform="translate(0 25.845)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4663" transform="translate(2.669 18.059)">
+            <path id="path4665" d="M-58.956-29.479a1.305,1.305,0,0,0-1.305-1.305,1.305,1.305,0,0,0-1.305,1.305,1.305,1.305,0,0,0,1.305,1.305A1.305,1.305,0,0,0-58.956-29.479Z" transform="translate(61.567 30.784)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4667" transform="translate(13.299 18.059)">
+            <path id="path4669" d="M-58.956-29.479a1.305,1.305,0,0,0-1.305-1.305,1.305,1.305,0,0,0-1.305,1.305,1.305,1.305,0,0,0,1.305,1.305A1.305,1.305,0,0,0-58.956-29.479Z" transform="translate(61.567 30.784)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4671" transform="translate(5.107 4.494)">
+            <path id="path4673" d="M-188.935-38.285l-.157-1.157a.621.621,0,0,0-.616-.538h-6.821a.621.621,0,0,0-.615.538l-.157,1.157" transform="translate(197.301 39.98)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4675" transform="translate(14.689 7.386)">
+            <path id="path4677" d="M-26.588-13.294a.589.589,0,0,0-.589-.589.589.589,0,0,0-.589.589.589.589,0,0,0,.589.589A.589.589,0,0,0-26.588-13.294Z" transform="translate(27.765 13.883)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4679" transform="translate(2.712 7.386)">
+            <path id="path4681" d="M-26.588-13.294a.589.589,0,0,0-.589-.589.589.589,0,0,0-.589.589.589.589,0,0,0,.589.589A.589.589,0,0,0-26.588-13.294Z" transform="translate(27.765 13.883)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4683" transform="translate(6.519 21.22)">
+            <path id="path4685" d="M-125.129-53.309l-.286-1.682a.815.815,0,0,0-.8-.678h-3.36a.816.816,0,0,0-.8.678l-.286,1.682" transform="translate(130.669 55.669)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4687" transform="translate(7.029 7.386)">
+            <path id="path4689" d="M-87.607-28.992h-3.237a.642.642,0,0,1-.642-.642.642.642,0,0,1,.642-.642h3.237a.642.642,0,0,1,.642.642A.642.642,0,0,1-87.607-28.992Z" transform="translate(91.486 30.276)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4691" transform="translate(6.666 17.387)">
+            <path id="path4693" d="M0,0H5.246" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4695" transform="translate(6.666 18.643)">
+            <path id="path4697" d="M0,0H5.246" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4699" transform="translate(0.424 23.581)">
+            <path id="path4701" d="M-73.718-111.582h-3.264l3.188-4.941h1.876Z" transform="translate(76.982 116.522)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4703" transform="translate(13.09 23.581)">
+            <path id="path4705" d="M-40.667-111.582H-37.4l-3.188-4.941h-1.876Z" transform="translate(42.468 116.522)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4707" transform="translate(4.785 25.51)">
+            <path id="path4709" d="M-203.443,0h-9.008" transform="translate(212.451)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4711" transform="translate(4.153 27.246)">
+            <path id="path4713" d="M-232.005,0h-10.273" transform="translate(242.278)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4715" transform="translate(18.771 0.424)">
+            <path id="path4717" d="M-27.661-56.046h8.525v-2.482h-8.525A1.225,1.225,0,0,0-28.885-57.3v.032A1.225,1.225,0,0,0-27.661-56.046Z" transform="translate(28.885 58.528)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4719" transform="translate(18.155 23.283)">
+            <path id="path4721" d="M-30.392,0h-1.346V5.238h10.367V0H-28.7" transform="translate(31.737)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4723" transform="translate(19.902 6.494)">
+            <path id="path4725" d="M-126.139-84.917h-4.553a1.032,1.032,0,0,1-1.032-1.032v-1.7a1.032,1.032,0,0,1,1.032-1.032h4.553a1.032,1.032,0,0,1,1.032,1.032v1.7A1.032,1.032,0,0,1-126.139-84.917Z" transform="translate(131.724 88.677)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <g id="g4727" transform="translate(28.521 2.906)">
+            <path id="path4729" d="M0,0V20.378" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+          </g>
+          <path id="path4731" d="M514.142-610.549h-3.083v-3.588h3.083Z" transform="translate(-489.39 617.043)" fill="none" stroke="#162848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.8"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/assets/img/tdei-logo.png b/assets/img/tdei-logo.png
new file mode 100644
index 0000000..b33898b
Binary files /dev/null and b/assets/img/tdei-logo.png differ
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 46b42c0..3b1e1db 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,9 +1,29 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  transition: background-color 600000s, color 600000s;
+}
 @import "maplibre-gl/dist/maplibre-gl.css";
 @import "vue3-toastify/dist/index.css";
 
 :root {
+  --primary-font-family: "Open Sans", sans-serif;
+  --secondary-font-family: "Montserrat", sans-serif;
+  --brand-primary: #32006e;
+  --brand-accent: #4b2e83;
+  --primary-color: var(--brand-primary);
+  --primary-color-dark: var(--brand-accent);
+  --secondary-color: #5f647a;
+  --tdei-blue: #586AB5;
+  --tdei-green: #479FA1;
+  --tdei-cyan: #59c3c8;
+  --purple-background-light: #f4f0fb;
+  --purple-background-dark: #ddd2ee;
+  --purple-background-medium: #ebe4f6;
+  --white: #ffffff;
   --ws-create-color: $review-create-color;
   --ws-modify-color: $review-modify-color;
   --ws-delete-color: $review-delete-color;
@@ -14,6 +34,14 @@ html, body, #__nuxt {
   height: 100%;
 }
 
+body {
+  margin: 0;
+  font-family: var(--primary-font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
 /* Vue page transitions */
 .fade-enter-active, .fade-leave-active,
 .layout-enter-active, .layout-leave-active,
@@ -47,6 +75,13 @@ label > .form-select:first-child {
   box-shadow: $box-shadow;
 }
 
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #2f3661;
+  text-decoration: none;
+  background-color: #e2f0f8;
+}
+
 /* Review */
 
 .bg-create {
@@ -67,3 +102,322 @@ label > .form-select:first-child {
 .text-delete {
   color: #{darken($review-delete-color, 3%)};
 }
+
+/* TDEI Utility Classes */
+
+.tdei-primary-button {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #fff;
+  font-weight: 600;
+  border-radius: 4px;
+
+  &:hover,
+  &:active {
+    background-color: var(--primary-color-dark);
+    border-color: var(--primary-color-dark);
+    color: #fff;
+  }
+
+  &:focus {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.25rem rgba(50, 0, 110, 0.25);
+  }
+
+  &:disabled {
+    background-color: #cccccc;
+    border-color: #cccccc;
+    color: #ffffff;
+    cursor: not-allowed;
+  }
+}
+
+.tdei-secondary-button {
+  border-color: var(--secondary-color);
+  font-weight: 600 !important;
+
+  &:hover {
+    background-color: var(--secondary-color);
+    color: #fff;
+    border-color: var(--secondary-color);
+  }
+}
+
+.btn-check:checked + .tdei-secondary-button,
+.btn-check:active + .tdei-secondary-button,
+.tdei-secondary-button.active,
+.tdei-secondary-button:active {
+  background-color: var(--secondary-color);
+  color: #fff;
+  border-color: var(--secondary-color);
+}
+
+.tdei-primary-link {
+  color: var(--primary-color);
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover {
+    color: var(--primary-color-dark);
+    text-decoration: underline;
+  }
+}
+
+.page-header-title {
+  font-family: var(--secondary-font-family);
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.page-header-subtitle {
+  font-family: var(--secondary-font-family);
+  font-size: 14px;
+  color: var(--secondary-color);
+}
+
+.tdei-bold-name {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.tdei-name-desc {
+  font-size: 14px;
+  color: var(--secondary-color);
+}
+
+.tdei-hint-text {
+  font-size: 14px;
+  color: var(--secondary-color);
+  font-style: italic;
+}
+
+.apiKey {
+  border-top: 1px dashed #b5b5b5;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.jsonContent {
+  border: 1px solid var(--secondary-color);
+  margin-top: 1%;
+  overflow: auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+.tdei-outline-cyan-button {
+  color: var(--tdei-cyan);
+  font-weight: 600;
+  border: 2px solid var(--tdei-cyan);
+
+  &:hover,
+  &:active {
+    color: #fff;
+    background-color: var(--tdei-cyan);
+    border-color: var(--tdei-cyan);
+  }
+
+  &:focus,
+  &:focus-visible {
+    color: var(--tdei-cyan);
+    border-color: var(--tdei-cyan);
+    box-shadow: 0 0 0 0.25rem rgba(89, 195, 200, 0.25);
+  }
+
+  &:disabled {
+    color: #9aa0b3;
+    border-color: #d3d7e2;
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+}
+
+.btn.tdei-rounded-button {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #fff;
+  font-weight: 600;
+  border-radius: 100px;
+
+  &:hover,
+  &:active {
+    background-color: var(--primary-color-dark);
+    border-color: var(--primary-color-dark);
+    color: #fff;
+  }
+}
+
+.nav-tabs .nav-link {
+  color: var(--secondary-color);
+  background-color: transparent !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  padding: 10px 0;
+  margin-right: 15px;
+}
+
+.nav-tabs .nav-link:hover {
+  color: gray;
+  border: none;
+}
+
+.nav-tabs .nav-link.active {
+  color: #162848;
+  background-color: #fff;
+  font-weight: 600;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 4px solid var(--primary-color);
+}
+
+.maroon-bg,
+.maroon-bg:hover {
+  background-color: #c84349 !important;
+  border-color: #c84349 !important;
+  color: #fff !important;
+  font-weight: 600;
+  border-radius: 100px;
+}
+
+.form-group-custom {
+  position: relative;
+  min-height: 90px;
+  margin-right: 1rem;
+}
+
+.form-group-custom .form-control,
+.form-group-custom .react-datepicker-wrapper,
+.form-group-custom .react-select-container {
+  width: 100%;
+}
+
+.form-group-custom .invalid-feedback {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.container {
+  padding: 20px;
+}
+
+.column-style {
+  background: #FFFFFF 0% 0% no-repeat padding-box;
+  box-shadow: 0px 1px 12px #0000000D;
+  border: 1px solid #EEEEEE;
+  border-radius: 8px;
+  opacity: 1;
+  padding: 20px;
+  flex: 1;
+  margin-right: 15px;
+
+  &:nth-last-child(1) {
+    margin-right: 0;
+  }
+}
+
+.section-style {
+  background: #FFFFFF 0% 0% no-repeat padding-box;
+  box-shadow: 0px 1px 12px #0000000D;
+  border: 1px solid #EEEEEE;
+  border-radius: 8px;
+  opacity: 1;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.infoIconImg {
+  font-size: 14px !important;
+  color: #a5a5a5 !important;
+  margin-right: 5px !important;
+}
+
+input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  border-radius: 6px;
+  border: 1.5px solid var(--secondary-color);
+
+  &:checked {
+    background-color: var(--primary-color);
+    border: 1.5px solid var(--primary-color);
+  }
+}
+
+.iconImg {
+  width: 15px;
+  margin-right: 15px !important;
+}
+
+.formTitle {
+  margin-bottom: 2px;
+  font-size: 26px;
+  font-weight: 300;
+}
+.MuiStepper-horizontal > .MuiStep-horizontal {
+  padding-left: 4px;
+
+   .column-style {
+    flex: unset;
+    margin-right: 0;
+    margin-bottom: 20px;
+
+    &:nth-last-child(1) {
+      margin-bottom: 0;
+    }
+  }
+
+  .page-header-title {
+    font-size: 16px;
+  }
+}
+
+.form-check-input[type="radio"],
+input[type="radio"] {
+  accent-color: var(--primary-color) !important;
+}
+
+.form-check .form-check-input.form-check-input[type="radio"]:checked {
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+}
+
+.form-check .form-check-input.form-check-input[type="radio"]:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 0 0 0.25rem rgba(50, 0, 110, 0.25) !important;
+}
+
+.MuiButtonBase-root:focus-visible {
+  outline: 2px solid #2684ff !important;
+  outline-offset: 1px;
+  border-radius: 2px;
+  box-shadow: none !important;
+}
+
+.btn:focus-visible {
+  outline: 2px solid #2684ff !important;
+  outline-offset: 1px;
+  border-radius: 2px;
+  box-shadow: none !important;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid #2684ff !important;
+  outline-offset: 1px;
+  border-radius: 2px;
+  box-shadow: none !important;
+}
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
index 5df4fdf..b1fc104 100644
--- a/assets/scss/theme.scss
+++ b/assets/scss/theme.scss
@@ -3,7 +3,7 @@
 /* Bootstrap Customization */
 $border-radius: 0.15rem;
 $card-height: 100%;
-$primary: #9b0092;
+$primary: #32006e;
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
diff --git a/components/AppLogo.vue b/components/AppLogo.vue
index 539ca6f..bb905b9 100644
--- a/components/AppLogo.vue
+++ b/components/AppLogo.vue
@@ -1,4 +1,4 @@
 <template>
-  <img class="app-logo img-fluid" src="~/assets/img/icon.svg" alt="" />
+  <img class="app-logo img-fluid" src="~/assets/img/tdei-logo.png" alt="TDEI Logo" />
 </template>
 
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 38106c5..c6174b3 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -1,51 +1,183 @@
 <template>
-  <nav class="app-navbar navbar navbar-expand-md shadow">
-    <div class="container-lg">
-      <nuxt-link class="navbar-brand" to="/">
+  <nav class="app-navbar navbar navbar-expand-md navbar-dark">
+    <div class="navContainer">
+      <nuxt-link
+        class="navbar-brand"
+        to="/"
+      >
         <app-logo />
-        <span>TDEI</span>&nbsp;<span>Workspaces</span>
+        <span>TDEI Workspaces</span>
       </nuxt-link>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
+      <button
+        ref="toggleButtonRef"
+        class="navbar-toggler mobileMenuIcon d-md-none"
+        type="button"
+        aria-controls="appNavbarSideMenu"
+        :aria-expanded="mobileMenuOpen ? 'true' : 'false'"
+        aria-label="Toggle navigation"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <span class="navbar-toggler-icon" />
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul v-show="auth.ok" class="navbar-nav me-auto mb-2 mb-lg-0">
+      <div class="navbar-collapse d-none d-md-flex">
+        <ul
+          v-show="auth.ok"
+          class="navbar-nav navLinks"
+        >
           <li class="nav-item">
-            <nuxt-link class="nav-link" aria-current="page" to="/">Home</nuxt-link>
+            <nuxt-link
+              class="nav-link navLink"
+              to="/"
+            >Home</nuxt-link>
           </li>
           <li class="nav-item">
-            <nuxt-link class="nav-link" to="/dashboard">Dashboard</nuxt-link>
+            <nuxt-link
+              class="nav-link navLink"
+              to="/dashboard"
+            >Dashboard</nuxt-link>
           </li>
           <li class="nav-item">
-            <nuxt-link class="nav-link" to="/workspace/create">Create Workspace</nuxt-link>
+            <nuxt-link
+              class="nav-link navLink"
+              to="/workspace/create"
+            >Create Workspace</nuxt-link>
           </li>
           <li class="nav-item">
-            <nuxt-link class="nav-link" to="/help">Help</nuxt-link>
+            <nuxt-link
+              class="nav-link navLink"
+              to="/help"
+            >Help</nuxt-link>
           </li>
         </ul>
 
-        <span class="mx-auto" />
+        <div class="rightContainer">
+          <template v-if="auth.ok">
+            <div class="horizontalLine d-none d-md-block" />
 
-        <nuxt-link v-show="!auth.ok" to="/signin" class="btn">Sign In</nuxt-link>
-        <b-dropdown
-          v-show="auth.ok"
-          class="nav-item"
-          placement="bottom-end"
-          :variant="null"
-          is-nav
-          no-caret
-        >
-          <template #button-content>
-            <app-icon variant="account_circle" size="24" />{{ auth.displayName }}
+            <b-dropdown
+              class="userDropdown"
+              placement="bottom-end"
+              :variant="null"
+              no-caret
+            >
+              <template #button-content>
+                <button class="userProfile">
+                  <div>{{ auth.displayName }}</div>
+                  <app-icon
+                    variant="account_circle"
+                    size="32"
+                    no-margin
+                  />
+                </button>
+              </template>
+              <b-dropdown-item to="/dashboard">
+                <app-icon variant="dashboard" />
+                Dashboard
+              </b-dropdown-item>
+              <b-dropdown-item
+                to="/"
+                @click="auth.clear()"
+              >
+                <app-icon variant="logout" />
+                Logout
+              </b-dropdown-item>
+            </b-dropdown>
           </template>
-          <b-dropdown-item to="/" @click="auth.clear()">
-            <app-icon variant="logout" class="me-3" />Logout
-          </b-dropdown-item>
-        </b-dropdown>
+        </div>
       </div>
     </div>
+
+    <div
+      v-if="mobileMenuOpen && isMobileView"
+      class="sideMenuBackdrop"
+      @click="closeMobileMenu"
+    />
+
+    <div
+      id="appNavbarSideMenu"
+      ref="sideMenuRef"
+      class="sideMenu"
+      :class="{ sideMenuOpen: mobileMenuOpen && isMobileView }"
+      role="dialog"
+      aria-label="Navigation menu"
+      :aria-modal="mobileMenuOpen && isMobileView ? 'true' : 'false'"
+    >
+      <div class="sideMenuHeader">
+        <img
+          class="logoSidebar"
+          src="~/assets/img/tdei-logo.png"
+          alt="TDEI Logo"
+        >
+        <button
+          class="sideMenuClose"
+          type="button"
+          aria-label="Close menu"
+          @click="closeMobileMenu"
+        >
+          <app-icon
+            variant="close"
+            size="24"
+            no-margin
+          />
+        </button>
+      </div>
+
+      <nav class="sideMenuNav">
+        <nuxt-link
+          v-if="auth.ok"
+          class="sideMenuLink"
+          to="/"
+          @click="closeMobileMenu"
+        >
+          <span>Home</span>
+        </nuxt-link>
+        <nuxt-link
+          v-if="auth.ok"
+          class="sideMenuLink"
+          to="/dashboard"
+          @click="closeMobileMenu"
+        >
+          <span>Dashboard</span>
+        </nuxt-link>
+        <nuxt-link
+          v-if="auth.ok"
+          class="sideMenuLink"
+          to="/workspace/create"
+          @click="closeMobileMenu"
+        >
+          <span>Create Workspace</span>
+        </nuxt-link>
+        <nuxt-link
+          v-if="auth.ok"
+          class="sideMenuLink"
+          to="/help"
+          @click="closeMobileMenu"
+        >
+          <span>Help</span>
+        </nuxt-link>
+        <div
+          v-if="auth.ok"
+          class="mobileUserMenu"
+        >
+          <div class="mobileUserName">
+            <span>{{ auth.displayName }}</span>
+          </div>
+        </div>
+        <button
+          v-if="auth.ok"
+          class="sideMenuButton"
+          @click="logoutFromMobileMenu"
+        >
+          <app-icon
+            variant="logout"
+            no-margin
+          />
+          <span>Logout</span>
+        </button>
+      </nav>
+    </div>
   </nav>
 </template>
 
@@ -53,19 +185,316 @@
 import { tdeiClient } from '~/services/index'
 
 const auth = tdeiClient.auth
+const mobileMenuOpen = ref(false)
+const isMobileView = ref(false)
+const toggleButtonRef = ref<HTMLElement | null>(null)
+const sideMenuRef = ref<HTMLElement | null>(null)
+
+watch(mobileMenuOpen, (isOpen) => {
+  if (isOpen) {
+    nextTick(() => {
+      sideMenuRef.value?.querySelector<HTMLElement>('.sideMenuClose')?.focus()
+    })
+  }
+  else {
+    toggleButtonRef.value?.focus()
+  }
+})
+
+function onKeydown(e: KeyboardEvent) {
+  if (!mobileMenuOpen.value || !isMobileView.value) return
+
+  if (e.key === 'Escape') {
+    closeMobileMenu()
+    return
+  }
+
+  if (e.key === 'Tab') {
+    const focusable = Array.from(
+      sideMenuRef.value?.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ) ?? [],
+    )
+    if (focusable.length === 0) return
+    const first = focusable.at(0)
+    const last = focusable.at(-1)
+    if (!first || !last) return
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    }
+    else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+}
+
+function syncMobileView() {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  isMobileView.value = window.innerWidth <= 768
+
+  if (!isMobileView.value) {
+    mobileMenuOpen.value = false
+  }
+}
+
+function closeMobileMenu() {
+  if (isMobileView.value) {
+    mobileMenuOpen.value = false
+  }
+}
+
+function logoutFromMobileMenu() {
+  closeMobileMenu()
+  auth.clear()
+  navigateTo('/')
+}
+
+onMounted(() => {
+  syncMobileView()
+  window.addEventListener('resize', syncMobileView)
+  document.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', syncMobileView)
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>
 
-<style>
+<style lang="scss">
 .app-navbar {
   z-index: 900;
+  position: sticky;
+  top: 0;
+  padding: 0;
+  background-color: var(--primary-color);
+
+  .navContainer {
+    min-height: 60px;
+    background-color: var(--primary-color);
+    color: #ffffff;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 15px;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: none;
+  }
 
   .navbar-brand {
-    display: inline-flex;
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    color: #fff;
+    font-family: var(--secondary-font-family);
+    font-size: 1.2rem;
+    font-weight: 500;
+    line-height: 1.1;
+    text-decoration: none;
+    white-space: nowrap;
+    margin-right: 1rem;
   }
 
   .app-logo {
-    width: 2rem;
-    margin-right: 0.5rem;
+    height: 44px;
+    width: 56px;
+    object-fit: contain;
+    background-color: #fff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .mobileMenuIcon {
+    padding: 5px 8px;
+    border: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:hover {
+      background-color: var(--primary-color-dark);
+    }
+  }
+
+  .navbar-collapse {
+    align-items: center;
+  }
+
+  .navLinks {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+  }
+
+  .navLink {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+
+    &:hover,
+    &.router-link-active {
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  .rightContainer {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .horizontalLine {
+    border-right: 1px solid #ffffff80;
+    height: 25px;
+    margin-right: 1rem;
+  }
+
+  .userProfile {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .userProfile > div {
+    padding-right: 1rem;
+    cursor: pointer;
+  }
+
+  .userDropdown {
+    .dropdown-toggle {
+      padding: 0;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .mobileUserMenu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid #eeeeee;
+  }
+
+  .mobileUserName {
+    display: flex;
+    align-items: center;
+    color: #42526e;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .sideMenuBackdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(9, 8, 20, 0.45);
+    z-index: 950;
+  }
+
+  .sideMenu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(360px, 92vw);
+    height: 100vh;
+    background-color: #ffffff;
+    box-shadow: 2px 0 24px rgba(18, 16, 32, 0.2);
+    z-index: 960;
+    transform: translateX(100%);
+    transition: transform 0.22s ease;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sideMenuOpen {
+    transform: translateX(0);
+  }
+
+  .sideMenuHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--primary-color);
+    padding: 1.2rem 1.75rem;
+  }
+
+  .logoSidebar {
+    width: 60px;
+    background-color: #fff;
+    padding: 5px 8px;
+    border-radius: 4px;
+  }
+
+  .sideMenuClose {
+    border: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.72);
+    padding: 0.25rem;
+  }
+
+  .sideMenuNav {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .sideMenuLink,
+  .sideMenuButton {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    color: #42526e;
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    padding: 1.15rem 1.25rem;
+    border-radius: 0;
+    border-bottom: 1px solid #eeeeee;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: left;
+
+    &:hover {
+      color: #42526e;
+      background-color: #f5f5f5;
+    }
+  }
+
+  .sideMenuLink.router-link-active {
+    background-color: #f5f5f5;
+    font-weight: 700;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .navbar-brand {
+      font-size: 1rem;
+    }
+  }
+
+  @media only screen and (max-width: 576px) {
+    .logoHidden {
+      display: none;
+    }
   }
 }
 </style>
diff --git a/components/AppSpinner.vue b/components/AppSpinner.vue
index 0c50a4c..f6b7341 100644
--- a/components/AppSpinner.vue
+++ b/components/AppSpinner.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="classes" role="status">
+  <div
+    :class="classes"
+    role="status"
+  >
     <span class="visually-hidden">Loading...</span>
   </div>
 </template>
diff --git a/components/DatasetTypeRadio.vue b/components/DatasetTypeRadio.vue
index 1784906..3e4f900 100644
--- a/components/DatasetTypeRadio.vue
+++ b/components/DatasetTypeRadio.vue
@@ -9,7 +9,7 @@
       autocomplete="off"
       value="osw"
     >
-    <label class="btn btn-outline-primary" for="radio_type_osw">OpenSidewalks</label>
+    <label class="btn tdei-secondary-button" for="radio_type_osw">OpenSidewalks</label>
 
     <input
       v-model="model"
@@ -20,7 +20,7 @@
       autocomplete="off"
       value="pathways"
     >
-    <label class="btn btn-outline-primary" for="radio_type_pathways">GTFS Pathways</label>
+    <label class="btn tdei-secondary-button" for="radio_type_pathways">GTFS Pathways</label>
   </div>
 </template>
 
diff --git a/components/SigninForm.vue b/components/SigninForm.vue
index 7597d4c..4443b38 100644
--- a/components/SigninForm.vue
+++ b/components/SigninForm.vue
@@ -1,81 +1,272 @@
 <template>
   <div class="signin-card card">
-    <form class="card-body" @submit.prevent="submit">
-      <div class="mb-3">
-        <label for="username" class="form-label">TDEI Username</label>
-        <input v-model="username" class="form-control" id="username" aria-describedby="usernameHelp">
-        <div id="usernameHelp" class="form-text">
+    <form
+      class="card-body signin-card-body"
+      @submit.prevent="submit"
+    >
+      <div class="signin-header">
+        <app-logo />
+        <h1 class="signin-title">
+          Welcome!
+        </h1>
+        <p class="signin-subtitle">
+          Please login to your account.
+        </p>
+      </div>
+
+      <div class="mb-4">
+        <label
+          for="username"
+          class="form-label signin-label"
+        >TDEI Username</label>
+        <input
+          id="username"
+          v-model="username"
+          class="form-control signin-input"
+          aria-describedby="usernameHelp"
+        >
+        <div
+          id="usernameHelp"
+          class="form-text signin-help-text"
+        >
           Enter the same username that you provide to use the TDEI API.
         </div>
       </div>
 
-      <div class="mb-3">
-        <label for="password" class="form-label">Password</label>
-        <input v-model="password" type="password" class="form-control" id="password">
+      <div class="mb-4">
+        <label
+          for="password"
+          class="form-label signin-label"
+        >Password</label>
+        <div class="input-group password-group">
+          <input
+            id="password"
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            class="form-control signin-input password-input"
+          >
+          <button
+            type="button"
+            class="btn password-toggle"
+            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            @click="showPassword = !showPassword"
+          >
+            <app-icon
+              :variant="showPassword ? 'visibility_off' : 'visibility'"
+              size="24"
+              no-margin
+            />
+          </button>
+        </div>
       </div>
 
-      <button type="submit" class="btn btn-primary" :disabled="disabled">
-        <app-spinner v-if="loading.active" size="sm" />
-        <template v-else>Submit</template>
+      <button
+        type="submit"
+        class="btn tdei-primary-button signin-submit"
+        :disabled="disabled"
+      >
+        {{ loading.active ? 'Signing In...' : 'Sign In' }}
       </button>
-      <span class="ms-3 text-danger align-middle">{{ error }}</span>
+
+      <div
+        v-if="error"
+        class="signin-error"
+      >
+        {{ error }}
+      </div>
     </form>
   </div>
 </template>
 
 <script setup lang="ts">
-import { LoadingContext } from '~/services/loading';
-import { tdeiClient, osmClient } from '~/services/index';
+import { LoadingContext } from '~/services/loading'
+import { tdeiClient, osmClient } from '~/services/index'
 
-const loading = reactive(new LoadingContext());
+const loading = reactive(new LoadingContext())
 const error = ref ('')
-const username = ref('');
-const password = ref('');
-const disabled = computed(() => loading.active || !username.value.length || !password.value.length);
+const username = ref('')
+const password = ref('')
+const showPassword = ref(false)
+const disabled = computed(() => loading.active || !username.value.length || !password.value.length)
 
 async function submit() {
   error.value = ''
 
   try {
-    await signIn();
-  } catch (e: unknown)  {
-    if (e.response?.status === 400) {
-      const body = await e.response.json();
-
-      if (body.errors?.length > 0) {
-        error.value = 'Error: ' + body.errors[0];
-        return;
+    await signIn()
+  }
+  catch (e: unknown) {
+    const isFetchError = (err: unknown): err is { response: { status: number; json: () => Promise<unknown> } } =>
+      typeof err === 'object' && err !== null &&
+      'response' in err &&
+      typeof (err as { response: unknown }).response === 'object' &&
+      (err as { response: unknown }).response !== null &&
+      typeof ((err as { response: { json?: unknown } }).response).json === 'function'
+
+    if (isFetchError(e)) {
+      if (e.response.status === 400) {
+        const body = await e.response.json() as { errors?: string[] }
+
+        if (body.errors && body.errors.length > 0) {
+          error.value = 'Error: ' + body.errors[0]
+          return
+        }
       }
-    }
 
-    if (e.response?.status === 401) {
-      error.value = 'Incorrect TDEI username/password.';
-      return;
-    }
+      if (e.response.status === 401) {
+        error.value = 'Incorrect TDEI username/password.'
+        return
+      }
 
-    if (e.response?.status === 404) {
-      error.value = `A TDEI account for "${username.value}" does not exist.`;
-      return;
+      if (e.response.status === 404) {
+        error.value = `A TDEI account for "${username.value}" does not exist.`
+        return
+      }
     }
 
-    error.value = e.toString();
+    error.value = e instanceof Error ? e.message : String(e)
   }
 }
 
 async function signIn() {
   await loading.wrap(tdeiClient, async (client) => {
-    await client.authenticate(username.value, password.value);
+    await client.authenticate(username.value, password.value)
   })
 
   await loading.wrap(osmClient, async (client) => {
-    await client.provisionUser();
+    await client.provisionUser()
   })
 
   if (window.rememberRoute) {
-    navigateTo(window.rememberRoute);
-    delete window.rememberRoute;
-  } else {
-    navigateTo('/dashboard');
+    navigateTo(window.rememberRoute)
+    delete window.rememberRoute
+  }
+  else {
+    navigateTo('/dashboard')
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.signin-card {
+  width: 100%;
+  max-width: 450px;
+  margin: 0 auto;
+  border: 1px solid rgba(47, 54, 97, 0.18);
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(50, 0, 110, 0.08);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.signin-card-body {
+  padding: 2rem 1.5rem 1.75rem;
+}
+
+.signin-header {
+  margin-bottom: 2rem;
+}
+
+.signin-header .app-logo {
+  width: 80px;
+  margin: 0 0 15px;
+}
+
+.signin-title {
+  margin-bottom: 2px;
+  font-size: 26px;
+  font-weight: 300;
+  color: #2f3661;
+}
+
+.signin-subtitle {
+  margin-bottom: 0;
+  font-size: 14px;
+  color: var(--secondary-color);
+}
+
+.signin-label {
+  margin-bottom: 0.5rem;
+  font-size: 14px;
+  color: #2f3661;
+}
+
+.signin-input {
+  min-height: 52px;
+  border: 1px solid #d0d6e2;
+  border-radius: 8px;
+  color: #2f3661;
+  font-size: 14px;
+
+  &:focus {
+    border-color: #c3cbde;
+    box-shadow: none;
+  }
+}
+
+.signin-help-text {
+  margin-top: 0.5rem;
+  font-size: 13px;
+  color: var(--secondary-color);
+}
+
+.password-group {
+  .password-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.password-toggle {
+  min-width: 70px;
+  border: 1px solid #d0d6e2;
+  border-left: 0;
+  border-radius: 0 8px 8px 0;
+  background: #ffffff;
+  color: #7c7c7c;
+
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: #d0d6e2;
+    background: #ffffff;
+    color: #5f647a;
+    box-shadow: none;
+  }
+}
+
+.signin-submit {
+  width: 100%;
+  min-height: 52px;
+  margin-top: 0.75rem;
+  font-size: 15px;
+
+  &:disabled {
+    background-color: #8b72b4;
+    border-color: #8b72b4;
+    color: #ffffff;
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
+}
+
+.signin-error {
+  margin-top: 0.75rem;
+  font-size: 14px;
+  color: #cc2c47;
+}
+
+@media only screen and (max-width: 600px) {
+  .signin-card {
+    max-width: 100%;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    min-height: calc(100vh - 60px);
+    background: rgba(255, 255, 255, 0.92);
+  }
+
+  .signin-card-body {
+    padding: 1.5rem 1rem 1.5rem;
+  }
+}
+</style>
diff --git a/components/dashboard/Toolbar.vue b/components/dashboard/Toolbar.vue
index 86ed05c..da31865 100644
--- a/components/dashboard/Toolbar.vue
+++ b/components/dashboard/Toolbar.vue
@@ -3,7 +3,8 @@
     <b-dropdown
       v-if="isOsw && rapid3Available"
       split
-      variant="dark"
+      split-class="tdei-toolbar-primary-button"
+      toggle-class="tdei-toolbar-primary-button"
       :split-to="editRoute"
     >
       <template #button-content>
@@ -20,13 +21,13 @@
         Rapid 3 (beta)
       </b-dropdown-item>
     </b-dropdown>
-    <nuxt-link v-else class="btn btn-dark" :to="editRoute">
+    <nuxt-link v-else class="btn tdei-toolbar-primary-button" :to="editRoute">
       <app-icon variant="edit_location_alt" size="24" />
       Edit
     </nuxt-link>
     <div class="btn-group ms-1">
       <nuxt-link
-        class="btn"
+        class="btn tdei-secondary-button"
         :to="reviewRoute"
       >
         <app-icon
@@ -42,13 +43,13 @@
         <span class="d-none d-sm-inline">Tasks</span>
       </a>
       -->
-      <nuxt-link class="btn" :to="exportRoute" :aria-disabled="!workspace.center">
+      <nuxt-link class="btn tdei-secondary-button" :to="exportRoute" :aria-disabled="!workspace.center">
         <app-icon variant="drive_folder_upload" size="24" no-margin />
         <span class="d-none d-sm-inline ms-2">Export</span>
       </nuxt-link>
     </div>
     <div class="btn-group ms-auto">
-      <nuxt-link class="btn" :to="settingsRoute">
+      <nuxt-link class="btn tdei-secondary-button" :to="settingsRoute">
         <app-icon variant="settings" size="24" no-margin />
         <span class="d-none d-sm-inline ms-2">Settings</span>
       </nuxt-link>
@@ -100,3 +101,32 @@ function workspacePath(page) {
   return `/workspace/${props.workspace.id}/${page}`;
 }
 </script>
+
+<style lang="scss">
+.tdei-toolbar-primary-button {
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+  transition: background-color 0.18s ease, border-color 0.18s ease;
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    background-color: var(--brand-accent) !important;
+    border-color: var(--brand-accent) !important;
+    color: #fff !important;
+  }
+}
+
+.btn-group > .tdei-toolbar-primary-button:first-child:not(:last-child) {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.btn-group > .tdei-toolbar-primary-button:last-child:not(:first-child),
+.dropdown > .btn-group > .tdei-toolbar-primary-button:last-child:not(:first-child) {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+</style>
diff --git a/components/dashboard/WorkspaceItem.vue b/components/dashboard/WorkspaceItem.vue
index b6a9b95..e9f9b20 100644
--- a/components/dashboard/WorkspaceItem.vue
+++ b/components/dashboard/WorkspaceItem.vue
@@ -1,31 +1,39 @@
 <template>
-  <button :class="getClasses(workspace)">
-    <div class="fw-bold">{{ workspace.title }}</div>
-
-    <span class="badge bg-secondary"><app-icon variant="insert_drive_file" />{{ workspace.type }}</span>
-
-    <span v-if="workspace.externalAppAccess > 0" class="badge bg-success ms-2">
-      <app-icon v-if="workspace.externalAppAccess === 1" variant="public" />
-      <app-icon v-else variant="lock" />
-      App
-    </span>
-
-    <span
-      v-if="workspace.role === 'lead'"
-      class="badge bg-dark ms-2"
-    >
-      <app-icon variant="star" /> {{ ROLE_LABELS.lead }}
-    </span>
-    <span
-      v-else-if="workspace.role === 'validator'"
-      class="badge bg-dark ms-2"
-    >
-      <app-icon variant="task_alt" /> {{ ROLE_LABELS.validator }}
-    </span>
+  <button :class="getClasses()" :aria-label="`Select workspace ${workspace.title}, ID ${workspace.id}`">
+    <div class="workspaceCardMain">
+      <div class="workspaceNames">
+        <img class="workspaceTypeIcon" :src="typeIconSrc" :alt="`${formatTypeLabel(workspace.type)} workspace type`" />
+
+        <div class="workspaceCopy">
+          <div class="workspaceMetaRow">
+            <span class="workspaceType">{{ formatTypeLabel(workspace.type) }}</span>
+
+            <span v-if="workspace.externalAppAccess > 0" class="workspaceStatus workspaceStatusSuccess">
+              {{ workspace.externalAppAccess === 1 ? 'App Public' : 'App Private' }}
+            </span>
+
+            <span v-if="workspace.role === 'lead'" class="workspaceStatus">
+              {{ ROLE_LABELS.lead }}
+            </span>
+            <span v-else-if="workspace.role === 'validator'" class="workspaceStatus">
+              {{ ROLE_LABELS.validator }}
+            </span>
+          </div>
+
+          <div class="workspaceTitle" :title="workspace.title">
+            <span>{{ workspace.title }}</span>
+            <span class="workspaceIdInline">ID: {{ workspace.id }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </button>
 </template>
 
 <script setup lang="ts">
+import flexTypeIcon from '~/assets/img/flex-type.svg'
+import oswTypeIcon from '~/assets/img/osw-type.svg'
+import pathwaysTypeIcon from '~/assets/img/pathways-type.svg'
 import { ROLE_LABELS } from '~/util/roles';
 
 const props = defineProps({
@@ -39,29 +47,135 @@ const props = defineProps({
   }
 });
 
-function getClasses(workspace) {
+const typeIconSrc = computed(() => {
+  const iconMap: Record<string, string> = {
+    osw: oswTypeIcon,
+    pathways: pathwaysTypeIcon,
+    flex: flexTypeIcon,
+  }
+
+  return iconMap[props.workspace.type] ?? oswTypeIcon
+})
+
+function getClasses() {
   return {
-    'list-group-item': true,
-    'list-group-item-action': true,
-    'active': props.selected
+    workspaceCard: true,
+    workspaceCardSelected: props.selected,
   };
 }
+
+function formatTypeLabel(type: string) {
+  return type.toUpperCase();
+}
 </script>
 
 <style lang="scss">
-.dashboard-page {
-  .list-group-item {
-    cursor: pointer;
-
-    &.active {
-      position: sticky;
-      top: 1rem;
-      bottom: 1rem;
-    }
-
-    .badge {
-      text-transform: uppercase;
-    }
+.workspaceCard {
+  width: 100%;
+  display: block;
+  padding: 0;
+  text-align: left;
+  background: #ffffff;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 6px #33333314;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  border-left: 8px solid var(--tdei-blue);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.workspaceCardSelected {
+  border-left-color: var(--primary-color);
+  box-shadow: 0 8px 24px rgba(50, 0, 110, 0.14);
+}
+
+.workspaceCardMain {
+  padding: 20px 25px;
+}
+
+.workspaceNames {
+  display: flex;
+  align-items: center;
+}
+
+.workspaceTypeIcon {
+  height: 55px;
+  margin-right: 15px;
+}
+
+.workspaceCopy {
+  min-width: 0;
+}
+
+.workspaceMetaRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.workspaceType,
+.workspaceStatus {
+  font-size: 14px;
+  font-weight: 400;
+  background-color: #f2f2f2;
+  display: inline-block;
+  padding: 0 8px;
+  border-radius: 4px;
+  color: #333;
+}
+
+.workspaceStatus {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.workspaceStatusSuccess {
+  background-color: #e8f4e0;
+  color: #2d6a39;
+}
+
+.workspaceTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  font-size: 16px;
+  font-weight: 700;
+  color: #21335b;
+}
+
+.workspaceTitle > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.workspaceIdInline {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--secondary-color);
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 768px) {
+  .workspaceCard {
+    border-top: 5px solid var(--tdei-blue);
+    border-left: 1px solid #ddd;
+  }
+
+  .workspaceCardSelected {
+    border-top-color: var(--primary-color);
+  }
+
+  .workspaceCardMain {
+    padding: 15px;
+  }
+
+  .workspaceNames {
+    align-items: flex-start;
   }
 }
 </style>
diff --git a/components/review/FilterDropdown.vue b/components/review/FilterDropdown.vue
index e3923b9..8d265ac 100644
--- a/components/review/FilterDropdown.vue
+++ b/components/review/FilterDropdown.vue
@@ -64,7 +64,7 @@
     <div class="dropdown-divider" />
 
     <div class="px-3 py-2">
-      <button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
+      <button class="btn tdei-primary-button btn-sm" @click="apply">Apply</button>
     </div>
   </b-dropdown>
 </template>
diff --git a/components/review/Toolbar.vue b/components/review/Toolbar.vue
index 033505a..bbdbae5 100644
--- a/components/review/Toolbar.vue
+++ b/components/review/Toolbar.vue
@@ -5,7 +5,7 @@
       #{{ props.item.id }}
     </span>
     <button
-      class="btn btn-sm btn-dark"
+      class="btn btn-sm tdei-primary-button"
       @click="edit"
     >
       <app-icon
@@ -15,7 +15,7 @@
       <span class="d-none d-sm-inline ms-2">Edit Here</span>
     </button>
     <button
-      class="btn btn-sm btn-light border ms-2"
+      class="btn btn-sm tdei-secondary-button ms-2"
       :class="{ active: showDetails }"
       aria-haspopup="true"
       :aria-expanded="showDetails"
@@ -28,7 +28,7 @@
     </button>
     <button
       v-show="props.item.isChangeset || props.item.isNote"
-      class="btn btn-sm btn-light border ms-2"
+      class="btn btn-sm tdei-secondary-button ms-2"
       :class="{ active: showDiscussion }"
       aria-haspopup="true"
       :aria-expanded="showDiscussion"
@@ -54,7 +54,7 @@
         <div class="d-inline-block ms-2">
           <button
             v-show="props.item.isFeedback && !props.item.isResolved"
-            class="btn btn-sm btn-success"
+            class="btn btn-sm tdei-primary-button"
             :disabled="!isValidator"
           >
             <app-icon
diff --git a/components/settings/panel/Apps.vue b/components/settings/panel/Apps.vue
index 9557a18..5482c8c 100644
--- a/components/settings/panel/Apps.vue
+++ b/components/settings/panel/Apps.vue
@@ -145,7 +145,7 @@
       <hr>
       <button
         type="submit"
-        class="btn btn-primary"
+        class="btn tdei-primary-button"
         :disabled="!isLead"
       >
         Save
diff --git a/components/settings/panel/Delete.vue b/components/settings/panel/Delete.vue
index 189a87d..ae3cdc6 100644
--- a/components/settings/panel/Delete.vue
+++ b/components/settings/panel/Delete.vue
@@ -21,7 +21,7 @@
       </p>
 
       <button
-        class="btn btn-outline-danger mb-3"
+        class="btn maroon-bg mb-3"
         :disabled="!isLead || accepted"
         @click="acceptDelete"
       >
@@ -39,7 +39,7 @@
         </label>
 
         <button
-          class="btn btn-danger"
+          class="btn maroon-bg"
           :disabled="!isLead || attestation !== 'delete'"
           @click="submitDelete"
         >
diff --git a/components/settings/panel/General.vue b/components/settings/panel/General.vue
index 5ff13a9..bc9edba 100644
--- a/components/settings/panel/General.vue
+++ b/components/settings/panel/General.vue
@@ -22,7 +22,7 @@
 
         <button
           type="submit"
-          class="btn btn-primary"
+          class="btn tdei-primary-button"
           :disabled="!isLead"
         >
           Rename
diff --git a/components/settings/panel/Imagery.vue b/components/settings/panel/Imagery.vue
index 8178344..f2abaea 100644
--- a/components/settings/panel/Imagery.vue
+++ b/components/settings/panel/Imagery.vue
@@ -61,7 +61,7 @@
 
       <button
         type="submit"
-        class="btn btn-primary"
+        class="btn tdei-primary-button"
         :disabled="!isLead"
       >
         Save
diff --git a/components/settings/teams/JoinDialog.vue b/components/settings/teams/JoinDialog.vue
index 464f572..b6f7365 100644
--- a/components/settings/teams/JoinDialog.vue
+++ b/components/settings/teams/JoinDialog.vue
@@ -51,7 +51,7 @@
         <div class="modal-footer justify-content-center">
           <a
             v-if="qrCodeUrl"
-            class="btn btn-dark"
+            class="btn tdei-secondary-button"
             :href="qrCodeUrl"
             download="qr-code.png"
           >
@@ -60,7 +60,7 @@
           </a>
           <button
             type="button"
-            class="btn btn-primary"
+            class="btn tdei-primary-button"
             data-bs-dismiss="modal"
           >
             Close
diff --git a/components/teams/Item.vue b/components/teams/Item.vue
index e714b49..af216c8 100644
--- a/components/teams/Item.vue
+++ b/components/teams/Item.vue
@@ -12,8 +12,7 @@
         {{ props.team.name }}
       </a>
       <b-button
-        variant="link"
-        class="team-members-btn"
+        class="team-members-btn tdei-primary-link"
         @click="viewMembers"
       >
         {{ props.team.member_count }} members
@@ -90,7 +89,6 @@ async function remove() {
 .team-members-btn {
   display: block;
   padding: 0;
-  color: $body-color;
   text-decoration: none;
 
   &:hover {
diff --git a/components/teams/JoinDialog.vue b/components/teams/JoinDialog.vue
index 878b4c3..f722fb4 100644
--- a/components/teams/JoinDialog.vue
+++ b/components/teams/JoinDialog.vue
@@ -13,17 +13,14 @@
     <template #footer="{ hide }">
       <a
         v-if="qrCodeUrl"
-        class="btn btn-dark"
+        class="btn tdei-secondary-button"
         :href="qrCodeUrl"
         :download="qrCodeFilename"
       >
         <app-icon variant="download" />
         Download QR Code
       </a>
-      <b-button
-        variant="primary"
-        @click="hide()"
-      >
+      <b-button class="btn tdei-primary-button" @click="hide()">
         Close
       </b-button>
     </template>
diff --git a/components/teams/MembersDialog.vue b/components/teams/MembersDialog.vue
index 249fa40..c933d7e 100644
--- a/components/teams/MembersDialog.vue
+++ b/components/teams/MembersDialog.vue
@@ -3,6 +3,7 @@
     ref="modal"
     title="Team Members"
     ok-title="Close"
+    ok-class="tdei-primary-button"
     ok-only
   >
     <app-spinner
@@ -95,9 +96,11 @@ async function remove(user: User) {
     body: `Remove ${user.display_name} from "${props.team!.name}"?`,
     title: 'Remove Team Member',
     okTitle: 'Remove',
-    okVariant: 'danger',
+    okClass: 'maroon-bg',
+    okVariant: null,
     cancelTitle: 'Cancel',
-    cancelVariant: 'link',
+    cancelClass: 'tdei-primary-link p-0 border-0 bg-transparent',
+    cancelVariant: null,
   }).show();
 
   if (value?.ok) {
diff --git a/components/teams/SettingsDialog.vue b/components/teams/SettingsDialog.vue
index 9336fbb..538171c 100644
--- a/components/teams/SettingsDialog.vue
+++ b/components/teams/SettingsDialog.vue
@@ -10,14 +10,14 @@
 
     <template #footer="{ cancel }">
       <b-button
-        variant="link"
+        class="tdei-primary-link p-0 border-0 bg-transparent"
         @click="cancel()"
       >
         Cancel
       </b-button>
       <b-button
         type="submit"
-        variant="primary"
+        class="tdei-primary-button"
         :disabled="!complete || saving.active"
         @click="save"
       >
diff --git a/layouts/default.vue b/layouts/default.vue
index 0c9ca81..fd421da 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="defaultLayout">
-    <nuxt-loading-indicator />
+    <nuxt-loading-indicator :height="5" :throttle="0"
+      color="linear-gradient(90deg, var(--purple-background-light) 0%, var(--tdei-blue) 38%, var(--tdei-green) 70%, var(--tdei-cyan) 100%)" />
     <header>
       <app-navbar />
     </header>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4d3f0b4..2b78d02 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,8 +3,17 @@ export default defineNuxtConfig({
   modules: [
     '@bootstrap-vue-next/nuxt',
     '@nuxt/eslint',
+    '@nuxtjs/google-fonts',
     '@sentry/nuxt/module',
   ],
+  googleFonts: {
+    families: {
+      'Open Sans': [300, 400, 500, 600, 700, 800],
+      Montserrat: [100, 300, 400, 500, 600, 700, 800, 900],
+    },
+    display: 'swap',
+    download: true,
+  },
   ssr: false,
   devtools: { enabled: true },
   app: {
diff --git a/package.json b/package.json
index f3c28de..3b6e356 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.12.1",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@types/bootstrap": "^5.2.10",
     "@types/geojson": "^7946.0.16",
     "eslint": "^9.39.2",
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 2394cb5..4a1790b 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -10,7 +10,7 @@
           remember-selection
         />
 
-        <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
+        <nuxt-link class="btn tdei-primary-button flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />
           New<span class="d-none d-sm-inline"> Workspace</span>
         </nuxt-link>
@@ -20,41 +20,50 @@
       <app-icon variant="info" />
       No workspaces exist in the selected project group.
     </div>
-    <div v-else class="row mt-4 position-relative">
-      <div class="col-md mb-3">
-        <div class="list-group">
-          <dashboard-workspace-item
-            v-for="w in currentWorkspaces"
-            :key="w.id"
-            :workspace="w"
-            :selected="w.id === currentWorkspace?.id"
-            @click="selectWorkspace(w)"
-          />
+    <template v-else>
+      <section class="workspace-list-header mt-4">
+        <p class="page-header-subtitle">
+          Here are the workspaces currently available
+          <template v-if="selectedProjectGroupName"> in <span class="fw-semibold">{{ selectedProjectGroupName }}</span></template>.
+        </p>
+      </section>
+
+      <div class="workspace-split-layout mt-4">
+        <div class="workspace-list-panel">
+          <div class="workspace-list-scroll">
+            <dashboard-workspace-item
+              v-for="w in currentWorkspaces"
+              :key="w.id"
+              :workspace="w"
+              :selected="w.id === currentWorkspace?.id"
+              @click="selectWorkspace(w)"
+            />
+          </div>
+        </div>
+
+        <div class="workspace-details-panel">
+          <div
+            v-if="currentWorkspace"
+            class="card"
+          >
+            <nav class="card-header">
+              <dashboard-toolbar :workspace="currentWorkspace" />
+            </nav>
+            <dashboard-map :workspace="currentWorkspace" @center-loaded="onCenterLoaded" />
+            <dashboard-details-table
+              :workspace="currentWorkspace"
+              :my-tdei-roles="currentWorkspaceTdeiRoles"
+            />
+          </div>
         </div>
-      </div><!-- .col-md -->
-
-      <div class="col-md workspace-details-col">
-        <div
-          v-if="currentWorkspace"
-          class="card"
-        >
-          <nav class="card-header">
-            <dashboard-toolbar :workspace="currentWorkspace" />
-          </nav>
-
-          <dashboard-map :workspace="currentWorkspace" @center-loaded="onCenterLoaded" />
-          <dashboard-details-table
-            :workspace="currentWorkspace"
-            :my-tdei-roles="currentWorkspaceTdeiRoles"
-          />
-        </div><!-- .card -->
-      </div><!-- .col-md -->
-    </div><!-- .row -->
+      </div>
+    </template>
   </app-page>
 </template>
 
 <script setup lang="ts">
 import { tdeiUserClient, workspacesClient } from '~/services/index';
+import type { Workspace } from '~/types/workspaces';
 import { compareWorkspaceCreatedAtDesc } from '~/services/workspaces';
 
 const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
@@ -103,6 +112,9 @@ const currentWorkspaces = computed(() =>
     ? workspacesByProjectGroup.get(currentProjectGroup.value)
     : undefined,
 );
+const selectedProjectGroupName = computed(() =>
+  myProjectGroups.find(pg => pg.tdei_project_group_id === currentProjectGroup.value)?.name ?? null
+);
 const currentWorkspaceTdeiRoles = computed(() =>
   currentWorkspace.value
     ? rolesByProjectGroup.get(currentWorkspace.value.tdeiProjectGroupId) ?? []
@@ -164,7 +176,7 @@ function onCenterLoaded(center) {
   currentWorkspace.value!.center = center;
 }
 
-async function selectWorkspace(workspace) {
+async function selectWorkspace(workspace: Workspace) {
   currentWorkspace.value = workspace;
 }
 </script>
@@ -180,9 +192,7 @@ async function selectWorkspace(workspace) {
     margin-right: 1rem;
 
     @include media-breakpoint-down(md) {
-      & {
-        display: none;
-      }
+      & { display: none; }
     }
   }
 
@@ -198,16 +208,66 @@ async function selectWorkspace(workspace) {
       border-left-color: $border-color;
       margin-right: auto;
 
-      &:hover {
-        border-color: $border-color;
-      }
+      &:hover { border-color: $border-color; }
     }
   }
+}
+
+
+$panel-height: calc(100vh - 140px);
+
+.workspace-split-layout {
+  display: flex;
+  gap: 1.25rem;
+  align-items: flex-start;
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+}
+.workspace-list-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+
+  position: sticky;
+  top: 1rem;
+  max-height: $panel-height;
 
-  .workspace-details-col {
-    position: sticky;
-    top: 1rem;
-    margin-bottom: auto;
+  @include media-breakpoint-down(md) {
+    position: static;
+    flex: none;
+    width: 100%;
+    max-height: 50vh;
+  }
+}
+
+.workspace-list-scroll {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #c9cfe0 transparent;
+
+  &::-webkit-scrollbar { width: 5px; }
+  &::-webkit-scrollbar-track { background: transparent; }
+  &::-webkit-scrollbar-thumb {
+    background: #c9cfe0;
+    border-radius: 10px;
+  }
+}
+
+.workspace-details-panel {
+  flex: 1;
+  min-width: 0;
+
+  position: sticky;
+  top: 1rem;
+  margin-bottom: auto;
+
+  @include media-breakpoint-down(md) {
+    position: static;
+    width: 100%;
   }
 }
 </style>
diff --git a/pages/help.vue b/pages/help.vue
index 4537928..c031de2 100644
--- a/pages/help.vue
+++ b/pages/help.vue
@@ -39,7 +39,7 @@
           <b-button
             href="https://taskarcenteratuw.github.io/tcat-wiki/workspaces/"
             target="_blank"
-            variant="primary"
+            class="tdei-primary-button"
           >
             Open Workspaces Guides
             <app-icon
@@ -72,7 +72,7 @@
 
           <b-button
             href="mailto:helpdesk@tdei.us"
-            variant="outline-primary"
+            class="tdei-secondary-button"
           >
             helpdesk@tdei.us
           </b-button>
diff --git a/pages/index.vue b/pages/index.vue
index 74c54b6..e6832f1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,89 +1,240 @@
 <template>
   <div class="homepage">
     <div class="jumbo">
-      <div class="jumbo-content">
-        <app-logo />
-        <h1 class="display-3 fw-normal">TDEI Workspaces</h1>
-        <hr>
-        <p class="mt-5">
-          TDEI Workspaces is an integrated editing platform for TDEI datasets.
-          Workspaces provides tools and APIs for crafting and visualizing
-          OpenSidewalks and GTFS Pathways data.
-        </p>
-        <p class="mb-5">
-          <a href="https://transitequity.cs.washington.edu/" target="_blank">
-            Learn more about the TDEI
-          </a>
-        </p>
-        <nuxt-link to="/signin" class="btn btn-primary btn-lg">Sign In</nuxt-link>
+      <div class="hero-shell">
+        <section class="hero-copy">
+          <app-logo />
+          <h1>TDEI Workspaces</h1>
+          <div class="hero-divider" />
+          <p>
+            TDEI Workspaces is an integrated editing platform for TDEI datasets.
+            Workspaces provides tools and APIs for crafting and visualizing
+            OpenSidewalks and GTFS Pathways data.
+          </p>
+
+          <div class="hero-actions">
+            <nuxt-link
+              :to="auth.ok ? '/dashboard' : '/signin'"
+              class="btn tdei-primary-button hero-primary-action"
+            >
+              {{ auth.ok ? 'Go to Dashboard' : 'Sign In' }}
+            </nuxt-link>
+
+            <a
+              class="hero-secondary-link"
+              href="https://transitequity.cs.washington.edu/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn more about the TDEI
+            </a>
+          </div>
+        </section>
       </div>
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { tdeiClient } from '~/services/index'
+
+const auth = tdeiClient.auth
+</script>
+
 <style lang="scss">
 @import "assets/scss/theme.scss";
 
 .homepage {
   height: 100%;
+  background: var(--purple-background-light);
 
   .jumbo {
     display: flex;
     align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgb(29, 43, 65);
-    background-image: url('@/assets/img/bg.webp');
+    position: relative;
+    background:
+      linear-gradient(90deg, rgba(244, 240, 251, 0.94) 0%, rgba(244, 240, 251, 0.88) 34%, rgba(244, 240, 251, 0.56) 56%, rgba(34, 20, 84, 0.32) 100%),
+      url('@/assets/img/bg.webp');
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-position: center 75%;
 
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        radial-gradient(circle at 16% 30%, rgba(244, 240, 251, 0.92), rgba(244, 240, 251, 0.42) 38%, transparent 62%),
+        linear-gradient(90deg, rgba(244, 240, 251, 0.24), rgba(244, 240, 251, 0.04) 46%, rgba(32, 18, 71, 0.24) 100%);
+      pointer-events: none;
+    }
+
     @include media-breakpoint-down(sm) {
       & {
         background-size: auto 100%;
+        background-position: center 75%;
       }
     }
   }
 
-  .jumbo-content {
-    width: 100%;
-    padding: 3rem;
-    margin: 0 auto;
-    border-top: 1px solid lighten(rgba(29, 43, 65, 0.5), 30%);
-    border-bottom: 1px solid lighten(rgba(29, 43, 65, 0.5), 30%);
-    background-color: rgba(29, 43, 65, 0.85);
-    color: white;
-    text-align: center;
-
-    > * {
-      margin-left: auto;
-      margin-right: auto;
+  .hero-shell {
+    position: relative;
+    z-index: 1;
+    width: min(100%, 1280px);
+    min-height: calc(100vh - 60px);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    gap: 0;
+    padding: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 6.5rem);
+  }
+
+  .hero-copy {
+    max-width: 620px;
+    color: #1c2551;
+  }
+
+  h1 {
+    font-family: var(--secondary-font-family);
+    font-size: clamp(2.75rem, 5vw, 4.25rem);
+    font-weight: 700;
+    line-height: 1.02;
+    letter-spacing: -0.03em;
+    margin: 0;
+  }
+
+  .hero-divider {
+    width: 3.75rem;
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #6c52ff 0%, #8a48ff 100%);
+    margin: 2rem 0 2.25rem;
+  }
+
+  p {
+    max-width: 640px;
+    font-size: clamp(1.15rem, 1.4vw, 1.65rem);
+    line-height: 1.68;
+    color: #434b6b;
+    margin: 0;
+  }
+
+  .hero-actions {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+  }
+
+  .hero-primary-action {
+    min-height: 3.8rem;
+    padding: 0 2rem !important;
+    font-size: 1.05rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 14px 30px rgba(50, 0, 110, 0.2);
+  }
+
+  .hero-secondary-link {
+    color: var(--primary-color);
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 0.14em;
+
+    &:hover {
+      color: var(--primary-color-dark);
     }
+  }
+
+  .app-logo {
+    width: 5.25rem;
+    height: 5.25rem;
+    margin-bottom: 1.5rem;
+    filter: drop-shadow(0 10px 18px rgba(109, 81, 255, 0.18));
+  }
 
-    hr {
-      width: 20%;
-      margin: 2rem auto;
+  @include media-breakpoint-down(lg) {
+    .hero-shell {
+      padding-top: 3rem;
+      padding-bottom: 3rem;
     }
+  }
 
-    p {
-      max-width: 700px;
+  @include media-breakpoint-down(md) {
+    .jumbo {
+      background:
+        linear-gradient(90deg, rgba(244, 240, 251, 0.98) 0%, rgba(244, 240, 251, 0.94) 52%, rgba(244, 240, 251, 0.72) 72%, rgba(34, 20, 84, 0.24) 100%),
+        url('@/assets/img/bg.webp');
+      background-size: auto 100%;
+      background-position: 60% center;
 
-      > a {
-        color: lighten($primary, 30%);
-        text-decoration: none;
+      &::before {
+        background:
+          linear-gradient(180deg, rgba(244, 240, 251, 0.08), rgba(244, 240, 251, 0.02)),
+          radial-gradient(circle at 10% 24%, rgba(244, 240, 251, 0.98), rgba(244, 240, 251, 0.64) 44%, transparent 74%);
       }
     }
 
-    .btn {
-      padding: 1rem 3rem;
+    .hero-shell {
+      min-height: auto;
+      padding: 1.5rem 1rem 2.5rem;
+    }
+
+    h1 {
+      font-size: clamp(2.15rem, 9vw, 3rem);
+      line-height: 1.02;
+    }
+
+    .hero-divider {
+      margin: 1.4rem 0 1.5rem;
+    }
+
+    p {
+      max-width: 30rem;
+      font-size: 0.98rem;
+      line-height: 1.72;
+      color: #3f4767;
+    }
+
+    .hero-actions {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+
+    .hero-primary-action {
+      width: 100%;
+      max-width: 320px;
     }
   }
 
-  .app-logo {
-    width: 5rem;
-    height: 5rem;
-    margin-bottom: 1rem;
+  @include media-breakpoint-down(sm) {
+    .app-logo {
+      width: 4.4rem;
+      height: 4.4rem;
+      margin-bottom: 1rem;
+    }
+
+    .hero-shell {
+      padding: 1.25rem 1rem 2.25rem;
+    }
+
+    .hero-copy {
+      max-width: 27rem;
+    }
+
+    .hero-primary-action {
+      min-height: 4rem;
+      max-width: none;
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/pages/signin.vue b/pages/signin.vue
index 92baa22..cada46c 100644
--- a/pages/signin.vue
+++ b/pages/signin.vue
@@ -1,34 +1,46 @@
 <template>
-  <app-page class="signin-page">
-    <div class="text-center my-5">
-      <app-logo />
-      <h1>Sign In</h1>
+  <section class="signin-page">
+    <div class="signin-shell">
+      <signin-form />
     </div>
-
-    <signin-form />
-  </app-page>
+  </section>
 </template>
 
 <script setup lang="ts">
-import { tdeiAuth } from '~/services/index';
+import { tdeiAuth } from '~/services/index'
 
 if (tdeiAuth.complete) {
-  navigateTo('/dashboard');
+  navigateTo('/dashboard')
 }
 </script>
 
 <style lang="scss">
 .signin-page {
-  .app-logo {
-    width: 5rem;
-    height: 5rem;
-    margin-bottom: 1rem;
-  }
+  min-height: calc(100vh - 60px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem 3rem;
+  background-image: url('~/assets/img/bg_login.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center top;
 
-  .signin-card {
+  .signin-shell {
     width: 100%;
-    max-width: 600px;
-    margin: 0 auto;
+    max-width: 450px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .signin-page {
+    min-height: calc(100vh - 60px);
+    padding: 0 0 2rem;
+    align-items: center;
+
+    .signin-shell {
+      max-width: 100%;
+    }
   }
 }
 </style>
diff --git a/pages/workspace/[id]/export/index.vue b/pages/workspace/[id]/export/index.vue
index 227f25f..7a2ae85 100644
--- a/pages/workspace/[id]/export/index.vue
+++ b/pages/workspace/[id]/export/index.vue
@@ -16,7 +16,7 @@
             </p>
           </div>
           <div class="card-footer">
-            <nuxt-link class="btn btn-primary" to="./export/tdei">
+            <nuxt-link class="btn tdei-primary-button" to="./export/tdei">
               <app-spinner v-if="exporting.active" size="sm" />
               <template v-else>
                 Start
@@ -44,12 +44,12 @@
               v-if="downloadUrl"
               :href="downloadUrl"
               :download="downloadFilename"
-              class="btn btn-success"
+              class="btn tdei-primary-button"
             >
               <app-icon variant="save_alt" no-margin />
               Save
             </a>
-            <button v-else class="btn btn-primary" @click="download">
+            <button v-else class="btn tdei-primary-button" @click="download">
               <template v-if="downloading.active">
               <app-spinner size="sm" />&nbsp;Preparing Download...
               </template>
diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index e6ba869..4f2298e 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -27,7 +27,7 @@
           <div class="card-footer">
             <nuxt-link
               to="../export"
-              class="btn btn-primary"
+              class="btn tdei-primary-button"
             >
               <app-icon
                 variant="arrow_circle_left"
@@ -48,7 +48,7 @@
           <div class="card-footer">
             <nuxt-link
               to="../export"
-              class="btn btn-primary"
+              class="btn tdei-primary-button"
             >
               <app-icon variant="arrow_circle_left" no-margin />
               Go back
@@ -93,14 +93,14 @@
             <section v-else-if="context.error" class="alert alert-danger m-0" role="alert">
               <h5><app-icon variant="info" />An error occurred:</h5>
               <p class="mb-3">{{ context.error }}</p>
-              <button class="btn btn-primary" @click="context.reset()">
+              <button class="btn tdei-primary-button" @click="context.reset()">
                 Try again
               </button>
             </section>
             <button
               v-else-if="!context.complete"
               type="submit"
-              class="btn btn-primary"
+              class="btn tdei-primary-button"
               @click.prevent="upload"
               :disabled="context.active"
             >
diff --git a/pages/workspace/[id]/settings/teams/index.vue b/pages/workspace/[id]/settings/teams/index.vue
index f4d7788..2e16455 100644
--- a/pages/workspace/[id]/settings/teams/index.vue
+++ b/pages/workspace/[id]/settings/teams/index.vue
@@ -11,8 +11,7 @@
         <template #target>
           <div class="d-inline-block">
             <b-button
-              variant="primary"
-              class="flex-shrink-0"
+              class="tdei-primary-button flex-shrink-0"
               :disabled="!isLead"
               @click="openNewDialog"
             >
@@ -129,9 +128,11 @@ async function remove(team: WorkspaceTeam) {
     body: `Are you sure you want to delete "${team.name}"?`,
     title: 'Delete Team',
     okTitle: 'Delete',
-    okVariant: 'danger',
+    okClass: 'maroon-bg',
+    okVariant: null,
     cancelTitle: 'Cancel',
-    cancelVariant: 'link',
+    cancelClass: 'tdei-primary-link p-0 border-0 bg-transparent',
+    cancelVariant: null,
   }).show();
 
   if (value?.ok) {
diff --git a/pages/workspace/[id]/teams/[teamId].vue b/pages/workspace/[id]/teams/[teamId].vue
index d76da41..137830a 100644
--- a/pages/workspace/[id]/teams/[teamId].vue
+++ b/pages/workspace/[id]/teams/[teamId].vue
@@ -46,7 +46,7 @@
               {{ team!.name }}
             </div>
             <b-button
-              variant="primary"
+              class="tdei-primary-button"
               :disabled="saving.active"
               @click="join"
             >
@@ -67,7 +67,7 @@
               You already joined this team.
             </div>
             <b-button
-              variant="danger"
+              class="maroon-bg"
               :disabled="saving.active"
               @click="leave"
             >
diff --git a/pages/workspace/create/blank.vue b/pages/workspace/create/blank.vue
index f76f450..26e5853 100644
--- a/pages/workspace/create/blank.vue
+++ b/pages/workspace/create/blank.vue
@@ -26,7 +26,7 @@
           </div><!-- .card-body -->
 
           <div class="card-footer">
-            <button type="submit" class="btn btn-primary" :disabled="!complete" @click="create">
+            <button type="submit" class="btn tdei-primary-button" :disabled="!complete" @click="create">
               <app-spinner v-if="creating.active" size="sm" />
               <template v-else>Create Workspace</template>
             </button>
diff --git a/pages/workspace/create/file.vue b/pages/workspace/create/file.vue
index fe1cc00..0a658b1 100644
--- a/pages/workspace/create/file.vue
+++ b/pages/workspace/create/file.vue
@@ -56,14 +56,14 @@
             <section v-else-if="context.error" class="alert alert-danger m-0" role="alert">
               <h5><app-icon variant="info" />An error occurred:</h5>
               <p class="mb-3">{{ context.error }}</p>
-              <button class="btn btn-primary" @click="context.reset()">
+              <button class="btn tdei-primary-button" @click="context.reset()">
                 Try again
               </button>
             </section>
             <button
               v-else-if="!context.complete"
               type="submit"
-              class="btn btn-primary"
+              class="btn tdei-primary-button"
               @click.prevent="create"
               :disabled="!complete || context.active"
             >
diff --git a/pages/workspace/create/index.vue b/pages/workspace/create/index.vue
index ed53b25..6cf928d 100644
--- a/pages/workspace/create/index.vue
+++ b/pages/workspace/create/index.vue
@@ -14,7 +14,7 @@
             <p class="card-text">Create an empty workspace with no data.</p>
           </div>
           <div class="card-footer">
-            <nuxt-link to="/workspace/create/blank" class="btn btn-primary">
+            <nuxt-link to="/workspace/create/blank" class="btn tdei-primary-button">
               Start
               <app-icon variant="arrow_circle_right" no-margin />
             </nuxt-link>
@@ -32,7 +32,7 @@
             </p>
           </div>
           <div class="card-footer">
-            <nuxt-link to="/workspace/create/tdei" class="btn btn-primary">
+            <nuxt-link to="/workspace/create/tdei" class="btn tdei-primary-button">
               Start
               <app-icon variant="arrow_circle_right" no-margin />
             </nuxt-link>
@@ -50,7 +50,7 @@
             </p>
           </div>
           <div class="card-footer">
-            <nuxt-link to="/workspace/create/file" class="btn btn-primary">
+            <nuxt-link to="/workspace/create/file" class="btn tdei-primary-button">
               Start
               <app-icon variant="arrow_circle_right" no-margin />
             </nuxt-link>
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index 461bcc5..55f233b 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -54,14 +54,14 @@
             <section v-else-if="context.error" class="alert alert-danger m-0" role="alert">
               <h5><app-icon variant="info" />An error occurred:</h5>
               <p class="mb-3">{{ context.error }}</p>
-              <button class="btn btn-primary" @click="context.reset()">
+              <button class="btn tdei-primary-button" @click="context.reset()">
                 Try again
               </button>
             </section>
             <button
               v-else-if="!context.complete"
               type="submit"
-              class="btn btn-primary"
+              class="btn tdei-primary-button"
               @click.prevent="create"
               :disabled="!complete || context.active"
             >