diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml
index 73411c8..fc40d81 100644
--- a/.github/workflows/frontend-deploy.yml
+++ b/.github/workflows/frontend-deploy.yml
@@ -33,6 +33,7 @@ jobs:
           SITE_CONTACT_EMAIL: hello@giraffeql.com
           SITE_DISCORD_LINK: https://discord.gg/CpSWfub9y6
           SITE_GITHUB_REPOSITORY_URL: https://github.com/big213/giraffeql.com
+          LOGO_HAS_LIGHT_VARIANT:
       - name: Deploy to Firebase
         uses: w9jds/firebase-action@master
         with:
diff --git a/backend/deploy.md.example b/backend/deploy.md.example
index 16dbe64..ae86a55 100644
--- a/backend/deploy.md.example
+++ b/backend/deploy.md.example
@@ -12,7 +12,7 @@ firebase functions:config:set pg.user="user" pg.password="password" pg.database=
 
 # set base config
 
-firebase functions:config:set base.origins="https://example.com"
+firebase functions:config:set base.origins="https://example.com" base.timeout_seconds="60"
 
 # set serveImage config
 
diff --git a/backend/env.json.example b/backend/env.json.example
index 240f48e..17b81c6 100644
--- a/backend/env.json.example
+++ b/backend/env.json.example
@@ -22,6 +22,7 @@
     "cache_bucket": "giraffeql-boilerplate.appspot.com/cache"
   },
   "base": {
-    "origins": "https://boilerplate.giraffeql.com"
+    "origins": "https://boilerplate.giraffeql.com",
+    "timeout_seconds": "60"
   }
 }
diff --git a/backend/functions/src/schema/core/helpers/sql.ts b/backend/functions/src/schema/core/helpers/sql.ts
index 76c9a34..9e510af 100644
--- a/backend/functions/src/schema/core/helpers/sql.ts
+++ b/backend/functions/src/schema/core/helpers/sql.ts
@@ -904,7 +904,8 @@ export async function updateTableRow(
     // handle set fields and convert to actual sql fields, if aliased
     const sqlFields = {};
     for (const fieldname in sqlQuery.fields) {
-      const sqlOptions = currentTypeDef.definition.fields[fieldname].sqlOptions;
+      const sqlOptions =
+        currentTypeDef.definition.fields[fieldname]?.sqlOptions;
       if (!sqlOptions) throw new Error(`'${fieldname}' is not a sql field`);
 
       sqlFields[sqlOptions.field ?? fieldname] = sqlOptions.parseValue
diff --git a/backend/functions/src/schema/core/helpers/typeDef.ts b/backend/functions/src/schema/core/helpers/typeDef.ts
index 2c99e2a..a83124a 100644
--- a/backend/functions/src/schema/core/helpers/typeDef.ts
+++ b/backend/functions/src/schema/core/helpers/typeDef.ts
@@ -465,19 +465,42 @@ export function generateEnumField(
 
 export function generateKeyValueArray(
   params: {
+    name?: string;
     valueType?: GiraffeqlScalarType;
     allowNullValue?: boolean;
   } & GenerateFieldParams
 ) {
   const {
+    name,
     valueType = Scalars.string,
     allowNullValue = false,
     ...remainingParams
   } = params;
+
+  let finalObjectName: string;
+
+  // if name is defined, check if it is not already defined
+  if (name) {
+    finalObjectName = name;
+    if (inputTypeDefs.has(name)) {
+      throw new GiraffeqlInitializationError({
+        message: `Input type with name: '${name}' already exists`,
+      });
+    }
+  } else {
+    finalObjectName = "keyValueObject";
+    let iteration = 0;
+    // if no name, generate an appropriate name by adding an incrementing number
+    while (inputTypeDefs.has(finalObjectName)) {
+      finalObjectName += String(iteration);
+      iteration++;
+    }
+  }
+
   // generate the input type if not exists
-  if (!inputTypeDefs.has("keyValueObject")) {
+  if (!inputTypeDefs.has(finalObjectName)) {
     new GiraffeqlInputType({
-      name: "keyValueObject",
+      name: finalObjectName,
       description: "Object Input with key and value properties",
       fields: {
         key: new GiraffeqlInputFieldType({
@@ -486,16 +509,17 @@ export function generateKeyValueArray(
         }),
         value: new GiraffeqlInputFieldType({
           type: valueType,
-          required: !allowNullValue,
+          required: true,
+          allowNull: allowNullValue,
         }),
       },
     });
   }
 
   // generate the object type if not exists
-  if (!objectTypeDefs.has("keyValueObject")) {
+  if (!objectTypeDefs.has(finalObjectName)) {
     new GiraffeqlObjectType({
-      name: "keyValueObject",
+      name: finalObjectName,
       description: "Object with key and value properties",
       fields: {
         key: {
@@ -512,7 +536,7 @@ export function generateKeyValueArray(
 
   return generateArrayField({
     allowNullElement: false,
-    type: new GiraffeqlObjectTypeLookup("keyValueObject"),
+    type: new GiraffeqlObjectTypeLookup(finalObjectName),
     ...remainingParams,
   });
 }
diff --git a/backend/functions/src/schema/core/services/normal.ts b/backend/functions/src/schema/core/services/normal.ts
index 6d64a42..f3f00df 100644
--- a/backend/functions/src/schema/core/services/normal.ts
+++ b/backend/functions/src/schema/core/services/normal.ts
@@ -10,9 +10,11 @@ import {
   SqlOrderByObject,
   SqlSelectQuery,
   SqlSelectQueryObject,
+  SqlSumQuery,
   SqlUpdateQuery,
   SqlWhereFieldOperator,
   SqlWhereObject,
+  sumTableRows,
   updateTableRow,
 } from "../helpers/sql";
 import { permissionsCheck } from "../helpers/permissions";
@@ -687,6 +689,19 @@ export class NormalService extends BaseService {
     return recordsCount;
   }
 
+  // sum a field for the records matching the criteria
+  async sumSqlRecord(
+    sqlQuery: Omit<SqlSumQuery, "table">,
+    fieldPath?: string[]
+  ): Promise<any> {
+    const sum = await sumTableRows({
+      ...sqlQuery,
+      table: this.typename,
+    });
+
+    return sum;
+  }
+
   async createSqlRecord(
     sqlQuery: Omit<SqlInsertQuery, "table">,
     fieldPath?: string[]
diff --git a/backend/functions/src/schema/models/github/service.ts b/backend/functions/src/schema/models/github/service.ts
index d1d7fa1..6d4f7d7 100644
--- a/backend/functions/src/schema/models/github/service.ts
+++ b/backend/functions/src/schema/models/github/service.ts
@@ -129,6 +129,7 @@ query {
       repository(name: "${env.github.repository}") {
         latestRelease {
           tagName
+          createdAt
         }
       }
     }
@@ -136,7 +137,7 @@ query {
 }
     `);
 
-        return response.viewer.organization.repository.latestRelease?.tagName;
+        return response.viewer.organization.repository.latestRelease;
       } else {
         // if no organization specified, lookup repository directly
         const response = await sendGraphqlRequest(`
@@ -145,13 +146,14 @@ query {
     repository(name: "${env.github.repository}") {
       latestRelease {
         tagName
+        createdAt
       }
     }
   }
 }
     `);
 
-        return response.viewer.repository.latestRelease?.tagName;
+        return response.viewer.repository.latestRelease;
       }
     } catch (err) {
       throw new GiraffeqlBaseError({
diff --git a/backend/functions/src/schema/models/user/rootResolver.ts b/backend/functions/src/schema/models/user/rootResolver.ts
index 5881544..2b3e417 100644
--- a/backend/functions/src/schema/models/user/rootResolver.ts
+++ b/backend/functions/src/schema/models/user/rootResolver.ts
@@ -20,11 +20,12 @@ export default {
     allowNull: false,
     type: User.typeDefLookup,
     resolver: ({ req, fieldPath, args, query }) => {
-      if (!req.user?.id) throw new Error("Login required");
+      if (!req.user) throw new Error("Login required");
+
       return User.getRecord({
         req,
         fieldPath,
-        args: { id: req.user?.id },
+        args: { id: req.user!.id },
         query,
         isAdmin: true,
       });
diff --git a/backend/functions/src/schema/models/user/service.ts b/backend/functions/src/schema/models/user/service.ts
index 75c44df..6c51bf7 100644
--- a/backend/functions/src/schema/models/user/service.ts
+++ b/backend/functions/src/schema/models/user/service.ts
@@ -216,12 +216,15 @@ export class UserService extends PaginatedService {
     // args should be validated already
     const validatedArgs = <any>args;
     //check if record exists
-    const item = await this.getFirstSqlRecord({
-      select: ["id", "role", "firebaseUid"],
-      where: {
-        id: data!.id,
+    const item = await this.getFirstSqlRecord(
+      {
+        select: ["id", "role", "firebaseUid"],
+        where: {
+          id: data!.id,
+        },
       },
-    });
+      fieldPath
+    );
 
     // make sure email field, if provided, matches the firebase user email
     if ("email" in validatedArgs) {
@@ -260,10 +263,13 @@ export class UserService extends PaginatedService {
     // args should be validated already
     const validatedArgs = <any>args;
     // check if record exists, get ID
-    const item = await this.getFirstSqlRecord({
-      select: ["id", "role", "firebaseUid"],
-      where: validatedArgs.item,
-    });
+    const item = await this.getFirstSqlRecord(
+      {
+        select: ["id", "role", "firebaseUid"],
+        where: validatedArgs.item,
+      },
+      fieldPath
+    );
 
     // convert any lookup/joined fields into IDs
     await this.handleLookupArgs(validatedArgs.fields, fieldPath);
@@ -333,10 +339,13 @@ export class UserService extends PaginatedService {
     const validatedArgs = <any>args;
 
     // confirm existence of item and get ID
-    const item = await this.getFirstSqlRecord({
-      select: ["id", "firebaseUid"],
-      where: validatedArgs,
-    });
+    const item = await this.getFirstSqlRecord(
+      {
+        select: ["id", "firebaseUid"],
+        where: validatedArgs,
+      },
+      fieldPath
+    );
 
     // first, fetch the requested query, if any
     const requestedResults = this.isEmptyQuery(query)
diff --git a/frontend/.env.example b/frontend/.env.example
index 8ccdabb..550df89 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -2,7 +2,7 @@ VER=DEV
 
 #required
 SITE_NAME="Giraffeql Boilerplate"
-SITE_DESCRIPTION="Giraffeql Boilerplate is a basic boilerplate site for showcasing the Giraffeql API querying language in a basic and extendable implementation."
+SITE_DESCRIPTION="Giraffeql Boilerplate is a basic boilerplate site for showcasing the Giraffeql API querying language in a basic and extendable implementation"
 
 #optional
 SITE_IMAGE_URL=https://cdn.giraffeql.com/permanent/android-chrome-512x512.png
@@ -10,6 +10,10 @@ SITE_CONTACT_EMAIL=hello@giraffeql.com
 SITE_DISCORD_LINK=https://discord.gg/CpSWfub9y6
 SITE_GITHUB_REPOSITORY_URL=https://github.com/big213/giraffeql-boilerplate
 
+#logo
+#if this is enabled, must have a variant for logo-vertical-light.png and logo-horizontal-light.png in static folder
+#LOGO_HAS_LIGHT_VARIANT=true
+
 #dev
 API_URL=http://localhost:5001/giraffeql-boilerplate/us-central1/api
 IMAGE_SERVING_URL=https://cdn.giraffeql.com
diff --git a/frontend/components/common/versionCheckText.vue b/frontend/components/common/versionCheckText.vue
index e6342e4..91b6cde 100644
--- a/frontend/components/common/versionCheckText.vue
+++ b/frontend/components/common/versionCheckText.vue
@@ -2,14 +2,14 @@
   <div>
     <a @click="copyIdTokenToClipboard()">{{ getBuildInfo() }}</a>
     <v-icon
-      v-if="hasNewerVersion"
+      v-if="hasNewerVersion && showNewerVersionIcon"
       title="A newer version of this site is available. Click to reload."
       color="pink"
       @click="reloadPage()"
       >mdi-sync-alert</v-icon
     >
     <v-snackbar
-      v-model="open"
+      v-model="snackbarStatus"
       multi-line
       bottom
       right
@@ -27,7 +27,7 @@
         >
           Refresh
         </v-btn>
-        <v-btn color="pink" text v-bind="attrs" @click="open = false">
+        <v-btn color="pink" text v-bind="attrs" @click="snackbarStatus = false">
           Close
         </v-btn>
       </template>
@@ -44,10 +44,11 @@ import 'firebase/auth'
 export default {
   data() {
     return {
-      open: false,
+      snackbarStatus: false,
       currentVersion: null,
       latestVersion: null,
-      hasNewerVersion: false,
+
+      showNewerVersionIcon: false,
     }
   },
 
@@ -56,17 +57,28 @@ export default {
     executeGiraffeql(this, {
       getRepositoryLatestVersion: true,
     }).then((res) => {
-      this.latestVersion = res
-      if (this.latestVersion && this.currentVersion !== this.latestVersion) {
+      this.latestVersion = res.tagName
+      if (this.hasNewerVersion) {
         // only open the snackbar if not DEV
         if (this.currentVersion !== 'DEV') {
-          this.open = true
+          // only show the snackbar if it has been at least 3 minutes since the release. if it has been more than 3 mins, show immediately
+          setTimeout(() => {
+            this.snackbarStatus = true
+            this.showNewerVersionIcon = true
+          }, Math.min(3 * 60 * 1000, Math.max(0, 3 * 60 * 1000 - (new Date() - new Date(res.createdAt)))))
+        } else {
+          this.showNewerVersionIcon = true
         }
-        this.hasNewerVersion = true
       }
     })
   },
 
+  computed: {
+    hasNewerVersion() {
+      return this.latestVersion && this.currentVersion !== this.latestVersion
+    },
+  },
+
   methods: {
     reloadPage() {
       location.reload()
diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
index c8c00c5..6dbb325 100644
--- a/frontend/components/interface/crud/crudRecordInterface.vue
+++ b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -3,7 +3,7 @@
     <v-toolbar flat color="accent" dense>
       <v-icon left>{{ icon || recordInfo.icon || 'mdi-domain' }}</v-icon>
       <v-toolbar-title>{{
-        title || `${recordInfo.pluralName}`
+        title || recordInfo.title || recordInfo.pluralName
       }}</v-toolbar-title>
       <v-divider
         v-if="recordInfo.addOptions"
diff --git a/frontend/components/interface/crud/shareRecordInterface.vue b/frontend/components/interface/crud/shareRecordInterface.vue
index a8c8f09..70757c5 100644
--- a/frontend/components/interface/crud/shareRecordInterface.vue
+++ b/frontend/components/interface/crud/shareRecordInterface.vue
@@ -31,13 +31,12 @@
 </template>
 
 <script>
-import { copyToClipboard, generateRecordRouteObject } from '~/services/base'
+import { copyToClipboard, generateViewRecordRoute } from '~/services/base'
 
 export default {
   props: {
     selectedItem: {
       type: Object,
-      default: () => ({}),
     },
     recordInfo: {
       type: Object,
@@ -47,18 +46,17 @@ export default {
 
   computed: {
     shareUrl() {
-      const routeObject = generateRecordRouteObject(
-        this.recordInfo.typename,
-        this.recordInfo.routeName,
-        this.selectedItem.id
-      )
-
-      return this.selectedItem && this.recordInfo.shareOptions && routeObject
-        ? window.location.origin + this.$router.resolve(routeObject).href
+      return this.selectedItem
+        ? window.location.origin +
+            generateViewRecordRoute(this, {
+              typename: this.recordInfo.typename,
+              routeType: 'i',
+              id: this.selectedItem.id,
+            })
         : ''
     },
     itemIdentifier() {
-      return this.recordInfo.renderItem
+      return this.recordInfo.renderItem && this.selectedItem
         ? this.recordInfo.renderItem(this.selectedItem)
         : null
     },
diff --git a/frontend/components/menu/previewRecordMenu.vue b/frontend/components/menu/previewRecordMenu.vue
index abb31f8..06bd9f4 100644
--- a/frontend/components/menu/previewRecordMenu.vue
+++ b/frontend/components/menu/previewRecordMenu.vue
@@ -55,9 +55,10 @@
 <script>
 import {
   handleError,
-  goToPage,
   capitalizeString,
   getIcon,
+  enterRoute,
+  generateViewRecordRoute,
 } from '~/services/base'
 import { executeGiraffeql } from '~/services/giraffeql'
 import FollowButton from '~/components/button/followButton.vue'
@@ -117,7 +118,15 @@ export default {
   methods: {
     openPage() {
       if (this.openMode === 'openInNew') {
-        goToPage(this, this.item.__typename, 'i-view', this.item.id, true)
+        enterRoute(
+          this,
+          generateViewRecordRoute(this, {
+            typename: this.item.__typename,
+            routeType: 'i',
+            id: this.item.id,
+          }),
+          openInNew
+        )
       } else if (this.openMode === 'openInDialog') {
         this.$root.$emit('openEditRecordDialog', {
           recordInfo: 'Public' + this.capitalizedType,
diff --git a/frontend/components/menu/recordActionMenu.vue b/frontend/components/menu/recordActionMenu.vue
index ef63112..93bead9 100644
--- a/frontend/components/menu/recordActionMenu.vue
+++ b/frontend/components/menu/recordActionMenu.vue
@@ -12,7 +12,7 @@
       <v-list-item
         v-if="recordInfo.enterOptions && !hideEnter"
         key="enter"
-        @click="goToPage(true)"
+        @click="goToRecordPage(true)"
       >
         <v-list-item-icon>
           <v-icon>mdi-newspaper-variant-outline</v-icon>
@@ -124,7 +124,7 @@
 </template>
 
 <script>
-import { goToPage } from '~/services/base'
+import { enterRoute, generateViewRecordRoute } from '~/services/base'
 
 export default {
   props: {
@@ -192,19 +192,12 @@ export default {
           pageOptions: {
             search: null,
             filters: expandTypeObject.initialFilters ?? [],
-            sortBy: expandTypeObject.initialSortOptions?.sortBy ?? [],
-            sortDesc: expandTypeObject.initialSortOptions?.sortDesc ?? [],
+            sort: expandTypeObject.initialSortOptions ?? undefined,
           },
         })
-      else
-        goToPage(
-          this,
-          this.recordInfo.typename,
-          this.recordInfo.routeName,
-          this.item.id,
-          true,
-          index
-        )
+      else {
+        this.goToRecordPage(false, index)
+      }
     },
 
     reloadParent() {
@@ -230,13 +223,16 @@ export default {
       actionWrapper.isLoading = false
     },
 
-    goToPage() {
-      goToPage(
+    goToRecordPage(openInNew, expandIndex) {
+      enterRoute(
         this,
-        this.recordInfo.typename,
-        this.recordInfo.routeName,
-        this.item.id,
-        ...arguments
+        generateViewRecordRoute(this, {
+          typename: this.recordInfo.typename,
+          routeType: this.recordInfo.enterOptions.routeType,
+          id: this.item.id,
+          expand: expandIndex,
+        }),
+        openInNew
       )
     },
   },
diff --git a/frontend/components/navigation/adminNavRoutes.vue b/frontend/components/navigation/adminNavRoutes.vue
index 508d109..eb2ae5c 100644
--- a/frontend/components/navigation/adminNavRoutes.vue
+++ b/frontend/components/navigation/adminNavRoutes.vue
@@ -15,7 +15,7 @@
           </v-list-item-content>
         </template>
         <template v-for="child in item.items">
-          <v-list-item :key="child.title" :to="child.to" exact>
+          <v-list-item :key="child.title" :to="child.to">
             <v-list-item-content>
               <v-list-item-title v-text="child.title"></v-list-item-title>
             </v-list-item-content>
@@ -27,9 +27,20 @@
 </template>
 
 <script>
-import { capitalizeString } from '~/services/base'
+import { generateCrudRecordRoute } from '~/services/base'
 import * as baseModels from '~/models/base'
 
+function generateAdminRouteObject(that, recordInfo) {
+  return {
+    icon: recordInfo.icon,
+    title: recordInfo.title ?? recordInfo.pluralTypename,
+    to: generateCrudRecordRoute(that, {
+      typename: recordInfo.typename,
+      routeType: 'a',
+    }),
+  }
+}
+
 export default {
   computed: {
     adminItems() {
@@ -38,23 +49,12 @@ export default {
           action: 'mdi-star',
           active: false,
           title: 'Administration',
-          permissions: [],
-          items: Object.values(baseModels).map((recordInfo) => ({
-            title: capitalizeString(recordInfo.pluralTypename),
-            to: '/a/crud?type=' + recordInfo.typename,
-          })),
+          items: Object.values(baseModels).map((recordInfo) =>
+            generateAdminRouteObject(this, recordInfo)
+          ),
         },
       ]
     },
   },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    handleSubmit(data) {
-      this.close()
-      this.$emit('handleSubmit', data)
-    },
-  },
 }
 </script>
diff --git a/frontend/components/navigation/navDrawer.vue b/frontend/components/navigation/navDrawer.vue
index f1f6da0..4b232c9 100644
--- a/frontend/components/navigation/navDrawer.vue
+++ b/frontend/components/navigation/navDrawer.vue
@@ -1,11 +1,7 @@
 <template>
   <v-navigation-drawer v-bind="$attrs">
     <nuxt-link to="/" class="hidden-md-and-up">
-      <v-img
-        :src="require('~/static/logo-horizontal.png')"
-        class="ma-3"
-        contain
-      />
+      <v-img :src="logoImageSrc" class="ma-3" contain />
     </nuxt-link>
     <v-divider></v-divider>
     <v-list dense>
@@ -49,8 +45,49 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { generateCrudRecordInterfaceRoute } from '~/services/base'
+import { generateCrudRecordRoute } from '~/services/base'
 import AdminNavRoutes from '~/components/navigation/adminNavRoutes.vue'
+import { logoHasLightVariant } from '~/services/config'
+import * as myModels from '~/models/my'
+import * as publicModels from '~/models/public'
+
+function generateUserRouteObject(that, recordInfo) {
+  return {
+    icon: recordInfo.icon,
+    title: recordInfo.title ?? recordInfo.pluralName,
+    to: generateCrudRecordRoute(that, {
+      typename: recordInfo.typename,
+      routeType: 'my',
+      pageOptions: {
+        search: '',
+        filters: [],
+        sort: {
+          field: 'createdAt',
+          desc: true,
+        },
+      },
+    }),
+  }
+}
+
+function generatePublicRouteObject(that, recordInfo) {
+  return {
+    icon: recordInfo.icon,
+    title: recordInfo.title ?? recordInfo.pluralName,
+    to: generateCrudRecordRoute(that, {
+      typename: recordInfo.typename,
+      routeType: 'i',
+      pageOptions: {
+        search: '',
+        filters: [],
+        sort: {
+          field: 'createdAt',
+          desc: true,
+        },
+      },
+    }),
+  }
+}
 
 export default {
   components: {
@@ -67,63 +104,18 @@ export default {
         },
       ],
       navItems: [
-        {
-          icon: 'mdi-pig-variant',
-          title: 'Giraffes',
-          to: generateCrudRecordInterfaceRoute('/giraffes', {
-            search: '',
-            filters: [],
-            sort: {
-              field: 'createdAt',
-              desc: true,
-            },
-          }),
-        },
-        {
-          icon: 'mdi-folder-information',
-          title: 'Giraffe Species',
-          to: generateCrudRecordInterfaceRoute('/giraffe-species', {
-            search: '',
-            filters: [],
-            sort: {
-              field: 'createdAt',
-              desc: true,
-            },
-          }),
-        },
-        {
-          icon: 'mdi-account',
-          title: 'Public Users',
-          to: generateCrudRecordInterfaceRoute('/public-users', {
-            search: '',
-            filters: [],
-            sort: {
-              field: 'createdAt',
-              desc: true,
-            },
-          }),
-        },
+        generatePublicRouteObject(this, publicModels.PublicGiraffe),
+        generatePublicRouteObject(this, publicModels.PublicGiraffeSpecies),
+        generatePublicRouteObject(this, publicModels.PublicUser),
       ],
       userItems: [
-        {
-          icon: 'mdi-pig-variant',
-          title: 'My Giraffes',
-          to: '/my-giraffes',
-        },
+        generateUserRouteObject(this, myModels.MyGiraffe),
+        generateUserRouteObject(this, myModels.MyApiKey),
+        generateUserRouteObject(this, myModels.MyFile),
         {
           icon: 'mdi-account',
           title: 'My Profile',
-          to: '/my-profile?expand=0',
-        },
-        {
-          icon: 'mdi-view-grid-plus',
-          title: 'My Apps',
-          to: '/my-apps',
-        },
-        {
-          icon: 'mdi-file',
-          title: 'My Files',
-          to: '/my-files',
+          to: '/my-profile',
         },
       ],
     }
@@ -136,6 +128,14 @@ export default {
     isAdmin() {
       return this.$store.getters['auth/user']?.role === 'ADMIN'
     },
+
+    logoImageSrc() {
+      return logoHasLightVariant
+        ? require(`~/static/logo-horizontal${
+            this.$vuetify.theme.dark ? '' : '-light'
+          }.png`)
+        : require('~/static/logo-horizontal.png')
+    },
   },
 }
 </script>
diff --git a/frontend/components/page/crudRecordPage.vue b/frontend/components/page/crudRecordPage.vue
index e6eec4e..ae1c7f4 100644
--- a/frontend/components/page/crudRecordPage.vue
+++ b/frontend/components/page/crudRecordPage.vue
@@ -111,7 +111,10 @@ export default {
 
   head() {
     return {
-      title: this.title ?? 'Manage ' + this.recordInfo.pluralName,
+      title:
+        this.title ??
+        this.recordInfo.title ??
+        'Manage ' + this.recordInfo.pluralName,
     }
   },
 }
diff --git a/frontend/components/page/viewRecordPage.vue b/frontend/components/page/viewRecordPage.vue
index 4e21953..89400fa 100644
--- a/frontend/components/page/viewRecordPage.vue
+++ b/frontend/components/page/viewRecordPage.vue
@@ -32,7 +32,7 @@
                 <v-toolbar flat color="accent" dense>
                   <v-icon left>{{ recordInfo.icon || 'mdi-domain' }}</v-icon>
                   <v-toolbar-title>
-                    {{ recordInfo.name }}
+                    {{ recordInfo.title || recordInfo.name }}
                   </v-toolbar-title>
                   <v-spacer></v-spacer>
                   <v-btn icon @click="reset()">
@@ -305,8 +305,9 @@ export default {
                 }
               )
             ),
-            __args: this.lookupParams ?? {
-              id: this.$route.query.id,
+            __args: {
+              ...this.lookupParams,
+              ...(this.$route.query.id && { id: this.$route.query.id }),
             },
           },
         })
@@ -344,7 +345,7 @@ export default {
   head() {
     return (
       this.head ?? {
-        title: 'View ' + this.recordInfo.name,
+        title: this.recordInfo.title ?? 'View ' + this.recordInfo.name,
       }
     )
   },
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index a3734df..c263b5d 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -10,11 +10,7 @@
     <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <nuxt-link to="/" class="hidden-sm-and-down">
-        <img
-          :src="require('~/static/logo-horizontal.png')"
-          style="height: 48px"
-          class="mt-2"
-        />
+        <img :src="logoImageSrc" style="height: 48px" class="mt-2" />
       </nuxt-link>
       <v-spacer />
       <v-chip v-if="isAttemptingLogin" pill>
@@ -144,6 +140,7 @@ import 'firebase/auth'
 import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
 import CrudRecordDialog from '~/components/dialog/crudRecordDialog.vue'
 import * as allModels from '~/models'
+import { logoHasLightVariant } from '~/services/config'
 
 export default {
   components: {
@@ -194,6 +191,14 @@ export default {
           : this.dialogs.crudRecord.recordInfo
         : null
     },
+
+    logoImageSrc() {
+      return logoHasLightVariant
+        ? require(`~/static/logo-horizontal${
+            this.$vuetify.theme.dark ? '' : '-light'
+          }.png`)
+        : require('~/static/logo-horizontal.png')
+    },
   },
 
   mounted() {
@@ -203,14 +208,28 @@ export default {
      ** Expecting recordInfo, selectedItem, mode, customFields?, specialMode?
      */
     this.$root.$on('openEditRecordDialog', (params) => {
-      this.dialogs.editRecord = params
+      // confirm the recordInfo exists
+      if (
+        typeof params.recordInfo === 'string'
+          ? allModels[params.recordInfo]
+          : params.recordInfo
+      ) {
+        this.dialogs.editRecord = params
+      }
     })
 
     /*
      ** Expecting recordInfo, lockedFilters, title, icon, hiddenHeaders, hiddenFilters, pageOptions
      */
     this.$root.$on('openCrudRecordDialog', (params) => {
-      this.dialogs.crudRecord = params
+      // confirm the recordInfo exists
+      if (
+        typeof params.recordInfo === 'string'
+          ? allModels[params.recordInfo]
+          : params.recordInfo
+      ) {
+        this.dialogs.crudRecord = params
+      }
     })
   },
 
diff --git a/frontend/mixins/editRecordInterface.js b/frontend/mixins/editRecordInterface.js
index 20bc282..993cb4d 100644
--- a/frontend/mixins/editRecordInterface.js
+++ b/frontend/mixins/editRecordInterface.js
@@ -208,7 +208,7 @@ export default {
         if (
           (inputObject.inputType === 'combobox' ||
             inputObject.inputType === 'server-combobox') &&
-          inputObject.inputOptions.typename
+          inputObject.inputOptions?.typename
         ) {
           if (typeof inputObject.value === 'string') {
             // expecting either string or obj
@@ -431,12 +431,7 @@ export default {
               value: null,
               getOptions: fieldInfo.getOptions,
               options: [],
-              readonly:
-                this.mode === 'view'
-                  ? true
-                  : this.mode === 'copy'
-                  ? fields.includes(fieldKey)
-                  : false,
+              readonly: this.mode === 'view',
               loading: false,
               focused: false,
               cols: fieldInfo.inputOptions?.cols,
diff --git a/frontend/models/base/apiKey.ts b/frontend/models/base/apiKey.ts
index eaa0fe2..893f0c1 100644
--- a/frontend/models/base/apiKey.ts
+++ b/frontend/models/base/apiKey.ts
@@ -9,7 +9,6 @@ export const ApiKey = <RecordInfo<'apiKey'>>{
   name: 'API Key',
   pluralName: 'API Keys',
   icon: 'mdi-view-grid-plus',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -53,10 +52,6 @@ export const ApiKey = <RecordInfo<'apiKey'>>{
         field: 'createdAt',
         desc: true,
       },
-      {
-        field: 'updatedAt',
-        desc: true,
-      },
     ],
     headerOptions: [
       {
@@ -86,6 +81,9 @@ export const ApiKey = <RecordInfo<'apiKey'>>{
   viewOptions: {
     fields: ['name', 'permissions', 'code', 'user'],
   },
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: undefined,
 
diff --git a/frontend/models/base/file.ts b/frontend/models/base/file.ts
index 2ddb842..e388ed7 100644
--- a/frontend/models/base/file.ts
+++ b/frontend/models/base/file.ts
@@ -10,7 +10,6 @@ export const File = <RecordInfo<'file'>>{
   name: 'File',
   pluralName: 'Files',
   icon: 'mdi-file',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -95,7 +94,9 @@ export const File = <RecordInfo<'file'>>{
   viewOptions: {
     fields: ['name', 'size', 'contentType', 'location'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/models/base/giraffe.ts b/frontend/models/base/giraffe.ts
index 0bf8ac7..889703b 100644
--- a/frontend/models/base/giraffe.ts
+++ b/frontend/models/base/giraffe.ts
@@ -15,7 +15,6 @@ export const Giraffe = <RecordInfo<'giraffe'>>{
   name: 'Giraffe',
   pluralName: 'Giraffes',
   icon: 'mdi-pig-variant',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -125,7 +124,9 @@ export const Giraffe = <RecordInfo<'giraffe'>>{
       'currentUserFollowing',
     ],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/models/base/giraffeSpecies.ts b/frontend/models/base/giraffeSpecies.ts
index 87748f5..c50c1d5 100644
--- a/frontend/models/base/giraffeSpecies.ts
+++ b/frontend/models/base/giraffeSpecies.ts
@@ -10,7 +10,6 @@ export const GiraffeSpecies = <RecordInfo<'giraffeSpecies'>>{
   name: 'Giraffe Species',
   pluralName: 'Giraffe Species',
   icon: 'mdi-folder-information',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -81,7 +80,9 @@ export const GiraffeSpecies = <RecordInfo<'giraffeSpecies'>>{
   viewOptions: {
     fields: ['avatar', 'name', 'scientificName', 'description'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [
diff --git a/frontend/models/base/giraffeSubspecies.ts b/frontend/models/base/giraffeSubspecies.ts
index 8f052f7..5bd7360 100644
--- a/frontend/models/base/giraffeSubspecies.ts
+++ b/frontend/models/base/giraffeSubspecies.ts
@@ -14,7 +14,6 @@ export const GiraffeSubspecies = <RecordInfo<'giraffeSubspecies'>>{
   name: 'Giraffe Subspecies',
   pluralName: 'Giraffe Subspecies',
   icon: 'mdi-folder-information',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -105,7 +104,9 @@ export const GiraffeSubspecies = <RecordInfo<'giraffeSubspecies'>>{
       'description',
     ],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [
diff --git a/frontend/models/base/user.ts b/frontend/models/base/user.ts
index b40a8f8..8143d0e 100644
--- a/frontend/models/base/user.ts
+++ b/frontend/models/base/user.ts
@@ -13,7 +13,6 @@ export const User = <RecordInfo<'user'>>{
   name: 'User',
   pluralName: 'Users',
   icon: 'mdi-account',
-  routeName: 'a-view',
   renderItem: (item) => item.email,
   fields: {
     id: {
@@ -79,6 +78,7 @@ export const User = <RecordInfo<'user'>>{
   },
   paginationOptions: {
     hasSearch: true,
+    publicFilterField: 'isPublic',
     filterOptions: [
       {
         field: 'role',
@@ -131,7 +131,9 @@ export const User = <RecordInfo<'user'>>{
       'currentUserFollowing',
     ],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/models/base/userGiraffeFollowLink.ts b/frontend/models/base/userGiraffeFollowLink.ts
index e6dad79..217a31b 100644
--- a/frontend/models/base/userGiraffeFollowLink.ts
+++ b/frontend/models/base/userGiraffeFollowLink.ts
@@ -11,7 +11,6 @@ export const UserGiraffeFollowLink = <RecordInfo<'userGiraffeFollowLink'>>{
   name: 'UserGiraffeFollowLink',
   pluralName: 'UserGiraffeFollowLinks',
   icon: 'mdi-link',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -87,7 +86,9 @@ export const UserGiraffeFollowLink = <RecordInfo<'userGiraffeFollowLink'>>{
   viewOptions: {
     fields: ['userRecord', 'targetRecord'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/models/base/userUserFollowLink.ts b/frontend/models/base/userUserFollowLink.ts
index c7cbdcf..9606928 100644
--- a/frontend/models/base/userUserFollowLink.ts
+++ b/frontend/models/base/userUserFollowLink.ts
@@ -11,7 +11,6 @@ export const UserUserFollowLink = <RecordInfo<'userUserFollowLink'>>{
   name: 'UserUserFollowLink',
   pluralName: 'UserUserFollowLinks',
   icon: 'mdi-folder-information',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -87,7 +86,9 @@ export const UserUserFollowLink = <RecordInfo<'userUserFollowLink'>>{
   viewOptions: {
     fields: ['userRecord', 'targetRecord'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeType: 'a',
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/models/index.ts b/frontend/models/index.ts
index e86b3ba..5ee1601 100644
--- a/frontend/models/index.ts
+++ b/frontend/models/index.ts
@@ -1,3 +1,4 @@
 export * from './base'
 export * from './public'
+export * from './my'
 export * from './special'
diff --git a/frontend/models/special/myApps.ts b/frontend/models/my/apiKey.ts
similarity index 57%
rename from frontend/models/special/myApps.ts
rename to frontend/models/my/apiKey.ts
index 9aefaba..84946c7 100644
--- a/frontend/models/special/myApps.ts
+++ b/frontend/models/my/apiKey.ts
@@ -1,10 +1,13 @@
 import { ApiKey } from '../base'
 
-export const MyApps = {
+export const MyApiKey = {
   ...ApiKey,
-  routeName: 'i-view',
+  title: `My ${ApiKey.pluralName}`,
   paginationOptions: {
     ...ApiKey.paginationOptions,
     downloadOptions: undefined,
   },
+  enterOptions: {
+    routeType: 'my',
+  },
 }
diff --git a/frontend/models/special/myFiles.ts b/frontend/models/my/file.ts
similarity index 70%
rename from frontend/models/special/myFiles.ts
rename to frontend/models/my/file.ts
index e853465..0d4170e 100644
--- a/frontend/models/special/myFiles.ts
+++ b/frontend/models/my/file.ts
@@ -1,14 +1,17 @@
 import { File } from '../base'
 
-export const MyFiles = {
+export const MyFile = {
   ...File,
+  title: `My ${File.pluralName}`,
   paginationOptions: {
     ...File.paginationOptions,
     downloadOptions: undefined,
   },
   viewOptions: undefined,
   shareOptions: undefined,
-  enterOptions: undefined,
+  enterOptions: {
+    routeType: 'my',
+  },
   editOptions: undefined,
   addOptions: undefined,
 }
diff --git a/frontend/models/special/myGiraffes.ts b/frontend/models/my/giraffe.ts
similarity index 57%
rename from frontend/models/special/myGiraffes.ts
rename to frontend/models/my/giraffe.ts
index ef73b20..8eda2a3 100644
--- a/frontend/models/special/myGiraffes.ts
+++ b/frontend/models/my/giraffe.ts
@@ -1,10 +1,13 @@
 import { Giraffe } from '../base'
 
-export const MyGiraffes = {
+export const MyGiraffe = {
   ...Giraffe,
-  routeName: 'i-view',
+  title: `My ${Giraffe.pluralName}`,
   paginationOptions: {
     ...Giraffe.paginationOptions,
     downloadOptions: undefined,
   },
+  enterOptions: {
+    routeType: 'my',
+  },
 }
diff --git a/frontend/models/my/index.ts b/frontend/models/my/index.ts
new file mode 100644
index 0000000..ae60ff6
--- /dev/null
+++ b/frontend/models/my/index.ts
@@ -0,0 +1,3 @@
+export { MyApiKey } from './apiKey'
+export { MyFile } from './file'
+export { MyGiraffe } from './giraffe'
diff --git a/frontend/models/public/giraffe.ts b/frontend/models/public/giraffe.ts
index a9e1f55..1181421 100644
--- a/frontend/models/public/giraffe.ts
+++ b/frontend/models/public/giraffe.ts
@@ -19,9 +19,11 @@ export const PublicGiraffe = {
     ],
     downloadOptions: undefined,
   },
-  routeName: 'i-view',
   addOptions: undefined,
   editOptions: undefined,
   deleteOptions: undefined,
   importOptions: undefined,
+  enterOptions: {
+    routeType: 'i',
+  },
 }
diff --git a/frontend/models/public/giraffeSpecies.ts b/frontend/models/public/giraffeSpecies.ts
index 65cfeb4..d14679b 100644
--- a/frontend/models/public/giraffeSpecies.ts
+++ b/frontend/models/public/giraffeSpecies.ts
@@ -16,11 +16,13 @@ export const PublicGiraffeSpecies = {
     ],
     downloadOptions: undefined,
   },
-  routeName: 'i-view',
   addOptions: undefined,
   editOptions: undefined,
   deleteOptions: undefined,
   importOptions: undefined,
+  enterOptions: {
+    routeType: 'i',
+  },
   expandTypes: [
     {
       recordInfo: PublicGiraffeSubspecies,
diff --git a/frontend/models/public/giraffeSubspecies.ts b/frontend/models/public/giraffeSubspecies.ts
index 6a9c71a..9f98a3a 100644
--- a/frontend/models/public/giraffeSubspecies.ts
+++ b/frontend/models/public/giraffeSubspecies.ts
@@ -1,5 +1,4 @@
 import { GiraffeSubspecies } from '../base'
-import { MyGiraffes } from '../special'
 import { PublicGiraffe } from './giraffe'
 
 export const PublicGiraffeSubspecies = {
@@ -22,11 +21,13 @@ export const PublicGiraffeSubspecies = {
     ],
     downloadOptions: undefined,
   },
-  routeName: 'i-view',
   addOptions: undefined,
   editOptions: undefined,
   deleteOptions: undefined,
   importOptions: undefined,
+  enterOptions: {
+    routeType: 'i',
+  },
   expandTypes: [
     {
       recordInfo: PublicGiraffe,
diff --git a/frontend/models/public/user.ts b/frontend/models/public/user.ts
index 0f3c2f6..8ca0b4f 100644
--- a/frontend/models/public/user.ts
+++ b/frontend/models/public/user.ts
@@ -3,6 +3,7 @@ import { PublicGiraffe } from './giraffe'
 
 export const PublicUser = {
   ...User,
+  title: 'Public Users',
   paginationOptions: {
     ...(!!User.paginationOptions && User.paginationOptions),
     filterOptions: [],
@@ -17,7 +18,6 @@ export const PublicUser = {
     ],
     downloadOptions: undefined,
   },
-  routeName: 'i-view',
   viewOptions: {
     fields: ['avatar', 'name', 'isPublic', 'currentUserFollowing'],
   },
@@ -25,6 +25,9 @@ export const PublicUser = {
   editOptions: undefined,
   deleteOptions: undefined,
   importOptions: undefined,
+  enterOptions: {
+    routeType: 'i',
+  },
   expandTypes: [
     {
       recordInfo: PublicGiraffe,
diff --git a/frontend/models/special/index.ts b/frontend/models/special/index.ts
index 596df76..5b55386 100644
--- a/frontend/models/special/index.ts
+++ b/frontend/models/special/index.ts
@@ -1,4 +1 @@
 export { MyProfile } from './myProfile'
-export { MyApps } from './myApps'
-export { MyFiles } from './myFiles'
-export { MyGiraffes } from './myGiraffes'
diff --git a/frontend/models/special/myProfile.ts b/frontend/models/special/myProfile.ts
index 585a4c7..69f88d7 100644
--- a/frontend/models/special/myProfile.ts
+++ b/frontend/models/special/myProfile.ts
@@ -1,28 +1,28 @@
-import { User } from '../base'
-
-export const MyProfile = {
-  ...User,
-  routeName: 'i-view',
-  paginationOptions: {
-    ...(!!User.paginationOptions && User.paginationOptions),
-    filterOptions: [],
-    headerOptions: [
-      {
-        field: 'nameWithAvatar',
-      },
-      {
-        field: 'createdAt',
-        width: '150px',
-      },
-    ],
-    downloadOptions: undefined,
-  },
-  editOptions: {
-    fields: ['avatar', 'name', 'isPublic'],
-  },
-  viewOptions: {
-    fields: ['avatar', 'name', 'isPublic'],
-  },
-  deleteOptions: undefined,
-  expandTypes: [],
-}
+import { User } from '../base'
+
+export const MyProfile = {
+  ...User,
+  title: 'My Profile',
+  paginationOptions: {
+    ...(!!User.paginationOptions && User.paginationOptions),
+    filterOptions: [],
+    headerOptions: [
+      {
+        field: 'nameWithAvatar',
+      },
+      {
+        field: 'createdAt',
+        width: '150px',
+      },
+    ],
+    downloadOptions: undefined,
+  },
+  editOptions: {
+    fields: ['avatar', 'name', 'isPublic'],
+  },
+  viewOptions: {
+    fields: ['avatar', 'name', 'isPublic'],
+  },
+  deleteOptions: undefined,
+  expandTypes: [],
+}
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 622b86e..813459d 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -1,4 +1,5 @@
 import colors from 'vuetify/es5/util/colors'
+import { routesMap } from './services/config'
 
 export default {
   // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
@@ -16,11 +17,35 @@ export default {
     siteContactEmail: process.env.SITE_CONTACT_EMAIL,
     siteDiscordLink: process.env.SITE_DISCORD_LINK,
     siteGithubRepositoryUrl: process.env.SITE_GITHUB_REPOSITORY_URL,
+    logoHasLightVariant: !!process.env.LOGO_HAS_LIGHT_VARIANT,
   },
 
   // Target (https://go.nuxtjs.dev/config-target)
   target: 'static',
 
+  generate: {
+    routes() {
+      function camelToKebabCase(str) {
+        return str
+          .split('')
+          .map((letter, idx) => {
+            return letter.toUpperCase() === letter
+              ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`
+              : letter
+          })
+          .join('')
+      }
+
+      return Object.entries(routesMap).reduce((total, [key, val]) => {
+        total.push(...val.map((type) => `/${key}/${camelToKebabCase(type)}`))
+        total.push(
+          ...val.map((type) => `/${key}/view/${camelToKebabCase(type)}`)
+        )
+        return total
+      }, [])
+    },
+  },
+
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
     titleTemplate: (titleChunk) => {
diff --git a/frontend/package.json b/frontend/package.json
index aa2afb3..fdce71b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,7 @@
     "generate:model": "ts-node scripts/generateModel.ts"
   },
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.4",
     "convert-array-to-csv": "^2.0.0",
     "core-js": "^3.6.5",
     "firebase": "^8.0.0",
diff --git a/frontend/pages/a/_type.vue b/frontend/pages/a/_type.vue
new file mode 100644
index 0000000..da05b6e
--- /dev/null
+++ b/frontend/pages/a/_type.vue
@@ -0,0 +1,37 @@
+<template>
+  <CrudRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+  ></CrudRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import CrudRecordPage from '~/components/page/crudRecordPage.vue'
+import * as baseModels from '~/models/base'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+  middleware: ['router-auth'],
+
+  components: {
+    CrudRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return baseModels[capitalizeString(this.type)]
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/a/crud.vue b/frontend/pages/a/crud.vue
deleted file mode 100644
index 2299c99..0000000
--- a/frontend/pages/a/crud.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <CrudRecordPage
-    v-if="currentModel"
-    :record-info="currentModel"
-  ></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import * as models from '~/models'
-import { capitalizeString } from '~/services/base'
-
-export default {
-  middleware: ['router-auth'],
-  components: {
-    CrudRecordPage,
-  },
-
-  computed: {
-    currentModel() {
-      return models[capitalizeString(this.$route.query.type)]
-    },
-  },
-}
-</script>
diff --git a/frontend/pages/a/view.vue b/frontend/pages/a/view/_type.vue
similarity index 58%
rename from frontend/pages/a/view.vue
rename to frontend/pages/a/view/_type.vue
index 270193d..00ffb6b 100644
--- a/frontend/pages/a/view.vue
+++ b/frontend/pages/a/view/_type.vue
@@ -6,9 +6,7 @@
   <v-container v-else fill-height>
     <v-layout align-center justify-center>
       <div>
-        <span class="display-1 pl-2"
-          >Invalid Type: {{ $route.query.type }}</span
-        >
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
       </div>
     </v-layout>
   </v-container>
@@ -16,10 +14,15 @@
 
 <script>
 import ViewRecordPage from '~/components/page/viewRecordPage.vue'
-import * as models from '~/models'
-import { capitalizeString } from '~/services/base'
+import * as baseModels from '~/models/base'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
 
 export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
   middleware: ['router-auth'],
   components: {
     ViewRecordPage,
@@ -27,7 +30,7 @@ export default {
 
   computed: {
     currentModel() {
-      return models[capitalizeString(this.$route.query.type)]
+      return baseModels[capitalizeString(this.type)]
     },
   },
 }
diff --git a/frontend/pages/giraffe-species.vue b/frontend/pages/giraffe-species.vue
deleted file mode 100644
index 9e62948..0000000
--- a/frontend/pages/giraffe-species.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo" :title="title"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { PublicGiraffeSpecies } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: PublicGiraffeSpecies,
-      title: 'Giraffe Species',
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/giraffes.vue b/frontend/pages/giraffes.vue
deleted file mode 100644
index b95a3bb..0000000
--- a/frontend/pages/giraffes.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo" :title="title"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { PublicGiraffe } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: PublicGiraffe,
-      title: 'Giraffes',
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/i/_type.vue b/frontend/pages/i/_type.vue
new file mode 100644
index 0000000..77a57c3
--- /dev/null
+++ b/frontend/pages/i/_type.vue
@@ -0,0 +1,51 @@
+<template>
+  <CrudRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+    :locked-filters="lockedFilters"
+  ></CrudRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import CrudRecordPage from '~/components/page/crudRecordPage.vue'
+import * as publicModels from '~/models/public'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
+  components: {
+    CrudRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return publicModels[`Public${capitalizeString(this.type)}`]
+    },
+
+    lockedFilters() {
+      const publicFilterField =
+        this.currentModel?.paginationOptions?.publicFilterField
+      return publicFilterField
+        ? [
+            {
+              field: publicFilterField,
+              operator: 'eq',
+              value: true,
+            },
+          ]
+        : []
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/i/view.vue b/frontend/pages/i/view/_type.vue
similarity index 61%
rename from frontend/pages/i/view.vue
rename to frontend/pages/i/view/_type.vue
index b864473..7ef259b 100644
--- a/frontend/pages/i/view.vue
+++ b/frontend/pages/i/view/_type.vue
@@ -6,9 +6,7 @@
   <v-container v-else fill-height>
     <v-layout align-center justify-center>
       <div>
-        <span class="display-1 pl-2"
-          >Invalid Type: {{ $route.query.type }}</span
-        >
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
       </div>
     </v-layout>
   </v-container>
@@ -17,16 +15,21 @@
 <script>
 import ViewRecordPage from '~/components/page/viewRecordPage.vue'
 import * as publicModels from '~/models/public'
-import { capitalizeString } from '~/services/base'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
 
 export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
   components: {
     ViewRecordPage,
   },
 
   computed: {
     currentModel() {
-      return publicModels[`Public${capitalizeString(this.$route.query.type)}`]
+      return publicModels[`Public${capitalizeString(this.type)}`]
     },
   },
 }
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4286d59..187702c 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,24 +2,24 @@
   <v-layout column justify-center align-center>
     <v-container xs12 style="max-width: 600px">
       <div class="text-center">
-        <img src="~/static/logo-vertical.png" alt="" style="width: 60%" />
+        <img :src="logoImageSrc" alt="" style="width: 60%" />
       </div>
       <v-card>
         <v-card-title class="headline">
           Welcome to {{ siteName }}
         </v-card-title>
         <v-card-text>
-          <p>
-            <span>{{ siteDescription }}</span>
-            <span v-if="siteDiscordLink"
-              >Check out our official
-              <a :href="siteDiscordLink" target="_blank">Discord server</a>.
-            </span>
-            <span v-if="siteContactEmail"
-              >To get in touch with us, please send us an email at
-              <a>{{ siteContactEmail }}</a
-              >.</span
-            >
+          <p v-if="siteDescription">
+            <span>{{ siteDescription }}.</span>
+          </p>
+          <p v-if="siteDiscordLink">
+            Check out our official
+            <a :href="siteDiscordLink" target="_blank">Discord server</a>.
+          </p>
+          <p v-if="siteContactEmail">
+            To get in touch with us, please send us an email at
+            <a>{{ siteContactEmail }}</a
+            >.
           </p>
         </v-card-text>
         <v-card-actions>
@@ -47,6 +47,7 @@ import {
   siteDescription,
   siteContactEmail,
   siteDiscordLink,
+  logoHasLightVariant,
 } from '~/services/config'
 
 export default {
@@ -70,6 +71,14 @@ export default {
     ...mapGetters({
       user: 'auth/user',
     }),
+
+    logoImageSrc() {
+      return logoHasLightVariant
+        ? require(`~/static/logo-vertical${
+            this.$vuetify.theme.dark ? '' : '-light'
+          }.png`)
+        : require('~/static/logo-vertical.png')
+    },
   },
 }
 </script>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index f499687..f58124d 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-container fill-height>
-    <v-layout align-center justify-center>
-      <v-flex xs12 sm8 md4>
-        <v-toolbar color="accent" flat>
-          <v-toolbar-title>Login</v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-btn text nuxt to="/register">Register</v-btn>
-        </v-toolbar>
-        <SocialLoginInterface></SocialLoginInterface>
-        <LoginInterface></LoginInterface>
-      </v-flex>
-    </v-layout>
-  </v-container>
+  <v-layout column justify-center align-center>
+    <v-container xs12 style="max-width: 600px">
+      <v-toolbar color="accent" flat>
+        <v-toolbar-title>Login</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn text nuxt to="/register">Register</v-btn>
+      </v-toolbar>
+      <SocialLoginInterface></SocialLoginInterface>
+      <LoginInterface></LoginInterface>
+    </v-container>
+  </v-layout>
 </template>
 
 <script>
diff --git a/frontend/pages/my-apps.vue b/frontend/pages/my-apps.vue
deleted file mode 100644
index 6898915..0000000
--- a/frontend/pages/my-apps.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <CrudRecordPage
-    :record-info="recordInfo"
-    :locked-filters="lockedFilters"
-    :title="title"
-  ></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { MyApps } from '~/models'
-
-export default {
-  middleware: ['router-auth'],
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: MyApps,
-      title: 'My Apps',
-    }
-  },
-  computed: {
-    lockedFilters() {
-      return this.$store.getters['auth/user']
-        ? [
-            {
-              field: 'user',
-              operator: 'eq',
-              value: this.$store.getters['auth/user'].id,
-            },
-          ]
-        : []
-    },
-  },
-}
-</script>
diff --git a/frontend/pages/my-files.vue b/frontend/pages/my-files.vue
deleted file mode 100644
index 520ccf3..0000000
--- a/frontend/pages/my-files.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <CrudRecordPage
-    :record-info="recordInfo"
-    :locked-filters="lockedFilters"
-    :title="title"
-  ></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { MyFiles } from '~/models'
-
-export default {
-  middleware: ['router-auth'],
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: MyFiles,
-      title: 'My Files',
-    }
-  },
-  computed: {
-    lockedFilters() {
-      return this.$store.getters['auth/user']
-        ? [
-            {
-              field: 'createdBy',
-              operator: 'eq',
-              value: this.$store.getters['auth/user'].id,
-            },
-          ]
-        : []
-    },
-  },
-}
-</script>
diff --git a/frontend/pages/my-giraffes.vue b/frontend/pages/my-giraffes.vue
deleted file mode 100644
index f71d2fe..0000000
--- a/frontend/pages/my-giraffes.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <CrudRecordPage
-    :record-info="recordInfo"
-    :locked-filters="lockedFilters"
-    :title="title"
-  ></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { MyGiraffes } from '~/models'
-
-export default {
-  middleware: ['router-auth'],
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: MyGiraffes,
-      title: 'My Giraffes',
-    }
-  },
-  computed: {
-    lockedFilters() {
-      return this.$store.getters['auth/user']
-        ? [
-            {
-              field: 'createdBy',
-              operator: 'eq',
-              value: this.$store.getters['auth/user'].id,
-            },
-          ]
-        : []
-    },
-  },
-}
-</script>
diff --git a/frontend/pages/my-profile.vue b/frontend/pages/my-profile.vue
index 80d7ca8..cc5befc 100644
--- a/frontend/pages/my-profile.vue
+++ b/frontend/pages/my-profile.vue
@@ -1,45 +1,41 @@
-<template>
-  <ViewRecordPage
-    v-if="lookupParams"
-    :record-info="recordInfo"
-    :head="head"
-    :lookup-params="lookupParams"
-    @handle-submit="handleSubmit"
-  ></ViewRecordPage>
-</template>
-
-<script>
-import ViewRecordPage from '~/components/page/viewRecordPage.vue'
-import { MyProfile } from '~/models'
-import { handleUserRefreshed } from '~/services/auth'
-
-export default {
-  middleware: ['router-auth'],
-  components: {
-    ViewRecordPage,
-  },
-  data() {
-    return {
-      recordInfo: MyProfile,
-      head: {
-        title: 'My Profile',
-      },
-    }
-  },
-  computed: {
-    lookupParams() {
-      return this.$store.getters['auth/user']
-        ? {
-            id: this.$store.getters['auth/user'].id,
-          }
-        : null
-    },
-  },
-  methods: {
-    handleSubmit() {
-      // on submit, profile was edited, so refresh firebase user
-      handleUserRefreshed(this)
-    },
-  },
-}
-</script>
+<template>
+  <ViewRecordPage
+    v-if="lookupParams"
+    :record-info="recordInfo"
+    :lookup-params="lookupParams"
+    @handle-submit="handleSubmit"
+  ></ViewRecordPage>
+</template>
+
+<script>
+import ViewRecordPage from '~/components/page/viewRecordPage.vue'
+import { MyProfile } from '~/models/special'
+import { handleUserRefreshed } from '~/services/auth'
+
+export default {
+  middleware: ['router-auth'],
+  components: {
+    ViewRecordPage,
+  },
+  data() {
+    return {
+      recordInfo: MyProfile,
+    }
+  },
+  computed: {
+    lookupParams() {
+      return this.$store.getters['auth/user']
+        ? {
+            id: this.$store.getters['auth/user'].id,
+          }
+        : null
+    },
+  },
+  methods: {
+    handleSubmit() {
+      // on submit, profile was edited, so refresh firebase user
+      handleUserRefreshed(this)
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/my/_type.vue b/frontend/pages/my/_type.vue
new file mode 100644
index 0000000..0109d27
--- /dev/null
+++ b/frontend/pages/my/_type.vue
@@ -0,0 +1,49 @@
+<template>
+  <CrudRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+  ></CrudRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import CrudRecordPage from '~/components/page/crudRecordPage.vue'
+import * as myModels from '~/models/my'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
+  middleware: ['router-auth'],
+  components: {
+    CrudRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return myModels[`My${capitalizeString(this.type)}`]
+    },
+
+    lockedFilters() {
+      return this.$store.getters['auth/user']
+        ? [
+            {
+              field: 'createdBy',
+              operator: 'eq',
+              value: this.$store.getters['auth/user'].id,
+            },
+          ]
+        : []
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/my/view/_type.vue b/frontend/pages/my/view/_type.vue
new file mode 100644
index 0000000..a231c87
--- /dev/null
+++ b/frontend/pages/my/view/_type.vue
@@ -0,0 +1,36 @@
+<template>
+  <ViewRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+  ></ViewRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import ViewRecordPage from '~/components/page/viewRecordPage.vue'
+import * as myModels from '~/models/my'
+import { capitalizeString, kebabToCamelCase } from '~/services/base'
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
+  components: {
+    ViewRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return myModels[`My${capitalizeString(this.type)}`]
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/password-reset.vue b/frontend/pages/password-reset.vue
index bf26965..a10c335 100644
--- a/frontend/pages/password-reset.vue
+++ b/frontend/pages/password-reset.vue
@@ -1,35 +1,33 @@
 <template>
-  <v-container fluid fill-height>
-    <v-layout align-center justify-center>
-      <v-flex xs12 sm8 md4>
-        <v-card class="elevation-12">
-          <v-toolbar color="accent" flat>
-            <v-toolbar-title>Reset Password</v-toolbar-title>
-            <v-spacer></v-spacer>
-            <v-btn text nuxt to="/login">Login</v-btn>
-          </v-toolbar>
-          <v-card-text>
-            <v-text-field
-              v-model="inputs.email"
-              label="Email"
-              name="email"
-              prepend-icon="mdi-account"
-              type="text"
-            ></v-text-field>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              :disabled="loading.submitting"
-              @click="handleSubmit()"
-              >Reset Password</v-btn
-            >
-          </v-card-actions>
-        </v-card>
-      </v-flex>
-    </v-layout>
-  </v-container>
+  <v-layout column justify-center align-center>
+    <v-container xs12 style="max-width: 600px">
+      <v-card class="elevation-12">
+        <v-toolbar color="accent" flat>
+          <v-toolbar-title>Reset Password</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn text nuxt to="/login">Login</v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-text-field
+            v-model="inputs.email"
+            label="Email"
+            name="email"
+            prepend-icon="mdi-account"
+            type="text"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            :disabled="loading.submitting"
+            @click="handleSubmit()"
+            >Reset Password</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-container>
+  </v-layout>
 </template>
 
 <script>
diff --git a/frontend/pages/public-users.vue b/frontend/pages/public-users.vue
deleted file mode 100644
index f84c867..0000000
--- a/frontend/pages/public-users.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <CrudRecordPage
-    :record-info="recordInfo"
-    :title="title"
-    :locked-filters="lockedFilters"
-  ></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { PublicUser } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: PublicUser,
-      title: 'Public Users',
-    }
-  },
-
-  computed: {
-    lockedFilters() {
-      return [
-        {
-          field: 'isPublic',
-          operator: 'eq',
-          value: true,
-        },
-      ]
-    },
-  },
-}
-</script>
diff --git a/frontend/pages/register.vue b/frontend/pages/register.vue
index 6cad237..5d8ee5b 100644
--- a/frontend/pages/register.vue
+++ b/frontend/pages/register.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-container fill-height>
-    <v-layout align-center justify-center>
-      <v-flex xs12 sm8 md4>
-        <v-toolbar color="accent" flat>
-          <v-toolbar-title>Register</v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-btn text nuxt to="/login">Login</v-btn>
-        </v-toolbar>
-        <SocialLoginInterface></SocialLoginInterface>
-        <RegisterInterface></RegisterInterface>
-      </v-flex>
-    </v-layout>
-  </v-container>
+  <v-layout column justify-center align-center>
+    <v-container xs12 style="max-width: 600px">
+      <v-toolbar color="accent" flat>
+        <v-toolbar-title>Register</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn text nuxt to="/login">Login</v-btn>
+      </v-toolbar>
+      <SocialLoginInterface></SocialLoginInterface>
+      <RegisterInterface></RegisterInterface>
+    </v-container>
+  </v-layout>
 </template>
 
 <script>
diff --git a/frontend/pages/s/_type.vue b/frontend/pages/s/_type.vue
new file mode 100644
index 0000000..35e9c09
--- /dev/null
+++ b/frontend/pages/s/_type.vue
@@ -0,0 +1,40 @@
+<template>
+  <CrudRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+    :locked-filters="lockedFilters"
+  ></CrudRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import CrudRecordPage from '~/components/page/crudRecordPage.vue'
+import * as specialModels from '~/models/special'
+import { kebabToCamelCase } from '~/services/base'
+
+// type -> specialModel
+const modelsTypeMap = {}
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
+  components: {
+    CrudRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return modelsTypeMap[type]
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/m/view.vue b/frontend/pages/s/view/_type.vue
similarity index 56%
rename from frontend/pages/m/view.vue
rename to frontend/pages/s/view/_type.vue
index 937fb3b..56b47a0 100644
--- a/frontend/pages/m/view.vue
+++ b/frontend/pages/s/view/_type.vue
@@ -1,33 +1,39 @@
-<template>
-  <ViewRecordPage
-    v-if="currentModel"
-    :record-info="currentModel"
-  ></ViewRecordPage>
-  <v-container v-else fill-height>
-    <v-layout align-center justify-center>
-      <div>
-        <span class="display-1 pl-2"
-          >Invalid Type: {{ $route.query.type }}</span
-        >
-      </div>
-    </v-layout>
-  </v-container>
-</template>
-
-<script>
-import ViewRecordPage from '~/components/page/viewRecordPage.vue'
-
-const modelsTypeMap = {}
-
-export default {
-  components: {
-    ViewRecordPage,
-  },
-
-  computed: {
-    currentModel() {
-      return modelsTypeMap[this.$route.query.type]
-    },
-  },
-}
-</script>
+<template>
+  <ViewRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+  ></ViewRecordPage>
+  <v-container v-else fill-height>
+    <v-layout align-center justify-center>
+      <div>
+        <span class="display-1 pl-2">Invalid Type: {{ type }}</span>
+      </div>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import ViewRecordPage from '~/components/page/viewRecordPage.vue'
+import * as specialModels from '~/models/special'
+import { kebabToCamelCase } from '~/services/base'
+
+// type -> specialModel
+const modelsTypeMap = {}
+
+export default {
+  async asyncData({ params }) {
+    const type = kebabToCamelCase(params.type)
+    return { type }
+  },
+
+  components: {
+    ViewRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return modelsTypeMap[type]
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/settings.vue b/frontend/pages/settings.vue
index 05eb6a8..bde97c0 100644
--- a/frontend/pages/settings.vue
+++ b/frontend/pages/settings.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-container fill-height>
-    <v-layout align-center justify-center>
-      <v-flex xs12 sm8 md4>
-        <v-card class="elevation-12">
-          <v-toolbar color="accent" flat>
-            <v-toolbar-title>Login Credentials</v-toolbar-title>
-            <v-spacer></v-spacer>
-          </v-toolbar>
-          <UpdateCredentialsInterface></UpdateCredentialsInterface>
-        </v-card>
-      </v-flex>
-    </v-layout>
-  </v-container>
+  <v-layout column justify-center align-center>
+    <v-container xs12 style="max-width: 600px">
+      <v-card class="elevation-12">
+        <v-toolbar color="accent" flat>
+          <v-toolbar-title>Login Credentials</v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-toolbar>
+        <UpdateCredentialsInterface></UpdateCredentialsInterface>
+      </v-card>
+    </v-container>
+  </v-layout>
 </template>
 
 <script>
diff --git a/frontend/scripts/templates/base.txt b/frontend/scripts/templates/base.txt
index 3072996..3a89543 100644
--- a/frontend/scripts/templates/base.txt
+++ b/frontend/scripts/templates/base.txt
@@ -9,7 +9,6 @@ export const {{ capitalizedTypename }} = <RecordInfo<'{{ typename }}'>>{
   name: '{{ capitalizedTypename }}',
   pluralName: '{{ capitalizedTypename }}s',
   icon: 'mdi-folder-information',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -77,7 +76,9 @@ export const {{ capitalizedTypename }} = <RecordInfo<'{{ typename }}'>>{
   viewOptions: {
     fields: ['avatar', 'name', 'description'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeName: 'a-view'
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/scripts/templates/baseLink.txt b/frontend/scripts/templates/baseLink.txt
index 6b41138..471259a 100644
--- a/frontend/scripts/templates/baseLink.txt
+++ b/frontend/scripts/templates/baseLink.txt
@@ -11,7 +11,6 @@ export const {{ capitalizedTypename }} = <RecordInfo<'{{ typename }}'>>{
   name: '{{ capitalizedTypename }}',
   pluralName: '{{ capitalizedTypename }}s',
   icon: 'mdi-link',
-  routeName: 'a-view',
   renderItem: (item) => item.name,
   fields: {
     id: {
@@ -87,7 +86,9 @@ export const {{ capitalizedTypename }} = <RecordInfo<'{{ typename }}'>>{
   viewOptions: {
     fields: ['userRecord', 'targetRecord'],
   },
-  enterOptions: {},
+  enterOptions: {
+    routeName: 'a-view'
+  },
   deleteOptions: {},
   shareOptions: {},
   expandTypes: [],
diff --git a/frontend/services/base.ts b/frontend/services/base.ts
index e15f231..03948cc 100644
--- a/frontend/services/base.ts
+++ b/frontend/services/base.ts
@@ -364,58 +364,64 @@ export function handleError(that, err) {
   }
 }
 
-export function generateCrudRecordInterfaceRoute(
-  route: string,
-  pageOptions?: any
-) {
-  return (
-    route +
-    (pageOptions
-      ? '?pageOptions=' + encodeURIComponent(btoa(JSON.stringify(pageOptions)))
-      : '')
-  )
-}
-
-// generates a record route based on the recordInfo
-export function generateRecordRouteObject(
-  typename,
-  routeName,
-  itemId,
-  expandIndex = 0
+export function generateCrudRecordRoute(
+  that,
+  {
+    typename,
+    routeType,
+    queryParams,
+    pageOptions,
+  }: {
+    typename: string
+    routeType: 'i' | 'a' | 'my' | 's'
+    queryParams?: any
+    pageOptions?: any
+  }
 ) {
-  if (!routeName) return null
-
-  return {
-    name: routeName,
+  return that.$router.resolve({
+    path: `/${routeType}/${camelToKebabCase(typename)}`,
     query: {
-      id: itemId,
-      expand: expandIndex,
-      type: typename,
+      ...queryParams,
+      ...(pageOptions && {
+        pageOptions: encodeURIComponent(btoa(JSON.stringify(pageOptions))),
+      }),
     },
-  }
+  }).href
 }
 
-export function goToPage(
+export function generateViewRecordRoute(
   that,
-  typename,
-  routeName,
-  itemId,
-  openInNew = false,
-  expandIndex = 0
-) {
-  const routeObject = generateRecordRouteObject(
+  {
     typename,
-    routeName,
-    itemId,
-    expandIndex
-  )
+    routeType,
+    queryParams,
+    id,
+    expand = 0,
+  }: {
+    typename: string
+    routeType: 'i' | 'a' | 'my' | 's'
+    queryParams?: any
+    id: string
+    expand?: number
+  }
+) {
+  return that.$router.resolve({
+    path: `/${routeType}/view/${camelToKebabCase(typename)}`,
+    query: {
+      id,
+      expand,
+      ...queryParams,
+    },
+  }).href
+}
 
-  if (!routeObject) return
+export function enterRoute(that, route: string, openInNew = false) {
+  if (!route) return
 
   if (openInNew) {
-    window.open(that.$router.resolve(routeObject).href, '_blank')
+    window.open(route, '_blank')
   } else {
-    that.$router.push(routeObject)
+    that.$router.push(route)
   }
 }
 
@@ -623,7 +629,7 @@ export function addNestedInputObject(
           label: nestedFieldInfo.text ?? nestedFieldInfo.key,
           inputType: nestedFieldInfo.inputType,
           inputOptions: nestedFieldInfo.inputOptions,
-          value: inputValue ? inputValue[nestedFieldInfo.key] : null,
+          value: (inputValue ? inputValue[nestedFieldInfo.key] : null) ?? null,
           getOptions: nestedFieldInfo.getOptions,
           options: [],
           cols: nestedFieldInfo.inputOptions?.cols,
@@ -697,3 +703,19 @@ export function processQuery(
     },
   }
 }
+
+// apiKey -> api-key
+export function camelToKebabCase(str: string) {
+  return str
+    .split('')
+    .map((letter, idx) => {
+      return letter.toUpperCase() === letter
+        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`
+        : letter
+    })
+    .join('')
+}
+
+export function kebabToCamelCase(str: string) {
+  return str.replace(/-./g, (x) => x[1].toUpperCase())
+}
diff --git a/frontend/services/config.ts b/frontend/services/config.ts
index 48e7035..95d334f 100644
--- a/frontend/services/config.ts
+++ b/frontend/services/config.ts
@@ -4,12 +4,29 @@ export const siteImageUrl = process.env.siteImageUrl
 export const siteContactEmail = process.env.siteContactEmail
 export const siteDiscordLink = process.env.siteDiscordLink
 export const siteGithubRepositoryUrl = process.env.siteGithubRepositoryUrl
+export const logoHasLightVariant = process.env.logoHasLightVariant
 
 export const firebaseConfig = {
-  apiKey: "AIzaSyAnt_96QDnYKKLaTsKNz-QVcdVM8kXNAKg",
-  authDomain: "giraffeql-com.firebaseapp.com",
-  projectId: "giraffeql-com",
-  storageBucket: "giraffeql-com.appspot.com",
-  messagingSenderId: "1038048865456",
-  appId: "1:1038048865456:web:36c8ce73824dee0d745f75"
-};
+  apiKey: 'AIzaSyAnt_96QDnYKKLaTsKNz-QVcdVM8kXNAKg',
+  authDomain: 'giraffeql-com.firebaseapp.com',
+  projectId: 'giraffeql-com',
+  storageBucket: 'giraffeql-com.appspot.com',
+  messagingSenderId: '1038048865456',
+  appId: '1:1038048865456:web:36c8ce73824dee0d745f75',
+}
+
+export const routesMap = {
+  a: [
+    'apiKey',
+    'file',
+    'giraffe',
+    'giraffeSpecies',
+    'giraffeSubspecies',
+    'user',
+    'userGiraffeFollowLink',
+    'userUserFollowLink',
+  ],
+  i: ['giraffe', 'giraffeSpecies', 'giraffeSubspecies', 'user'],
+  my: ['apiKey', 'file', 'giraffe'],
+  s: [],
+}
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index 2398b10..e81c716 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -2,13 +2,13 @@ import { InputTypes, MainTypes, FilterByField } from '../../schema'
 import { CrudRawFilterObject, CrudRawSortObject } from './misc'
 
 export type RecordInfo<T extends keyof MainTypes> = {
+  // optional title for this recordInfo
+  title?: string
   // name of the type
   typename: T
   pluralTypename: string
   name: string
   pluralName: string
-  // route that shareUrl and enterItem should be based off
-  routeName?: string
   icon?: string
   // how to render the item as a string
   renderItem?: (item) => string
@@ -75,6 +75,10 @@ export type RecordInfo<T extends keyof MainTypes> = {
         ? boolean
         : false
       : false
+
+    // the field to filter by on i-crud path, if any
+    publicFilterField?: string
+
     // all of the possible usable filters
     filterOptions: `${T}FilterByObject` extends keyof InputTypes
       ? FilterObject[]
@@ -173,7 +177,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
     component?: any
   }
 
-  enterOptions?: {}
+  enterOptions?: {
+    routeType: 'i' | 'a' | 'my' | 's'
+  }
 
   expandTypes: {
     // recordInfo is required unless it is a custom component