diff --git a/README.md b/README.md
index 7da9ad3..db9b7f7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Fantasia archive (fantasiaarchive)
+# Fantasia Archive (fantasiaarchive)
 
 A database manager for world building
 
@@ -23,14 +23,16 @@ npm install
 
 ** Prep for build
 Due to issues with this package being written in somewhat older version of nodeJS, the script will fizzle out upon building due to wrong version of `.d.ts` file in one of the included NPM packages.
-  - The proper replacement file can be found in `_typeFix/index.d.ts`
-  - The faulty file can be found in `node_modules\builder-util\node_modules\@types\fs-extra\index.d.ts`
-  - To fix this issue, simply copy the contents of the proper replacement over the buggy faulty file (or just replace its contents)
-  - Once this is done, the build should run as normal without any issues
+
+- The proper replacement file can be found in `_typeFix/index.d.ts`
+- The faulty file can be found in `node_modules\builder-util\node_modules\@types\fs-extra\index.d.ts`
+- To fix this issue, simply copy the contents of the proper replacement over the buggy faulty file (or just replace its contents)
+- Once this is done, the build should run as normal without any issues
 
 ## Optional: Start the app in development mode (hot-code reloading, error reporting, etc.)
 
 If you don't know what's going on, skip this step.
+
 ```bash
 npm run dev
 ```
diff --git a/package.json b/package.json
index aca94bb..84e63ad 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "fantasiaarchive",
   "version": "0.1.5",
   "description": "A database manager for world building",
-  "productName": "Fantasia archive",
+  "productName": "Fantasia Archive",
   "author": "Elvanos <elvanos66@gmail.com>",
   "license": "GNU GENERAL PUBLIC LICENSE",
   "private": true,
@@ -81,4 +81,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}
\ No newline at end of file
diff --git a/quasar.conf.js b/quasar.conf.js
index c695488..07724c0 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -149,8 +149,8 @@ module.exports = configure(function (ctx) {
       workboxPluginMode: "GenerateSW", // 'GenerateSW' or 'InjectManifest'
       workboxOptions: {}, // only for GenerateSW
       manifest: {
-        name: "Fantasia archive",
-        short_name: "Fantasia archive",
+        name: "Fantasia Archive",
+        short_name: "Fantasia Archive",
         description: "A database manager for world building",
         display: "standalone",
         orientation: "portrait",
diff --git a/src/components/dialogs/ProgramSettings.vue b/src/components/dialogs/ProgramSettings.vue
index f91d565..e1f1940 100644
--- a/src/components/dialogs/ProgramSettings.vue
+++ b/src/components/dialogs/ProgramSettings.vue
@@ -66,7 +66,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Dark mode
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -87,7 +87,7 @@
                     </div>
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Accessibility - Text shadow
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -102,7 +102,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Accessibility - Pronounced count divider
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -117,7 +117,7 @@
                       />
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Accessibility - Hide strike-through
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -138,7 +138,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide Welcome screen social links
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -153,7 +153,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide tips popup on start screen
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -168,7 +168,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide tips on project screen
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -183,7 +183,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide Fantasia mascot
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -224,7 +224,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Disable document control bar
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -241,7 +241,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Disable document guides
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -262,7 +262,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Disable document tooltips
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -277,7 +277,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide empty fields
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -294,7 +294,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Prevent auto-scrolling
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -333,7 +333,7 @@
                     </div>
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Close quick popups with same key
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -354,7 +354,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Stop quick-search close after selection
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -371,7 +371,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Don't precheck category filter
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -412,7 +412,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide tags in tree
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -427,7 +427,7 @@
                     />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Top tags in tree
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -442,7 +442,7 @@
                     />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Compact tags
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -463,7 +463,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Stop sublevel collapse in tree
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -478,7 +478,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide project name in tree
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -493,7 +493,7 @@
                       />
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Invert tree custom order sorting
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -516,7 +516,7 @@
                     </div>
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide document count entirely
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -531,7 +531,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide category count
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -546,7 +546,7 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Invert category position
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -561,12 +561,12 @@
                       />
                   </div>
 
-                  <div class="col-4 optionWrapper">
+                  <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide order numbers
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
                       <q-tooltip :delay="500">
-                        This option disabled showing of the custom order numbers left of the names.
+                        This option hides the custom order numbers left of the names.
                       </q-tooltip>
                     </q-icon>
                     </div>
@@ -582,7 +582,7 @@
                     </div>
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide extra icons
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -599,7 +599,7 @@
                       />
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide "Add under" icon
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -614,7 +614,7 @@
                       />
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide "Edit" icon
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -629,7 +629,7 @@
                       />
                   </div>
 
-                   <div class="col-4 optionWrapper">
+                   <div class="col-12 col-md-6 col-lg-4 optionWrapper">
                     <div class="optionTitle">
                       Hide "Open" icon
                     <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@@ -1265,10 +1265,10 @@ body.body--dark {
     margin-top: 16px;
     margin-bottom: 8px;
     font-weight: 500;
-    align-items: center;
+    align-items: flex-start;
     justify-content: flex-start;
     display: flex;
-    flex-wrap: wrap;
+    width: calc(100% - 45px);
     margin-left: 10px;
   }
 
diff --git a/src/pages/DocumentDisplay.vue b/src/pages/DocumentDisplay.vue
index f39aa0e..920074c 100644
--- a/src/pages/DocumentDisplay.vue
+++ b/src/pages/DocumentDisplay.vue
@@ -108,11 +108,16 @@
       </div>
 
       <div
-        :class="`col-${field.sizing} q-mb-md`"
         v-for="field in bluePrintData.extraFields"
         :key="`${field.id}`"
         v-show="hasValueFieldFilter(field) || editMode"
-        >
+        :class="`
+          col-12
+          col-md-${determineSize_MD(field)}
+          col-lg-${determineSize_LG(field)}
+          col-xl-${determineSize_XL(field)}
+          q-mb-md
+        `">
 
           <Field_Break
           class="inputWrapper break"
@@ -812,6 +817,40 @@ export default class PageDocumentDisplay extends BaseClass {
     return true
   }
 
+  /****************************************************************/
+  // RESPONSIVE COLLUMN STYLES
+  /****************************************************************/
+
+  determineSize_MD (field: I_ExtraFields) {
+    if (field.type === "break") {
+      return 12
+    }
+    if (field.sizing <= 6) {
+      return 6
+    }
+
+    return field.sizing
+  }
+
+  determineSize_LG (field: I_ExtraFields) {
+    if (field.type === "break") {
+      return 12
+    }
+
+    if (field.sizing <= 4) {
+      return 4
+    }
+
+    return field.sizing
+  }
+
+  determineSize_XL (field: I_ExtraFields) {
+    if (field.type === "break") {
+      return 12
+    }
+    return field.sizing
+  }
+
   /****************************************************************/
   // DELETE DIALOG
   /****************************************************************/
@@ -841,7 +880,7 @@ export default class PageDocumentDisplay extends BaseClass {
   }
 
   /****************************************************************/
-  // `DOCUMENT COPY
+  // DOCUMENT COPY
   /****************************************************************/
   documentPass = null as unknown as I_OpenedDocument
 
diff --git a/src/pages/ProjectScreen.vue b/src/pages/ProjectScreen.vue
index bdabaf1..edd5499 100644
--- a/src/pages/ProjectScreen.vue
+++ b/src/pages/ProjectScreen.vue
@@ -1,5 +1,11 @@
 <template>
-  <q-page class="column items-center justify-center">
+  <q-page
+  class="column items-center justify-center no-wrap"
+  :class="{
+    'q-pb-xl q-pl-xl q-pr-xl': disableDocumentControlBar,
+    'q-pa-xl': !disableDocumentControlBar,
+    }"
+  >
 
       <!-- New document dialog -->
       <newDocumentDialog
@@ -37,7 +43,7 @@
 
       </div>
 
-      <div>
+      <div class="documentGraphParent">
         <q-card
           dark
           class="documentGraphWrapper"
@@ -146,6 +152,7 @@ export default class ProjectScreen extends BaseClass {
     const options = this.SGET_options
     this.hideTooltipsProject = options.hideTooltipsProject
     this.hidePlushes = options.hidePlushes
+    this.disableDocumentControlBar = options.disableDocumentControlBar
   }
 
   /**
@@ -153,6 +160,11 @@ export default class ProjectScreen extends BaseClass {
    */
   hidePlushes = false
 
+  /**
+   * Determines if the document control bar is show or hidden
+   */
+  disableDocumentControlBar = false
+
   /**
    * Determines if the project screen help hint should show or not
    */
@@ -399,11 +411,11 @@ export default class ProjectScreen extends BaseClass {
 }
 
 .hintWrapper {
-  max-width: 950px;
+  max-width: calc(100% - 110px);
+  width: 950px;
   display: flex;
   align-items: center;
   padding: 15px 20px;
-  width: 100%;
   background-color: lighten(#d7ac47, 35);
   border-radius: 5px;
   margin-bottom: 30px;
@@ -442,12 +454,20 @@ body.body--dark {
   }
 }
 
-.documentGraphWrapper {
-  min-width: 950px;
+.documentGraphParent {
+  min-height: 500px;
+  max-height: 500px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: calc(100% - 110px);
+  width: 950px;
+}
+
+.documentGraphWrapper {
   min-height: 500px;
   max-height: 500px;
-  max-width: 950px;
   overflow: hidden;
+  width: 950px;
 }
 
 .docCountLabel {
@@ -460,7 +480,7 @@ body.body--dark {
 <style scoped lang="scss">
 
 .mainProjectSubTitle {
-  margin-top: 0;
+  margin-top: 40px;
   margin-bottom: 0;
   opacity: 0.8;
 }
diff --git a/suggestionList.md b/suggestionList.md
index 21198b4..49e045a 100644
--- a/suggestionList.md
+++ b/suggestionList.md
@@ -67,3 +67,4 @@
 - Better color pasting to documents via context menu
 - Add printing support
 - Add % bar graphs in tree (pinned in #general, idea by popoto)
+- Consider linking fields (names) to other documents for auto-updates