diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e48e166..257b6fe 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -13,8 +13,8 @@
           link: "/guide/"
         },
         {
-          text: "Themes",
-          link: "/themes/"
+          text: "Customization",
+          link: "/customization/"
         },
         {
           text: "Github",
@@ -66,7 +66,7 @@
           ]
           }
         ],
-        "/themes/": ["", "customize", "env"]
+        "/customization/": ["", "theme", "build"]
       },
     }
   };
\ No newline at end of file
diff --git a/docs/themes/env.md b/docs/customization/build.md
similarity index 69%
rename from docs/themes/env.md
rename to docs/customization/build.md
index fb1a756..b10fd9d 100644
--- a/docs/themes/env.md
+++ b/docs/customization/build.md
@@ -1,4 +1,4 @@
-# Configuring environment specific builds
+# Build Customization
 
 This document provides instructions for how to add environment specific
 modifications to the Web UI.
@@ -26,15 +26,19 @@
 
 ## Store
 
-> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
-> application's API calls.
+:::tip
+[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
+application's API calls.
+:::
 
 1. If making customizations to the default store, add `CUSTOM_STORE=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/store`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-    > .env file. The store import in `src/main.js` will resolve to this new
-    > file.
+   :::danger
+   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   .env file. The store import in `src/main.js` will resolve to this new
+   file.
+   :::
 3. Import the base store
 4. Import environment specific store modules
 5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule`
@@ -54,18 +58,24 @@
 
 ## Router
 
-> [Vue Router](https://router.vuejs.org/guide/) determines which pages are
-> accessible in the UI.
+:::tip
+[Vue Router](https://router.vuejs.org/guide/) determines which pages are
+accessible in the UI.
+:::
 
 1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/router`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-    > .env file. The routes import in `src/router/index.js` will resolve to this
-    > new file.
+   :::danger
+   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   .env file. The routes import in `src/router/index.js` will resolve to this
+   new file.
+   :::
 3. Define new [routes](https://router.vuejs.org/api/#routes).
-    > Use static imports (over lazy-loading routes) to avoid creating separate
-    > JS chunks. Static imports also helps to keep the total build size down.
+   :::tip
+   Use static imports (over lazy-loading routes) to avoid creating separate
+   JS chunks. Static imports also helps to keep the total build size down.
+   :::
 4. Add default export
 
 ## App navigation
@@ -79,10 +89,12 @@
 1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-    > .env file. The AppNavigationMixin import in
-    > `src/components/AppNavigation/AppNavigation.vue` will resolve to this new
-    > file.
+   :::danger
+   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   .env file. The AppNavigationMixin import in
+   `src/components/AppNavigation/AppNavigation.vue` will resolve to this new
+   file.
+   :::
 3. Your custom mixin should follow a very similar structure to the default
    AppNavigationMixin.js file. It should include a data property named
    `navigationItems` that should be an array of of navigation objects. Each
@@ -92,17 +104,20 @@
 
 ## Theming
 
->[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
->allows for easy visual customizations.
+:::tip
+[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
+allows for easy visual customizations.
+:::
 
 1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key
    value pair to the new .env file.
 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
-    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-    > .env file. The webpack sass loader will attempt to import a file with this
-    > name.
-3. Add style customizations. Refer to [bootstrap
-   documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/)
+   :::danger
+   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   .env file. The webpack sass loader will attempt to import a file with this
+   name.
+   :::
+3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/)
    for details about [color
    overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults)
    and [other customizable
@@ -124,9 +139,9 @@
 1. Add the same `VUE_APP_ENV_NAME` key value pair to your
    `env.development.local` file.
 2. Use serve script
-    ```
-    npm run serve
-    ```
+   ```
+   npm run serve
+   ```
 
 ## Production build
 
@@ -134,16 +149,14 @@
 flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires
 [corresponding .env file to exist](#setup).
 
-
 ```
 npm run build -- --mode ibm
 ```
 
-
 **OR**
 
 pass env variable directly to script
 
 ```
 VUE_APP_ENV_NAME=ibm npm run build
-```
\ No newline at end of file
+```
diff --git a/docs/themes/readme.md b/docs/customization/readme.md
similarity index 78%
rename from docs/themes/readme.md
rename to docs/customization/readme.md
index bc4d764..6411806 100644
--- a/docs/themes/readme.md
+++ b/docs/customization/readme.md
@@ -1,15 +1,19 @@
+# Presentation Layer Architecture
 
-# Overview
-
- This section discusses the structure and purpose of the theme files and how to
- customize the application using Bootstrap theming.
+This section discusses the structure and purpose of the SCSS files and how to
+customize the application using Bootstrap theming.
 
 [Read more about Bootstrap
 Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
 
+## SCSS Directory Structure
 
-## SCSS File Structure
-```
+### `bmc` Directory
+
+The `bmc` directory contains Sass helpers and default styles for customizing the OpenBMC
+Web UI.
+
+```{5}
 .
 ├─ src
    ├─ assets
@@ -18,15 +22,18 @@
             ├─ custom
             └─ helpers
          ├─ bootstrap
-         ├─ _helpers.scss
          └─ _obmc-custom.scss
 ```
 
-## bmc
-This folder contains Sass helpers and default styles for customizing the OpenBMC
-Web UI.
+### `custom` Directory
 
-```
+The `custom` Directory imports all the styles needed to customize the UI. These
+are small changes used to reach parity with the OpenBMC Design Workgroup's
+agreed-upon design. The file naming convention closely follows the Bootstrap or
+Boostrap-vue library file naming since most of the ruleset selectors in these
+files are based on these two libraries.
+
+```{6}
 .
 ├─ src
    ├─ assets
@@ -49,30 +56,40 @@
                ├─ _sol.scss
                ├─ _tables.scss
                └─ _toasts.scss
-            └─  helpers
-               ├─ _colors.scss
-               ├─ _functions.scss
-               ├─ _index.scss
-               ├─ _motion.scss
-               └─ _variables.scss
+         ├─ helpers
+         ├─ bootstrap
+         └─ _obmc-custom.scss
 ```
-### custom
-The `custom` directory imports all the styles needed to customize the UI. These
-are small changes used to reach parity with the OpenBMC Design Workgroup's
-agreed-upon design. The file naming convention closely follows the Bootstrap or
-Boostrap-vue library file naming since most of the ruleset selectors in these
-files are based on these two libraries.
 
-### helpers
-The helper's folder contains a set of Sass helper files containing Sass
+### `helpers` Directory
+
+The `helpers` directory contains a set of Sass helper files containing Sass
 variables that establish the custom theme of the application.
 
-#### _colors.scss
-The colors.scss file sets all the SASS variables and color maps for the OpenBMC
+```{6}
+.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+         ├─ helpers
+                ├─ _colors.scss
+                ├─ _functions.scss
+                ├─ _index.scss
+                ├─ _motion.scss
+                └─ _variables.scss
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+```
+
+#### `_colors.scss`
+
+The `_colors.scss` file sets all the SASS variables and color maps for the OpenBMC
 Web UI. Any color settings needed to meet company brand guidelines will happen
 in this file.
 
 ##### Sass Color Variables
+
 ```scss
 $black: #000;
 $white: #fff;
@@ -94,6 +111,7 @@
 ```
 
 ##### Custom Color Variables
+
 ```scss
 // Sass Base Color Variables
 $blue: $blue-500;
@@ -103,6 +121,7 @@
 ```
 
 ##### Custom Colors Map
+
 ```scss
 $colors: (
   "blue": $blue,
@@ -113,6 +132,7 @@
 ```
 
 ##### Custom Theme Color Variables
+
 ```scss
 // Sass Theme Color Variables
 // Can be used as variants
@@ -127,6 +147,7 @@
 ```
 
 ##### Custom Theme Colors Map
+
 ```scss
 $theme-colors: (
   "primary": $primary,
@@ -134,12 +155,12 @@
   "dark": $dark,
   "light": $light,
   "danger": $danger,
-  "info": $info
-  "success": $success
-  "warning": $warning,
+  "info": $info "success": $success "warning": $warning,
 );
 ```
+
 ##### Color Resources
+
 - [Learn more about Bootstrap
   colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 - [Learn more about Bootstrap
@@ -147,13 +168,15 @@
 - [View the color palette and hex values in the color
   guidelines](/guide/guidelines/colors)
 
-#### _functions.scss
+#### `_functions.scss`
+
 Two functions provide a customized way to set color highlights. The
 `theme-color-light` and `theme-color-dark` are custom functions used to create
 colors for the `alert`, `badge`, `card`, and `toast` components. They have also
 set color highlights for some pseudo-elements like `: hover`.
 
 ##### Functions
+
 ```scss
 // This function is usually used to get a lighter
 // theme variant color to use as a background color
@@ -167,6 +190,7 @@
 ```
 
 ##### Examples
+
 ```scss{8-10,16}
 .b-table-sort-icon-left {
     background-position: left calc(1.5rem / 2) center !important;
@@ -188,12 +212,14 @@
 }
 ```
 
-#### _motion.scss
+#### `_motion.scss`
+
 This bezier curves and durations in this file determine the motion styles
 throughout the application. These guidelines from the Cabon Design System avoid
 easing curves that are unnatural, distracting, or purely decorative.
 
 ##### Motion Styles
+
 ```scss
 $duration--fast-01: 70ms; //Micro-interactions such as button and toggle
 $duration--fast-02: 110ms; //Micro-interactions such as fade
@@ -211,6 +237,7 @@
 ```
 
 ##### Example
+
 ```scss{6,9}
 .link-skip-nav {
   position: absolute;
@@ -224,61 +251,59 @@
   }
 }
 ```
+
 ##### Motion Resources
+
 - [Including Animation In Your Design
   System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
 - [Carbon Design System motion
   guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
 
-#### _variables.scss
+#### `_variables.scss`
+
 This file contains all the global Sass options. There are Bootstrap option
 overrides, Bootstrap global variable overrides, and custom BMC global variables.
-Read more about these in the [theme customization section](/themes/customize).
+Read more about these in the [Customization section](/customize/theme).
 
-### bootstrap
+### `bootstrap` Directory
+
 The `bootstrap` directory contains all the import references. The references are
 split into multiple files to support import order based on dependency. Helper
 styles need to be imported before all other styles.
 
-```
+```{6}
 .
 ├─ src
    ├─ assets
       ├─ styles
+         ├─ bmc
          ├─ bootstrap
             ├─ _helpers.scss
             └─ _index.scss
+         └─ _obmc-custom.scss
 ```
-#### _helpers.scss
+
+#### `_helpers.scss`
+
 This file contains all the helper import references for Bootstrap.
 
-#### _index.scss
+#### `_index.scss`
+
 This file contains all the import references needed to support the base,
 components, and utility styles.
 
-### _helpers.scss
-```
-.
-├─ src
-   ├─ assets
-      ├─ styles
-         ├─ _helpers.scss
-```
-The `_helpers.scss` file is an import file needed when building single-file
-components that require the use of BMC or Bootstrap Sass variables and
-functions. This file needs to be imported as part of the `<style>` block to
-support Sass compilation. Although it is possible to prepend these helpers in
-webpack, it will break any use of imported single-file components used in the
-Vuepress documentation.
+### `_obmc-custom.scss`
 
-### _obmc-custom.scss```
-```
+```{9}
 .
 ├─ src
    ├─ assets
       ├─ styles
+         ├─ bmc
+         ├─ bootstrap
          └─ _obmc-custom.scss
 ```
+
 The `obmc-custom.scss` file defines all of the presentational layer
 dependencies.
 
@@ -293,11 +318,11 @@
 In this case, rather than adding a Sass file, the scoped styles include the
 styles in the component's `<style>` block. It is required to import the
 `_helpers` Sass file when using a BMC or Bootstrap variable in the component's
-`<style>` block. Without this import, webpack cannot  compile the OpenBMC Web UI
+`<style>` block. Without this import, webpack cannot compile the OpenBMC Web UI
 CSS styles correctly.
 
-
 ### Scoped style block using SASS
+
 ```html
 <style scoped lang="scss">
   ...
@@ -305,30 +330,32 @@
 ```
 
 ### Scoped style block using CSS
+
 ```html
 <style scoped>
-  ...
+  ...;
 </style>
 ```
 
 ### Example - PageSection.vue
+
 ```html
 <style lang="scss" scoped>
-.page-section {
-  margin-bottom: $spacer * 2;
-}
-
-h2 {
-  @include font-size($h3-font-size);
-  margin-bottom: $spacer;
-  &::after {
-    content: '';
-    display: block;
-    width: 100px;
-    border: 1px solid $gray-300;
-    margin-top: 10px;
+  .page-section {
+    margin-bottom: $spacer * 2;
   }
-}
+
+  h2 {
+    @include font-size($h3-font-size);
+    margin-bottom: $spacer;
+    &::after {
+      content: "";
+      display: block;
+      width: 100px;
+      border: 1px solid $gray-300;
+      margin-top: 10px;
+    }
+  }
 </style>
 ```
 
@@ -337,3 +364,8 @@
 :::
 
 [Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
+
+Customization of the application requires knowledge of Sass and CSS. It also
+will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+libraries. This section outlines the global options and variables that can be
+removed or updated to meet organizational brand guidelines.
diff --git a/docs/themes/customize.md b/docs/customization/theme.md
similarity index 98%
rename from docs/themes/customize.md
rename to docs/customization/theme.md
index 763333d..6dbce1a 100644
--- a/docs/themes/customize.md
+++ b/docs/customization/theme.md
@@ -1,4 +1,4 @@
-# How to customize
+# Theme customization
 Customization of the application requires knowledge of Sass and CSS. It also
 will require becoming familiar with the Bootstrap and Bootstrap-Vue component
 libraries. This section outlines the global options and variables that can be
@@ -9,6 +9,8 @@
 customization needs. This includes customization of the state store, routing,
 application navigation, and theming.
 
+[Read more in the Build Customization section](/customization/build)
+
 ### Configuring environment specific builds
 The complete instructions can be found in the `env` directory in a file called
 env.md or by viewing the [Configuring environment specific builds
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index d73a037..3ba91b6 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -5,7 +5,7 @@
 as accent colors for components. The `.scss` component files use these accent
 colors to override default styles set by the Bootstrap library.
 
-- [Learn more about theme customization](/themes/)
+- [Learn more about theme customization](/customization/theme/)
 - [Open an issue in the OpenBMC webui-vue
   repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
   change