diff --git a/frontend/src/components/Batch/Batch.vue b/frontend/src/components/Batch/Batch.vue
index 81ad343e..d96dbf53 100644
--- a/frontend/src/components/Batch/Batch.vue
+++ b/frontend/src/components/Batch/Batch.vue
@@ -876,38 +876,40 @@
             <div
               v-for="(program, index) in batch.programs"
               :key="index"
-              class="row pl-3 mb-1"
+              class="row pl-3 mb-1 col-12"
             >
-              <div class="row col-10" v-if="index == batch.programs.length - 1">
-                <b-form-select
-                  id="inline-form-select-type"
-                  class="col-2"
-                  :options="programOptions"
-                  value-field="programCode"
-                  text-field="programCode"
-                  v-model="program.value"
-                ></b-form-select>
-              </div>
-              <div v-if="index == batch.programs.length - 1" class="col-2">
-                <b-button
-                  :disabled="validating"
-                  class="btn btn-primary w-100"
-                  @click="
-                    addValueToTypeInBatchIdHandle(
-                      jobId,
-                      'programs',
-                      program.value,
-                      index
-                    )
-                  "
-                >
-                  <b-spinner small v-if="validating"></b-spinner> Add
-                </b-button>
+              <div class="row col-12">
+                <div class="col-2" v-if="index == batch.programs.length - 1">
+                  <b-form-select
+                    id="inline-form-select-type"
+                    class="w-100"
+                    :options="programOptions"
+                    value-field="programCode"
+                    text-field="programCode"
+                    v-model="program.value"
+                  ></b-form-select>
+                </div>
+                <div v-if="index == batch.programs.length - 1" class="col-2">
+                  <b-button
+                    :disabled="validating"
+                    class="btn btn-primary w-100"
+                    @click="
+                      addValueToTypeInBatchIdHandle(
+                        jobId,
+                        'programs',
+                        program.value,
+                        index
+                      )
+                    "
+                  >
+                    <b-spinner small v-if="validating"></b-spinner> Add
+                  </b-button>
+                </div>
               </div>
               <div class="row col-12">
                 <div
                   v-if="program.value && index != batch.programs.length - 1"
-                  class="col-2"
+                  class="col-2 pl-4"
                 >
                   {{ program.value }}
                 </div>
@@ -923,7 +925,7 @@
 
                 <div v-if="index != batch.programs.length - 1" class="col-2">
                   <b-button
-                    class="btn btn-primary w-100 w-100"
+                    class="btn btn-primary w-100"
                     @click="
                       deleteValueFromTypeInBatchIdHandle(
                         jobId,
diff --git a/frontend/src/components/Header/EnvironmentBanner.vue b/frontend/src/components/Header/EnvironmentBanner.vue
index 1ad76fd3..f619e7cd 100644
--- a/frontend/src/components/Header/EnvironmentBanner.vue
+++ b/frontend/src/components/Header/EnvironmentBanner.vue
@@ -1,14 +1,16 @@
 <template>
   <div id="env-banner">
+    env - {{ environment }} | host - {{ host }}
     <div v-if="environment == 'local'" class="local-env">
       Vue 3 - <strong>localhost</strong> environment
     </div>
     <div v-else-if="environment == 'dev'" class="dev-env">
       Vue 3 - <strong>DEV</strong> environment
     </div>
-    <div v-if="environment == 'test'" class="test-env">
+    <div v-else-if="environment == 'test'" class="test-env">
       Vue 3 - <strong>TEST</strong> environment
     </div>
+    <div v-else>Vue 3 - <strong>Environment not recognized</strong></div>
   </div>
 </template>
 
@@ -23,10 +25,13 @@ export default {
         dev: "educ-grad-admin",
         test: "test.grad.gov.bc.ca",
       },
+      host: location.host,
     };
   },
   methods: {
     getEnv() {
+      console.log(location);
+      console.log(location.host.includes(this.environments.dev));
       //simple solution to display banner to UI that indicates what environment the user is in;
       //currently determined via browser URL since this is a simple visual aid for devs and testers
       if (
@@ -41,7 +46,7 @@ export default {
       }
     },
   },
-  created() {
+  mounted() {
     this.getEnv();
   },
 };
diff --git a/frontend/src/components/SessionExpired.vue b/frontend/src/components/SessionExpired.vue
index 351d276b..b930d436 100644
--- a/frontend/src/components/SessionExpired.vue
+++ b/frontend/src/components/SessionExpired.vue
@@ -20,7 +20,7 @@
                 color="#003366"
                 @click="clearStorage"
                 >Log In</a
-              ><span>again to continue.</span>
+              ><span>&nbsp;again to continue.</span>
             </v-card-text>
           </v-card>
         </v-col>
diff --git a/frontend/src/components/StudentProfile/GraduationStatus/GRADStatus.vue b/frontend/src/components/StudentProfile/GraduationStatus/GRADStatus.vue
index bbb19549..951cad81 100644
--- a/frontend/src/components/StudentProfile/GraduationStatus/GRADStatus.vue
+++ b/frontend/src/components/StudentProfile/GraduationStatus/GRADStatus.vue
@@ -707,12 +707,34 @@
                 {{ String(studentGradStatus.recalculateGradStatus) }}
               </td>
             </tr>
+            <tr v-else>
+              <td><strong>Recalculate Grad Status:</strong></td>
+              <td>
+                <b-form-select
+                  size="sm"
+                  v-model="editedGradStatus.recalculateGradStatus"
+                  :options="recalcFlags"
+                  :disabled="!allowUpdateRecalcFlags"
+                />
+              </td>
+            </tr>
             <tr v-if="!showEdit">
               <td><strong>Recalculate Projected Grad:</strong></td>
               <td>
                 {{ String(studentGradStatus.recalculateProjectedGrad) }}
               </td>
             </tr>
+            <tr v-else>
+              <td><strong>Recalculate Projected Grad:</strong></td>
+              <td>
+                <b-form-select
+                  size="sm"
+                  v-model="editedGradStatus.recalculateProjectedGrad"
+                  :options="recalcFlags"
+                  :disabled="!allowUpdateRecalcFlags"
+                />
+              </td>
+            </tr>
             <tr></tr>
           </tbody>
         </table>
@@ -759,6 +781,7 @@ export default {
     }),
     ...mapState(useAccessStore, {
       allowUpdateGradStatus: "allowUpdateGradStatus",
+      allowUpdateRecalcFlags: "allowUpdateRecalcFlags",
     }),
     studentGradeChange() {
       return this.editedGradStatus.studentGrade;
@@ -862,6 +885,10 @@ export default {
         { text: "Y", value: "Y" },
         { text: "N", value: "N" },
       ],
+      recalcFlags: [
+        { text: "Y", value: "Y" },
+        { text: "null", value: null },
+      ],
       programsWithExpiry: [
         "1986-EN",
         "1996-EN",
@@ -1312,6 +1339,16 @@ export default {
         "consumerEducationRequirementMet",
         this.studentGradStatus.consumerEducationRequirementMet
       );
+      this.$set(
+        this.editedGradStatus,
+        "recalculateGradStatus",
+        this.studentGradStatus.recalculateGradStatus
+      );
+      this.$set(
+        this.editedGradStatus,
+        "recalculateProjectedGrad",
+        this.studentGradStatus.recalculateProjectedGrad
+      );
       this.validateFields();
     },
 
diff --git a/frontend/src/store/modules/access.js b/frontend/src/store/modules/access.js
index 07edda0d..f4b48ada 100644
--- a/frontend/src/store/modules/access.js
+++ b/frontend/src/store/modules/access.js
@@ -1,8 +1,8 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
 import ApiService from "@/common/apiService";
 import { Routes, Roles } from "@/utils/constants";
 
-export const useAccessStore = defineStore('access',{
+export const useAccessStore = defineStore("access", {
   namespaced: true,
   state: () => ({
     userAccess: "",
@@ -58,17 +58,20 @@ export const useAccessStore = defineStore('access',{
     allowToggleRoutines: (state) => {
       return state.roles.includes(Roles.GRAD_SYSTEM_COORDINATOR);
     },
+    allowUpdateRecalcFlags: (state) => {
+      return state.roles.includes(Roles.GRAD_SYSTEM_COORDINATOR);
+    },
   },
 
   actions: {
-    setUserAccess(userAccess){
+    setUserAccess(userAccess) {
       if (userAccess) {
         this.userAccess = userAccess;
       } else {
         this.userAccess = null;
       }
     },
-    setUserRoles(role){
+    setUserRoles(role) {
       if (role) {
         this.roles = role;
       } else {
@@ -76,20 +79,19 @@ export const useAccessStore = defineStore('access',{
       }
     },
     //sets the token required for refreshing expired json web tokens
-    logoutState(){
+    logoutState() {
       localStorage.removeItem("jwtToken");
       this.userAccess = null;
       this.isAuthenticated = false;
     },
 
     async setAccess() {
-      
       if (localStorage.getItem("jwtToken")) {
         await ApiService.apiAxios
           .get(Routes.USER)
           .then((response) => {
-            this.setUserAccess(response.data.userAccess)
-            this.setUserRoles(response.data.userRoles)
+            this.setUserAccess(response.data.userAccess);
+            this.setUserRoles(response.data.userRoles);
           })
           .catch((e) => {
             throw e;