diff --git a/docs/docs/site-administration/building-pages.md b/docs/docs/site-administration/building-pages.md
new file mode 100644
index 000000000..77c525ad4
--- /dev/null
+++ b/docs/docs/site-administration/building-pages.md
@@ -0,0 +1,8 @@
+# Building Pages
+
+Custom pages can be created to organize multiple categories into a single page. Links to your custom pages are displayed on the home page sidebar and accessible by all users, however only Administrators can create or update pages. 
+
+To create a new page. Navigate to the settings page at `/admin/settings` and scroll down to the custom pages section. Here you can create, view, and edit your custom pages. To reorder how they are displayed on the sidebar you can drag and drop the pages into the preferred order.
+
+!!! tip
+    To save the order of pages you must click the save button displayed on the bottom of the Custom Page section. This is not necessary for updating individual page data. 
\ No newline at end of file
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 62f8c7453..e61268a5e 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -45,6 +45,7 @@ nav:
       - Site Administration:
           - User Settings: "site-administration/user-settings.md"
           - Site Settings: "site-administration/site-settings.md"
+          - Building Pages: "site-administration/building-pages.md"
           - User Management: "site-administration/user-management.md"
           - Backups and Restore: "site-administration/backups-and-exports.md"
           - Recipe Migration: "site-administration/migration-imports.md"
diff --git a/frontend/src/pages/Recipes/CustomPage.vue b/frontend/src/pages/Recipes/CustomPage.vue
index 160d5dabe..afdf74860 100644
--- a/frontend/src/pages/Recipes/CustomPage.vue
+++ b/frontend/src/pages/Recipes/CustomPage.vue
@@ -2,9 +2,14 @@
   <v-container>
     <CategorySidebar />
     <v-card flat height="100%">
-      <v-card-title class="text-center justify-center py-6 headline">
-        {{ title }}
-      </v-card-title>
+      <v-app-bar>
+        <v-spacer></v-spacer>
+        <v-card-title class="text-center justify-center py-3 ">
+          {{ title.toUpperCase() }}
+        </v-card-title>
+        <v-spacer></v-spacer>
+      </v-app-bar>
+
       <div v-if="render">
         <v-tabs v-model="tab" background-color="transparent" grow>
           <v-tab v-for="item in categories" :key="item.slug">
@@ -84,4 +89,7 @@ export default {
 </script>
 
 <style>
+.header-background {
+  background-color: #121619;
+}
 </style>
\ No newline at end of file