diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
new file mode 100644
index 000000000000..d21afc515591
--- /dev/null
+++ b/docs/_sass/_colors.scss
@@ -0,0 +1,7 @@
+$color-blue: #0185FF;
+$color-blueHover: #006FD6;
+$color-dark: #0B1B34;
+$color-gray1: #FAFAFA;
+$color-gray2: #ECECEC;
+$color-gray3: #C6C9CA;
+$color-white: #FFFFFF;
diff --git a/docs/_sass/_fonts.scss b/docs/_sass/_fonts.scss
new file mode 100644
index 000000000000..a43d35ed9d26
--- /dev/null
+++ b/docs/_sass/_fonts.scss
@@ -0,0 +1,99 @@
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 100;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Light.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 200;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Thin.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Regular.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 600;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Bold.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-RgIt;
+  font-weight: 400;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-MdIt;
+  font-weight: 500;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-BdIt;
+  font-weight: 700;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-Rg;
+  font-weight: 400;
+  font-style: normal;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-RgIt;
+  font-weight: 400;
+  font-style: italic;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-Bd;
+  font-weight: 700;
+  font-style: normal;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-BdIt;
+  font-weight: 700;
+  font-style: italic;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff2') format('woff2');
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+strong {
+  font-weight: 600;
+}
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
new file mode 100644
index 000000000000..fa153e7f2480
--- /dev/null
+++ b/docs/_sass/_main.scss
@@ -0,0 +1,266 @@
+@import 'colors';
+@import 'fonts';
+
+:root {
+  --spacing-default: 24px;
+}
+
+* {
+  margin: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  line-height: 1;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+q,
+blockquote {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: none;
+  }
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+  background: $color-white;
+}
+
+hr {
+  background: $color-blue;
+  border: none;
+  display: inline-block;
+  width: 24px;
+  height: 2px;
+  margin: 0 0 15px;
+}
+
+strong {
+  font-weight: 700;
+  font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+}
+
+em {
+  font-style: italic;
+}
+
+a {
+  color: $color-blue;
+  text-decoration: none;
+
+  &:hover {
+    color: $color-blueHover;
+    text-decoration: underline;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $color-dark;
+  font-family: "GTAmericaExp-Regular";
+  font-weight: 400;
+  margin-bottom: 12px;
+  line-height: 1.33;
+}
+
+h1 {
+  font-size: 36px;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 26px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: $color-blue;
+  margin-bottom: 6px;
+}
+
+h6 {
+  font-size: 11px;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+p {
+  margin: 0 0 var(--spacing-default);
+}
+
+body,
+button,
+input,
+select,
+textarea {
+  line-height: 1.4;
+  font-weight: 400;
+  font-family: "GTAmericaExp-Regular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+  font-size: 16px;
+  color: $color-dark;
+}
+
+.lhn {
+  height: 100%;
+  width: 375px;
+  position: fixed;
+  background-color: $color-gray1;
+  padding: 36px;
+  box-sizing: border-box;
+  border-right-color: $color-gray2;
+  border-right-width: 1px;
+  border-style: solid;
+
+  .logo {
+    width: 150px;
+  }
+
+  .lhn-content {
+    padding-top: 24px;
+    margin-left: 32px;
+  }
+
+  ul,
+  li {
+    list-style: none;
+  }
+}
+
+.content-area {
+  /* Same as the width of the lhn */
+  margin-left: 375px;
+  padding: 48px;
+  box-sizing: border-box;
+}
+
+.main-navigation-tree {
+
+  ul,
+  li {
+    margin-bottom: 12px;
+
+    /* Apply recursive style to add a margin to the nested items */
+    ul,
+    li {
+      margin-top: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .caret-icon {
+    left: 48px;
+    padding-top: 1px;
+    position: absolute;
+    color: $color-gray3;
+    font-size: larger;
+  }
+
+  .caret-icon-down {
+    left: 44px;
+  }
+
+  .selected-hub {
+    font-weight: bold;
+  }
+
+  .link {
+    color: $color-blue;
+    cursor: pointer;
+
+    &:hover {
+      color: $color-blueHover;
+      text-decoration: underline;
+    }
+  }
+}
+
+.cards-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 10px;
+  column-gap: 20px;
+}
+
+.card {
+  display: flex;
+  flex-wrap: nowrap;
+  flex: 42%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: 15px;
+  border: 1px solid lightgray;
+  padding: 20px;
+
+  .left-icon {
+    display: flex;
+    align-items: center;
+    padding-right: 15px;
+  }
+
+  .right-icon {
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+  }
+
+  .body {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    flex-grow: 2;
+  }
+
+  .description {
+    margin-top: 15px;
+  }
+}
diff --git a/docs/assets/css/fonts.css b/docs/assets/css/fonts.css
deleted file mode 100644
index a58f45bb3b0f..000000000000
--- a/docs/assets/css/fonts.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 100;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Light.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 200;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Thin.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 400;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Regular.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 500;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 600;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-Regular;
-    font-weight: 700;
-    font-style: normal;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Bold.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-RgIt;
-    font-weight: 400;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-MdIt;
-    font-weight: 500;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExp-BdIt;
-    font-weight: 700;
-    font-style: italic;
-    src: url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-Rg;
-    font-weight: 400;
-    font-style: normal;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-RgIt;
-    font-weight: 400;
-    font-style: italic;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-Bd;
-    font-weight: 700;
-    font-style: normal;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: GTAmericaExpMono-BdIt;
-    font-weight: 700;
-    font-style: italic;
-    src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff2') format('woff2');
-}
-
-* {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-strong {
-    font-weight: 600;
-}
diff --git a/docs/assets/css/styles.scss b/docs/assets/css/styles.scss
index 7fd8f272eeaf..271e60fe6611 100644
--- a/docs/assets/css/styles.scss
+++ b/docs/assets/css/styles.scss
@@ -1,270 +1,3 @@
 ---
 ---
-@import url('./fonts.css');
-
-:root {
-    --color-dark: #0B1B34;
-    --spacing-default: 24px;
-}
-
-* {
-    margin: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    vertical-align: baseline;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-html {
-    line-height: 1;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-caption,
-th,
-td {
-    text-align: left;
-    font-weight: 400;
-    vertical-align: middle;
-}
-
-q,
-blockquote {
-    quotes: none;
-
-    &:before,
-    &:after {
-        content: none;
-    }
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-    display: block;
-}
-
-html,
-body {
-    height: 100%;
-    min-height: 100%;
-    background: #fff;
-}
-
-hr {
-    background: #0185FF;
-    border: none;
-    display: inline-block;
-    width: 24px;
-    height: 2px;
-    margin: 0 0 15px;
-}
-
-strong {
-    font-weight: 700;
-    font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
-}
-
-em {
-    font-style: italic;
-}
-
-a {
-    color: #0185FF;
-    text-decoration: none;
-
-    &:hover {
-        color: #006FD6;
-        text-decoration: underline;
-    }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: var(--color-dark);
-    font-family: "GTAmericaExp-Regular";
-    font-weight: 400;
-    margin-bottom: 12px;
-    line-height: 1.33;
-}
-
-h1 {
-    font-size: 36px;
-    line-height: 1.2;
-}
-
-h2 {
-    font-size: 26px;
-}
-
-h3 {
-    font-size: 20px;
-}
-
-h5 {
-    font-size: 12px;
-    font-weight: 500;
-    text-transform: uppercase;
-    color: #0185FF;
-    margin-bottom: 6px;
-}
-
-h6 {
-    font-size: 11px;
-    text-transform: uppercase;
-    margin-bottom: 6px;
-}
-
-p {
-    margin: 0 0 var(--spacing-default);
-}
-
-code {
-    background-color: #F5F6F8;
-    color: #32435E;
-    font-family: Menlo, Consolas, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
-}
-
-body,
-button,
-input,
-select,
-textarea {
-    line-height: 1.4;
-    font-weight: 400;
-    font-family: "GTAmericaExp-Regular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
-    font-size: 16px;
-    color: var(--color-dark);
-}
-
-.lhn {
-    height: 100%;
-    width: 375px;
-    position: fixed;
-    background-color: #fafafa;
-    padding: 36px;
-    box-sizing: border-box;
-    border-right-color: rgb(236, 236, 236);
-    border-right-width: 1px;
-    border-style: solid;
-
-    .logo {
-        width: 150px;
-    }
-
-    .lhn-content {
-        padding-top: 24px;
-        margin-left: 32px;
-    }
-
-    ul,
-    li {
-        list-style: none;
-    }
-}
-
-.content-area {
-    /* Same as the width of the lhn */
-    margin-left: 375px;
-    padding: 48px;
-    box-sizing: border-box;
-}
-
-.main-navigation-tree {
-
-    ul,
-    li {
-        margin-bottom: 12px;
-
-        /* Apply recursive style to add a margin to the nested items */
-        ul,
-        li {
-            margin-top: 12px;
-            color: #069;
-            cursor: pointer;
-        }
-    }
-
-    .caret-icon {
-        left: 48px;
-        padding-top: 1px;
-        position: absolute;
-        color: #c5c9ca;
-        font-size: larger;
-    }
-
-    .caret-icon-down {
-        left: 44px;
-    }
-
-    .selected-hub {
-        font-weight: bold;
-    }
-
-    .link {
-        color: #069;
-        cursor: pointer;
-    }
-}
-
-.cards-row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    row-gap: 10px;
-    column-gap: 20px;
-}
-
-.card {
-    display: flex;
-    flex-wrap: nowrap;
-    flex: 42%;
-    flex-grow: 0;
-	flex-shrink: 0;
-    border-radius: 15px;
-    border: 1px solid lightgray;
-    padding: 20px;
-
-    .left-icon {
-        display: flex;
-        align-items: center;
-        padding-right: 15px;
-    }
-
-    .right-icon {
-        display: flex;
-        align-items: center;
-        padding-left: 15px;
-    }
-
-    .body {
-        display: flex;
-        flex-wrap: nowrap;
-        flex-direction: column;
-        flex-grow: 2;
-    }
-
-    .description {
-        margin-top: 15px;
-    }
-}
+@import 'main';