diff --git a/.gitignore b/.gitignore
index e541164..7c7e896 100644
--- a/.gitignore
+++ b/.gitignore
@@ -136,3 +136,7 @@ firebase-config.js
 
 # Do not force everyone to use the same .firebaserc
 .firebaserc
+
+# Do not commit the brand logos
+web/admin/public/img/brand
+web/app/public/img/brand
diff --git a/web/admin/index.html b/web/admin/index.html
index 2513db4..59e69f9 100644
--- a/web/admin/index.html
+++ b/web/admin/index.html
@@ -2,7 +2,7 @@
 <html lang="en" data-bs-theme="auto">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%VITE_ORGANIZATION_FAVICON%" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Volunteer | %VITE_ORGANIZATION_NAME%</title>
   </head>
diff --git a/web/admin/package.json b/web/admin/package.json
index 4218f83..f5620de 100644
--- a/web/admin/package.json
+++ b/web/admin/package.json
@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite -m dev --port 5174",
     "build": "vite build",
-    "build:prod": "vite build",
     "build:dev": "vite build -m dev",
     "build:watch": "vite build -m dev --watch",
     "preview": "vite preview --port 4173",
diff --git a/web/admin/public/favicon.ico b/web/admin/public/favicon.ico
deleted file mode 100644
index 3283e19..0000000
Binary files a/web/admin/public/favicon.ico and /dev/null differ
diff --git a/web/admin/public/ncfb-logo.png b/web/admin/public/ncfb-logo.png
deleted file mode 100644
index 4abbcd6..0000000
Binary files a/web/admin/public/ncfb-logo.png and /dev/null differ
diff --git a/web/admin/src/components/reports/ReportsTab.vue b/web/admin/src/components/reports/ReportsTab.vue
new file mode 100644
index 0000000..6adb3e9
--- /dev/null
+++ b/web/admin/src/components/reports/ReportsTab.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+
+const props = defineProps({
+  activeTab: String,
+})
+</script>
+
+<template>
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Dashboard' }]" aria-current="page" :to="{ name: 'AdminReportPage' }">Dashboard</router-link>
+    </li>
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Volunteers' }]" :to="{ name: 'VolunteerReportPage' }">Volunteers</router-link>
+    </li>
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Guests' }]" :to="{ name: 'GuestReportPage' }">Guests</router-link>
+    </li>
+
+  </ul>
+</template>
diff --git a/web/admin/src/pages/ReleaseNotesPage.vue b/web/admin/src/pages/ReleaseNotesPage.vue
index ef4d964..05d78c4 100644
--- a/web/admin/src/pages/ReleaseNotesPage.vue
+++ b/web/admin/src/pages/ReleaseNotesPage.vue
@@ -5,9 +5,9 @@
 <template>
 <div class="container">
   <h1>Release Notes</h1>
-  <h2 id="1.16.0">February 7, 2024 - 1.16.0</h2>
+  <h2 id="1.16.0">February 4, 2024 - 1.16.0</h2>
   <ul>
-    <li>TBD</li>
+    <li>Added reports pages for Guests and Volunteers.</li>
   </ul>
   <h2 id="1.15.0">January 31, 2024 - 1.15.0</h2>
   <ul>
diff --git a/web/admin/src/pages/reports/GuestReportPage.vue b/web/admin/src/pages/reports/GuestReportPage.vue
new file mode 100644
index 0000000..8ea5c39
--- /dev/null
+++ b/web/admin/src/pages/reports/GuestReportPage.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+import ReportsTab from '@/components/reports/ReportsTab.vue'
+
+</script>
+
+<template>
+  <div class="container">
+    <ReportsTab activeTab="Guests" />
+  </div>
+</template>
diff --git a/web/admin/src/pages/reports/ReportsDashboardPage.vue b/web/admin/src/pages/reports/ReportsDashboardPage.vue
new file mode 100644
index 0000000..88c3b24
--- /dev/null
+++ b/web/admin/src/pages/reports/ReportsDashboardPage.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import ReportsTab from '@/components/reports/ReportsTab.vue'
+import { collection, getCountFromServer, getFirestore, doc, addDoc, query, where, setDoc } from 'firebase/firestore'
+
+const db = getFirestore()
+
+const numTotalGuests = ref(0)
+const numTotalVolunteers = ref(0)
+const numTotalDrivers = ref(0)
+
+onBeforeMount( async ()=>{
+  const guestSnap = await getCountFromServer(collection(db, 'guestprofile'))
+  numTotalGuests.value = guestSnap.data().count
+  const vSnap = await getCountFromServer(query(collection(db, 'volunteerprofilestate'),
+                                               where('status', '==', 'active')))
+  numTotalVolunteers.value = vSnap.data().count
+
+  const dSnap = await getCountFromServer(query(collection(db, 'volunteerprofilestate'),
+                                               where('status', '==', 'active'),
+                                               where('isDriver', '==', true),
+                                               where('isApprovedDriver', '==', true)
+                                              ))
+  numTotalDrivers.value = dSnap.data().count
+
+
+})
+
+</script>
+
+<template>
+  <div class="container">
+    <ReportsTab activeTab="Dashboard" />
+
+  <div class="row my-3">
+    <div class="col-4">
+      <div class="card h-100">
+        <div class="card-body">
+          <div class="row">
+            <div class="col"><h5 class="card-title">Total Guests</h5></div>
+            <div class="col-2"><i class="bi bi-person fs-3"></i></div>
+          </div >
+          <h1 class="text-center">{{ numTotalGuests }}</h1>
+        </div>
+      </div >
+    </div >
+
+    <div class="col-4">
+      <div class="card h-100">
+        <div class="card-body">
+          <div class="row">
+            <div class="col"><h5 class="card-title">Total Volunteers</h5></div>
+            <div class="col-2"><i class="bi bi-person-fill fs-3"></i></div>
+          </div >
+          <h1 class="text-center">{{ numTotalVolunteers }}</h1>
+        </div>
+      </div >
+    </div >
+
+    <div class="col-4">
+      <div class="card h-100">
+        <div class="card-body">
+          <div class="row">
+            <div class="col"><h5 class="card-title">Total Drivers</h5></div>
+            <div class="col-2"><i class="bi bi-car-front fs-3"></i></div>
+          </div >
+          <h1 class="text-center">{{ numTotalDrivers }}</h1>
+        </div>
+      </div >
+    </div >
+
+
+  </div>
+
+
+
+  </div>
+</template>
diff --git a/web/admin/src/pages/AdminReportPage.vue b/web/admin/src/pages/reports/VolunteersReportPage.vue
similarity index 91%
rename from web/admin/src/pages/AdminReportPage.vue
rename to web/admin/src/pages/reports/VolunteersReportPage.vue
index 25da363..d8413d7 100644
--- a/web/admin/src/pages/AdminReportPage.vue
+++ b/web/admin/src/pages/reports/VolunteersReportPage.vue
@@ -1,9 +1,12 @@
 <script setup>
+import ReportsTab from '@/components/reports/ReportsTab.vue'
 
 </script>
 
 <template>
   <div class="container">
+    <ReportsTab activeTab="Volunteers" />
+
     <h1>Reporting - Monthly Volunteer Hours</h1>
     <h2>October 2023</h2>
     <table class="table table-striped">
diff --git a/web/admin/src/router.js b/web/admin/src/router.js
index 8d3f566..0cdd1d7 100644
--- a/web/admin/src/router.js
+++ b/web/admin/src/router.js
@@ -180,7 +180,22 @@ const routes = [
   {
     path: '/admin/reports',
     name: 'AdminReportPage',
-    component: () => import('@/pages/AdminReportPage.vue'),
+    props: true,
+    component: () => import('@/pages/reports/ReportsDashboardPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
+  {
+    path: '/admin/reports/guest',
+    name: 'GuestReportPage',
+    props: true,
+    component: () => import('@/pages/reports/GuestReportPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
+  {
+    path: '/admin/reports/volunteers',
+    name: 'VolunteerReportPage',
+    props: true,
+    component: () => import('@/pages/reports/VolunteersReportPage.vue'),
     meta: { requiresLogin: true, admin: true },
   },
   {
diff --git a/web/app/env.demo b/web/app/env.demo
index 6e0da9a..9773ef1 100644
--- a/web/app/env.demo
+++ b/web/app/env.demo
@@ -1,6 +1,11 @@
+# Specifies whether to run against the local firebase emulator
 VITE_RUN_LOCAL=true
-VITE_APP_NAV_NAME=DEMO
+
+# Inserted into the index.html file for the organization
 VITE_ORGANIZATION_NAME=Demo
+VITE_ORGANIZATION_FAVICON="/favicon.ico"
+
+VITE_APP_NAV_NAME=DEMO
 VITE_PROJECT_LONG_NAME="Food Pantry App Demo"
 VITE_DELIVERY_MESSAGE="Extended message here.<br>It can have HTML in it."
 VITE_DELIVERY_AREA_NAMES="Your Township Name"
@@ -15,9 +20,12 @@ VITE_FB_APPID=""
 VITE_FB_MEASUREMENTID=""
 VITE_OFFICE_PHONE=555-555-5555
 VITE_GUEST_PHONE=555-555-5555
-VITE_ADMIN_APP_NAV_IMG="/ncfb-logo.png"
 VITE_ADMIN_APP_NAV_NAME="FPA-Admin"
 VITE_ADMIN_PROJECT_LONG_NAME="FPA-Admin"
 VITE_ADMIN_FRONTLINE="Additional message here."
+
+# Link to the volunteer portal, leave blank if you are not running one.
 VITE_VOLUNTEER_PORTAL_URL="http://localhost:5174"
+
+# Flag to allow guests to register/login
 VITE_ENABLE_GUEST_LOGIN=false
diff --git a/web/app/index.html b/web/app/index.html
index ba71749..f136e11 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -2,7 +2,7 @@
 <html lang="en" data-bs-theme="auto">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%VITE_ORGANIZATION_FAVICON%" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_PROJECT_LONG_NAME%</title>
   </head>
diff --git a/web/app/public/favicon.ico b/web/app/public/favicon.ico
deleted file mode 100644
index 3283e19..0000000
Binary files a/web/app/public/favicon.ico and /dev/null differ
diff --git a/web/app/src/components/AppNavigation.vue b/web/app/src/components/AppNavigation.vue
index 11b9473..2020b07 100644
--- a/web/app/src/components/AppNavigation.vue
+++ b/web/app/src/components/AppNavigation.vue
@@ -1,4 +1,5 @@
 <script setup>
+import ThemeChooser from '@/components/ThemeChooser.vue'
 import { getAuth, signOut } from 'firebase/auth'
 import { config } from '@/config'
 import { useRouter } from 'vue-router'
@@ -32,23 +33,18 @@ const signOutClick = () => {
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mb-2 mb-lg-0">
-
-      <!--
-        <li class="nav-item">
-          <a class="nav-link" :href="config.DeliveryFormURL">Delivery</a>
-        </li>
-        -->
-        <li class="nav-item">
+        <li class="nav-item" v-if="!user.isLoggedIn">
           <a class="nav-link" :href="config.VolunteerPortalURL">Volunteer Portal</a>
         </li>
+        <li class="nav-item" v-if="user.isLoggedIn">
+          <router-link class="nav-link" :to="{name:'AboutPage'}">Profile</router-link>
+        </li>
         <li class="nav-item">
           <router-link class="nav-link" :to="{name:'AboutPage'}">About</router-link>
         </li>
-
-
       </ul>
       <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-
+        <li><ThemeChooser></ThemeChooser></li>
         <div class="d-flex" v-if="config.EnableGuestLogin === 'true'">
           <template v-if="user && user.isLoggedIn === true">
           <span class="nav-item py-2"><i class="bi bi-person-fill"></i> {{ user.data && user.data.displayName }}</span>
@@ -58,7 +54,6 @@ const signOutClick = () => {
           <router-link class="btn btn-primary mx-2" :to="{name:'LoginPage'}" role="button">Login</router-link>
           </template>
         </div>
-
       </ul>
     </div>
   </div>
diff --git a/web/app/src/components/ForgotPasswordForm.vue b/web/app/src/components/ForgotPasswordForm.vue
index cb7d5c4..a5f1f67 100644
--- a/web/app/src/components/ForgotPasswordForm.vue
+++ b/web/app/src/components/ForgotPasswordForm.vue
@@ -1,3 +1,23 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  showSuccess: Boolean,
+  successMessage: String,
+  showError: Boolean,
+  errorMessage: String,
+})
+
+const emit = defineEmits(['clicked'])
+
+const valid = ref(false)
+const email = ref("")
+
+const submit = () => {
+  emit('clicked', email.value)
+}
+</script>
+
 <template>
 <div class="row justify-content-center">
  <div class="col-md-8">
@@ -5,14 +25,14 @@
     <div class="card-header">Forgot Password</div>
     <h6 class="card-subtitle m-3 text-muted">Enter your email address and a link to reset your password will be emailed to you.</h6>
     <div class="card-text">
-      <template v-if="showSuccess"><div class="text-bg-success">{{successMessage}}</div></template>
-      <template v-if="showError"><div class="text-bg-danger" >{{errorMessage}}</div></template>
+      <template v-if="showSuccess"><div class="text-bg-success p-3">{{successMessage}}</div></template>
+      <template v-if="showError"><div class="text-bg-danger p-3">{{errorMessage}}</div></template>
       <div class="card-body">
         <form @submit.prevent="submit">
           <div class="row my-3">
             <label class="form-label">Email</label>
             <div class="col-sm-10">
-              <input type="email" class="form-control" v-model="email" :rules="[rules.required, rules.emailRule]" autocomplete="username" placeholder="name@example.com">
+              <input type="email" class="form-control" v-model="email" autocomplete="email" placeholder="name@example.com">
             </div>
           </div>
           <div class="row my-3">
@@ -27,33 +47,3 @@
  </div>
 </div>
 </template>
-
-<script>
-export default {
-  name: 'ForgotPasswordForm',
-  props: [
-    "showSuccess",
-    "successMessage",
-    "showError",
-    "errorMessage",
-  ],
-  data() {
-    return {
-      valid: false,
-      email: "",
-      rules: {
-        required: value => !!value || 'Required.',
-        emailRule: v => !v || /.+@.+/.test(v) || 'Invalid Email Address'
-      }
-    }
-  },
-  methods: {
-    submit() {
-      this.$emit('clicked', this.email);
-    }
-  }
-
-};
-</script>
-
-<style></style>
diff --git a/web/app/src/components/ThemeChooser.vue b/web/app/src/components/ThemeChooser.vue
index dfd7ff1..4d6fb55 100644
--- a/web/app/src/components/ThemeChooser.vue
+++ b/web/app/src/components/ThemeChooser.vue
@@ -1,11 +1,97 @@
+<script setup>
+import * as bootstrap from 'bootstrap'
+
+const getStoredTheme = () => localStorage.getItem('theme')
+const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+const getPreferredTheme = () => {
+  const storedTheme = getStoredTheme()
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = theme => {
+  if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.setAttribute('data-bs-theme', 'dark')
+  } else {
+    document.documentElement.setAttribute('data-bs-theme', theme)
+  }
+}
+
+setTheme(getPreferredTheme())
+
+const showActiveTheme = (theme, focus = false) => {
+  const themeSwitcher = document.querySelector('#bd-theme')
+
+  if (!themeSwitcher) {
+    return
+  }
+
+  const themeSwitcherText = document.querySelector('#bd-theme-text')
+  const activeThemeIcon = document.querySelector('.theme-icon-active use')
+  const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+  const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+  document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    element.classList.remove('active')
+    element.setAttribute('aria-pressed', 'false')
+  })
+
+  btnToActive.classList.add('active')
+  btnToActive.setAttribute('aria-pressed', 'true')
+  activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+  const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+  themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+  if (focus) {
+    themeSwitcher.focus()
+  }
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  const storedTheme = getStoredTheme()
+  if (storedTheme !== 'light' && storedTheme !== 'dark') {
+    setTheme(getPreferredTheme())
+  }
+})
+
+const toggleTheme = (theme)=> {
+  setStoredTheme(theme)
+  setTheme(theme)
+  showActiveTheme(theme,true)
+}
+
+// //window.addEventListener('DOMContentLoaded', () => {
+//   showActiveTheme(getPreferredTheme())
+
+//   document.querySelectorAll('[data-bs-theme-value]')
+//     .forEach(toggle => {
+//       console.log('set toggle click')
+//       toggle.addEventListener('click', () => {
+//         const theme = toggle.getAttribute('data-bs-theme-value')
+//         setStoredTheme(theme)
+//         setTheme(theme)
+//         showActiveTheme(theme, true)
+//       })
+//     })
+// //})
+
+
+document.querySelectorAll('[data-bs-toggle="popover"]')
+  .forEach(popover => {
+    new bootstrap.Popover(popover)
+  })
+</script>
+
 <template>
-  <div class="">
-    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
       <symbol id="bootstrap" viewBox="0 0 512 408" fill="currentcolor">
         <path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/>
       </symbol>
       <symbol id="check2" viewBox="0 0 16 16">
-        <title>Check</title>
         <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
       </symbol>
       <symbol id="circle-half" viewBox="0 0 16 16">
@@ -19,33 +105,34 @@
         <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
       </symbol>
     </svg>
+  <div class="d-flex align-items-center">
     <div class="d-flex align-items-center dropdown color-modes">
-      <button class="btn btn-link px-0 text-decoration-none dropdown-toggle d-flex align-items-center"
+      <button class="btn btn-link text-decoration-none dropdown-toggle d-flex align-items-center"
               id="bd-theme"
               type="button"
               aria-expanded="false"
               data-bs-toggle="dropdown"
               data-bs-display="static">
-        <svg class="bi my-1 me-2 theme-icon-active"><use href="#circle-half"></use></svg>
-
+        <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+        <span class="" id="bd-theme-text"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
         <li>
-          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" @click="toggleTheme('light')">
             <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
             Light
             <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
-          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" @click="toggleTheme('dark')">
             <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
             Dark
             <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
           </button>
         </li>
         <li>
-          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
+          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" @click="toggleTheme('auto')">
             <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
             Auto
             <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
@@ -53,59 +140,5 @@
         </li>
       </ul>
     </div>
-    <div class="">
-      <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-        <symbol id="bootstrap" viewBox="0 0 512 408" fill="currentcolor">
-          <path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/>
-        </symbol>
-        <symbol id="check2" viewBox="0 0 16 16">
-          <title>Check</title>
-          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-        </symbol>
-        <symbol id="circle-half" viewBox="0 0 16 16">
-          <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
-        </symbol>
-        <symbol id="moon-stars-fill" viewBox="0 0 16 16">
-          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
-          <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
-        </symbol>
-        <symbol id="sun-fill" viewBox="0 0 16 16">
-          <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
-        </symbol>
-      </svg>
-      <div class="d-flex align-items-center dropdown color-modes">
-        <button class="btn btn-link px-0 text-decoration-none dropdown-toggle d-flex align-items-center"
-                id="bd-theme"
-                type="button"
-                aria-expanded="false"
-                data-bs-toggle="dropdown"
-                data-bs-display="static">
-          <svg class="bi my-1 me-2 theme-icon-active"><use href="#circle-half"></use></svg>
-
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
-              <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
-              Light
-              <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-            </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
-              <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
-              Dark
-              <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-            </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
-              <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
-              Auto
-              <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
+  </div>
 </template>
diff --git a/web/app/src/config.js b/web/app/src/config.js
index b8e91d8..6083d04 100644
--- a/web/app/src/config.js
+++ b/web/app/src/config.js
@@ -1,99 +1,106 @@
 export let config = {
   version: "1.16.0",
-  appNavName: import.meta.env.VITE_APP_NAV_NAME || 'APP_NAV_NAME',
+  appNavName: import.meta.env.VITE_APP_NAV_NAME || "APP_NAV_NAME",
   appNavImg: import.meta.env.VITE_APP_NAV_IMG || null,
-  OrganizationName: import.meta.env.VITE_ORGANIZATION_NAME || 'ORGANIZATION_NAME',
-  ProjectLongName: import.meta.env.VITE_PROJECT_LONG_NAME || 'PROJECT_LONG_NAME',
+  OrganizationName: import.meta.env.VITE_ORGANIZATION_NAME || "ORGANIZATION_NAME",
+  ProjectLongName: import.meta.env.VITE_PROJECT_LONG_NAME || "PROJECT_LONG_NAME",
   DeliveryAreaNames: import.meta.env.VITE_DELIVERY_AREA_NAMES || "",
-  DeliveryZipcodes: import.meta.env.VITE_DELIVERY_ZIPCODES || [19003,19010,19041,19072,19096,19004,19035,19066,19085,19428],
+  DeliveryZipcodesConfig: import.meta.env.VITE_DELIVERY_ZIPCODES || "",
+  DeliveryZipcodes: [],
   DeliveryOutsideAreaUrl: import.meta.env.VITE_DELIVERY_OUTSIDE_AREA_URL || "",
   DeliveryMessage: import.meta.env.VITE_DELIVERY_MESSAGE || "",
   DeliveryFormURL: import.meta.env.VITE_DELIVERY_FORM_URL || "/delivery-form",
   VolunteerPortalURL: import.meta.env.VITE_VOLUNTEER_PORTAL_URL || "VOLUNTEER_PORTAL_URL",
   EnableGuestLogin: import.meta.env.VITE_ENABLE_GUEST_LOGIN || "false",
+  MainOrgURL: import.meta.env.VITE_MAIN_ORG_URL || '#main-org-url-not-set',
 
   meta: {
     Home: {
-      title: 'Home',
+      title: "Home",
       metaTags: [
         {
-          name: 'description',
-          content: 'Home page'
+          name: "description",
+          content: "Home page"
         }
       ]
     },
     Login: {
-      title: 'Login',
+      title: "Login",
       metaTags: [
         {
-          name: 'description',
-          content: 'Login'
+          name: "description",
+          content: "Login"
         }
       ]
     },
     Register: {
-      title: 'Register',
+      title: "Register",
       metaTags: [
         {
-          name: 'description',
-          content: 'Register for an account'
+          name: "description",
+          content: "Register for an account"
         }
       ]
     },
     About: {
-      title: 'About',
+      title: "About",
       metaTags: [
         {
-          name: 'description',
-          content: 'About page'
+          name: "description",
+          content: "About page"
         }
       ]
     },
     Contact: {
-      title: 'Contact Us',
+      title: "Contact Us",
       metaTags: [
         {
-          name: 'description',
-          content: 'How to contact us'
+          name: "description",
+          content: "How to contact us"
         }
       ]
     },
     DeliveryForm: {
-      title: 'Delivery Profile',
+      title: "Delivery Profile",
       metaTags: [
         {
-          name: 'description',
-          content: 'Your delivery application/profile page.'
+          name: "description",
+          content: "Your delivery application/profile page."
         }
       ]
     },
     PrivacyPolicy: {
-      title: 'Privacy Policy',
+      title: "Privacy Policy",
       metaTags: [
         {
-          name: 'description',
-          content: 'Privacy policy.'
+          name: "description",
+          content: "Privacy policy."
         }
       ]
     },
     Terms: {
-      title: 'Terms',
+      title: "Terms",
       metaTags: [
         {
-          name: 'description',
-          content: 'Terms of use.'
+          name: "description",
+          content: "Terms of use."
         }
       ]
     },
     ForgotPassword: {
-      title: 'Forgot Password',
+      title: "Forgot Password",
       metaTags: [
         {
-          name: 'description',
-          content: 'Enter your email if you have forgotten your password.'
+          name: "description",
+          content: "Enter your email if you have forgotten your password."
         }
       ]
     }
 
   }
 }
+
+if (config.DeliveryZipcodesConfig.length > 0) {
+  let zips = config.DeliveryZipcodesConfig.replace(/\s+/g, "")
+  config.DeliveryZipcodes = config.DeliveryZipcodesConfig.split(",")
+}
diff --git a/web/app/src/main.js b/web/app/src/main.js
index 024f67c..765d617 100644
--- a/web/app/src/main.js
+++ b/web/app/src/main.js
@@ -45,9 +45,20 @@ fetch('/__/firebase/init.json').then(async response => {
     connectFunctionsEmulator(functions, 'localhost', 5001)
   }
 
-  getAuth().onAuthStateChanged(user => {
-    useAuthUserStore().save(user)
-  });
+  getAuth().onAuthStateChanged(async user => {
+    let isAdmin = false
+    let isVolunteer = false
+    let isPending = false
+    let isGuest = false
+    if (user) {
+      const token = await getIdTokenResult(user)
+      isAdmin = token.claims.admin === true
+      isVolunteer = token.claims.volunteer === true
+      isGuest = !isVolunteer
+      isPending = token.claims.pendingvolunteer === true
+    }
+    useAuthUserStore().save(user, isAdmin, isVolunteer, isPending, isGuest)
+  })
 
   const app = createApp(App)
   app.use(createPinia())
diff --git a/web/app/src/pages/AboutPage.vue b/web/app/src/pages/AboutPage.vue
index 62ba314..e323239 100644
--- a/web/app/src/pages/AboutPage.vue
+++ b/web/app/src/pages/AboutPage.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <h1>About Food Pantry App</h1>
-    <p>Food Pantry App was created to help operating a food pantry that focuses on delivering food to guests.</p>
-    <p>If you would like to volunteer to work on FPA, report a bug, or make a suggestion, please go to <a href="https://github.com/ncosd/food-pantry-app">https://github.com/ncosd/food-pantry-app</a> and create an issue.
+    <p>Food Pantry App was created to help operating a food pantry that focuses on providing food to guests.</p>
+    <p>If you would like to volunteer to work on FPA, report a bug, or make a suggestion, please
+      go to <a href="https://github.com/ncosd/food-pantry-app">https://github.com/ncosd/food-pantry-app</a> and create an issue.
     </p>
-
   </div>
 </template>
diff --git a/web/app/src/pages/ContactPage.vue b/web/app/src/pages/ContactPage.vue
index 6a10f2b..9577e13 100644
--- a/web/app/src/pages/ContactPage.vue
+++ b/web/app/src/pages/ContactPage.vue
@@ -1,3 +1,8 @@
+<script setup>
+const guest_phone = import.meta.env.VITE_GUEST_PHONE
+const office_phone = import.meta.env.VITE_OFFICE_PHONE
+</script>
+
 <template>
   <div class="container">
     <h1>Contact Us</h1>
@@ -7,8 +12,3 @@
     <p>If you have general questions can be directed to the office phone at {{office_phone}}</p>
   </div>
 </template>
-
-<script setup>
-const guest_phone = import.meta.env.VITE_GUEST_PHONE
-const office_phone = import.meta.env.VITE_OFFICE_PHONE
-</script>
diff --git a/web/app/src/pages/ForgotPassword.vue b/web/app/src/pages/ForgotPassword.vue
index f5e8a1c..c2db6e9 100644
--- a/web/app/src/pages/ForgotPassword.vue
+++ b/web/app/src/pages/ForgotPassword.vue
@@ -1,45 +1,32 @@
+<script setup>
+import { ref } from 'vue'
+import { getAuth, sendPasswordResetEmail } from "firebase/auth"
+import ForgotPasswordForm from '@/components/ForgotPasswordForm.vue'
+
+const showSuccess = ref(false)
+const successMessage = ref("")
+const errorMessage = ref("")
+const showError = ref(false)
+const auth = getAuth()
+
+const onFormSubmit = async(email) => {
+  sendPasswordResetEmail(auth, email).then(() => {
+    showError.value = false
+    showSuccess.value = true
+    successMessage.value = 'Email sent with a link to reset your password.  Please check you spam folder if you do not see it in a few minutes.'
+  }).catch(() => {
+    showSuccess.value = false
+    showError.value = true
+    errorMessage.value = 'An error occurred.  Check you entered the correct email for your account.'
+  })
+}
+</script>
+
 <template>
   <div class="container">
     <ForgotPasswordForm :showSuccess="showSuccess" :successMessage="successMessage"
     :showError="showError" :errorMessage="errorMessage"
     @clicked="onFormSubmit"
     />
-
   </div>
 </template>
-
-<script>
-import { getAuth, sendPasswordResetEmail } from "firebase/auth"
-import ForgotPasswordForm from '@/components/ForgotPasswordForm.vue'
-
-export default {
-  name: 'ForgotPassword',
-  components: {
-    ForgotPasswordForm
-  },
-  data() {
-    return {
-      showSuccess: false,
-      successMessage: "",
-      errorMessage: "",
-      showError: false,
-    }
-  },
-  methods: {
-    onFormSubmit(email) {
-    const auth = getAuth()
-    sendPasswordResetEmail(auth, email).then(() => {
-          this.showError = false;
-          this.showSuccess = true;
-          this.successMessage = 'Email sent with a link to reset your password.  Please check you spam folder if you do not see it in a few minutes.';
-       }).catch(() => {
-          this.showSuccess = false;
-          this.showError = true;
-          this.errorMessage = 'An error occurred.  Check you entered the correct email for your account.';
-       });
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/web/app/src/pages/HomePage.vue b/web/app/src/pages/HomePage.vue
index f9b8ea3..fa7cdbf 100644
--- a/web/app/src/pages/HomePage.vue
+++ b/web/app/src/pages/HomePage.vue
@@ -1,34 +1,19 @@
+<script setup>
+import { config } from '@/config';
+import DeliveryExplainer from '@/components/DeliveryExplainer.vue';
+import { useAuthUserStore } from '@/stores/authUser'
+
+const user = useAuthUserStore()
+</script>
+
 <template>
   <div class="container">
     <h1>Welcome!</h1>
-    <p>Welcome to the {{config.ProjectLongName}}.  Once you have
-      registered, use your profile to customize how you interact with the {{config.OrganizationName}}.
+    <p>Welcome to the {{config.ProjectLongName}}.</p>
+    <p v-if="!user.isLoggedIn">This is the Guest application.  Volunteers should use the Volunteer Portal link above.</p>
+    <p v-if="config.EnableGuestLogin !== 'true'">Guest registration and login is not enabled at this time.  Please use our website
+      <a :href="config.MainOrgURL">{{config.MainOrgURL}}</a> for guest services.
     </p>
 
-    <DeliveryExplainer></DeliveryExplainer>
-
   </div>
 </template>
-
-<script>
-import { config } from '@/config';
-import DeliveryExplainer from '@/components/DeliveryExplainer.vue';
-
-export default {
-  name: 'HomePage',
-  components: {
-    DeliveryExplainer
-  },
-  computed: {
-
-  },
-  data() {
-    return {
-      config: config,
-      neededList: ""
-    }
-  },
-  created() {
-  }
-}
-</script>
diff --git a/web/app/src/pages/LoginPage.vue b/web/app/src/pages/LoginPage.vue
index da1ef5d..d03ed03 100644
--- a/web/app/src/pages/LoginPage.vue
+++ b/web/app/src/pages/LoginPage.vue
@@ -24,11 +24,6 @@ const submit = () => {
     .then(async () => {
       const user = await auth.currentUser
 
-      const token = await getIdTokenResult(user)
-      if (token.claims.volunteer === true) {
-        window.location.href = config.VolunteerPortalURL
-      }
-
       showSuccess.value = true
       successMessage.value = "You have signed in."
       router.replace({name:'HomePage'})
diff --git a/web/app/src/pages/RegisterPage.vue b/web/app/src/pages/RegisterPage.vue
index 16fc98c..5c003a1 100644
--- a/web/app/src/pages/RegisterPage.vue
+++ b/web/app/src/pages/RegisterPage.vue
@@ -1,110 +1,131 @@
-<template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-8">
-        <div class="card">
-           <div class="card-header">Sign Up</div>
-           <div class="card-body">
-              <template v-if="showSuccess">
-                <div class="text-bg-success">{{successMessage}}</div>
-              </template>
-              <template v-if="error">
-                <div class="text-bg-danger">{{error}}</div>
-              </template>
-              <form @submit.prevent="submit">
-              <div class="row my-3">
-                <label class="form-label">Email</label>
-                <div class="col-sm-10">
-                  <input type="text" v-model="email" :rules="[rules.emailRule]" label="Email" autocomplete="username" class="form-control" placeholder="name@example.com">
-                </div>
-              </div>
+<script setup>
+import { ref } from 'vue'
+import { getAuth, createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'
+import { getFirestore, doc, getDoc, setDoc } from 'firebase/firestore';
+import { config } from '@/config.js'
+import { useRouter } from 'vue-router'
 
-              <div class="row my-3">
-                <label class="form-label">Password</label>
-                <div class="col-sm-10">
-                  <input type="password" v-model="password" autocomplete="new-password" class="form-control">
-                </div>
-              </div>
+const router = useRouter()
+const db = getFirestore()
 
-              <button type="submit" class="btn btn-primary">Submit</button>
-              <a href="/forgot-password" class="m-3">Forgot Password?</a>
-              <a href="/login" class="m-3">Sign In</a>
-              </form>
-           </div>
-        </div>
-      </div>
-   </div>
- </div>
-</template>
+const showErr = ref(false)
+const errorMsg = ref('')
+const showSuccess = ref(false)
+const successMessage = ref('')
+const email = ref('')
+const password = ref('')
+const zipcode = ref('')
+const valid = ref(false)
 
-<script>
-import { getAuth, createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'
+const showOutsideArea = ref(false)
+const outsideAreaURL = config.DeliveryOutsideAreaUrl
+
+const auth = getAuth()
 
-export default {
-  name: 'RegisterPage',
-  data() {
-    return {
-      error: "",
-      showSuccess: false,
-      successMessage: "",
-      valid: false,
-      password: '',
-      email: '',
-      rules: {
-        required: value => !!value || 'Required.',
-        min: v => v.length >= 8 || 'Min 8 characters',
-        emailRule: v => !v || /.+@.+/.test(v) || 'Invalid Email Address'
-      },
+const checkServiceArea = () => {
+  if (config.DeliveryZipcodes.length > 0) {
+    if (!config.DeliveryZipcodes.includes(zipcode.value)) {
+      return false
     }
-  },
-  methods: {
-    submit() {
-      this.error = "";
-      this.showSuccess = false;
-
-      if (!this.email) {
-        this.error = "Email is required"
-      } else {
-        if (!(/.+@.+\..+/.test(this.email))) {
-          this.error += " Invalid email address."
-        }
-      }
-
-      if (!this.password) {
-        this.error += " Password is required"
-      }
-      if (this.password && (this.password.length < 8)) {
-        this.error += " Password must be at least 8 characters"
-      }
-
-      if (this.error) {
-        this.showSuccess = false
-        console.log("error  "+this.error)
-        return false
-      }
-
-      console.log("before firebase.auth")
-
-      const auth = getAuth()
-      createUserWithEmailAndPassword(auth, this.email, this.password)
-      .then(data => {
-        this.showSuccess = true;
-        this.successMessage = "Account registered.";
-        const name = this.email.match(/(.+)@/)
-        updateProfile(auth.currentUser, {
-          displayName: name[1]
-        })
-        .then(() => { console.log("after updateProfile"); this.$router.replace({name:'HomePage'}); })
-        .catch(err=>{
-          console.log('err for updateProfile', err)
-        })
-      })
-      .catch(err => {
-        console.log("err=", err)
-        this.showSuccess = false;
-        this.error = err.message;
-      });
+  }
+  return true
+}
+
+const save = async () => {
+
+  errorMsg.value = ''
+  showErr.value = false
+  showSuccess.value = false
+  showOutsideArea.value = false
+
+  if (!checkServiceArea()) {
+    errorMsg.value = 'Location outside our service area.'
+    showOutsideArea.value = true
+    showErr.value = true
+    return
+  }
+
+  try {
+    const regData = await createUserWithEmailAndPassword(auth, email.value, password.value)
+    const uid = regData.user.uid
+
+    const name = email.value.match(/(.+)@/)
+    await updateProfile(auth.currentUser, {
+      displayName: name[1]
+    })
+
+    const gProfRef = doc(db, 'guestprofile', uid)
+    await setDoc(gProfRef, { zipcode: zipcode.value })
+
+    // router.replace({name:'HomePage'});
+
+
+  } catch(err) {
+    const code = err.code
+    const msg = err.message
+
+    console.log("err=", code, 'm', msg)
+    switch (code) {
+    case 'auth/email-already-in-use':
+      errorMsg.value = 'Email already in use.'
+      break
+    case 'auth/weak-password':
+      errorMsg.value = 'Password should be at least 6 characters.'
+      break
+
+    default:
+      errorMsg.value = msg
     }
+
+    showSuccess.value = false
+    showErr.value = true
   }
 }
 </script>
+
+<template>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-8">
+      <div class="card">
+        <div class="card-header">Sign Up</div>
+        <div class="card-body">
+          <template v-if="showSuccess">
+            <div class="text-bg-success p-3">{{successMessage}}</div>
+          </template>
+          <template v-if="showErr">
+            <div class="text-bg-danger p-3">{{errorMsg}}</div>
+          </template>
+          <template v-if="showOutsideArea">
+            <div class="p-3">If you are outside our service area check <a :href="outsideAreaURL">{{ outsideAreaURL }}</a></div>
+          </template>
+
+          <form @submit.prevent="save">
+            <div class="row my-3">
+              <label for="regEmail" class="form-label">Email</label>
+              <input id="regEmail" type="text" v-model="email" autocomplete="email" class="form-control" placeholder="name@example.com" required>
+            </div>
+
+            <div class="row my-3">
+              <label for="regPassword" class="form-label">Password</label>
+              <input id="regPassword" type="password" v-model="password" autocomplete="new-password" class="form-control" required>
+            </div>
+
+            <div class="row my-3">
+              <label for="regZip" class="form-label">Zipcode</label>
+              <input id="regZip" type="text" v-model="zipcode" class="form-control" placeholder="12345" aria-describedby="regZipHelpBlock" required>
+              <div id="regZipHelpBlock" class="form-text">
+                Enter the zipcode where you live.
+              </div>
+            </div>
+
+            <button type="submit" class="btn btn-primary">Submit</button>
+            <a href="/forgot-password" class="m-3">Forgot Password?</a>
+            <a href="/login" class="m-3">Sign In</a>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/web/app/src/pages/ReleaseNotesPage.vue b/web/app/src/pages/ReleaseNotesPage.vue
index 61e3052..9ed0f61 100644
--- a/web/app/src/pages/ReleaseNotesPage.vue
+++ b/web/app/src/pages/ReleaseNotesPage.vue
@@ -5,9 +5,9 @@
 <template>
 <div class="container">
   <h1>Release Notes</h1>
-  <h2 id="1.16.0">February 7, 2024 - 1.16.0</h2>
+  <h2 id="1.16.0">February 4, 2024 - 1.16.0</h2>
   <ul>
-    <li>No issues in the Guest app.</li>
+    <li><a href="https://github.com/ncosd/food-pantry-app/issues/278">#278</a> Add dark/light theme chooser to guest app header.</li>
   </ul>
   <h2 id="1.15.0">January 31, 2024 - 1.15.0</h2>
   <ul>
diff --git a/web/app/src/pages/VolunteerPage.vue b/web/app/src/pages/VolunteerPage.vue
new file mode 100644
index 0000000..3488c0b
--- /dev/null
+++ b/web/app/src/pages/VolunteerPage.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { ref } from 'vue'
+import { config } from '@/config.js'
+
+const volunteerUrl = config.VolunteerPortalURL
+</script>
+
+<template>
+  <div class="container">
+    <h1>Volunteer</h1>
+    <p>If you are a registered volunteer, please use <a href="{{volunteerUrl}}">{{volunteerUrl}}</a></p>
+  </div>
+</template>
diff --git a/web/app/src/router.js b/web/app/src/router.js
index 26ead8c..35e9180 100644
--- a/web/app/src/router.js
+++ b/web/app/src/router.js
@@ -53,7 +53,13 @@ const routes = [
     path: '/release-notes/',
     name: 'ReleaseNotes',
     component: () => import('@/pages/ReleaseNotesPage.vue'),
-  }
+  },
+    {
+      path: '/volunteer',
+      name: 'VolunteerPage',
+      component: () => import('@/pages/VolunteerPage.vue'),
+      meta: { login: true },
+    },
 ]
 
 const router = createRouter({
@@ -64,6 +70,11 @@ const router = createRouter({
 // This callback runs before every route change, including on page load.
 router.beforeEach((to, from) => {
   const user = useAuthUserStore()
+
+  if (user.isLoggedIn && (user.isVolunteer && !user.isAdmin) && to.name !== 'VolunteerPage') {
+    return { name: 'VolunteerPage' }
+  }
+
   if (to.meta.login === true) {
     if (user.isLoggedIn !== true) {
       return { name: 'LoginPage' }
diff --git a/web/app/src/stores/authUser.js b/web/app/src/stores/authUser.js
index bf3ff34..7d7fe06 100644
--- a/web/app/src/stores/authUser.js
+++ b/web/app/src/stores/authUser.js
@@ -3,17 +3,29 @@ import { defineStore } from 'pinia'
 export const useAuthUserStore = defineStore('authUser', {
   state: () => ({
     isLoggedIn: (localStorage.getItem('authUserLoggedIn') === 'true'),
-    data: JSON.parse(localStorage.getItem('authUser'))
+    data: JSON.parse(localStorage.getItem('authUser')),
+    isAdmin: (localStorage.getItem('authUserIsAdmin') === 'true'),
+    isVolunteer: (localStorage.getItem('authUserIsVolunteer') === 'true'),
+    isPending: (localStorage.getItem('authUserIsPending') === 'true'),
+    isGuest: (localStorage.getItem('authUserIsGuest') === 'true'),
   }),
   actions: {
     clearUser () {
       this.$reset()
     },
-    save(user) {
+    save(user, isAdmin, isVolunteer, isPending, isGuest) {
       this.isLoggedIn = (user ? true : false)
       this.data = user
+      this.isAdmin = isAdmin
+      this.isVolunteer = isVolunteer
+      this.isPending = isPending
+      this.isGuest = isGuest
       localStorage.setItem('authUserLoggedIn', this.isLoggedIn)
       localStorage.setItem('authUser', JSON.stringify(user))
+      localStorage.setItem('authUserIsAdmin', this.isAdmin)
+      localStorage.setItem('authUserIsVolunteer', this.isVolunteer)
+      localStorage.setItem('authUserIsPending', this.isPending)
+      localStorage.setItem('authUserIsGuest', this.isGuest)
     }
   }
 })
diff --git a/web/firestore.rules b/web/firestore.rules
index d4196f1..82e9ab1 100644
--- a/web/firestore.rules
+++ b/web/firestore.rules
@@ -106,7 +106,9 @@ service cloud.firestore {
       allow create, read, update, delete: if request.auth != null && request.auth.token.admin == true;
     }
 
-
-
+    match /guestprofile/{uid} {
+      allow create, read, update: if request.auth.uid == uid || request.auth.token.admin == true;
+      allow list: if request.auth.token.admin == true;
+    }
   }
 }
diff --git a/web/makefile b/web/makefile
index 6d6c0de..1039bee 100644
--- a/web/makefile
+++ b/web/makefile
@@ -4,17 +4,17 @@ VERSION?=$(shell grep version admin/src/config.js | tr -d " " | tr -d "version:"
 
 build: build-echo build-app build-admin
 
-build-prod: ENV=prod
+build-prod: ENV=production
 build-prod: build
 
 build-echo:
 	@echo building $(ENV)
 
 build-app:
-	cd app && npm run build:$(ENV)
+	cd app && npm run build -- -m $(ENV)
 
 build-admin:
-	cd admin && npm run build:$(ENV)
+	cd admin && npm run build -- -m $(ENV)
 
 serve:
 	cd admin && npm run serve:firebase:emulator
