diff --git a/.gitignore b/.gitignore
index 4ba8a05..7207111 100644
--- a/.gitignore
+++ b/.gitignore
@@ -89,7 +89,6 @@ out
 
 # Nuxt.js build / generate output
 .nuxt
-dist
 
 # Gatsby files
 .cache/
@@ -131,3 +130,4 @@ dist
 
 # Miscellaneous
 .DS_Store
+.vercel
diff --git a/backend/__tests__/exampleTest.test.ts b/backend/__tests__/exampleTest.test.ts
deleted file mode 100644
index ee5dd0a..0000000
--- a/backend/__tests__/exampleTest.test.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { MongoClient } from "mongodb";
-import { MongoMemoryServer } from "mongodb-memory-server";
-import mongoose from "mongoose";
-import request from "supertest";
-
-import app from "src/app";
-
-const TEST_DB_NAME = "test";
-
-let client: MongoClient, memoryServer: MongoMemoryServer;
-
-/**
- * This hook runs once, before all our tests are run. In this function, we
- * set up a Mongo memory server, which emulates MongoDB by storing data in memory, to
- * make it faster to run tests using the database. This allows our backend code to interface
- * with MongoDB like normal, but all its actions will go to our test database.
- */
-beforeAll(async () => {
-  // Create Mongo memory server
-  memoryServer = await MongoMemoryServer.create({
-    instance: {
-      dbName: TEST_DB_NAME,
-    },
-  });
-
-  // Get URI of memory server
-  const testMongoUri = memoryServer.getUri();
-
-  /**
-   * Connect to memory server, so that we can drop data between tests
-   * in the "afterEach" hook
-   */
-  client = await MongoClient.connect(testMongoUri);
-
-  /**
-   * Connect Mongoose to memory server, so we can use Mongoose like normal
-   * in our backend code that we are testing
-   */
-  await mongoose.connect(testMongoUri);
-});
-
-/**
- * This hook runs after each test in our suite. We use this function to drop all data
- * from our testing MongoDB database, so that the database will be fresh and empty for each test.
- *
- * We may also want a "beforeEach" hook in the future, to insert some example data into
- * the testing MongoDB database before each of our tests, so that we have some data to run tests on.
- */
-afterEach(async () => {
-  // Drop all data from test database
-  await client.db(TEST_DB_NAME).dropDatabase();
-});
-
-/**
- * This hook runs once, after all tests in the suite are done. We use this function
- * to close connections to the MongoDB memory database and clean up any other resources.
- */
-afterAll(async () => {
-  await client.close(true);
-  await memoryServer.stop();
-  await mongoose.disconnect();
-});
-
-describe("Backend Example Tests", () => {
-  it("Throws 404 on GET /", async () => {
-    /**
-     * Since we don't have any routes yet, our Express server should return
-     * a "404 Not Found" response on any URL we request
-     */
-    const res = await request(app).get("/");
-    expect(res.header["content-type"]).toBe("text/html; charset=utf-8");
-    expect(res.statusCode).toBe(404);
-  });
-});
diff --git a/backend/__tests__/furnitureItemTest.test.ts b/backend/__tests__/furnitureItemTest.test.ts
new file mode 100644
index 0000000..28f6067
--- /dev/null
+++ b/backend/__tests__/furnitureItemTest.test.ts
@@ -0,0 +1,49 @@
+import request from "supertest";
+
+import app from "src/app";
+import { mongoMemoryHooks } from "src/tests/testUtils";
+import FurnitureItemModel from "src/models/furnitureItem";
+
+describe("Furniture Item Tests", () => {
+  mongoMemoryHooks();
+
+  it("GET api/furnitureItems returns all available furniture items", async () => {
+    // Create a few testing furniture items and ensure they can be retrieved
+    await FurnitureItemModel.create(
+      {
+        category: "Bedroom",
+        name: "Table",
+        allowMultiple: false,
+        categoryIndex: 1,
+      },
+      {
+        category: "Bedroom",
+        name: "Rug",
+        allowMultiple: false,
+        categoryIndex: 2,
+      },
+      {
+        category: "Bathroom",
+        name: "Wash Cloth(s)",
+        allowMultiple: true,
+        categoryIndex: 2,
+      },
+      {
+        category: "Bathroom",
+        name: "Towel(s)",
+        allowMultiple: true,
+        categoryIndex: 1,
+      },
+    );
+
+    const res = await request(app).get("/api/furnitureItems");
+    expect(res.statusCode).toBe(200);
+    expect(res.body.length).toBe(4);
+
+    // Should be ordered by allowMultiple (desc), then categoryIndex (asc)
+    expect(res.body[0].name).toBe("Towel(s)");
+    expect(res.body[1].name).toBe("Wash Cloth(s)");
+    expect(res.body[2].name).toBe("Table");
+    expect(res.body[3].name).toBe("Rug");
+  });
+});
diff --git a/backend/__tests__/userTest.test.ts b/backend/__tests__/userTest.test.ts
new file mode 100644
index 0000000..9d2b672
--- /dev/null
+++ b/backend/__tests__/userTest.test.ts
@@ -0,0 +1,40 @@
+import request from "supertest";
+
+import app from "src/app";
+import { getTestUserToken, mongoMemoryHooks } from "src/tests/testUtils";
+import UserModel, { UserRole } from "src/models/user";
+import { firebaseAuth } from "src/services/firebase";
+import env from "src/util/validateEnv";
+
+describe("User Tests", () => {
+  mongoMemoryHooks();
+
+  it("GET /api/user/whoami returns 401 when no token is provided", async () => {
+    const res = await request(app).get("/api/user/whoami");
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET /api/user/whoami returns 401 when an invalid token is provided", async () => {
+    const res = await request(app)
+      .get("/api/user/whoami")
+      .set("Authorization", "Bearer invalidtoken");
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET /api/user/whoami returns current user when a valid token is provided", async () => {
+    const userInfo = await firebaseAuth.getUserByEmail(env.EMAIL_USER);
+    const testUser = await UserModel.create({
+      role: UserRole.STAFF,
+      uid: userInfo.uid,
+    });
+    const testToken = await getTestUserToken();
+
+    const res = await request(app)
+      .get("/api/user/whoami")
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(200);
+    expect(res.body.uid).toBe(userInfo.uid);
+    expect(res.body.role).toBe(UserRole.STAFF);
+    expect(res.body._id).toBe(testUser._id.toString());
+  });
+});
diff --git a/backend/__tests__/vsrTest.test.ts b/backend/__tests__/vsrTest.test.ts
new file mode 100644
index 0000000..ad85067
--- /dev/null
+++ b/backend/__tests__/vsrTest.test.ts
@@ -0,0 +1,360 @@
+import request from "supertest";
+
+import app from "src/app";
+import { getTestUserInfo, getTestUserToken, mongoMemoryHooks } from "src/tests/testUtils";
+import UserModel, { UserRole } from "src/models/user";
+import VSRModel from "src/models/vsr";
+
+describe("VSR Tests", () => {
+  mongoMemoryHooks();
+
+  const vsrTestData = {
+    name: "Test Veteran 1",
+    gender: "Female",
+    age: "54",
+    maritalStatus: "Single",
+    agesOfBoys: [10],
+    agesOfGirls: [11, 12],
+    ethnicity: ["Caucasian"],
+    employmentStatus: "Employed",
+    incomeLevel: "$12,500 - $25,000",
+    sizeOfHome: "House",
+    streetAddress: "1111 TSE Lane",
+    city: "La Jolla",
+    state: "CA",
+    zipCode: "11245",
+    phoneNumber: "1112224444",
+    email: "tsepapdev@gmail.com",
+    branch: ["Air Force", "Navy"],
+    conflicts: ["WWII", "Irani Crisis"],
+    dischargeStatus: "dischargeStatus-1",
+    serviceConnected: false,
+    lastRank: "E-5",
+    militaryID: 9999,
+    petCompanion: true,
+    hearFrom: "Family-1",
+    selectedFurnitureItems: [],
+  };
+
+  const createTestVSR = async () => {
+    const currentDate = new Date();
+
+    return await VSRModel.create({
+      ...vsrTestData,
+      dateReceived: currentDate,
+      lastUpdated: currentDate,
+
+      status: "Received",
+    });
+  };
+
+  const signInAsRole = async (role: UserRole) => {
+    const testUserInfo = await getTestUserInfo();
+    const testUser = await UserModel.create({
+      role,
+      uid: testUserInfo.uid,
+    });
+
+    return { testUser, testToken: await getTestUserToken() };
+  };
+
+  it("POST /api/vsr creates a new VSR", async () => {
+    const res = await request(app)
+      .post("/api/vsr")
+      .send(vsrTestData)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(201);
+
+    // Ensure that VSR was actually created in the DB
+    const allVsrs = await VSRModel.find();
+    expect(allVsrs.length).toBe(1);
+  });
+
+  it("GET /api/vsr requires user to be signed in", async () => {
+    const res = await request(app).get("/api/vsr");
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET /api/vsr returns all submitted VSRs to staff", async () => {
+    await Promise.all(Array(3).fill(null).map(createTestVSR));
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app).get("/api/vsr").set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(200);
+    expect(res.body.vsrs.length).toBe(3);
+    expect(res.body.vsrs[0].name).toBe("Test Veteran 1");
+  });
+
+  it("GET /api/vsr returns all submitted VSRs to admin", async () => {
+    await Promise.all(Array(3).fill(null).map(createTestVSR));
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app).get("/api/vsr").set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(200);
+    expect(res.body.vsrs.length).toBe(3);
+    expect(res.body.vsrs[0].name).toBe("Test Veteran 1");
+  });
+
+  it("GET /api/vsr/:id requires user to be signed in", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const res = await request(app).get(`/api/vsr/${vsrId}`);
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET /api/vsr/:id returns 404 for invalid VSR id", async () => {
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    // We can use any Object ID here because no VSRs have been created yet
+    const res = await request(app)
+      .get("/api/vsr/65bc31561826f0d6ee2c4b21")
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(404);
+  });
+
+  it("GET /api/vsr/:id returns a single VSR to staff", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app)
+      .get(`/api/vsr/${vsrId}`)
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(200);
+    expect(res.body.name).toBe("Test Veteran 1");
+    expect(res.body.status).toBe("Received");
+    expect(res.body._id).toBe(vsrId.toString());
+  });
+
+  it("GET /api/vsr/:id returns a single VSR to admin", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .get(`/api/vsr/${vsrId}`)
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(200);
+    expect(res.body.name).toBe("Test Veteran 1");
+    expect(res.body.status).toBe("Received");
+    expect(res.body._id).toBe(vsrId.toString());
+  });
+
+  it("DELETE /api/vsr/:id requires user to be signed in", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const res = await request(app).delete(`/api/vsr/${vsrId}`);
+    expect(res.statusCode).toBe(401);
+
+    // Ensure that VSR was not deleted from the DB
+    const allVsrs = await VSRModel.find();
+    expect(allVsrs.length).toBe(1);
+  });
+
+  it("DELETE /api/vsr/:id returns permission denied to non-admin user", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app)
+      .delete(`/api/vsr/${vsrId}`)
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(403);
+
+    // Ensure that VSR was not deleted from the DB
+    const allVsrs = await VSRModel.find();
+    expect(allVsrs.length).toBe(1);
+  });
+
+  it("DELETE /api/vsr/:id returns 404 for invalid VSR id", async () => {
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .delete("/api/vsr/65bc31561826f0d6ee2c4b21")
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(404);
+  });
+
+  it("DELETE /api/vsr/:id successfully deletes valid VSR", async () => {
+    await Promise.all(Array(3).fill(null).map(createTestVSR));
+    const allVsrs = await VSRModel.find();
+    const vsrId = allVsrs[0]._id;
+
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .delete(`/api/vsr/${vsrId}`)
+      .set("Authorization", `Bearer ${testToken}`);
+    expect(res.statusCode).toBe(204);
+
+    // Ensure that VSR was deleted from the DB
+    const newAllVsrs = await VSRModel.find();
+    expect(newAllVsrs.length).toBe(2);
+
+    const deletedVsr = await VSRModel.findById(vsrId);
+    expect(deletedVsr).toBeNull();
+  });
+
+  it("PATCH /api/vsr/:id/status requires user to be signed in", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const res = await request(app)
+      .patch(`/api/vsr/${vsrId}/status`)
+      .send({ status: "Approved" })
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(401);
+
+    // Ensure that VSR status in DB was not changed
+    const vsr = await VSRModel.findById(vsrId);
+    expect(vsr).not.toBeNull();
+    expect(vsr!.status).toBe("Received");
+  });
+
+  it("PATCH /api/vsr/:id/status returns 404 for invalid VSR id", async () => {
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .patch("/api/vsr/65bc31561826f0d6ee2c4b21/status")
+      .send({ status: "Approved" })
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(404);
+  });
+
+  it("PATCH /api/vsr/:id/status throws 400 when status is missing", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .patch(`/api/vsr/${vsrId}/status`)
+      .send({})
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(400);
+
+    // Ensure that VSR status in DB was not changed
+    const vsr = await VSRModel.findById(vsrId);
+    expect(vsr).not.toBeNull();
+    expect(vsr!.status).toBe("Received");
+  });
+
+  it("PATCH /api/vsr/:id/status successfully updates VSR status", async () => {
+    await Promise.all(Array(3).fill(null).map(createTestVSR));
+    const allVsrs = await VSRModel.find();
+    const vsrId = allVsrs[0]._id;
+
+    const { testToken } = await signInAsRole(UserRole.ADMIN);
+
+    const res = await request(app)
+      .patch(`/api/vsr/${vsrId}/status`)
+      .send({ status: "Approved" })
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(200);
+
+    // Ensure that the correct VSR's status was updated
+    const newAllVsrs = await VSRModel.find();
+    expect(newAllVsrs.length).toBe(3);
+
+    for (const vsr of newAllVsrs) {
+      if (vsr._id.toString() === vsrId.toString()) {
+        expect(vsr.status).toBe("Approved");
+      } else {
+        expect(vsr.status).toBe("Received");
+      }
+    }
+  });
+
+  it("PUT /api/vsr/:id requires user to be signed in", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const res = await request(app)
+      .put(`/api/vsr/${vsrId}`)
+      .send({
+        ...vsrTestData,
+        name: "Updated name",
+        email: "updatedemail@gmail.com",
+      })
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(401);
+
+    // Ensure that VSR in DB was not updated
+    const currentVsr = await VSRModel.findById(vsrId);
+    expect(currentVsr).not.toBeNull();
+    expect(currentVsr!.name).toBe("Test Veteran 1");
+    expect(currentVsr!.email).toBe("tsepapdev@gmail.com");
+  });
+
+  it("PUT /api/vsr/:id returns 404 for invalid VSR id", async () => {
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app)
+      .put("/api/vsr/65bc31561826f0d6ee2c4b21")
+      .send({
+        ...vsrTestData,
+        name: "Updated name",
+        email: "updatedemail@gmail.com",
+      })
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(404);
+  });
+
+  it("PUT /api/vsr/:id throws 400 when required fields are missing", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app)
+      .put(`/api/vsr/${vsrId}`)
+      .send({
+        name: "Updated name",
+        email: "updatedemail@gmail.com",
+      })
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(400);
+
+    // Ensure that VSR in DB was not updated
+    const currentVsr = await VSRModel.findById(vsrId);
+    expect(currentVsr).not.toBeNull();
+    expect(currentVsr!.name).toBe("Test Veteran 1");
+    expect(currentVsr!.email).toBe("tsepapdev@gmail.com");
+  });
+
+  it("PUT /api/vsr/:id successfully updates VSR data", async () => {
+    const testVsr = await createTestVSR();
+    const vsrId = testVsr._id;
+
+    const { testToken } = await signInAsRole(UserRole.STAFF);
+
+    const res = await request(app)
+      .put(`/api/vsr/${vsrId}`)
+      .send({
+        ...vsrTestData,
+        name: "Updated name",
+        email: "updatedemail@gmail.com",
+      })
+      .set("Authorization", `Bearer ${testToken}`)
+      .set("Content-Type", "application/json");
+    expect(res.statusCode).toBe(200);
+
+    // Ensure that VSR in DB was updated
+    const currentVsr = await VSRModel.findById(vsrId);
+    expect(currentVsr).not.toBeNull();
+    expect(currentVsr!.name).toBe("Updated name");
+    expect(currentVsr!.email).toBe("updatedemail@gmail.com");
+  });
+});
diff --git a/backend/dist/public/pap_logo.png b/backend/dist/public/pap_logo.png
new file mode 100644
index 0000000..4a2c8db
Binary files /dev/null and b/backend/dist/public/pap_logo.png differ
diff --git a/backend/dist/src/app.js b/backend/dist/src/app.js
new file mode 100644
index 0000000..60fbd48
--- /dev/null
+++ b/backend/dist/src/app.js
@@ -0,0 +1,53 @@
+"use strict";
+/**
+ * Defines server and middleware.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("dotenv/config");
+const cors_1 = __importDefault(require("cors"));
+const express_1 = __importDefault(require("express"));
+const http_errors_1 = require("http-errors");
+const vsr_1 = __importDefault(require("./routes/vsr"));
+const furnitureItem_1 = __importDefault(require("./routes/furnitureItem"));
+const user_1 = __importDefault(require("./routes/user"));
+const validateEnv_1 = __importDefault(require("./util/validateEnv"));
+const app = (0, express_1.default)();
+// initializes Express to accept JSON in the request/response body
+app.use(express_1.default.json());
+// sets the "Access-Control-Allow-Origin" header on all responses to allow
+// requests from the frontend, which has a different origin - see the following
+// pages for more info:
+// https://expressjs.com/en/resources/middleware/cors.html
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
+app.use((0, cors_1.default)({
+    origin: validateEnv_1.default.FRONTEND_ORIGIN,
+}));
+// Put routes here (e.g. app.use("/api/example", exampleRoutes); )
+app.use("/api/user", user_1.default);
+app.use("/api/vsr", vsr_1.default);
+app.use("/api/furnitureItems", furnitureItem_1.default);
+/**
+ * Error handler; all errors thrown by server are handled here.
+ * Explicit typings required here because TypeScript cannot infer the argument types.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+app.use((error, req, res, next) => {
+    // 500 is the "internal server error" error code, this will be our fallback
+    let statusCode = 500;
+    let errorMessage = "An error has occurred.";
+    // check is necessary because anything can be thrown, type is not guaranteed
+    if ((0, http_errors_1.isHttpError)(error)) {
+        // error.status is unique to the http error class, it allows us to pass status codes with errors
+        statusCode = error.status;
+        errorMessage = error.message;
+    }
+    // prefer custom http errors but if they don't exist, fallback to default
+    else if (error instanceof Error) {
+        errorMessage = error.message;
+    }
+    res.status(statusCode).json({ error: errorMessage });
+});
+exports.default = app;
diff --git a/backend/dist/src/controllers/furnitureItem.js b/backend/dist/src/controllers/furnitureItem.js
new file mode 100644
index 0000000..a987b0d
--- /dev/null
+++ b/backend/dist/src/controllers/furnitureItem.js
@@ -0,0 +1,34 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFurnitureItems = void 0;
+const furnitureItem_1 = __importDefault(require("../models/furnitureItem"));
+/**
+ * Gets all available furniture items in the database. Does not require authentication.
+ */
+const getFurnitureItems = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const furnitureItems = yield furnitureItem_1.default.find().sort({
+            // First, sort the items by whether they allow multiple (true before false)
+            allowMultiple: -1,
+            // Second, sort by category index (ascending)
+            categoryIndex: 1,
+        });
+        res.status(200).json(furnitureItems);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.getFurnitureItems = getFurnitureItems;
diff --git a/backend/dist/src/controllers/user.js b/backend/dist/src/controllers/user.js
new file mode 100644
index 0000000..8138ae5
--- /dev/null
+++ b/backend/dist/src/controllers/user.js
@@ -0,0 +1,36 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWhoAmI = void 0;
+const user_1 = __importDefault(require("../models/user"));
+/**
+ * Retrieves data about the current user (their MongoDB ID, Firebase UID, and role).
+ * Requires the user to be signed in.
+ */
+const getWhoAmI = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { userUid } = req;
+        const user = yield user_1.default.findOne({ uid: userUid });
+        const { _id, uid, role } = user;
+        res.status(200).send({
+            _id,
+            uid,
+            role,
+        });
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.getWhoAmI = getWhoAmI;
diff --git a/backend/dist/src/controllers/vsr.js b/backend/dist/src/controllers/vsr.js
new file mode 100644
index 0000000..10b0625
--- /dev/null
+++ b/backend/dist/src/controllers/vsr.js
@@ -0,0 +1,144 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteVSR = exports.updateVSR = exports.updateStatus = exports.createVSR = exports.getVSR = exports.getAllVSRS = void 0;
+const express_validator_1 = require("express-validator");
+const http_errors_1 = __importDefault(require("http-errors"));
+const vsr_1 = __importDefault(require("../models/vsr"));
+const emails_1 = require("../services/emails");
+const validationErrorParser_1 = __importDefault(require("../util/validationErrorParser"));
+/**
+ * Gets all VSRs in the database. Requires the user to be signed in and have
+ * staff or admin permission.
+ */
+const getAllVSRS = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const vsrs = yield vsr_1.default.find();
+        res.status(200).json({ vsrs });
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.getAllVSRS = getAllVSRS;
+/**
+ * Retrieves a single VSR by its ID. Requires the user to get signed in and have
+ * staff or admin permission.
+ */
+const getVSR = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const { id } = req.params;
+    try {
+        const vsr = yield vsr_1.default.findById(id);
+        if (vsr === null) {
+            throw (0, http_errors_1.default)(404, "VSR not found at id " + id);
+        }
+        res.status(200).json(vsr);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.getVSR = getVSR;
+/**
+ * Creates a new VSR in the database, called when a veteran submits the VSR form.
+ * Does not require authentication.
+ */
+const createVSR = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    // Extract any errors that were found by the validator
+    const errors = (0, express_validator_1.validationResult)(req);
+    try {
+        // if there are errors, then this function throws an exception
+        (0, validationErrorParser_1.default)(errors);
+        // Get the current date as a timestamp for when VSR was submitted
+        const currentDate = new Date();
+        const vsr = yield vsr_1.default.create(Object.assign(Object.assign({}, req.body), { 
+            // Use current date as timestamp for received & updated
+            dateReceived: currentDate, lastUpdated: currentDate, status: "Received" }));
+        // Once the VSR is created successfully, send notification & confirmation emails
+        (0, emails_1.sendVSRNotificationEmailToStaff)(req.body.name, req.body.email, vsr._id.toString());
+        (0, emails_1.sendVSRConfirmationEmailToVeteran)(req.body.name, req.body.email);
+        // 201 means a new resource has been created successfully
+        // the newly created VSR is sent back to the user
+        res.status(201).json(vsr);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.createVSR = createVSR;
+/**
+ * Updates a VSR's status, by its ID. Requires the user to be signed in and
+ * have staff or admin permission.
+ */
+const updateStatus = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        // extract any errors that were found by the validator
+        const errors = (0, express_validator_1.validationResult)(req);
+        const { status } = req.body;
+        // if there are errors, then this function throws an exception
+        (0, validationErrorParser_1.default)(errors);
+        // Get the current date as a timestamp for when VSR was updated
+        const currentDate = new Date();
+        const { id } = req.params;
+        const vsr = yield vsr_1.default.findByIdAndUpdate(id, { status, lastUpdated: currentDate }, { new: true });
+        if (vsr === null) {
+            throw (0, http_errors_1.default)(404, "VSR not found at id " + id);
+        }
+        res.status(200).json(vsr);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.updateStatus = updateStatus;
+/**
+ * Updates a VSR's data, by its ID. Requires the user to be signed in and
+ * have staff or admin permission.
+ */
+const updateVSR = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const errors = (0, express_validator_1.validationResult)(req);
+    try {
+        const { id } = req.params;
+        // Get the current date as a timestamp for when VSR was updated
+        const currentDate = new Date();
+        (0, validationErrorParser_1.default)(errors);
+        const updatedVSR = yield vsr_1.default.findByIdAndUpdate(id, Object.assign(Object.assign({}, req.body), { lastUpdated: currentDate }), { new: true });
+        if (updatedVSR === null) {
+            throw (0, http_errors_1.default)(404, "VSR not found at id " + id);
+        }
+        res.status(200).json(updatedVSR);
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.updateVSR = updateVSR;
+/**
+ * Deletes a VSR from the database, by its ID. Requires the user to be signed in
+ * and have admin permission.
+ */
+const deleteVSR = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { id } = req.params;
+        const deletedVsr = yield vsr_1.default.findByIdAndDelete(id);
+        if (deletedVsr === null) {
+            throw (0, http_errors_1.default)(404, "VSR not found at id " + id);
+        }
+        return res.status(204).send();
+    }
+    catch (error) {
+        next(error);
+    }
+});
+exports.deleteVSR = deleteVSR;
diff --git a/backend/dist/src/errors/auth.js b/backend/dist/src/errors/auth.js
new file mode 100644
index 0000000..f8b975e
--- /dev/null
+++ b/backend/dist/src/errors/auth.js
@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthError = void 0;
+const errors_1 = require("../errors/errors");
+const DECODE_ERROR = "Error in decoding the auth token. Make sure the auth token is valid";
+const TOKEN_NOT_IN_HEADER = "Token was not found in header. Be sure to use Bearer <Token> syntax";
+const INVALID_AUTH_TOKEN = "Token was invalid.";
+const USER_NOT_FOUND = "User not found";
+const NOT_STAFF_OR_ADMIN = "User must be a staff/admin.";
+const NOT_ADMIN = "User must be an admin.";
+/**
+ * List of authentication-related errors that may be thrown by our backend.
+ */
+class AuthError extends errors_1.CustomError {
+}
+exports.AuthError = AuthError;
+AuthError.DECODE_ERROR = new AuthError(0, 401, DECODE_ERROR);
+AuthError.TOKEN_NOT_IN_HEADER = new AuthError(1, 401, TOKEN_NOT_IN_HEADER);
+AuthError.INVALID_AUTH_TOKEN = new AuthError(2, 401, INVALID_AUTH_TOKEN);
+AuthError.USER_NOT_FOUND = new AuthError(3, 401, USER_NOT_FOUND);
+AuthError.NOT_STAFF_OR_ADMIN = new AuthError(4, 403, NOT_STAFF_OR_ADMIN);
+AuthError.NOT_ADMIN = new AuthError(5, 403, NOT_ADMIN);
diff --git a/backend/dist/src/errors/errors.js b/backend/dist/src/errors/errors.js
new file mode 100644
index 0000000..b8349a6
--- /dev/null
+++ b/backend/dist/src/errors/errors.js
@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomError = void 0;
+/**
+ * Class for a custom error object sent from our backend.
+ */
+class CustomError extends Error {
+    constructor(code, status, message) {
+        super(message);
+        this.code = code;
+        this.status = status;
+        this.message = message;
+        this.context = [];
+    }
+    displayMessage(clientFacing) {
+        if (clientFacing) {
+            return `${this.message}`;
+        }
+        return `Error: Type ${this.constructor.name}, Code ${this.code}, Context: ${this.context.length ? "\n" + this.context.join("\n\n") : null}`;
+    }
+}
+exports.CustomError = CustomError;
diff --git a/backend/dist/src/errors/internal.js b/backend/dist/src/errors/internal.js
new file mode 100644
index 0000000..00c0112
--- /dev/null
+++ b/backend/dist/src/errors/internal.js
@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalError = void 0;
+const errors_1 = require("../errors/errors");
+const NO_SERVICE_ACCOUNT_KEY = "Could not find service account key env variable";
+/**
+ * List of internal errors that can be thrown by our backend if something goes wrong.
+ */
+class InternalError extends errors_1.CustomError {
+}
+exports.InternalError = InternalError;
+InternalError.NO_SERVICE_ACCOUNT_KEY = new InternalError(0, 500, NO_SERVICE_ACCOUNT_KEY);
diff --git a/backend/dist/src/errors/service.js b/backend/dist/src/errors/service.js
new file mode 100644
index 0000000..e4346df
--- /dev/null
+++ b/backend/dist/src/errors/service.js
@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceError = void 0;
+const errors_1 = require("../errors/errors");
+const INVALID_MONGO_ID = "User ID is not a valid MONGO ID";
+const USER_NOT_FOUND = "User not found in mongo database";
+/**
+ * List of errors that can be thrown by our backend services.
+ */
+class ServiceError extends errors_1.CustomError {
+}
+exports.ServiceError = ServiceError;
+ServiceError.INVALID_MONGO_ID = new ServiceError(0, 401, INVALID_MONGO_ID);
+ServiceError.USER_NOT_FOUND = new ServiceError(1, 401, USER_NOT_FOUND);
diff --git a/backend/dist/src/middleware/auth.js b/backend/dist/src/middleware/auth.js
new file mode 100644
index 0000000..478b5f0
--- /dev/null
+++ b/backend/dist/src/middleware/auth.js
@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireAdmin = exports.requireStaffOrAdmin = exports.requireSignedIn = void 0;
+const auth_1 = require("../services/auth");
+const auth_2 = require("../errors/auth");
+const user_1 = __importStar(require("../models/user"));
+/**
+ * A middleware that requires the user to be signed in and have a valid Firebase token
+ * in the "Authorization" header
+ */
+const requireSignedIn = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const authHeader = req.headers.authorization;
+    // Token shoud be "Bearer: <token>"
+    const token = authHeader === null || authHeader === void 0 ? void 0 : authHeader.split("Bearer ")[1];
+    if (!token) {
+        return res
+            .status(auth_2.AuthError.TOKEN_NOT_IN_HEADER.status)
+            .send(auth_2.AuthError.TOKEN_NOT_IN_HEADER.displayMessage(true));
+    }
+    let userInfo;
+    try {
+        userInfo = yield (0, auth_1.decodeAuthToken)(token);
+    }
+    catch (e) {
+        return res
+            .status(auth_2.AuthError.INVALID_AUTH_TOKEN.status)
+            .send(auth_2.AuthError.INVALID_AUTH_TOKEN.displayMessage(true));
+    }
+    if (userInfo) {
+        req.userUid = userInfo.uid;
+        const user = yield user_1.default.findOne({ uid: userInfo.uid });
+        if (!user) {
+            return res
+                .status(auth_2.AuthError.USER_NOT_FOUND.status)
+                .send(auth_2.AuthError.USER_NOT_FOUND.displayMessage(true));
+        }
+        return next();
+    }
+    return res.status(auth_2.AuthError.INVALID_AUTH_TOKEN.status).send(auth_2.AuthError.INVALID_AUTH_TOKEN.message);
+});
+exports.requireSignedIn = requireSignedIn;
+/**
+ * A middleware that requires the user to have either the staff or admin role
+ */
+const requireStaffOrAdmin = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const { userUid } = req;
+    const user = yield user_1.default.findOne({ uid: userUid });
+    if (!user || ![user_1.UserRole.STAFF, user_1.UserRole.ADMIN].includes(user.role)) {
+        return res
+            .status(auth_2.AuthError.NOT_STAFF_OR_ADMIN.status)
+            .send(auth_2.AuthError.NOT_STAFF_OR_ADMIN.displayMessage(true));
+    }
+    return next();
+});
+exports.requireStaffOrAdmin = requireStaffOrAdmin;
+/**
+ * A middleware that requires the user to have the admin role
+ */
+const requireAdmin = (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+    const { userUid } = req;
+    const user = yield user_1.default.findOne({ uid: userUid });
+    if (!user || user.role !== user_1.UserRole.ADMIN) {
+        return res.status(auth_2.AuthError.NOT_ADMIN.status).send(auth_2.AuthError.NOT_ADMIN.displayMessage(true));
+    }
+    return next();
+});
+exports.requireAdmin = requireAdmin;
diff --git a/backend/dist/src/models/furnitureItem.js b/backend/dist/src/models/furnitureItem.js
new file mode 100644
index 0000000..f4847a5
--- /dev/null
+++ b/backend/dist/src/models/furnitureItem.js
@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mongoose_1 = require("mongoose");
+/**
+ * A model for a furniture item that veterans can request on the VSR form.
+ */
+const furnitureItemSchema = new mongoose_1.Schema({
+    // Category for the item (e.g. bedroom, bathroom)
+    category: { type: String, required: true },
+    // Name of the item (e.g. Rug, Bed)
+    name: { type: String, required: true },
+    // Whether to allow veterans to request multiple of the item (if true) or just 1 (if false)
+    allowMultiple: { type: Boolean, required: true },
+    // Index of the item within its category, used to display items in a deterministic order on the VSR form
+    categoryIndex: { type: Number, required: true },
+});
+exports.default = (0, mongoose_1.model)("FurnitureItem", furnitureItemSchema);
diff --git a/backend/dist/src/models/user.js b/backend/dist/src/models/user.js
new file mode 100644
index 0000000..bf0a604
--- /dev/null
+++ b/backend/dist/src/models/user.js
@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserRole = void 0;
+const mongoose_1 = require("mongoose");
+/**
+ * A model for a user of our application.
+ */
+const userSchema = new mongoose_1.Schema({
+    // The user's role (either staff or admin)
+    role: {
+        type: String,
+        required: true,
+    },
+    // The user's Firebase UID (used to relate the MongoDB user to the Firebas user)
+    uid: {
+        type: String,
+        required: true,
+    },
+});
+var UserRole;
+(function (UserRole) {
+    /**
+     * For some reason we are getting ESLint errors about these vars not being used,
+     * even though they are used in other files. Disable these ESLint errors.
+     */
+    // eslint-disable-next-line no-unused-vars
+    UserRole["STAFF"] = "staff";
+    // eslint-disable-next-line no-unused-vars
+    UserRole["ADMIN"] = "admin";
+})(UserRole || (exports.UserRole = UserRole = {}));
+exports.default = (0, mongoose_1.model)("User", userSchema);
diff --git a/backend/dist/src/models/vsr.js b/backend/dist/src/models/vsr.js
new file mode 100644
index 0000000..5177886
--- /dev/null
+++ b/backend/dist/src/models/vsr.js
@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mongoose_1 = require("mongoose");
+/**
+ * A schema for a single furniture item that a veteran can request
+ */
+const furntitureInputSchema = new mongoose_1.Schema({
+    // ID of the furniture item being required (Object ID for an instance of the furniture item model)
+    furnitureItemId: { type: String, required: true },
+    // Quantity being requested by this veteran
+    quantity: { type: Number, required: true },
+});
+/**
+ * A model for a VSR (veteran service request), submitted by a veteran to request
+ * furniture items from PAP.
+ */
+const vsrSchema = new mongoose_1.Schema({
+    /** Page 1 of VSR */
+    name: { type: String, required: true },
+    gender: { type: String, required: true },
+    age: { type: Number, required: true },
+    maritalStatus: { type: String, required: true },
+    spouseName: { type: String },
+    agesOfBoys: { type: [Number] },
+    agesOfGirls: { type: [Number] },
+    ethnicity: { type: [String], required: true },
+    employmentStatus: { type: String, required: true },
+    incomeLevel: { type: String, required: true },
+    sizeOfHome: { type: String, required: true },
+    /** Page 2 of VSR */
+    streetAddress: { type: String, required: true },
+    city: { type: String, required: true },
+    state: { type: String, required: true },
+    zipCode: { type: Number, required: true },
+    phoneNumber: { type: String, required: true },
+    email: { type: String, required: true },
+    branch: { type: [String], required: true },
+    conflicts: { type: [String], required: true },
+    dischargeStatus: { type: String, required: true },
+    serviceConnected: { type: Boolean, required: true },
+    lastRank: { type: String, required: true },
+    militaryID: { type: Number, required: true },
+    petCompanion: { type: Boolean, required: true },
+    hearFrom: { type: String, required: true },
+    /** Page 3 of VSR */
+    selectedFurnitureItems: { type: [furntitureInputSchema], required: true },
+    additionalItems: { type: String, required: false },
+    /** Fields that are created/updated automatically or on staff side */
+    dateReceived: { type: Date, required: true },
+    lastUpdated: { type: Date, required: true },
+    status: { type: String, required: true },
+});
+exports.default = (0, mongoose_1.model)("VSR", vsrSchema);
diff --git a/backend/dist/src/routes/furnitureItem.js b/backend/dist/src/routes/furnitureItem.js
new file mode 100644
index 0000000..26300a8
--- /dev/null
+++ b/backend/dist/src/routes/furnitureItem.js
@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const FurnitureItemController = __importStar(require("../controllers/furnitureItem"));
+const router = express_1.default.Router();
+router.get("/", FurnitureItemController.getFurnitureItems);
+exports.default = router;
diff --git a/backend/dist/src/routes/user.js b/backend/dist/src/routes/user.js
new file mode 100644
index 0000000..899285e
--- /dev/null
+++ b/backend/dist/src/routes/user.js
@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const auth_1 = require("../middleware/auth");
+const UserController = __importStar(require("../controllers/user"));
+const router = express_1.default.Router();
+router.get("/whoami", auth_1.requireSignedIn, UserController.getWhoAmI);
+exports.default = router;
diff --git a/backend/dist/src/routes/vsr.js b/backend/dist/src/routes/vsr.js
new file mode 100644
index 0000000..5acf3f0
--- /dev/null
+++ b/backend/dist/src/routes/vsr.js
@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const VSRController = __importStar(require("../controllers/vsr"));
+const auth_1 = require("../middleware/auth");
+const VSRValidator = __importStar(require("../validators/vsr"));
+const router = express_1.default.Router();
+router.get("/", auth_1.requireSignedIn, auth_1.requireStaffOrAdmin, VSRController.getAllVSRS);
+router.post("/", VSRValidator.createVSR, VSRController.createVSR);
+router.get("/:id", auth_1.requireSignedIn, auth_1.requireStaffOrAdmin, VSRController.getVSR);
+router.delete("/:id", auth_1.requireSignedIn, auth_1.requireAdmin, VSRController.deleteVSR);
+router.patch("/:id/status", auth_1.requireSignedIn, auth_1.requireStaffOrAdmin, VSRValidator.updateStatus, VSRController.updateStatus);
+router.put("/:id", auth_1.requireSignedIn, auth_1.requireStaffOrAdmin, VSRValidator.updateVSR, VSRController.updateVSR);
+exports.default = router;
diff --git a/backend/dist/src/server.js b/backend/dist/src/server.js
new file mode 100644
index 0000000..23c71a1
--- /dev/null
+++ b/backend/dist/src/server.js
@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * Initializes mongoose and express.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("module-alias/register");
+const mongoose_1 = __importDefault(require("mongoose"));
+const app_1 = __importDefault(require("./app"));
+const validateEnv_1 = __importDefault(require("./util/validateEnv"));
+const PORT = validateEnv_1.default.PORT;
+const MONGODB_URI = validateEnv_1.default.MONGODB_URI;
+mongoose_1.default
+    .connect(MONGODB_URI)
+    .then(() => {
+    console.log("Mongoose connected!");
+    app_1.default.listen(PORT, () => {
+        console.log(`Server running on port ${PORT}.`);
+    });
+})
+    .catch(console.error);
+module.exports = app_1.default;
diff --git a/backend/dist/src/services/auth.js b/backend/dist/src/services/auth.js
new file mode 100644
index 0000000..3ecde95
--- /dev/null
+++ b/backend/dist/src/services/auth.js
@@ -0,0 +1,30 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeAuthToken = void 0;
+const firebase_1 = require("../services/firebase");
+const auth_1 = require("../errors/auth");
+/**
+ * Decodes a Firebase token and returns the user info for the user who the token is for,
+ * or throws an error if the token is invalid.
+ */
+function decodeAuthToken(token) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const userInfo = yield firebase_1.firebaseAuth.verifyIdToken(token);
+            return userInfo;
+        }
+        catch (e) {
+            throw auth_1.AuthError.DECODE_ERROR;
+        }
+    });
+}
+exports.decodeAuthToken = decodeAuthToken;
diff --git a/backend/dist/src/services/emails.js b/backend/dist/src/services/emails.js
new file mode 100644
index 0000000..0893623
--- /dev/null
+++ b/backend/dist/src/services/emails.js
@@ -0,0 +1,144 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendVSRConfirmationEmailToVeteran = exports.sendVSRNotificationEmailToStaff = void 0;
+require("dotenv/config");
+const nodemailer_1 = __importDefault(require("nodemailer"));
+const validateEnv_1 = __importDefault(require("../util/validateEnv"));
+const trimmedFrontendUrl = validateEnv_1.default.FRONTEND_ORIGIN.replace(
+// Trim trailing slash from frontend URL, if there is one
+/\/$/gi, "");
+/**
+ * Sends a notification email to PAP staff when a VSR is submitted.
+ * Throws an error if the email could not be sent.
+ *
+ * @param name Name of veteran who submitted the VSR
+ * @param email Email address of veteran who submitted the VSR
+ * @param id ID of the submitted VSR, used to construct a link to the VSR on our web app
+ */
+const sendVSRNotificationEmailToStaff = (name, email, id) => __awaiter(void 0, void 0, void 0, function* () {
+    const EMAIL_SUBJECT = "New VSR Submitted";
+    const EMAIL_BODY = `A new VSR was submitted by ${name} from ${email}. You can view it at ${trimmedFrontendUrl}/staff/vsr/${id}`;
+    const transporter = nodemailer_1.default.createTransport({
+        service: "gmail",
+        auth: {
+            user: validateEnv_1.default.EMAIL_USER,
+            pass: validateEnv_1.default.EMAIL_APP_PASSWORD,
+        },
+    });
+    const mailOptions = {
+        from: validateEnv_1.default.EMAIL_USER,
+        to: validateEnv_1.default.EMAIL_NOTIFICATIONS_RECIPIENT,
+        subject: EMAIL_SUBJECT,
+        text: EMAIL_BODY,
+    };
+    yield transporter.sendMail(mailOptions);
+});
+exports.sendVSRNotificationEmailToStaff = sendVSRNotificationEmailToStaff;
+/**
+ * Sends a confirmation email to the veteran who submitted a VSR.
+ * Throws an error if the email could not be sent.
+ *
+ * @param name Name of veteran who submitted the VSR
+ * @param email Email address of veteran who submitted the VSR
+ */
+const sendVSRConfirmationEmailToVeteran = (name, email) => __awaiter(void 0, void 0, void 0, function* () {
+    const EMAIL_SUBJECT = "VSR Submission Confirmation";
+    const EMAIL_HTML = `<p>Dear ${name},</p>\
+  <p>Thank you for submitting a veteran service request (VSR).</p>\
+  <p>\
+    <strong\
+      >We schedule appointments on Tuesdays, Thursday, and Saturdays from 10-3pm. You need to be\
+      specific about what day and time you want to make your appointment.\
+    </strong>\
+  </p>\
+  \
+  <p>\
+    <strong\
+      >PLEASE NOTE: We will not be making appointments on THURSDAY, NOVEMBER 23RD (THANKSGIVING) OR\
+      SATURDAY, DECEMBER 2nd.</strong\
+    >\
+  </p>\
+  \
+  <p>\
+    <strong\
+      >Respond to this email and let us know what day and time will work and we will put you\
+      down.</strong\
+    >\
+  </p>\
+  \
+  <p>\
+    You pick up your items on the date and time of your appointment. You need to come prepared on that\
+    day.\
+  </p>\
+  <p>We will help you with as much as we can on your list.</p>\
+  <p>\
+    Please remember that items are donated from the community as a way of saying THANK YOU FOR YOUR\
+    SERVICE, so we are like a cashless thrift store environment.\
+  </p>\
+  <p>You will need to provide your own transportation for all your items you are requesting.</p>\
+  <p>\
+    <span style="color: rgb(31, 73, 125)">\
+      Wherever you are going to rent a truck, don&apos;t wait to the last minute to rent a truck as there\
+      might not be one available.</span\
+    >\
+  </p>\
+  <p>We are located in the Anaheim, in Orange County.</p>\
+  <p>Once we confirm your appointment we will send you the warehouse protocol and address.</p>\
+  <p>\
+    <span style="color: rgb(31, 73, 125)">\
+      Items in the warehouse have been donated from the General Public and are strictly for Veterans,\
+      Active Military and Reservists and their immediate family (wives and school aged children) who\
+      live with them. The Veteran/Active Duty/Reservist has to be at appointment and will need to show\
+      proof of service, such as a VA Card, DD214 or Active Military card.</span\
+    >\
+  </p>\
+  <p>They are not for family members and friends who have not served our Country.</p>\
+  <p>Thank you for contacting us.</p>\
+  <p>Volunteer</p>\
+  \
+  <p><a href="mailto:veteran@patriotsandpaws.org"> veteran@patriotsandpaws.org</a></p>\
+  <img src="cid:pap_logo.png" alt="Patriots & Paws Logo" width="446" height="217" />\
+  <p>\
+    Facebook\
+    <a href="https://www.facebook.com/pages/Patriots-and-Paws/283613748323930"\
+      >https://www.facebook.com/pages/Patriots-and-Paws/283613748323930</a\
+    >\
+  </p>\
+  <p>Twitter @patriotsandpaws</p>\
+  <p>Instagram patriotsandpaws</p>\
+  `;
+    const transporter = nodemailer_1.default.createTransport({
+        service: "gmail",
+        auth: {
+            user: validateEnv_1.default.EMAIL_USER,
+            pass: validateEnv_1.default.EMAIL_APP_PASSWORD,
+        },
+    });
+    const mailOptions = {
+        from: validateEnv_1.default.EMAIL_USER,
+        to: email,
+        subject: EMAIL_SUBJECT,
+        html: EMAIL_HTML,
+        attachments: [
+            {
+                filename: "pap_logo.png",
+                path: `${__dirname}/../../public/pap_logo.png`,
+                cid: "pap_logo.png",
+            },
+        ],
+    };
+    yield transporter.sendMail(mailOptions);
+});
+exports.sendVSRConfirmationEmailToVeteran = sendVSRConfirmationEmailToVeteran;
diff --git a/backend/dist/src/services/firebase.js b/backend/dist/src/services/firebase.js
new file mode 100644
index 0000000..a56355a
--- /dev/null
+++ b/backend/dist/src/services/firebase.js
@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * This file contains the configuration for firebase
+ * It exports a firebase auth object which will allow users
+ * to access any firebase services. For this project we will use
+ * firebase to for authentication.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.firebaseAuth = void 0;
+const firebase = __importStar(require("firebase-admin/app"));
+const auth_1 = require("firebase-admin/auth");
+const internal_1 = require("../errors/internal");
+const validateEnv_1 = __importDefault(require("../util/validateEnv"));
+/**
+ * Initializes Firebase Auth using the SERVICE_ACCOUNT_KEY environment variable
+ */
+let serviceAccountKey;
+if (!validateEnv_1.default.SERVICE_ACCOUNT_KEY) {
+    throw internal_1.InternalError.NO_SERVICE_ACCOUNT_KEY;
+}
+else {
+    serviceAccountKey = validateEnv_1.default.SERVICE_ACCOUNT_KEY;
+}
+firebase.initializeApp({
+    credential: firebase.cert(serviceAccountKey),
+});
+const firebaseAuth = (0, auth_1.getAuth)();
+exports.firebaseAuth = firebaseAuth;
diff --git a/backend/dist/src/tests/testUtils.js b/backend/dist/src/tests/testUtils.js
new file mode 100644
index 0000000..85c8ba7
--- /dev/null
+++ b/backend/dist/src/tests/testUtils.js
@@ -0,0 +1,105 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTestUserToken = exports.getTestUserInfo = exports.mongoMemoryHooks = void 0;
+const app_1 = require("firebase/app");
+const auth_1 = require("firebase/auth");
+const mongodb_1 = require("mongodb");
+const mongodb_memory_server_1 = require("mongodb-memory-server");
+const mongoose_1 = __importDefault(require("mongoose"));
+const firebase_1 = require("../services/firebase");
+const validateEnv_1 = __importDefault(require("../util/validateEnv"));
+const TEST_DB_NAME = "test";
+/**
+ * A utility function to run some before & after testing hooks to set up and clean up
+ * a Mongo memory server, used for testing.
+ */
+const mongoMemoryHooks = () => {
+    let client, memoryServer;
+    /**
+     * This hook runs once, before all our tests are run. In this function, we
+     * set up a Mongo memory server, which emulates MongoDB by storing data in memory, to
+     * make it faster to run tests using the database. This allows our backend code to interface
+     * with MongoDB like normal, but all its actions will go to our test database.
+     */
+    beforeAll(() => __awaiter(void 0, void 0, void 0, function* () {
+        // Create Mongo memory server
+        memoryServer = yield mongodb_memory_server_1.MongoMemoryServer.create({
+            instance: {
+                dbName: TEST_DB_NAME,
+            },
+        });
+        // Get URI of memory server
+        const testMongoUri = memoryServer.getUri();
+        /**
+         * Connect to memory server, so that we can drop data between tests
+         * in the "afterEach" hook
+         */
+        client = yield mongodb_1.MongoClient.connect(testMongoUri);
+        /**
+         * Connect Mongoose to memory server, so we can use Mongoose like normal
+         * in our backend code that we are testing
+         */
+        yield mongoose_1.default.connect(testMongoUri);
+    }));
+    /**
+     * This hook runs after each test in our suite. We use this function to drop all data
+     * from our testing MongoDB database, so that the database will be fresh and empty for each test.
+     *
+     * We may also want a "beforeEach" hook in the future, to insert some example data into
+     * the testing MongoDB database before each of our tests, so that we have some data to run tests on.
+     */
+    afterEach(() => __awaiter(void 0, void 0, void 0, function* () {
+        // Drop all data from test database
+        yield client.db(TEST_DB_NAME).dropDatabase();
+    }));
+    /**
+     * This hook runs once, after all tests in the suite are done. We use this function
+     * to close connections to the MongoDB memory database and clean up any other resources.
+     */
+    afterAll(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield client.close(true);
+        yield memoryServer.stop();
+        yield mongoose_1.default.disconnect();
+    }));
+};
+exports.mongoMemoryHooks = mongoMemoryHooks;
+let _testUserInfo = null;
+let _testUserToken = null;
+/**
+ * Gets the userInfo (Firebase object) for the testing user
+ */
+const getTestUserInfo = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (_testUserInfo === null) {
+        _testUserInfo = yield firebase_1.firebaseAuth.getUserByEmail(validateEnv_1.default.EMAIL_USER);
+    }
+    return _testUserInfo;
+});
+exports.getTestUserInfo = getTestUserInfo;
+/**
+ * Gets a user token for the testing user, which can be used as an Authorization ehader
+ * on HTTP requests to our backend
+ */
+const getTestUserToken = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (_testUserToken === null) {
+        const testUserInfo = yield (0, exports.getTestUserInfo)();
+        const customToken = yield firebase_1.firebaseAuth.createCustomToken(testUserInfo.uid);
+        const firebaseApp = (0, app_1.initializeApp)(validateEnv_1.default.BACKEND_FIREBASE_SETTINGS);
+        const auth = (0, auth_1.getAuth)(firebaseApp);
+        const { user } = yield (0, auth_1.signInWithCustomToken)(auth, customToken);
+        _testUserToken = yield user.getIdToken();
+    }
+    return _testUserToken;
+});
+exports.getTestUserToken = getTestUserToken;
diff --git a/backend/dist/src/util/validateEnv.js b/backend/dist/src/util/validateEnv.js
new file mode 100644
index 0000000..5d15aee
--- /dev/null
+++ b/backend/dist/src/util/validateEnv.js
@@ -0,0 +1,18 @@
+"use strict";
+/**
+ * Parses .env parameters and ensures they are of required types and are not missing.
+ * If any .env parameters are missing, the server will not start and an error will be thrown.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const envalid_1 = require("envalid");
+const validators_1 = require("envalid/dist/validators");
+exports.default = (0, envalid_1.cleanEnv)(process.env, {
+    PORT: (0, validators_1.port)(),
+    MONGODB_URI: (0, validators_1.str)(),
+    FRONTEND_ORIGIN: (0, validators_1.str)(),
+    EMAIL_USER: (0, validators_1.email)(),
+    EMAIL_APP_PASSWORD: (0, validators_1.str)(),
+    EMAIL_NOTIFICATIONS_RECIPIENT: (0, validators_1.email)(),
+    BACKEND_FIREBASE_SETTINGS: (0, validators_1.json)(),
+    SERVICE_ACCOUNT_KEY: (0, validators_1.json)(), // Private service account key for backend, stored as a JSON string
+});
diff --git a/backend/dist/src/util/validationErrorParser.js b/backend/dist/src/util/validationErrorParser.js
new file mode 100644
index 0000000..08e77dd
--- /dev/null
+++ b/backend/dist/src/util/validationErrorParser.js
@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const http_errors_1 = __importDefault(require("http-errors"));
+/**
+ * Parses through errors thrown by validator (if any exist). Error messages are
+ * added to a string and that string is used as the error message for the HTTP
+ * error.
+ *
+ * @param errors the validation result provided by express validator middleware
+ */
+const validationErrorParser = (errors) => {
+    if (!errors.isEmpty()) {
+        let errorString = "";
+        // parse through errors returned by the validator and append them to the error string
+        for (const error of errors.array()) {
+            errorString += error.msg + " ";
+        }
+        // trim removes the trailing space created in the for loop
+        throw (0, http_errors_1.default)(400, errorString.trim());
+    }
+};
+exports.default = validationErrorParser;
diff --git a/backend/dist/src/validators/vsr.js b/backend/dist/src/validators/vsr.js
new file mode 100644
index 0000000..a7b4be9
--- /dev/null
+++ b/backend/dist/src/validators/vsr.js
@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateVSR = exports.updateStatus = exports.createVSR = void 0;
+const express_validator_1 = require("express-validator");
+/**
+ * Validators for creating and updating VSRs
+ */
+const makeNameValidator = () => (0, express_validator_1.body)("name")
+    .exists({ checkFalsy: true })
+    .withMessage("Name is required")
+    .isString()
+    .withMessage("Name must be a string");
+const makeGenderValidator = () => (0, express_validator_1.body)("gender")
+    .exists({ checkFalsy: true })
+    .withMessage("Gender is required")
+    .isString()
+    .withMessage("Gender must be a string");
+const makeAgeValidator = () => (0, express_validator_1.body)("age")
+    .exists({ checkFalsy: true })
+    .withMessage("Age is required")
+    .isInt({ min: 0 })
+    .withMessage("Age must be a positive integer");
+const makeMaritalStatusValidator = () => (0, express_validator_1.body)("maritalStatus")
+    .exists({ checkFalsy: true })
+    .withMessage("Marital Status is required")
+    .isString()
+    .withMessage("Marital Status must be a string");
+const makeSpouseNameValidator = () => (0, express_validator_1.body)("spouseName")
+    .optional({ checkFalsy: true })
+    .isString()
+    .withMessage("Spouse Name must be a string");
+const makeAgesOfBoysValidator = () => (0, express_validator_1.body)("agesOfBoys")
+    .exists({ checkFalsy: true })
+    .isArray()
+    .withMessage("Ages of Boys must be an array of numbers")
+    .custom((ages) => ages.every((age) => Number.isInteger(age) && age >= 0))
+    .withMessage("Each age in Ages of Boys must be a positive integer");
+const makeAgesOfGirlsValidator = () => (0, express_validator_1.body)("agesOfGirls")
+    .exists({ checkFalsy: true })
+    .isArray()
+    .withMessage("Ages of Girls must be an array of numbers")
+    .custom((ages) => ages.every((age) => Number.isInteger(age) && age >= 0))
+    .withMessage("Each age in Ages of Girls must be a positive integer");
+const makeEthnicityValidator = () => (0, express_validator_1.body)("ethnicity")
+    .exists({ checkFalsy: true })
+    .withMessage("Ethnicity is required")
+    .isArray()
+    .withMessage("Ethnicity must be an array")
+    .custom((ethnicities) => ethnicities.every((ethnicity) => typeof ethnicity === "string"))
+    .withMessage("Each ethnicity in Ethnicities must be a string");
+const makeEmploymentStatusValidator = () => (0, express_validator_1.body)("employmentStatus")
+    .exists({ checkFalsy: true })
+    .withMessage("Employment Status is required")
+    .isString()
+    .withMessage("Employment Status must be a string");
+const makeIncomeLevelValidator = () => (0, express_validator_1.body)("incomeLevel")
+    .exists({ checkFalsy: true })
+    .withMessage("Income Level is required")
+    .isString()
+    .withMessage("Income Level must be a string");
+const makeSizeOfHomeValidator = () => (0, express_validator_1.body)("sizeOfHome")
+    .exists({ checkFalsy: true })
+    .withMessage("Size of Home is required")
+    .isString()
+    .withMessage("Size of Home must be a string");
+const makeStreetAddressValidator = () => (0, express_validator_1.body)("streetAddress")
+    .exists({ checkFalsy: true })
+    .withMessage("Address is required")
+    .isString()
+    .withMessage("Address must be a string");
+const makeCityValidator = () => (0, express_validator_1.body)("city")
+    .exists({ checkFalsy: true })
+    .withMessage("City is required")
+    .isString()
+    .withMessage("City must be a string");
+const makeStateValidator = () => (0, express_validator_1.body)("state")
+    .exists({ checkFalsy: true })
+    .withMessage("State is required")
+    .isString()
+    .withMessage("State must be a string");
+const makeZipCodeValidator = () => (0, express_validator_1.body)("zipCode")
+    .exists({ checkFalsy: true })
+    .withMessage("Zip Code is required")
+    .isInt({ min: 10000 })
+    .withMessage("Zip Code must be a 5 digit integer");
+const makePhoneNumberValidator = () => (0, express_validator_1.body)("phoneNumber")
+    .exists({ checkFalsy: true })
+    .withMessage("Phone Number is required")
+    .isString()
+    .withMessage("Phone number must be a string");
+const makeEmailValidator = () => (0, express_validator_1.body)("email")
+    .exists({ checkFalsy: true })
+    .withMessage("Email is required")
+    .isString()
+    .withMessage("Email must be a string");
+const makeBranchValidator = () => (0, express_validator_1.body)("branch")
+    .exists({ checkFalsy: true })
+    .withMessage("Branch is required")
+    .isArray()
+    .withMessage("Branch must be an array")
+    .custom((branches) => branches.every((branch) => typeof branch == "string"))
+    .withMessage("Each branch must be a string");
+const makeConflictsValidator = () => (0, express_validator_1.body)("conflicts")
+    .exists({ checkFalsy: true })
+    .withMessage("Conflict(s) is required")
+    .isArray()
+    .withMessage("Conflict(s) must be an array")
+    .custom((conflicts) => conflicts.every((conflict) => typeof conflict === "string"))
+    .withMessage("Each conflict must be a string");
+const makeDischargeStatusValidator = () => (0, express_validator_1.body)("dischargeStatus")
+    .exists({ checkFalsy: true })
+    .withMessage("Discharge Status is required")
+    .isString()
+    .withMessage("Discharge Status must be a string");
+const makeServiceConnectedValidator = () => (0, express_validator_1.body)("serviceConnected")
+    .exists({ checkFalsy: false })
+    .withMessage("Service Connected is required")
+    .isBoolean()
+    .withMessage("Service Connected must be a boolean");
+const makeLastRankValidator = () => (0, express_validator_1.body)("lastRank")
+    .exists({ checkFalsy: true })
+    .withMessage("Last rank is required")
+    .isString()
+    .withMessage("Last rank must be a string");
+const makeMilitaryIDValidator = () => (0, express_validator_1.body)("militaryID")
+    .exists({ checkFalsy: true })
+    .withMessage("Military ID is required")
+    .isInt()
+    .withMessage("Military ID must be an integer");
+const makePetCompanionValidator = () => (0, express_validator_1.body)("petCompanion")
+    .exists({ checkFalsy: false })
+    .withMessage("Pet interest is required")
+    .isBoolean()
+    .withMessage("Pet interest must be a boolean");
+const makeHearFromValidator = () => (0, express_validator_1.body)("hearFrom")
+    .exists({ checkFalsy: true })
+    .withMessage("Referral source is required")
+    .isString()
+    .withMessage("Referral source must be a string");
+const ALLOWED_STATUSES = [
+    "Received",
+    "Appointment Scheduled",
+    "Approved",
+    "Complete",
+    "Resubmit",
+    "No-show / Incomplete",
+    "Archived",
+];
+const updateStatusValidator = () => (0, express_validator_1.body)("status")
+    .exists({ checkFalsy: true })
+    .withMessage("Status is required")
+    .isString()
+    .withMessage("Status must be a string")
+    .isIn(ALLOWED_STATUSES)
+    .withMessage("Status must be one of the allowed options");
+exports.createVSR = [
+    makeNameValidator(),
+    makeGenderValidator(),
+    makeAgeValidator(),
+    makeMaritalStatusValidator(),
+    makeSpouseNameValidator(),
+    makeAgesOfBoysValidator(),
+    makeAgesOfGirlsValidator(),
+    makeEthnicityValidator(),
+    makeEmploymentStatusValidator(),
+    makeIncomeLevelValidator(),
+    makeSizeOfHomeValidator(),
+    makeStreetAddressValidator(),
+    makeCityValidator(),
+    makeStateValidator(),
+    makeZipCodeValidator(),
+    makePhoneNumberValidator(),
+    makeEmailValidator(),
+    makeBranchValidator(),
+    makeConflictsValidator(),
+    makeDischargeStatusValidator(),
+    makeServiceConnectedValidator(),
+    makeLastRankValidator(),
+    makeMilitaryIDValidator(),
+    makePetCompanionValidator(),
+    makeHearFromValidator(),
+];
+exports.updateStatus = [updateStatusValidator()];
+exports.updateVSR = [
+    makeNameValidator(),
+    makeGenderValidator(),
+    makeAgeValidator(),
+    makeMaritalStatusValidator(),
+    makeSpouseNameValidator(),
+    makeAgesOfBoysValidator(),
+    makeAgesOfGirlsValidator(),
+    makeEthnicityValidator(),
+    makeEmploymentStatusValidator(),
+    makeIncomeLevelValidator(),
+    makeSizeOfHomeValidator(),
+];
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 14dc746..3e3afb8 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -22,7 +22,8 @@
         "mongoose": "^7.4.0",
         "nodemailer": "^6.9.8",
         "supertest": "^6.3.3",
-        "ts-jest": "^29.1.1"
+        "ts-jest": "^29.1.1",
+        "tsc-alias": "^1.8.8"
       },
       "devDependencies": {
         "@types/cors": "^2.8.13",
@@ -2622,7 +2623,6 @@
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -2634,7 +2634,6 @@
     },
     "node_modules/@nodelib/fs.stat": {
       "version": "2.0.5",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -2642,7 +2641,6 @@
     },
     "node_modules/@nodelib/fs.walk": {
       "version": "1.2.8",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -4193,7 +4191,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4483,7 +4480,6 @@
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4690,7 +4686,6 @@
     },
     "node_modules/chokidar": {
       "version": "3.5.3",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4716,7 +4711,6 @@
     },
     "node_modules/chokidar/node_modules/glob-parent": {
       "version": "5.1.2",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -4790,6 +4784,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "license": "MIT"
@@ -5029,7 +5031,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
       "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
       "dependencies": {
         "path-type": "^4.0.0"
       },
@@ -5805,7 +5806,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -5821,7 +5821,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5867,7 +5866,6 @@
     },
     "node_modules/fastq": {
       "version": "1.15.0",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -6340,7 +6338,6 @@
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
       "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
@@ -6608,7 +6605,6 @@
     },
     "node_modules/ignore": {
       "version": "5.3.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -6739,7 +6735,6 @@
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -6800,7 +6795,6 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6847,7 +6841,6 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -7989,7 +7982,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -8250,6 +8242,18 @@
       "version": "2.1.2",
       "license": "MIT"
     },
+    "node_modules/mylas": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/mylas/-/mylas-2.1.13.tgz",
+      "integrity": "sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/raouldeheer"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "license": "MIT"
@@ -8689,7 +8693,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8773,6 +8776,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/plimit-lit": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.6.1.tgz",
+      "integrity": "sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==",
+      "dependencies": {
+        "queue-lit": "^1.5.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "dev": true,
@@ -8934,9 +8948,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue-lit": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/queue-lit/-/queue-lit-1.5.2.tgz",
+      "integrity": "sha512-tLc36IOPeMAubu8BkW8YDBV+WyIgKlYU7zUNs0J5Vk9skSZ4JfGlPOqplP0aHdfv7HL0B2Pg6nwiq60Qc6M2Hw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8999,7 +9020,6 @@
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -9134,7 +9154,6 @@
     },
     "node_modules/reusify": {
       "version": "1.0.4",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -9157,7 +9176,6 @@
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9916,6 +9934,22 @@
         }
       }
     },
+    "node_modules/tsc-alias": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/tsc-alias/-/tsc-alias-1.8.8.tgz",
+      "integrity": "sha512-OYUOd2wl0H858NvABWr/BoSKNERw3N9GTi3rHPK8Iv4O1UyUXIrTTOAZNHsjlVpXFOhpJBVARI1s+rzwLivN3Q==",
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "commander": "^9.0.0",
+        "globby": "^11.0.4",
+        "mylas": "^2.1.9",
+        "normalize-path": "^3.0.0",
+        "plimit-lit": "^1.2.6"
+      },
+      "bin": {
+        "tsc-alias": "dist/bin/index.js"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
diff --git a/backend/package.json b/backend/package.json
index 381d4f8..6055535 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,6 +4,7 @@
   "main": "dist/server.js",
   "scripts": {
     "start": "nodemon src/server.ts",
+    "build": "tsc && tsc-alias && cp -r ./public ./dist/public",
     "test": "jest",
     "format": "npm run check-git-hooks && prettier --write .",
     "lint-fix": "npm run check-git-hooks && (eslint --fix --cache --report-unused-disable-directives . || true) && prettier --write .",
@@ -26,7 +27,8 @@
     "mongoose": "^7.4.0",
     "nodemailer": "^6.9.8",
     "supertest": "^6.3.3",
-    "ts-jest": "^29.1.1"
+    "ts-jest": "^29.1.1",
+    "tsc-alias": "^1.8.8"
   },
   "devDependencies": {
     "@types/cors": "^2.8.13",
diff --git a/backend/public/pap_logo.png b/backend/public/pap_logo.png
new file mode 100644
index 0000000..4a2c8db
Binary files /dev/null and b/backend/public/pap_logo.png differ
diff --git a/backend/src/app.ts b/backend/src/app.ts
index eaa6610..d18a108 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -6,9 +6,9 @@ import "dotenv/config";
 import cors from "cors";
 import express, { NextFunction, Request, Response } from "express";
 import { isHttpError } from "http-errors";
-import vsrRoutes from "../src/routes/vsr";
-import furnitureItemRoutes from "../src/routes/furnitureItem";
-import { userRouter } from "src/routes/users";
+import vsrRoutes from "src/routes/vsr";
+import furnitureItemRoutes from "src/routes/furnitureItem";
+import userRoutes from "src/routes/user";
 import env from "src/util/validateEnv";
 
 const app = express();
@@ -28,7 +28,9 @@ app.use(
 );
 
 // Put routes here (e.g. app.use("/api/example", exampleRoutes); )
-app.use(userRouter);
+app.use("/api/user", userRoutes);
+app.use("/api/vsr", vsrRoutes);
+app.use("/api/furnitureItems", furnitureItemRoutes);
 
 /**
  * Error handler; all errors thrown by server are handled here.
@@ -54,7 +56,4 @@ app.use((error: unknown, req: Request, res: Response, next: NextFunction) => {
   res.status(statusCode).json({ error: errorMessage });
 });
 
-app.use("/api/vsr", vsrRoutes);
-app.use("/api/furnitureItems", furnitureItemRoutes);
-
 export default app;
diff --git a/backend/src/controllers/furnitureItem.ts b/backend/src/controllers/furnitureItem.ts
index 4b50372..947e330 100644
--- a/backend/src/controllers/furnitureItem.ts
+++ b/backend/src/controllers/furnitureItem.ts
@@ -1,14 +1,19 @@
 import { RequestHandler } from "express";
-import createHttpError from "http-errors";
 import FurnitureItemModel from "src/models/furnitureItem";
 
+/**
+ * Gets all available furniture items in the database. Does not require authentication.
+ */
 export const getFurnitureItems: RequestHandler = async (req, res, next) => {
   try {
-    const furnitureItems = await FurnitureItemModel.find();
+    const furnitureItems = await FurnitureItemModel.find().sort({
+      // First, sort the items by whether they allow multiple (true before false)
+      allowMultiple: -1,
+
+      // Second, sort by category index (ascending)
+      categoryIndex: 1,
+    });
 
-    if (furnitureItems === null) {
-      throw createHttpError(404, "Furniture items not found");
-    }
     res.status(200).json(furnitureItems);
   } catch (error) {
     next(error);
diff --git a/backend/src/controllers/user.ts b/backend/src/controllers/user.ts
new file mode 100644
index 0000000..1ff74a2
--- /dev/null
+++ b/backend/src/controllers/user.ts
@@ -0,0 +1,22 @@
+import { RequestHandler } from "express";
+import { PAPRequest } from "src/middleware/auth";
+import UserModel from "src/models/user";
+
+/**
+ * Retrieves data about the current user (their MongoDB ID, Firebase UID, and role).
+ * Requires the user to be signed in.
+ */
+export const getWhoAmI: RequestHandler = async (req: PAPRequest, res, next) => {
+  try {
+    const { userUid } = req;
+    const user = await UserModel.findOne({ uid: userUid });
+    const { _id, uid, role } = user!;
+    res.status(200).send({
+      _id,
+      uid,
+      role,
+    });
+  } catch (error) {
+    next(error);
+  }
+};
diff --git a/backend/src/controllers/vsr.ts b/backend/src/controllers/vsr.ts
index db2c37d..62f62ca 100644
--- a/backend/src/controllers/vsr.ts
+++ b/backend/src/controllers/vsr.ts
@@ -2,8 +2,30 @@ import { RequestHandler } from "express";
 import { validationResult } from "express-validator";
 import createHttpError from "http-errors";
 import VSRModel from "src/models/vsr";
+import {
+  sendVSRConfirmationEmailToVeteran,
+  sendVSRNotificationEmailToStaff,
+} from "src/services/emails";
 import validationErrorParser from "src/util/validationErrorParser";
 
+/**
+ * Gets all VSRs in the database. Requires the user to be signed in and have
+ * staff or admin permission.
+ */
+export const getAllVSRS: RequestHandler = async (req, res, next) => {
+  try {
+    const vsrs = await VSRModel.find();
+
+    res.status(200).json({ vsrs });
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Retrieves a single VSR by its ID. Requires the user to get signed in and have
+ * staff or admin permission.
+ */
 export const getVSR: RequestHandler = async (req, res, next) => {
   const { id } = req.params;
 
@@ -19,38 +41,13 @@ export const getVSR: RequestHandler = async (req, res, next) => {
   }
 };
 
+/**
+ * Creates a new VSR in the database, called when a veteran submits the VSR form.
+ * Does not require authentication.
+ */
 export const createVSR: RequestHandler = async (req, res, next) => {
-  // extract any errors that were found by the validator
+  // Extract any errors that were found by the validator
   const errors = validationResult(req);
-  const {
-    name,
-    gender,
-    age,
-    maritalStatus,
-    spouseName,
-    agesOfBoys,
-    agesOfGirls,
-    ethnicity,
-    employmentStatus,
-    incomeLevel,
-    sizeOfHome,
-    streetAddress,
-    city,
-    state,
-    zipCode,
-    phoneNumber,
-    email,
-    branch,
-    conflicts,
-    dischargeStatus,
-    serviceConnected,
-    lastRank,
-    militaryID,
-    petCompanion,
-    hearFrom,
-    selectedFurnitureItems,
-    additionalItems,
-  } = req.body;
 
   try {
     // if there are errors, then this function throws an exception
@@ -60,41 +57,19 @@ export const createVSR: RequestHandler = async (req, res, next) => {
     const currentDate = new Date();
 
     const vsr = await VSRModel.create({
-      name,
-      gender,
-      age,
-      maritalStatus,
-      spouseName,
-      agesOfBoys,
-      agesOfGirls,
-      ethnicity,
-      employmentStatus,
-      incomeLevel,
-      sizeOfHome,
-      streetAddress,
-      city,
-      state,
-      zipCode,
-      phoneNumber,
-      email,
-      branch,
-      conflicts,
-      dischargeStatus,
-      serviceConnected,
-      lastRank,
-      militaryID,
-      petCompanion,
-      hearFrom,
+      ...req.body,
 
       // Use current date as timestamp for received & updated
       dateReceived: currentDate,
       lastUpdated: currentDate,
 
       status: "Received",
-
-      selectedFurnitureItems,
-      additionalItems,
     });
+
+    // Once the VSR is created successfully, send notification & confirmation emails
+    sendVSRNotificationEmailToStaff(req.body.name, req.body.email, vsr._id.toString());
+    sendVSRConfirmationEmailToVeteran(req.body.name, req.body.email);
+
     // 201 means a new resource has been created successfully
     // the newly created VSR is sent back to the user
     res.status(201).json(vsr);
@@ -103,6 +78,10 @@ export const createVSR: RequestHandler = async (req, res, next) => {
   }
 };
 
+/**
+ * Updates a VSR's status, by its ID. Requires the user to be signed in and
+ * have staff or admin permission.
+ */
 export const updateStatus: RequestHandler = async (req, res, next) => {
   try {
     // extract any errors that were found by the validator
@@ -112,19 +91,67 @@ export const updateStatus: RequestHandler = async (req, res, next) => {
     // if there are errors, then this function throws an exception
     validationErrorParser(errors);
 
+    // Get the current date as a timestamp for when VSR was updated
+    const currentDate = new Date();
+
     const { id } = req.params;
-    const vsr = await VSRModel.findByIdAndUpdate(id, { status }, { new: true });
+    const vsr = await VSRModel.findByIdAndUpdate(
+      id,
+      { status, lastUpdated: currentDate },
+      { new: true },
+    );
+    if (vsr === null) {
+      throw createHttpError(404, "VSR not found at id " + id);
+    }
     res.status(200).json(vsr);
   } catch (error) {
     next(error);
   }
 };
 
-export const getAllVSRS: RequestHandler = async (req, res, next) => {
+/**
+ * Updates a VSR's data, by its ID. Requires the user to be signed in and
+ * have staff or admin permission.
+ */
+export const updateVSR: RequestHandler = async (req, res, next) => {
+  const errors = validationResult(req);
+
   try {
-    const vsrs = await VSRModel.find();
+    const { id } = req.params;
 
-    res.status(200).json({ vsrs });
+    // Get the current date as a timestamp for when VSR was updated
+    const currentDate = new Date();
+
+    validationErrorParser(errors);
+    const updatedVSR = await VSRModel.findByIdAndUpdate(
+      id,
+      {
+        ...req.body,
+        lastUpdated: currentDate,
+      },
+      { new: true },
+    );
+    if (updatedVSR === null) {
+      throw createHttpError(404, "VSR not found at id " + id);
+    }
+    res.status(200).json(updatedVSR);
+  } catch (error) {
+    next(error);
+  }
+};
+
+/**
+ * Deletes a VSR from the database, by its ID. Requires the user to be signed in
+ * and have admin permission.
+ */
+export const deleteVSR: RequestHandler = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    const deletedVsr = await VSRModel.findByIdAndDelete(id);
+    if (deletedVsr === null) {
+      throw createHttpError(404, "VSR not found at id " + id);
+    }
+    return res.status(204).send();
   } catch (error) {
     next(error);
   }
diff --git a/backend/src/errors/auth.ts b/backend/src/errors/auth.ts
index 6e84e71..aac8794 100644
--- a/backend/src/errors/auth.ts
+++ b/backend/src/errors/auth.ts
@@ -1,12 +1,20 @@
 import { CustomError } from "src/errors/errors";
 
 const DECODE_ERROR = "Error in decoding the auth token. Make sure the auth token is valid";
-const TOKEN_NOT_IN_HEADER =
-  "Token was not found in the header. Be sure to use Bearer <Token> syntax";
-const INVALID_AUTH_TOKEN = "Token was invalid. Be sure to refresh token if needed.";
+const TOKEN_NOT_IN_HEADER = "Token was not found in header. Be sure to use Bearer <Token> syntax";
+const INVALID_AUTH_TOKEN = "Token was invalid.";
+const USER_NOT_FOUND = "User not found";
+const NOT_STAFF_OR_ADMIN = "User must be a staff/admin.";
+const NOT_ADMIN = "User must be an admin.";
 
+/**
+ * List of authentication-related errors that may be thrown by our backend.
+ */
 export class AuthError extends CustomError {
   static DECODE_ERROR = new AuthError(0, 401, DECODE_ERROR);
   static TOKEN_NOT_IN_HEADER = new AuthError(1, 401, TOKEN_NOT_IN_HEADER);
   static INVALID_AUTH_TOKEN = new AuthError(2, 401, INVALID_AUTH_TOKEN);
+  static USER_NOT_FOUND = new AuthError(3, 401, USER_NOT_FOUND);
+  static NOT_STAFF_OR_ADMIN = new AuthError(4, 403, NOT_STAFF_OR_ADMIN);
+  static NOT_ADMIN = new AuthError(5, 403, NOT_ADMIN);
 }
diff --git a/backend/src/errors/errors.ts b/backend/src/errors/errors.ts
index 80fb4a6..fc5eb49 100644
--- a/backend/src/errors/errors.ts
+++ b/backend/src/errors/errors.ts
@@ -1,3 +1,6 @@
+/**
+ * Class for a custom error object sent from our backend.
+ */
 export class CustomError extends Error {
   public code: number;
   public status: number;
diff --git a/backend/src/errors/internal.ts b/backend/src/errors/internal.ts
index af847a9..50ef94f 100644
--- a/backend/src/errors/internal.ts
+++ b/backend/src/errors/internal.ts
@@ -2,6 +2,9 @@ import { CustomError } from "src/errors/errors";
 
 const NO_SERVICE_ACCOUNT_KEY = "Could not find service account key env variable";
 
+/**
+ * List of internal errors that can be thrown by our backend if something goes wrong.
+ */
 export class InternalError extends CustomError {
   static NO_SERVICE_ACCOUNT_KEY = new InternalError(0, 500, NO_SERVICE_ACCOUNT_KEY);
 }
diff --git a/backend/src/errors/service.ts b/backend/src/errors/service.ts
index f78049b..8a7a1dc 100644
--- a/backend/src/errors/service.ts
+++ b/backend/src/errors/service.ts
@@ -4,6 +4,9 @@ const INVALID_MONGO_ID = "User ID is not a valid MONGO ID";
 
 const USER_NOT_FOUND = "User not found in mongo database";
 
+/**
+ * List of errors that can be thrown by our backend services.
+ */
 export class ServiceError extends CustomError {
   static INVALID_MONGO_ID = new ServiceError(0, 401, INVALID_MONGO_ID);
 
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
index 778e869..4836fd6 100644
--- a/backend/src/middleware/auth.ts
+++ b/backend/src/middleware/auth.ts
@@ -1,11 +1,24 @@
 import { Request, Response, NextFunction } from "express";
 import { decodeAuthToken } from "src/services/auth";
 import { AuthError } from "src/errors/auth";
+import UserModel, { UserRole } from "src/models/user";
 
-const verifyAuthToken = async (req: Request, res: Response, next: NextFunction) => {
+/**
+ * Define this custom type for a request to include the "userUid"
+ * property, which middleware will set and validate
+ */
+export interface PAPRequest extends Request {
+  userUid?: string;
+}
+
+/**
+ * A middleware that requires the user to be signed in and have a valid Firebase token
+ * in the "Authorization" header
+ */
+const requireSignedIn = async (req: PAPRequest, res: Response, next: NextFunction) => {
   const authHeader = req.headers.authorization;
-  const token =
-    authHeader && authHeader.split(" ")[0] === "Bearer" ? authHeader.split(" ")[1] : null;
+  // Token shoud be "Bearer: <token>"
+  const token = authHeader?.split("Bearer ")[1];
   if (!token) {
     return res
       .status(AuthError.TOKEN_NOT_IN_HEADER.status)
@@ -22,11 +35,43 @@ const verifyAuthToken = async (req: Request, res: Response, next: NextFunction)
   }
 
   if (userInfo) {
-    req.body.uid = userInfo.uid;
+    req.userUid = userInfo.uid;
+    const user = await UserModel.findOne({ uid: userInfo.uid });
+    if (!user) {
+      return res
+        .status(AuthError.USER_NOT_FOUND.status)
+        .send(AuthError.USER_NOT_FOUND.displayMessage(true));
+    }
     return next();
   }
 
   return res.status(AuthError.INVALID_AUTH_TOKEN.status).send(AuthError.INVALID_AUTH_TOKEN.message);
 };
 
-export { verifyAuthToken };
+/**
+ * A middleware that requires the user to have either the staff or admin role
+ */
+const requireStaffOrAdmin = async (req: PAPRequest, res: Response, next: NextFunction) => {
+  const { userUid } = req;
+  const user = await UserModel.findOne({ uid: userUid });
+  if (!user || ![UserRole.STAFF, UserRole.ADMIN].includes(user.role as UserRole)) {
+    return res
+      .status(AuthError.NOT_STAFF_OR_ADMIN.status)
+      .send(AuthError.NOT_STAFF_OR_ADMIN.displayMessage(true));
+  }
+  return next();
+};
+
+/**
+ * A middleware that requires the user to have the admin role
+ */
+const requireAdmin = async (req: PAPRequest, res: Response, next: NextFunction) => {
+  const { userUid } = req;
+  const user = await UserModel.findOne({ uid: userUid });
+  if (!user || user.role !== UserRole.ADMIN) {
+    return res.status(AuthError.NOT_ADMIN.status).send(AuthError.NOT_ADMIN.displayMessage(true));
+  }
+  return next();
+};
+
+export { requireSignedIn, requireStaffOrAdmin, requireAdmin };
diff --git a/backend/src/models/furnitureItem.ts b/backend/src/models/furnitureItem.ts
index 8258949..f5998bc 100644
--- a/backend/src/models/furnitureItem.ts
+++ b/backend/src/models/furnitureItem.ts
@@ -1,10 +1,19 @@
 import { InferSchemaType, Schema, model } from "mongoose";
 
+/**
+ * A model for a furniture item that veterans can request on the VSR form.
+ */
 const furnitureItemSchema = new Schema({
-  _id: { type: String, required: true },
+  // Category for the item (e.g. bedroom, bathroom)
   category: { type: String, required: true },
+
+  // Name of the item (e.g. Rug, Bed)
   name: { type: String, required: true },
+
+  // Whether to allow veterans to request multiple of the item (if true) or just 1 (if false)
   allowMultiple: { type: Boolean, required: true },
+
+  // Index of the item within its category, used to display items in a deterministic order on the VSR form
   categoryIndex: { type: Number, required: true },
 });
 
diff --git a/backend/src/models/user.ts b/backend/src/models/user.ts
new file mode 100644
index 0000000..566df40
--- /dev/null
+++ b/backend/src/models/user.ts
@@ -0,0 +1,33 @@
+import { InferSchemaType, Schema, model } from "mongoose";
+
+/**
+ * A model for a user of our application.
+ */
+const userSchema = new Schema({
+  // The user's role (either staff or admin)
+  role: {
+    type: String,
+    required: true,
+  },
+
+  // The user's Firebase UID (used to relate the MongoDB user to the Firebas user)
+  uid: {
+    type: String,
+    required: true,
+  },
+});
+
+export enum UserRole {
+  /**
+   * For some reason we are getting ESLint errors about these vars not being used,
+   * even though they are used in other files. Disable these ESLint errors.
+   */
+  // eslint-disable-next-line no-unused-vars
+  STAFF = "staff",
+  // eslint-disable-next-line no-unused-vars
+  ADMIN = "admin",
+}
+
+type User = InferSchemaType<typeof userSchema>;
+
+export default model<User>("User", userSchema);
diff --git a/backend/src/models/users.ts b/backend/src/models/users.ts
deleted file mode 100644
index 35fec50..0000000
--- a/backend/src/models/users.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import mongoose from "mongoose";
-
-interface UserInterface {
-  role: string;
-  uid: string;
-}
-
-interface UserDoc extends mongoose.Document {
-  role: string;
-  uid: string;
-}
-
-interface UserModelInterface extends mongoose.Model<UserDoc> {
-  // eslint-disable-next-line no-unused-vars
-  build(attr: UserInterface): UserDoc;
-}
-
-const userSchema = new mongoose.Schema({
-  role: {
-    type: String,
-    required: true,
-  },
-  uid: {
-    type: String,
-    required: true,
-  },
-});
-
-const User = mongoose.model<UserDoc, UserModelInterface>("User", userSchema);
-
-export { User, userSchema };
diff --git a/backend/src/models/vsr.ts b/backend/src/models/vsr.ts
index b6a949d..556cddf 100644
--- a/backend/src/models/vsr.ts
+++ b/backend/src/models/vsr.ts
@@ -1,11 +1,22 @@
 import { InferSchemaType, Schema, model } from "mongoose";
 
+/**
+ * A schema for a single furniture item that a veteran can request
+ */
 const furntitureInputSchema = new Schema({
+  // ID of the furniture item being required (Object ID for an instance of the furniture item model)
   furnitureItemId: { type: String, required: true },
+
+  // Quantity being requested by this veteran
   quantity: { type: Number, required: true },
 });
 
+/**
+ * A model for a VSR (veteran service request), submitted by a veteran to request
+ * furniture items from PAP.
+ */
 const vsrSchema = new Schema({
+  /** Page 1 of VSR */
   name: { type: String, required: true },
   gender: { type: String, required: true },
   age: { type: Number, required: true },
@@ -17,6 +28,8 @@ const vsrSchema = new Schema({
   employmentStatus: { type: String, required: true },
   incomeLevel: { type: String, required: true },
   sizeOfHome: { type: String, required: true },
+
+  /** Page 2 of VSR */
   streetAddress: { type: String, required: true },
   city: { type: String, required: true },
   state: { type: String, required: true },
@@ -31,8 +44,12 @@ const vsrSchema = new Schema({
   militaryID: { type: Number, required: true },
   petCompanion: { type: Boolean, required: true },
   hearFrom: { type: String, required: true },
+
+  /** Page 3 of VSR */
   selectedFurnitureItems: { type: [furntitureInputSchema], required: true },
   additionalItems: { type: String, required: false },
+
+  /** Fields that are created/updated automatically or on staff side */
   dateReceived: { type: Date, required: true },
   lastUpdated: { type: Date, required: true },
   status: { type: String, required: true },
diff --git a/backend/src/routes/user.ts b/backend/src/routes/user.ts
new file mode 100644
index 0000000..efd4171
--- /dev/null
+++ b/backend/src/routes/user.ts
@@ -0,0 +1,10 @@
+import express from "express";
+
+import { requireSignedIn } from "src/middleware/auth";
+import * as UserController from "src/controllers/user";
+
+const router = express.Router();
+
+router.get("/whoami", requireSignedIn, UserController.getWhoAmI);
+
+export default router;
diff --git a/backend/src/routes/users.ts b/backend/src/routes/users.ts
deleted file mode 100644
index 48e0e8e..0000000
--- a/backend/src/routes/users.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import express, { NextFunction, Request, Response } from "express";
-import { ServiceError } from "src/errors/service";
-import { User } from "src/models/users";
-import { verifyAuthToken } from "src/middleware/auth";
-
-const router = express.Router();
-
-router.get(
-  "/api/whoami",
-  [verifyAuthToken],
-  async (req: Request, res: Response, next: NextFunction) => {
-    try {
-      const uid = req.body.uid;
-      const user = await User.findOne({ uid: uid });
-      if (!user) {
-        throw ServiceError.USER_NOT_FOUND;
-      }
-      const { _id: mongoId, role } = user;
-      res.status(200).send({
-        message: "Current user information",
-        user: {
-          mongoId,
-          uid,
-          role,
-        },
-      });
-      return;
-    } catch (e) {
-      next();
-      console.log(e);
-      return res.status(400).json({
-        error: e,
-      });
-    }
-  },
-);
-
-export { router as userRouter };
diff --git a/backend/src/routes/vsr.ts b/backend/src/routes/vsr.ts
index 8488faf..3a98a70 100644
--- a/backend/src/routes/vsr.ts
+++ b/backend/src/routes/vsr.ts
@@ -1,13 +1,28 @@
 import express from "express";
 
 import * as VSRController from "src/controllers/vsr";
+import { requireAdmin, requireSignedIn, requireStaffOrAdmin } from "src/middleware/auth";
 import * as VSRValidator from "src/validators/vsr";
 
 const router = express.Router();
 
-router.get("/:id", VSRController.getVSR);
+router.get("/", requireSignedIn, requireStaffOrAdmin, VSRController.getAllVSRS);
 router.post("/", VSRValidator.createVSR, VSRController.createVSR);
-router.get("/", VSRController.getAllVSRS);
-router.patch("/:id/status", VSRValidator.updateStatus, VSRController.updateStatus);
+router.get("/:id", requireSignedIn, requireStaffOrAdmin, VSRController.getVSR);
+router.delete("/:id", requireSignedIn, requireAdmin, VSRController.deleteVSR);
+router.patch(
+  "/:id/status",
+  requireSignedIn,
+  requireStaffOrAdmin,
+  VSRValidator.updateStatus,
+  VSRController.updateStatus,
+);
+router.put(
+  "/:id",
+  requireSignedIn,
+  requireStaffOrAdmin,
+  VSRValidator.updateVSR,
+  VSRController.updateVSR,
+);
 
 export default router;
diff --git a/backend/src/server.ts b/backend/src/server.ts
index b4e8e25..422690f 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -20,3 +20,5 @@ mongoose
     });
   })
   .catch(console.error);
+
+module.exports = app;
diff --git a/backend/src/services/auth.ts b/backend/src/services/auth.ts
index 90d645a..e608914 100644
--- a/backend/src/services/auth.ts
+++ b/backend/src/services/auth.ts
@@ -1,6 +1,10 @@
 import { firebaseAuth } from "src/services/firebase";
 import { AuthError } from "src/errors/auth";
 
+/**
+ * Decodes a Firebase token and returns the user info for the user who the token is for,
+ * or throws an error if the token is invalid.
+ */
 async function decodeAuthToken(token: string) {
   try {
     const userInfo = await firebaseAuth.verifyIdToken(token);
diff --git a/backend/src/services/emails.ts b/backend/src/services/emails.ts
index bef1fff..f229faa 100644
--- a/backend/src/services/emails.ts
+++ b/backend/src/services/emails.ts
@@ -1,6 +1,12 @@
 import "dotenv/config";
 import nodemailer from "nodemailer";
-import env from "../util/validateEnv";
+import env from "src/util/validateEnv";
+
+const trimmedFrontendUrl = env.FRONTEND_ORIGIN.replace(
+  // Trim trailing slash from frontend URL, if there is one
+  /\/$/gi,
+  "",
+);
 
 /**
  * Sends a notification email to PAP staff when a VSR is submitted.
@@ -8,10 +14,11 @@ import env from "../util/validateEnv";
  *
  * @param name Name of veteran who submitted the VSR
  * @param email Email address of veteran who submitted the VSR
+ * @param id ID of the submitted VSR, used to construct a link to the VSR on our web app
  */
-const sendVSRNotificationEmailToStaff = async (name: string, email: string) => {
+const sendVSRNotificationEmailToStaff = async (name: string, email: string, id: string) => {
   const EMAIL_SUBJECT = "New VSR Submitted";
-  const EMAIL_BODY = `A new VSR was submitted by ${name} from ${email}`;
+  const EMAIL_BODY = `A new VSR was submitted by ${name} from ${email}. You can view it at ${trimmedFrontendUrl}/staff/vsr/${id}`;
 
   const transporter = nodemailer.createTransport({
     service: "gmail",
@@ -31,4 +38,103 @@ const sendVSRNotificationEmailToStaff = async (name: string, email: string) => {
   await transporter.sendMail(mailOptions);
 };
 
-export { sendVSRNotificationEmailToStaff };
+/**
+ * Sends a confirmation email to the veteran who submitted a VSR.
+ * Throws an error if the email could not be sent.
+ *
+ * @param name Name of veteran who submitted the VSR
+ * @param email Email address of veteran who submitted the VSR
+ */
+const sendVSRConfirmationEmailToVeteran = async (name: string, email: string) => {
+  const EMAIL_SUBJECT = "VSR Submission Confirmation";
+  const EMAIL_HTML = `<p>Dear ${name},</p>\
+  <p>Thank you for submitting a veteran service request (VSR).</p>\
+  <p>\
+    <strong\
+      >We schedule appointments on Tuesdays, Thursday, and Saturdays from 10-3pm. You need to be\
+      specific about what day and time you want to make your appointment.\
+    </strong>\
+  </p>\
+  \
+  <p>\
+    <strong\
+      >PLEASE NOTE: We will not be making appointments on THURSDAY, NOVEMBER 23RD (THANKSGIVING) OR\
+      SATURDAY, DECEMBER 2nd.</strong\
+    >\
+  </p>\
+  \
+  <p>\
+    <strong\
+      >Respond to this email and let us know what day and time will work and we will put you\
+      down.</strong\
+    >\
+  </p>\
+  \
+  <p>\
+    You pick up your items on the date and time of your appointment. You need to come prepared on that\
+    day.\
+  </p>\
+  <p>We will help you with as much as we can on your list.</p>\
+  <p>\
+    Please remember that items are donated from the community as a way of saying THANK YOU FOR YOUR\
+    SERVICE, so we are like a cashless thrift store environment.\
+  </p>\
+  <p>You will need to provide your own transportation for all your items you are requesting.</p>\
+  <p>\
+    <span style="color: rgb(31, 73, 125)">\
+      Wherever you are going to rent a truck, don&apos;t wait to the last minute to rent a truck as there\
+      might not be one available.</span\
+    >\
+  </p>\
+  <p>We are located in the Anaheim, in Orange County.</p>\
+  <p>Once we confirm your appointment we will send you the warehouse protocol and address.</p>\
+  <p>\
+    <span style="color: rgb(31, 73, 125)">\
+      Items in the warehouse have been donated from the General Public and are strictly for Veterans,\
+      Active Military and Reservists and their immediate family (wives and school aged children) who\
+      live with them. The Veteran/Active Duty/Reservist has to be at appointment and will need to show\
+      proof of service, such as a VA Card, DD214 or Active Military card.</span\
+    >\
+  </p>\
+  <p>They are not for family members and friends who have not served our Country.</p>\
+  <p>Thank you for contacting us.</p>\
+  <p>Volunteer</p>\
+  \
+  <p><a href="mailto:veteran@patriotsandpaws.org"> veteran@patriotsandpaws.org</a></p>\
+  <img src="cid:pap_logo.png" alt="Patriots & Paws Logo" width="446" height="217" />\
+  <p>\
+    Facebook\
+    <a href="https://www.facebook.com/pages/Patriots-and-Paws/283613748323930"\
+      >https://www.facebook.com/pages/Patriots-and-Paws/283613748323930</a\
+    >\
+  </p>\
+  <p>Twitter @patriotsandpaws</p>\
+  <p>Instagram patriotsandpaws</p>\
+  `;
+
+  const transporter = nodemailer.createTransport({
+    service: "gmail",
+    auth: {
+      user: env.EMAIL_USER,
+      pass: env.EMAIL_APP_PASSWORD,
+    },
+  });
+
+  const mailOptions = {
+    from: env.EMAIL_USER,
+    to: email,
+    subject: EMAIL_SUBJECT,
+    html: EMAIL_HTML,
+    attachments: [
+      {
+        filename: "pap_logo.png",
+        path: `${__dirname}/../../public/pap_logo.png`,
+        cid: "pap_logo.png",
+      },
+    ],
+  };
+
+  await transporter.sendMail(mailOptions);
+};
+
+export { sendVSRNotificationEmailToStaff, sendVSRConfirmationEmailToVeteran };
diff --git a/backend/src/services/firebase.ts b/backend/src/services/firebase.ts
index 10363ab..d11b472 100644
--- a/backend/src/services/firebase.ts
+++ b/backend/src/services/firebase.ts
@@ -10,6 +10,9 @@ import { getAuth } from "firebase-admin/auth";
 import { InternalError } from "src/errors/internal";
 import env from "src/util/validateEnv";
 
+/**
+ * Initializes Firebase Auth using the SERVICE_ACCOUNT_KEY environment variable
+ */
 let serviceAccountKey: firebase.ServiceAccount;
 
 if (!env.SERVICE_ACCOUNT_KEY) {
diff --git a/backend/src/tests/testUtils.ts b/backend/src/tests/testUtils.ts
new file mode 100644
index 0000000..14c3dbf
--- /dev/null
+++ b/backend/src/tests/testUtils.ts
@@ -0,0 +1,102 @@
+import { UserRecord } from "firebase-admin/auth";
+import { initializeApp } from "firebase/app";
+import { getAuth, signInWithCustomToken } from "firebase/auth";
+import { MongoClient } from "mongodb";
+import { MongoMemoryServer } from "mongodb-memory-server";
+import mongoose from "mongoose";
+import { firebaseAuth } from "src/services/firebase";
+import env from "src/util/validateEnv";
+
+const TEST_DB_NAME = "test";
+
+/**
+ * A utility function to run some before & after testing hooks to set up and clean up
+ * a Mongo memory server, used for testing.
+ */
+export const mongoMemoryHooks = () => {
+  let client: MongoClient, memoryServer: MongoMemoryServer;
+
+  /**
+   * This hook runs once, before all our tests are run. In this function, we
+   * set up a Mongo memory server, which emulates MongoDB by storing data in memory, to
+   * make it faster to run tests using the database. This allows our backend code to interface
+   * with MongoDB like normal, but all its actions will go to our test database.
+   */
+  beforeAll(async () => {
+    // Create Mongo memory server
+    memoryServer = await MongoMemoryServer.create({
+      instance: {
+        dbName: TEST_DB_NAME,
+      },
+    });
+
+    // Get URI of memory server
+    const testMongoUri = memoryServer.getUri();
+
+    /**
+     * Connect to memory server, so that we can drop data between tests
+     * in the "afterEach" hook
+     */
+    client = await MongoClient.connect(testMongoUri);
+
+    /**
+     * Connect Mongoose to memory server, so we can use Mongoose like normal
+     * in our backend code that we are testing
+     */
+    await mongoose.connect(testMongoUri);
+  });
+
+  /**
+   * This hook runs after each test in our suite. We use this function to drop all data
+   * from our testing MongoDB database, so that the database will be fresh and empty for each test.
+   *
+   * We may also want a "beforeEach" hook in the future, to insert some example data into
+   * the testing MongoDB database before each of our tests, so that we have some data to run tests on.
+   */
+  afterEach(async () => {
+    // Drop all data from test database
+    await client.db(TEST_DB_NAME).dropDatabase();
+  });
+
+  /**
+   * This hook runs once, after all tests in the suite are done. We use this function
+   * to close connections to the MongoDB memory database and clean up any other resources.
+   */
+  afterAll(async () => {
+    await client.close(true);
+    await memoryServer.stop();
+    await mongoose.disconnect();
+  });
+};
+
+let _testUserInfo: UserRecord | null = null;
+let _testUserToken: string | null = null;
+
+/**
+ * Gets the userInfo (Firebase object) for the testing user
+ */
+export const getTestUserInfo = async () => {
+  if (_testUserInfo === null) {
+    _testUserInfo = await firebaseAuth.getUserByEmail(env.EMAIL_USER);
+  }
+  return _testUserInfo;
+};
+
+/**
+ * Gets a user token for the testing user, which can be used as an Authorization ehader
+ * on HTTP requests to our backend
+ */
+export const getTestUserToken = async () => {
+  if (_testUserToken === null) {
+    const testUserInfo = await getTestUserInfo();
+    const customToken = await firebaseAuth.createCustomToken(testUserInfo.uid);
+
+    const firebaseApp = initializeApp(env.BACKEND_FIREBASE_SETTINGS);
+    const auth = getAuth(firebaseApp);
+
+    const { user } = await signInWithCustomToken(auth, customToken);
+    _testUserToken = await user.getIdToken();
+  }
+
+  return _testUserToken;
+};
diff --git a/backend/src/validators/vsr.ts b/backend/src/validators/vsr.ts
index e332037..2c62a0d 100644
--- a/backend/src/validators/vsr.ts
+++ b/backend/src/validators/vsr.ts
@@ -1,5 +1,9 @@
 import { body } from "express-validator";
 
+/**
+ * Validators for creating and updating VSRs
+ */
+
 const makeNameValidator = () =>
   body("name")
     .exists({ checkFalsy: true })
@@ -59,7 +63,7 @@ const makeEthnicityValidator = () =>
     .custom((ethnicities: string[]) =>
       ethnicities.every((ethnicity) => typeof ethnicity === "string"),
     )
-    .withMessage("Each ethnicity in Ethnicities must be a positive integer");
+    .withMessage("Each ethnicity in Ethnicities must be a string");
 
 const makeEmploymentStatusValidator = () =>
   body("employmentStatus")
@@ -188,6 +192,7 @@ const ALLOWED_STATUSES = [
   "Received",
   "Appointment Scheduled",
   "Approved",
+  "Complete",
   "Resubmit",
   "No-show / Incomplete",
   "Archived",
@@ -231,3 +236,17 @@ export const createVSR = [
 ];
 
 export const updateStatus = [updateStatusValidator()];
+
+export const updateVSR = [
+  makeNameValidator(),
+  makeGenderValidator(),
+  makeAgeValidator(),
+  makeMaritalStatusValidator(),
+  makeSpouseNameValidator(),
+  makeAgesOfBoysValidator(),
+  makeAgesOfGirlsValidator(),
+  makeEthnicityValidator(),
+  makeEmploymentStatusValidator(),
+  makeIncomeLevelValidator(),
+  makeSizeOfHomeValidator(),
+];
diff --git a/backend/vercel.json b/backend/vercel.json
new file mode 100644
index 0000000..599aff5
--- /dev/null
+++ b/backend/vercel.json
@@ -0,0 +1,16 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "dist/src/server.js",
+      "use": "@vercel/node",
+      "config": { "includeFiles": ["dist/**"] }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "dist/src/server.js"
+    }
+  ]
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c0615ee..7f606b4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@mui/x-data-grid": "^6.19.5",
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.1.2",
+        "email-validator": "^2.0.4",
         "envalid": "^8.0.0",
         "firebase": "^10.6.0",
         "jest": "^29.7.0",
@@ -4242,6 +4243,14 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
       "integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ=="
     },
+    "node_modules/email-validator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==",
+      "engines": {
+        "node": ">4.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c08b4d4..d7af5cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@mui/x-data-grid": "^6.19.5",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
+    "email-validator": "^2.0.4",
     "envalid": "^8.0.0",
     "firebase": "^10.6.0",
     "jest": "^29.7.0",
diff --git a/frontend/public/errors/404_not_found.svg b/frontend/public/errors/404_not_found.svg
new file mode 100644
index 0000000..8df41d6
--- /dev/null
+++ b/frontend/public/errors/404_not_found.svg
@@ -0,0 +1,31 @@
+<svg width="464" height="180" viewBox="0 0 464 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M402.017 174.509C402.017 175.456 402.009 176.402 401.993 177.346H62.017C62.0011 176.402 61.9932 175.456 61.9932 174.509C61.9932 80.6135 138.109 4.49756 232.005 4.49756C325.901 4.49756 402.017 80.6135 402.017 174.509Z" fill="#C7DDF3"/>
+<path d="M101.956 171.388H101.949C101.601 171.384 101.322 171.098 101.326 170.751C101.344 169.249 101.388 167.73 101.456 166.234C101.472 165.886 101.765 165.617 102.114 165.633C102.462 165.649 102.73 165.944 102.715 166.291C102.647 167.773 102.603 169.278 102.586 170.765C102.582 171.111 102.301 171.388 101.956 171.388ZM362.022 169.798C361.681 169.798 361.401 169.526 361.393 169.183C361.357 167.698 361.296 166.193 361.21 164.711C361.19 164.364 361.455 164.066 361.802 164.046C362.151 164.024 362.447 164.291 362.468 164.638C362.554 166.135 362.616 167.654 362.652 169.154C362.66 169.501 362.385 169.79 362.037 169.798C362.032 169.798 362.027 169.798 362.022 169.798ZM102.525 160.612C102.505 160.612 102.485 160.612 102.465 160.61C102.119 160.577 101.865 160.27 101.897 159.924C102.038 158.429 102.206 156.918 102.398 155.432C102.442 155.087 102.758 154.844 103.103 154.888C103.448 154.933 103.692 155.248 103.647 155.593C103.457 157.065 103.291 158.561 103.151 160.042C103.121 160.368 102.846 160.612 102.525 160.612ZM361.323 159.03C361.005 159.03 360.732 158.79 360.697 158.467C360.54 156.989 360.355 155.494 360.147 154.025C360.099 153.681 360.338 153.362 360.683 153.313C361.028 153.264 361.346 153.504 361.395 153.849C361.604 155.332 361.791 156.841 361.95 158.333C361.987 158.679 361.736 158.989 361.39 159.026C361.368 159.029 361.345 159.03 361.323 159.03ZM103.98 149.92C103.943 149.92 103.906 149.917 103.868 149.91C103.526 149.849 103.298 149.522 103.359 149.179C103.623 147.703 103.916 146.211 104.231 144.745C104.304 144.405 104.639 144.188 104.979 144.261C105.319 144.334 105.536 144.669 105.463 145.009C105.151 146.461 104.861 147.939 104.599 149.401C104.545 149.706 104.279 149.92 103.98 149.92ZM359.737 148.356C359.441 148.356 359.177 148.147 359.119 147.845C358.84 146.385 358.531 144.911 358.202 143.464C358.125 143.125 358.337 142.788 358.676 142.71C359.015 142.633 359.353 142.845 359.43 143.185C359.763 144.646 360.075 146.134 360.357 147.608C360.422 147.95 360.198 148.28 359.856 148.345C359.817 148.353 359.777 148.356 359.737 148.356ZM106.319 139.385C106.265 139.385 106.211 139.379 106.157 139.364C105.82 139.275 105.621 138.93 105.71 138.593C106.096 137.145 106.513 135.682 106.949 134.247C107.05 133.914 107.402 133.726 107.735 133.827C108.068 133.929 108.256 134.28 108.154 134.613C107.722 136.035 107.309 137.483 106.927 138.918C106.852 139.199 106.598 139.385 106.319 139.385ZM357.269 137.852C356.993 137.852 356.74 137.67 356.663 137.391C356.262 135.96 355.832 134.517 355.383 133.103C355.277 132.771 355.461 132.417 355.792 132.312C356.124 132.206 356.478 132.39 356.583 132.721C357.037 134.149 357.472 135.607 357.876 137.052C357.969 137.387 357.774 137.735 357.439 137.828C357.382 137.844 357.325 137.852 357.269 137.852ZM109.535 129.068C109.465 129.068 109.393 129.056 109.323 129.031C108.995 128.913 108.825 128.553 108.942 128.225C109.45 126.81 109.989 125.383 110.545 123.986C110.674 123.663 111.04 123.505 111.364 123.634C111.687 123.763 111.844 124.129 111.716 124.452C111.165 125.836 110.631 127.248 110.128 128.65C110.036 128.908 109.794 129.068 109.535 129.068ZM353.931 127.589C353.676 127.589 353.435 127.433 353.341 127.179C352.823 125.788 352.274 124.386 351.707 123.012C351.574 122.691 351.728 122.322 352.049 122.19C352.371 122.057 352.739 122.21 352.872 122.532C353.444 123.919 353.999 125.335 354.522 126.74C354.643 127.066 354.477 127.428 354.151 127.55C354.079 127.577 354.004 127.589 353.931 127.589ZM113.607 119.047C113.519 119.047 113.431 119.029 113.346 118.99C113.029 118.846 112.89 118.472 113.034 118.156C113.658 116.789 114.314 115.414 114.985 114.069C115.14 113.757 115.518 113.631 115.829 113.786C116.141 113.941 116.267 114.32 116.112 114.631C115.448 115.963 114.798 117.325 114.18 118.679C114.075 118.91 113.846 119.047 113.607 119.047ZM349.754 117.653C349.518 117.653 349.291 117.52 349.184 117.291C348.553 115.951 347.891 114.603 347.214 113.285C347.055 112.975 347.177 112.596 347.486 112.437C347.796 112.278 348.175 112.4 348.334 112.709C349.018 114.041 349.687 115.402 350.324 116.755C350.472 117.07 350.337 117.445 350.022 117.593C349.935 117.634 349.844 117.653 349.754 117.653ZM118.498 109.407C118.394 109.407 118.288 109.381 118.19 109.327C117.887 109.156 117.779 108.773 117.949 108.469C118.685 107.159 119.452 105.844 120.232 104.561C120.413 104.264 120.8 104.169 121.097 104.35C121.395 104.53 121.489 104.918 121.309 105.215C120.537 106.486 119.776 107.788 119.048 109.086C118.932 109.291 118.718 109.407 118.498 109.407ZM344.768 108.105C344.551 108.105 344.339 107.992 344.222 107.79C343.481 106.505 342.708 105.215 341.924 103.958C341.74 103.662 341.831 103.274 342.126 103.09C342.421 102.906 342.81 102.996 342.993 103.291C343.785 104.561 344.566 105.863 345.313 107.161C345.487 107.462 345.384 107.847 345.082 108.021C344.983 108.078 344.875 108.105 344.768 108.105ZM124.171 100.212C124.05 100.212 123.927 100.177 123.819 100.104C123.531 99.9092 123.455 99.5177 123.65 99.2296C124.49 97.9868 125.364 96.7407 126.248 95.5258C126.452 95.2444 126.846 95.1823 127.127 95.3869C127.409 95.5915 127.471 95.9855 127.266 96.2668C126.391 97.47 125.526 98.7041 124.694 99.9348C124.572 100.115 124.374 100.212 124.171 100.212ZM339.005 98.9982C338.805 98.9982 338.608 98.9035 338.486 98.7268C337.642 97.5072 336.764 96.2853 335.878 95.0952C335.67 94.8162 335.728 94.4215 336.007 94.2138C336.286 94.006 336.68 94.0637 336.888 94.3428C337.783 95.5444 338.669 96.7782 339.522 98.0097C339.72 98.2957 339.649 98.6881 339.363 98.8861C339.253 98.9618 339.128 98.9982 339.005 98.9982ZM130.584 91.5224C130.446 91.5224 130.306 91.4769 130.19 91.3834C129.919 91.1654 129.876 90.769 130.094 90.4979C131.034 89.3285 132.007 88.1595 132.987 87.0232C133.214 86.7598 133.612 86.7304 133.875 86.9575C134.139 87.1847 134.168 87.5824 133.941 87.8459C132.971 88.9711 132.007 90.129 131.076 91.2871C130.951 91.4419 130.769 91.5224 130.584 91.5224ZM332.504 90.3936C332.323 90.3936 332.142 90.3154 332.018 90.1639C331.074 89.0165 330.098 87.8706 329.117 86.758C328.887 86.4971 328.912 86.0991 329.173 85.869C329.434 85.6389 329.832 85.664 330.062 85.9248C331.053 87.0483 332.038 88.2053 332.991 89.3637C333.212 89.6324 333.173 90.0293 332.904 90.2503C332.787 90.3466 332.645 90.3936 332.504 90.3936ZM137.69 83.395C137.534 83.395 137.378 83.3375 137.256 83.2217C137.004 82.9822 136.994 82.5835 137.233 82.3313C138.266 81.2441 139.332 80.1597 140.402 79.1085C140.65 78.8645 141.049 78.8682 141.292 79.1162C141.536 79.3643 141.533 79.7631 141.285 80.0069C140.225 81.048 139.17 82.122 138.147 83.1988C138.023 83.3292 137.857 83.395 137.69 83.395ZM325.314 82.3509C325.149 82.3509 324.985 82.287 324.862 82.1598C323.828 81.0948 322.76 80.0326 321.689 79.0028C321.438 78.7618 321.43 78.3631 321.671 78.1123C321.912 77.8617 322.311 77.8536 322.562 78.0948C323.643 79.1344 324.721 80.2068 325.766 81.2822C326.008 81.5318 326.002 81.9305 325.753 82.1729C325.63 82.2917 325.472 82.3509 325.314 82.3509ZM145.438 75.8839C145.265 75.8839 145.092 75.813 144.968 75.6735C144.736 75.4139 144.759 75.0158 145.018 74.7842C146.137 73.7856 147.289 72.7933 148.44 71.8348C148.707 71.6123 149.104 71.6486 149.327 71.9159C149.549 72.1832 149.513 72.5804 149.246 72.8029C148.106 73.7522 146.965 74.735 145.857 75.724C145.737 75.8312 145.587 75.8839 145.438 75.8839ZM317.482 74.9246C317.335 74.9246 317.187 74.8734 317.068 74.7693C315.948 73.7918 314.796 72.8209 313.644 71.8834C313.374 71.6638 313.333 71.2671 313.553 70.9973C313.772 70.7275 314.169 70.6868 314.439 70.9064C315.602 71.8529 316.765 72.8333 317.896 73.8201C318.158 74.0489 318.185 74.4468 317.956 74.7089C317.832 74.8516 317.657 74.9246 317.482 74.9246ZM153.775 69.04C153.584 69.04 153.396 68.9535 153.272 68.7893C153.062 68.5116 153.118 68.1167 153.395 67.9072C154.592 67.0051 155.82 66.1115 157.047 65.2514C157.331 65.0515 157.724 65.1206 157.924 65.4054C158.124 65.6902 158.055 66.083 157.77 66.2827C156.555 67.1346 155.339 68.0195 154.154 68.913C154.04 68.9986 153.907 69.04 153.775 69.04ZM309.06 68.1671C308.93 68.1671 308.799 68.1272 308.687 68.0443C307.49 67.1626 306.261 66.2897 305.035 65.4499C304.748 65.2533 304.674 64.8614 304.871 64.5743C305.067 64.2872 305.459 64.2139 305.746 64.4104C306.985 65.2584 308.226 66.1398 309.434 67.0301C309.714 67.2364 309.774 67.6307 309.568 67.9108C309.444 68.0784 309.253 68.1671 309.06 68.1671ZM162.644 62.9104C162.435 62.9104 162.231 62.8065 162.111 62.6168C161.925 62.3227 162.013 61.9337 162.307 61.7479C163.574 60.9481 164.871 60.1596 166.163 59.4045C166.464 59.2289 166.849 59.3301 167.025 59.6305C167.2 59.9308 167.099 60.3166 166.799 60.492C165.519 61.24 164.234 62.0208 162.98 62.8129C162.876 62.8789 162.759 62.9104 162.644 62.9104ZM300.105 62.1264C299.993 62.1264 299.878 62.0962 299.775 62.0328C298.51 61.2531 297.212 60.4847 295.919 59.7488C295.616 59.5767 295.511 59.1922 295.683 58.8899C295.855 58.5876 296.239 58.4818 296.542 58.6539C297.848 59.397 299.158 60.1729 300.436 60.9602C300.732 61.1426 300.824 61.5305 300.642 61.8267C300.523 62.0199 300.317 62.1264 300.105 62.1264ZM171.985 57.5387C171.758 57.5387 171.538 57.4153 171.426 57.1998C171.265 56.8913 171.385 56.5109 171.693 56.3501C173.021 55.6582 174.378 54.9806 175.727 54.3359C176.041 54.1857 176.417 54.3188 176.567 54.6326C176.717 54.9465 176.584 55.3225 176.271 55.4725C174.934 56.1109 173.59 56.7821 172.275 57.4673C172.182 57.5157 172.083 57.5387 171.985 57.5387ZM290.676 56.8472C290.58 56.8472 290.483 56.8253 290.392 56.7791C289.063 56.1064 287.705 55.4483 286.356 54.823C286.04 54.6768 285.903 54.3024 286.049 53.9867C286.195 53.671 286.57 53.5337 286.885 53.68C288.248 54.3115 289.619 54.976 290.961 55.6553C291.271 55.8124 291.395 56.1914 291.238 56.5017C291.127 56.7209 290.906 56.8472 290.676 56.8472ZM181.733 52.9637C181.487 52.9637 181.253 52.8186 181.152 52.5774C181.017 52.2566 181.168 51.8874 181.489 51.7529C182.868 51.1743 184.276 50.6122 185.673 50.0825C185.998 49.9588 186.362 50.1228 186.485 50.448C186.609 50.7733 186.445 51.137 186.12 51.2603C184.736 51.785 183.342 52.3415 181.976 52.9145C181.896 52.9479 181.814 52.9637 181.733 52.9637ZM280.834 52.3698C280.755 52.3698 280.675 52.3549 280.597 52.3235C279.218 51.7643 277.809 51.2215 276.409 50.7104C276.083 50.591 275.915 50.2294 276.034 49.9027C276.153 49.576 276.515 49.4076 276.842 49.5271C278.255 50.0433 279.678 50.5914 281.071 51.1561C281.393 51.2868 281.548 51.654 281.418 51.9764C281.318 52.2213 281.083 52.3698 280.834 52.3698ZM191.836 49.2131C191.57 49.2131 191.324 49.0437 191.237 48.7774C191.13 48.4465 191.311 48.0913 191.642 47.9839C193.068 47.5214 194.522 47.0774 195.965 46.6645C196.299 46.5685 196.648 46.7622 196.743 47.0966C196.839 47.4311 196.646 47.7798 196.311 47.8755C194.883 48.2845 193.443 48.7241 192.031 49.1822C191.966 49.2031 191.901 49.2131 191.836 49.2131ZM270.646 48.7289C270.584 48.7289 270.521 48.7197 270.459 48.7004C269.041 48.2597 267.595 47.8379 266.162 47.4469C265.826 47.3553 265.629 47.009 265.72 46.6735C265.812 46.3378 266.159 46.1403 266.494 46.2316C267.941 46.6265 269.4 47.0523 270.833 47.4974C271.165 47.6006 271.35 47.9536 271.247 48.2858C271.163 48.5557 270.915 48.7289 270.646 48.7289ZM207.245 44.6141C207.313 44.9553 207.091 45.2867 206.75 45.3542C205.292 45.6423 203.821 45.9601 202.375 46.2987C202.327 46.31 202.278 46.3154 202.231 46.3154C201.945 46.3154 201.686 46.1195 201.618 45.8291C201.539 45.4904 201.749 45.1515 202.088 45.0721M260.216 45.9602C260.171 45.9602 260.125 45.9554 260.079 45.9452C258.63 45.6246 257.154 45.3251 255.693 45.0548C255.351 44.9916 255.125 44.663 255.188 44.3209C255.252 43.9789 255.58 43.7528 255.922 43.8161C257.398 44.089 258.888 44.3915 260.351 44.7153C260.691 44.7904 260.906 45.1266 260.83 45.4663C260.765 45.7601 260.505 45.9602 260.216 45.9602ZM212.83 44.2951C212.523 44.2951 212.254 44.0701 212.208 43.7572C212.157 43.4131 212.395 43.0929 212.739 43.042C214.222 42.823 215.73 42.6268 217.221 42.4589C217.566 42.4199 217.878 42.6687 217.917 43.0144C217.956 43.36 217.707 43.6718 217.362 43.7107C215.885 43.877 214.392 44.0713 212.923 44.2882C212.892 44.2928 212.861 44.2951 212.83 44.2951ZM249.592 44.071C249.564 44.071 249.535 44.0691 249.507 44.0652C248.036 43.8663 246.54 43.6904 245.062 43.5423C244.716 43.5076 244.463 43.1989 244.498 42.8528C244.532 42.5067 244.841 42.2548 245.187 42.2889C246.68 42.4384 248.19 42.616 249.675 42.8168C250.02 42.8634 250.262 43.1806 250.215 43.5254C250.173 43.8415 249.902 44.071 249.592 44.071ZM223.561 43.1614C223.232 43.1614 222.955 42.9052 222.934 42.5718C222.911 42.2246 223.175 41.9251 223.522 41.903C225.017 41.8071 226.535 41.7359 228.036 41.6911C228.385 41.6823 228.674 41.9543 228.685 42.302C228.695 42.6497 228.421 42.94 228.074 42.9503C226.587 42.9946 225.083 43.0652 223.602 43.1601C223.589 43.161 223.575 43.1614 223.561 43.1614ZM238.847 43.0688C238.836 43.0688 238.825 43.0685 238.814 43.068C237.333 42.9911 235.828 42.9388 234.341 42.9125C233.993 42.9063 233.716 42.6193 233.723 42.2715C233.729 41.9275 234.009 41.6528 234.352 41.6528L234.363 41.6529C235.865 41.6796 237.384 41.7324 238.879 41.8099C239.227 41.828 239.494 42.1242 239.476 42.4715C239.458 42.8078 239.18 43.0688 238.847 43.0688Z" fill="white"/>
+<path d="M147.733 60.6628C158.901 49.4951 158.901 31.3887 147.733 20.221C136.565 9.05332 118.459 9.05332 107.291 20.221C96.1235 31.3887 96.1235 49.4951 107.291 60.6628C118.459 71.8305 136.565 71.8305 147.733 60.6628Z" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M127.511 11.8462V69.0395" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M127.512 69.0395C137.546 69.0395 145.681 56.2363 145.681 40.4428C145.681 24.6493 137.546 11.8462 127.512 11.8462C117.477 11.8462 109.342 24.6493 109.342 40.4428C109.342 56.2363 117.477 69.0395 127.512 69.0395Z" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M98.9141 40.4419H156.108" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M102.603 26.356H152.55" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M102.539 54.5278H152.486" stroke="#38488C" stroke-width="2.54091" stroke-miterlimit="10"/>
+<path d="M442.338 176.279H23.9101C23.0272 176.279 22.3115 176.995 22.3115 177.877V178.12C22.3115 179.002 23.0272 179.718 23.9101 179.718H442.338C443.221 179.718 443.937 179.002 443.937 178.12V177.877C443.937 176.995 443.221 176.279 442.338 176.279Z" fill="#191E3A"/>
+<path d="M15.5704 176.279H2.07024C1.18738 176.279 0.47168 176.994 0.47168 177.877V178.12C0.47168 179.002 1.18738 179.718 2.07024 179.718H15.5704C16.4533 179.718 17.169 179.002 17.169 178.12V177.877C17.169 176.994 16.4533 176.279 15.5704 176.279Z" fill="#191E3A"/>
+<path d="M461.447 180H449.811C448.661 180 447.729 179.167 447.729 178.14C447.729 177.112 448.661 176.279 449.811 176.279H461.447C462.596 176.279 463.528 177.112 463.528 178.14C463.528 179.167 462.596 180 461.447 180Z" fill="#191E3A"/>
+<path d="M324.675 41.6675H139.296C135.704 41.6675 132.793 44.5788 132.793 48.1701V157.864C132.793 161.456 135.704 164.367 139.296 164.367H324.675C328.266 164.367 331.178 161.456 331.178 157.864V48.1701C331.178 44.5788 328.266 41.6675 324.675 41.6675Z" fill="#262F5F"/>
+<path d="M325.461 48.0757H138.508V156.925H325.461V48.0757Z" fill="white"/>
+<path d="M141.161 48.0757H138.508V156.925H141.161V48.0757Z" fill="#211F44"/>
+<path d="M211.072 50.7286L141.16 120.643V148.972L239.411 50.7217L211.072 50.7286Z" fill="#F2F8FF"/>
+<path d="M325.46 48.0742V75.237L243.773 156.924H180.482L288.04 49.3671V48.0742H325.46Z" fill="#F2F8FF"/>
+<path d="M325.462 84.2139V101.491L270.029 156.924H252.752L325.462 84.2139Z" fill="#F2F8FF"/>
+<path d="M325.464 48.0757H322.812V156.925H325.464V48.0757Z" fill="#211F44"/>
+<path d="M138.508 48.0753V50.728L325.461 50.728V48.0753L138.508 48.0753Z" fill="#211F44"/>
+<path d="M115.49 165.694H348.518V170.536C348.518 173.705 345.945 176.278 342.776 176.278H121.232C118.063 176.278 115.49 173.705 115.49 170.536V165.694Z" fill="#211F44"/>
+<path d="M335.551 163.354H128.417C127.125 163.354 126.077 164.402 126.077 165.694H337.892C337.892 164.402 336.844 163.354 335.551 163.354Z" fill="#739CD2"/>
+<path d="M235.433 165.717H211.073L212.882 168.088C213.391 168.754 214.182 169.146 215.021 169.146H248.989C249.827 169.146 250.618 168.754 251.127 168.088L252.936 165.717H235.433Z" fill="#9DBDE4"/>
+<path d="M211.992 112.622C211.05 112.196 209.791 111.981 208.252 111.981H207.272V89.5525C207.272 85.9773 205.677 84.1646 202.53 84.1646C201.54 84.1646 200.681 84.5014 199.974 85.1655C199.311 85.7894 198.455 86.8039 197.433 88.1803L181.883 108.982C181.452 109.55 181.09 110.03 180.796 110.421C180.499 110.818 180.209 111.233 179.935 111.654C179.65 112.092 179.432 112.517 179.289 112.916C179.142 113.326 179.067 113.738 179.067 114.141C179.067 115.665 179.568 116.891 180.554 117.783C181.532 118.669 183.002 119.118 184.925 119.118H199.372V124.293C199.372 125.826 199.737 127.009 200.456 127.812C201.184 128.624 202.148 129.036 203.322 129.036C204.515 129.036 205.484 128.634 206.202 127.843C206.912 127.058 207.272 125.864 207.272 124.293V119.118H208.78C210.318 119.118 211.498 118.839 212.286 118.29C213.106 117.718 213.522 116.806 213.522 115.579C213.522 114.075 213.007 113.081 211.992 112.622ZM199.372 96.0718V111.981H187.598L199.372 96.0718Z" fill="#2C447D"/>
+<path d="M242.003 88.3426C240.739 87.0591 239.25 86.07 237.578 85.4029C235.909 84.7374 234.028 84.3999 231.987 84.3999C228.893 84.3999 226.189 85.1614 223.951 86.6631C221.713 88.1655 219.985 90.3752 218.813 93.2353C218.143 94.9509 217.643 97.0265 217.329 99.4042C217.016 101.772 216.857 104.469 216.857 107.422C216.857 109.715 217.002 111.875 217.286 113.844C217.571 115.821 218.025 117.652 218.638 119.294C219.846 122.304 221.671 124.695 224.062 126.402C226.456 128.111 229.202 128.978 232.222 128.978C234.842 128.978 237.26 128.332 239.408 127.06C241.552 125.79 243.324 123.959 244.674 121.615C245.741 119.719 246.482 117.575 246.878 115.245C247.27 112.932 247.468 110.132 247.468 106.923C247.468 101.003 246.71 96.3532 245.212 93.1021C244.341 91.2226 243.262 89.6212 242.003 88.3426ZM238.864 106.337C238.864 110.078 238.658 113.141 238.252 115.442C237.852 117.711 237.151 119.474 236.169 120.683C235.199 121.876 233.889 122.456 232.163 122.456C230.494 122.456 229.211 121.899 228.241 120.752C227.261 119.592 226.551 117.845 226.132 115.558C225.707 113.239 225.491 110.215 225.491 106.571C225.491 101.213 225.993 97.1994 226.983 94.6431C227.953 92.1386 229.628 90.9211 232.104 90.9211C233.81 90.9211 235.16 91.476 236.117 92.5703C237.096 93.6907 237.804 95.3833 238.223 97.6011C238.648 99.854 238.864 102.793 238.864 106.337Z" fill="#2C447D"/>
+<path d="M283.413 112.622C282.47 112.196 281.212 111.981 279.673 111.981H278.693V89.5525C278.693 85.9773 277.098 84.1646 273.951 84.1646C272.961 84.1646 272.102 84.5014 271.395 85.1655C270.732 85.7895 269.876 86.804 268.854 88.1803L253.304 108.982C252.873 109.55 252.511 110.03 252.217 110.421C251.92 110.818 251.63 111.233 251.356 111.654C251.07 112.092 250.853 112.517 250.71 112.916C250.563 113.326 250.488 113.738 250.488 114.141C250.488 115.665 250.989 116.891 251.975 117.783C252.953 118.669 254.423 119.118 256.346 119.118H270.793V124.293C270.793 125.826 271.158 127.009 271.877 127.812C272.605 128.624 273.569 129.036 274.743 129.036C275.936 129.036 276.905 128.634 277.623 127.843C278.333 127.059 278.693 125.864 278.693 124.293V119.118H280.201C281.739 119.118 282.919 118.839 283.707 118.29C284.527 117.718 284.943 116.806 284.943 115.579C284.943 114.075 284.428 113.081 283.413 112.622ZM270.793 96.0718V111.981H259.019L270.793 96.0718Z" fill="#2C447D"/>
+<path d="M375.495 167.325V167.326C373.639 169.182 370.629 169.182 368.773 167.326L339.918 138.47L336.251 134.803C338.92 133.041 341.21 130.751 342.972 128.082L375.495 160.605C377.351 162.461 377.351 165.469 375.495 167.325Z" fill="#38488C"/>
+<path d="M344.437 129.544L351.957 137.065C350.195 139.734 347.906 142.023 345.237 143.786H345.236L341.383 139.932L337.717 136.266C340.386 134.504 342.676 132.214 344.437 129.544Z" fill="#2B3872"/>
+<path d="M351.929 113.883C351.878 112.666 351.751 111.469 351.551 110.295C350.422 103.625 346.987 97.7377 342.096 93.4841C337.062 89.1047 330.486 86.4536 323.291 86.4536C307.46 86.4536 294.626 99.2873 294.626 115.119C294.626 116.215 294.688 117.297 294.807 118.361C295.183 121.696 296.13 124.857 297.55 127.745V127.746C299.589 131.897 302.604 135.482 306.295 138.203C306.894 138.646 307.513 139.066 308.147 139.461C312.542 142.201 317.732 143.784 323.291 143.784C329.491 143.784 335.231 141.816 339.92 138.47C339.92 138.47 339.921 138.47 339.921 138.469C342.517 136.618 344.79 134.345 346.642 131.749V131.748H346.643C348.503 129.14 349.938 126.208 350.844 123.052C351.568 120.533 351.956 117.872 351.956 115.119C351.956 114.705 351.947 114.293 351.929 113.883ZM323.291 138.684C318.134 138.684 313.365 137.028 309.485 134.218C305.719 131.492 302.791 127.678 301.16 123.238C300.232 120.707 299.725 117.972 299.725 115.119C299.725 114.046 299.797 112.989 299.936 111.954C301.109 103.216 307.072 95.994 315.096 93.0176C317.648 92.071 320.409 91.5536 323.291 91.5536C324.333 91.5536 325.359 91.621 326.366 91.7531C331.143 92.3744 335.471 94.4279 338.906 97.4689C343.783 101.786 346.857 108.093 346.857 115.119C346.857 115.478 346.849 115.835 346.832 116.19C346.756 117.92 346.491 119.601 346.06 121.214C345.401 123.688 344.349 126 342.975 128.082C341.213 130.751 338.923 133.041 336.254 134.803C335.599 135.235 334.921 135.635 334.222 136.001C332.73 136.784 331.143 137.411 329.483 137.861C327.51 138.398 325.434 138.684 323.291 138.684Z" fill="#38488C"/>
+<path d="M305.443 117.71C304.227 117.71 303.242 116.725 303.242 115.509C303.242 110.05 305.368 104.918 309.228 101.058C313.088 97.1985 318.22 95.0728 323.679 95.0728C324.894 95.0728 325.879 96.0581 325.879 97.2735C325.879 98.4889 324.894 99.4742 323.679 99.4742C319.396 99.4742 315.369 101.142 312.34 104.171C309.312 107.199 307.644 111.226 307.644 115.509C307.644 116.725 306.658 117.71 305.443 117.71Z" fill="white"/>
+</svg>
diff --git a/frontend/public/errors/500_internal_error.svg b/frontend/public/errors/500_internal_error.svg
new file mode 100644
index 0000000..58a82f1
--- /dev/null
+++ b/frontend/public/errors/500_internal_error.svg
@@ -0,0 +1,79 @@
+<svg width="324" height="223" viewBox="0 0 324 223" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6419 219.043C-10.6764 167.423 14.361 137.323 32.8827 122.964C56.5109 104.648 43.4654 86.395 40.7788 60.6082C35.7409 12.2532 89.139 -7.87299 115.902 3.68214C137.813 13.1428 149.413 25.9281 167.425 25.9281C196.302 25.9281 194.973 13.1049 223.305 3.68214C256.452 -7.34146 298.934 16.9243 298.934 60.6082C298.934 91.8175 277.899 117.891 302.052 140.928C344.775 181.678 311.725 219.043 311.725 219.043H16.6419Z" fill="#F1F7FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M323.919 220.473C323.919 219.52 323.145 218.746 322.192 218.746H1.80777C0.85475 218.746 0.0810547 219.52 0.0810547 220.473V220.773C0.0810547 221.726 0.85475 222.5 1.80777 222.5H322.192C323.145 222.5 323.919 221.726 323.919 220.773V220.473Z" fill="#83A4CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.17 146.427V141.276C120.17 140.92 119.881 140.632 119.526 140.632C119.17 140.632 118.882 140.92 118.882 141.276V146.427C118.882 146.782 119.17 147.07 119.526 147.07C119.881 147.07 120.17 146.782 120.17 146.427ZM120.17 136.125V130.974C120.17 130.618 119.881 130.33 119.526 130.33C119.17 130.33 118.882 130.618 118.882 130.974V136.125C118.882 136.48 119.17 136.769 119.526 136.769C119.881 136.769 120.17 136.48 120.17 136.125ZM120.17 125.823V120.672C120.17 120.317 119.881 120.028 119.526 120.028C119.17 120.028 118.882 120.316 118.882 120.672V125.823C118.882 126.178 119.17 126.467 119.526 126.467C119.881 126.467 120.17 126.178 120.17 125.823ZM120.17 115.521V110.37C120.17 110.015 119.881 109.726 119.526 109.726C119.17 109.726 118.882 110.015 118.882 110.37V115.521C118.882 115.876 119.17 116.165 119.526 116.165C119.881 116.165 120.17 115.876 120.17 115.521ZM120.17 105.219V100.068C120.17 99.7131 119.881 99.4246 119.526 99.4246C119.17 99.4246 118.882 99.7131 118.882 100.068V105.219C118.882 105.575 119.17 105.863 119.526 105.863C119.881 105.863 120.17 105.575 120.17 105.219ZM120.17 94.9175V89.7666C120.17 89.4113 119.881 89.1228 119.526 89.1228C119.17 89.1228 118.882 89.4113 118.882 89.7666V94.9175C118.882 95.2729 119.17 95.5614 119.526 95.5614C119.881 95.5614 120.17 95.2729 120.17 94.9175ZM120.17 84.6158V79.4648C120.17 79.1095 119.881 78.821 119.526 78.821C119.17 78.821 118.882 79.1095 118.882 79.4648V84.6158C118.882 84.9712 119.17 85.2597 119.526 85.2597C119.881 85.2597 120.17 84.9712 120.17 84.6158ZM236.053 66.9675V72.1184C236.053 72.4738 236.342 72.7623 236.697 72.7623C237.053 72.7623 237.341 72.4738 237.341 72.1184V66.9675C237.341 66.6122 237.053 66.3237 236.697 66.3237C236.342 66.3237 236.053 66.6122 236.053 66.9675ZM120.17 74.314V69.1631C120.17 68.8077 119.881 68.5192 119.526 68.5192C119.17 68.5192 118.882 68.8077 118.882 69.1631V74.314C118.882 74.6693 119.17 74.9578 119.526 74.9578C119.881 74.9578 120.17 74.6693 120.17 74.314ZM236.053 56.6658V61.8167C236.053 62.172 236.342 62.4605 236.697 62.4605C237.053 62.4605 237.341 62.172 237.341 61.8167V56.6658C237.341 56.3104 237.053 56.0219 236.697 56.0219C236.342 56.0219 236.053 56.3104 236.053 56.6658ZM120.17 64.0122V58.8613C120.17 58.506 119.881 58.2175 119.526 58.2175C119.17 58.2175 118.882 58.506 118.882 58.8613V64.0122C118.882 64.3676 119.17 64.6561 119.526 64.6561C119.881 64.6561 120.17 64.3676 120.17 64.0122ZM236.053 46.364V51.5149C236.053 51.8703 236.342 52.1588 236.697 52.1588C237.053 52.1588 237.341 51.8703 237.341 51.5149V46.364C237.341 46.0087 237.053 45.7202 236.697 45.7202C236.342 45.7202 236.053 46.0087 236.053 46.364ZM235.746 37.6569H236.053V41.2132C236.053 41.5685 236.342 41.857 236.697 41.857C237.053 41.857 237.341 41.5685 237.341 41.2132V37.0131C237.341 36.6574 237.053 36.3692 236.697 36.3692H235.746C235.391 36.3692 235.103 36.6576 235.103 37.0131C235.103 37.3684 235.391 37.6569 235.746 37.6569ZM143.03 37.6569H148.181C148.536 37.6569 148.825 37.3684 148.825 37.0131C148.825 36.6576 148.536 36.3691 148.181 36.3691H143.03C142.675 36.3691 142.386 36.6576 142.386 37.0131C142.386 37.3684 142.675 37.6569 143.03 37.6569ZM153.332 37.6569H158.483C158.838 37.6569 159.127 37.3684 159.127 37.0131C159.127 36.6576 158.838 36.3691 158.483 36.3691H153.332C152.977 36.3691 152.688 36.6576 152.688 37.0131C152.688 37.3684 152.977 37.6569 153.332 37.6569ZM204.841 37.6569H209.992C210.347 37.6569 210.636 37.3684 210.636 37.0131C210.636 36.6576 210.347 36.3691 209.992 36.3691H204.841C204.486 36.3691 204.197 36.6576 204.197 37.0131C204.197 37.3684 204.486 37.6569 204.841 37.6569ZM132.728 37.6569H137.879C138.235 37.6569 138.523 37.3684 138.523 37.0131C138.523 36.6576 138.235 36.3691 137.879 36.3691H132.728C132.373 36.3691 132.084 36.6576 132.084 37.0131C132.084 37.3684 132.373 37.6569 132.728 37.6569ZM163.634 37.6569H168.785C169.14 37.6569 169.429 37.3684 169.429 37.0131C169.429 36.6576 169.14 36.3691 168.785 36.3691H163.634C163.279 36.3691 162.99 36.6576 162.99 37.0131C162.99 37.3684 163.279 37.6569 163.634 37.6569ZM215.143 37.6569H220.294C220.649 37.6569 220.938 37.3684 220.938 37.0131C220.938 36.6576 220.649 36.3691 220.294 36.3691H215.143C214.787 36.3691 214.499 36.6576 214.499 37.0131C214.499 37.3684 214.787 37.6569 215.143 37.6569ZM225.445 37.6569H230.595C230.951 37.6569 231.239 37.3684 231.239 37.0131C231.239 36.6576 230.951 36.3691 230.595 36.3691H225.445C225.089 36.3691 224.801 36.6576 224.801 37.0131C224.801 37.3684 225.089 37.6569 225.445 37.6569ZM173.936 37.6569H179.087C179.442 37.6569 179.73 37.3684 179.73 37.0131C179.73 36.6576 179.442 36.3691 179.087 36.3691H173.936C173.58 36.3691 173.292 36.6576 173.292 37.0131C173.292 37.3684 173.58 37.6569 173.936 37.6569ZM184.237 37.6569H189.388C189.744 37.6569 190.032 37.3684 190.032 37.0131C190.032 36.6576 189.744 36.3691 189.388 36.3691H184.237C183.882 36.3691 183.594 36.6576 183.594 37.0131C183.594 37.3684 183.882 37.6569 184.237 37.6569ZM194.539 37.6569H199.69C200.045 37.6569 200.334 37.3684 200.334 37.0131C200.334 36.6576 200.045 36.3691 199.69 36.3691H194.539C194.184 36.3691 193.895 36.6576 193.895 37.0131C193.895 37.3684 194.184 37.6569 194.539 37.6569Z" fill="#728BBE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M123.329 31.1016L119.496 34.9345L115.663 31.1016L113.797 32.9672L117.63 36.8001L113.797 40.6331L115.663 42.4988L119.496 38.6657L123.329 42.4988L125.194 40.6331L121.361 36.8001L125.194 32.9672L123.329 31.1016Z" fill="#EE7070"/>
+<path d="M276.492 56.4292H230.25V60.3353H276.492V56.4292Z" fill="#86A8D8"/>
+<path d="M278.086 214.692H231.845V218.598H278.086V214.692Z" fill="#86A8D8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M260.683 60.0872C260.683 58.068 259.044 56.4287 257.024 56.4287H172.881C170.862 56.4287 169.223 58.068 169.223 60.0872V214.94C169.223 216.959 170.862 218.598 172.881 218.598H257.024C259.044 218.598 260.683 216.959 260.683 214.94V60.0872Z" fill="url(#paint0_linear_2716_90126)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M283.846 59.4225C283.846 57.7705 282.505 56.4292 280.853 56.4292H263.675C262.023 56.4292 260.682 57.7705 260.682 59.4225V215.605C260.682 217.257 262.023 218.598 263.675 218.598H280.853C282.505 218.598 283.846 217.257 283.846 215.605V59.4225Z" fill="url(#paint1_linear_2716_90126)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 63.7838C253.376 62.9756 252.719 62.3193 251.911 62.3193H177.996C177.188 62.3193 176.531 62.9756 176.531 63.7838V75.4992C176.531 76.3074 177.187 76.9637 177.996 76.9637H251.911C252.719 76.9637 253.376 76.3074 253.376 75.4992V63.7838Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 66.2471C250.52 65.4443 249.868 64.7925 249.065 64.7925H210.324C209.521 64.7925 208.869 65.4443 208.869 66.2471V73.0352C208.869 73.838 209.521 74.4898 210.324 74.4898H249.065C249.868 74.4898 250.52 73.838 250.52 73.0352V66.2471Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 66.4168C197.632 66.1062 197.38 65.854 197.069 65.854H194.443C194.132 65.854 193.88 66.1061 193.88 66.4168V72.8663C193.88 73.177 194.132 73.4291 194.443 73.4291H197.069C197.38 73.4291 197.632 73.177 197.632 72.8663V66.4168Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 66.4168C204.879 66.1062 204.627 65.854 204.317 65.854H201.69C201.379 65.854 201.127 66.1061 201.127 66.4168V72.8663C201.127 73.177 201.379 73.4291 201.69 73.4291H204.317C204.627 73.4291 204.879 73.177 204.879 72.8663V66.4168Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 66.4168C190.386 66.1062 190.134 65.854 189.823 65.854H187.197C186.886 65.854 186.634 66.1061 186.634 66.4168V72.8663C186.634 73.177 186.886 73.4291 187.197 73.4291H189.823C190.134 73.4291 190.386 73.177 190.386 72.8663V66.4168Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 66.4168C183.139 66.1062 182.887 65.854 182.576 65.854H179.95C179.639 65.854 179.387 66.1061 179.387 66.4168V72.8663C179.387 73.177 179.639 73.4291 179.95 73.4291H182.576C182.887 73.4291 183.139 73.177 183.139 72.8663V66.4168Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 82.6857C253.376 81.8773 252.719 81.2212 251.911 81.2212H177.996C177.188 81.2212 176.531 81.8773 176.531 82.6857V94.401C176.531 95.2093 177.187 95.8654 177.996 95.8654H251.911C252.719 95.8654 253.376 95.2093 253.376 94.401V82.6857Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 85.149C250.52 84.3461 249.868 83.6943 249.065 83.6943H210.324C209.521 83.6943 208.869 84.3461 208.869 85.149V91.9371C208.869 92.7398 209.521 93.3916 210.324 93.3916H249.065C249.868 93.3916 250.52 92.7398 250.52 91.9371V85.149Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 85.3188C197.632 85.0081 197.38 84.7559 197.069 84.7559H194.443C194.132 84.7559 193.88 85.0081 193.88 85.3188V91.7682C193.88 92.0788 194.132 92.3311 194.443 92.3311H197.069C197.38 92.3311 197.632 92.0788 197.632 91.7682V85.3188Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 85.3188C204.879 85.0081 204.627 84.7559 204.317 84.7559H201.69C201.379 84.7559 201.127 85.0081 201.127 85.3188V91.7682C201.127 92.0788 201.379 92.3311 201.69 92.3311H204.317C204.627 92.3311 204.879 92.0788 204.879 91.7682V85.3188Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 85.3188C190.386 85.0081 190.134 84.7559 189.823 84.7559H187.197C186.886 84.7559 186.634 85.0081 186.634 85.3188V91.7682C186.634 92.0788 186.886 92.3311 187.197 92.3311H189.823C190.134 92.3311 190.386 92.0788 190.386 91.7682V85.3188Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 85.3188C183.139 85.0081 182.887 84.7559 182.576 84.7559H179.95C179.639 84.7559 179.387 85.0081 179.387 85.3188V91.7682C179.387 92.0788 179.639 92.3311 179.95 92.3311H182.576C182.887 92.3311 183.139 92.0788 183.139 91.7682V85.3188Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 101.587C253.376 100.779 252.719 100.123 251.911 100.123H177.996C177.188 100.123 176.531 100.779 176.531 101.587V113.303C176.531 114.111 177.187 114.767 177.996 114.767H251.911C252.719 114.767 253.376 114.111 253.376 113.303V101.587Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 104.051C250.52 103.248 249.868 102.596 249.065 102.596H210.324C209.521 102.596 208.869 103.248 208.869 104.051V110.839C208.869 111.642 209.521 112.293 210.324 112.293H249.065C249.868 112.293 250.52 111.642 250.52 110.839V104.051Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 104.221C197.632 103.91 197.38 103.658 197.069 103.658H194.443C194.132 103.658 193.88 103.91 193.88 104.221V110.67C193.88 110.981 194.132 111.233 194.443 111.233H197.069C197.38 111.233 197.632 110.981 197.632 110.67V104.221Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 104.221C204.879 103.91 204.627 103.658 204.317 103.658H201.69C201.379 103.658 201.127 103.91 201.127 104.221V110.67C201.127 110.981 201.379 111.233 201.69 111.233H204.317C204.627 111.233 204.879 110.981 204.879 110.67V104.221Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 104.221C190.386 103.91 190.134 103.658 189.823 103.658H187.197C186.886 103.658 186.634 103.91 186.634 104.221V110.67C186.634 110.981 186.886 111.233 187.197 111.233H189.823C190.134 111.233 190.386 110.981 190.386 110.67V104.221Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 104.221C183.139 103.91 182.887 103.658 182.576 103.658H179.95C179.639 103.658 179.387 103.91 179.387 104.221V110.67C179.387 110.981 179.639 111.233 179.95 111.233H182.576C182.887 111.233 183.139 110.981 183.139 110.67V104.221Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 120.489C253.376 119.681 252.719 119.024 251.911 119.024H177.996C177.188 119.024 176.531 119.681 176.531 120.489V132.204C176.531 133.012 177.187 133.669 177.996 133.669H251.911C252.719 133.669 253.376 133.012 253.376 132.204V120.489Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 122.952C250.52 122.149 249.868 121.498 249.065 121.498H210.324C209.521 121.498 208.869 122.149 208.869 122.952V129.74C208.869 130.543 209.521 131.195 210.324 131.195H249.065C249.868 131.195 250.52 130.543 250.52 129.74V122.952Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 123.122C197.632 122.811 197.38 122.559 197.069 122.559H194.443C194.132 122.559 193.88 122.811 193.88 123.122V129.571C193.88 129.882 194.132 130.134 194.443 130.134H197.069C197.38 130.134 197.632 129.882 197.632 129.571V123.122Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 123.122C204.879 122.811 204.627 122.559 204.317 122.559H201.69C201.379 122.559 201.127 122.811 201.127 123.122V129.571C201.127 129.882 201.379 130.134 201.69 130.134H204.317C204.627 130.134 204.879 129.882 204.879 129.571V123.122Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 123.122C190.386 122.811 190.134 122.559 189.823 122.559H187.197C186.886 122.559 186.634 122.811 186.634 123.122V129.571C186.634 129.882 186.886 130.134 187.197 130.134H189.823C190.134 130.134 190.386 129.882 190.386 129.571V123.122Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 123.122C183.139 122.811 182.887 122.559 182.576 122.559H179.95C179.639 122.559 179.387 122.811 179.387 123.122V129.571C179.387 129.882 179.639 130.134 179.95 130.134H182.576C182.887 130.134 183.139 129.882 183.139 129.571V123.122Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 139.39C253.376 138.582 252.719 137.926 251.911 137.926H177.996C177.188 137.926 176.531 138.582 176.531 139.39V151.106C176.531 151.914 177.187 152.57 177.996 152.57H251.911C252.719 152.57 253.376 151.914 253.376 151.106V139.39Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 141.854C250.52 141.051 249.868 140.399 249.065 140.399H210.324C209.521 140.399 208.869 141.051 208.869 141.854V148.642C208.869 149.445 209.521 150.097 210.324 150.097H249.065C249.868 150.097 250.52 149.445 250.52 148.642V141.854Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 142.023C197.632 141.713 197.38 141.46 197.069 141.46H194.443C194.132 141.46 193.88 141.713 193.88 142.023V148.473C193.88 148.783 194.132 149.036 194.443 149.036H197.069C197.38 149.036 197.632 148.783 197.632 148.473V142.023Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 142.023C204.879 141.713 204.627 141.46 204.317 141.46H201.69C201.379 141.46 201.127 141.713 201.127 142.023V148.473C201.127 148.783 201.379 149.036 201.69 149.036H204.317C204.627 149.036 204.879 148.783 204.879 148.473V142.023Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 142.023C190.386 141.713 190.134 141.46 189.823 141.46H187.197C186.886 141.46 186.634 141.713 186.634 142.023V148.473C186.634 148.783 186.886 149.036 187.197 149.036H189.823C190.134 149.036 190.386 148.783 190.386 148.473V142.023Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 142.023C183.139 141.713 182.887 141.46 182.576 141.46H179.95C179.639 141.46 179.387 141.713 179.387 142.023V148.473C179.387 148.783 179.639 149.036 179.95 149.036H182.576C182.887 149.036 183.139 148.783 183.139 148.473V142.023Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 158.292C253.376 157.484 252.719 156.828 251.911 156.828H177.996C177.188 156.828 176.531 157.484 176.531 158.292V170.007C176.531 170.816 177.187 171.472 177.996 171.472H251.911C252.719 171.472 253.376 170.816 253.376 170.007V158.292Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 160.756C250.52 159.953 249.868 159.301 249.065 159.301H210.324C209.521 159.301 208.869 159.953 208.869 160.756V167.544C208.869 168.347 209.521 168.999 210.324 168.999H249.065C249.868 168.999 250.52 168.347 250.52 167.544V160.756Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 160.925C197.632 160.614 197.38 160.362 197.069 160.362H194.443C194.132 160.362 193.88 160.614 193.88 160.925V167.375C193.88 167.685 194.132 167.937 194.443 167.937H197.069C197.38 167.937 197.632 167.685 197.632 167.375V160.925Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 160.925C204.879 160.614 204.627 160.362 204.317 160.362H201.69C201.379 160.362 201.127 160.614 201.127 160.925V167.375C201.127 167.685 201.379 167.937 201.69 167.937H204.317C204.627 167.937 204.879 167.685 204.879 167.375V160.925Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 160.925C190.386 160.614 190.134 160.362 189.823 160.362H187.197C186.886 160.362 186.634 160.614 186.634 160.925V167.375C186.634 167.685 186.886 167.937 187.197 167.937H189.823C190.134 167.937 190.386 167.685 190.386 167.375V160.925Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 160.925C183.139 160.614 182.887 160.362 182.576 160.362H179.95C179.639 160.362 179.387 160.614 179.387 160.925V167.375C179.387 167.685 179.639 167.937 179.95 167.937H182.576C182.887 167.937 183.139 167.685 183.139 167.375V160.925Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 177.193C253.376 176.385 252.719 175.729 251.911 175.729H177.996C177.188 175.729 176.531 176.385 176.531 177.193V188.909C176.531 189.717 177.187 190.373 177.996 190.373H251.911C252.719 190.373 253.376 189.717 253.376 188.909V177.193Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 179.658C250.52 178.855 249.868 178.204 249.065 178.204H210.324C209.521 178.204 208.869 178.855 208.869 179.658V186.446C208.869 187.249 209.521 187.901 210.324 187.901H249.065C249.868 187.901 250.52 187.249 250.52 186.446V179.658Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 179.828C197.632 179.517 197.38 179.265 197.069 179.265H194.443C194.132 179.265 193.88 179.517 193.88 179.828V186.277C193.88 186.588 194.132 186.84 194.443 186.84H197.069C197.38 186.84 197.632 186.588 197.632 186.277V179.828Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 179.828C204.879 179.517 204.627 179.265 204.317 179.265H201.69C201.379 179.265 201.127 179.517 201.127 179.828V186.277C201.127 186.588 201.379 186.84 201.69 186.84H204.317C204.627 186.84 204.879 186.588 204.879 186.277V179.828Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 179.828C190.386 179.517 190.134 179.265 189.823 179.265H187.197C186.886 179.265 186.634 179.517 186.634 179.828V186.277C186.634 186.588 186.886 186.84 187.197 186.84H189.823C190.134 186.84 190.386 186.588 190.386 186.277V179.828Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 179.828C183.139 179.517 182.887 179.265 182.576 179.265H179.95C179.639 179.265 179.387 179.517 179.387 179.828V186.277C179.387 186.588 179.639 186.84 179.95 186.84H182.576C182.887 186.84 183.139 186.588 183.139 186.277V179.828Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.376 196.096C253.376 195.288 252.719 194.632 251.911 194.632H177.996C177.188 194.632 176.531 195.288 176.531 196.096V207.812C176.531 208.62 177.187 209.276 177.996 209.276H251.911C252.719 209.276 253.376 208.62 253.376 207.812V196.096Z" fill="#2C4087"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.52 198.56C250.52 197.757 249.868 197.105 249.065 197.105H210.324C209.521 197.105 208.869 197.757 208.869 198.56V205.348C208.869 206.15 209.521 206.802 210.324 206.802H249.065C249.868 206.802 250.52 206.15 250.52 205.348V198.56Z" fill="#C2D1F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.632 198.728C197.632 198.418 197.38 198.166 197.069 198.166H194.443C194.132 198.166 193.88 198.418 193.88 198.728V205.178C193.88 205.488 194.132 205.741 194.443 205.741H197.069C197.38 205.741 197.632 205.488 197.632 205.178V198.728Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.879 198.728C204.879 198.418 204.627 198.166 204.317 198.166H201.69C201.379 198.166 201.127 198.418 201.127 198.728V205.178C201.127 205.488 201.379 205.741 201.69 205.741H204.317C204.627 205.741 204.879 205.488 204.879 205.178V198.728Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190.386 198.728C190.386 198.418 190.134 198.166 189.823 198.166H187.197C186.886 198.166 186.634 198.418 186.634 198.728V205.178C186.634 205.488 186.886 205.741 187.197 205.741H189.823C190.134 205.741 190.386 205.488 190.386 205.178V198.728Z" fill="#EE94F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M183.139 198.728C183.139 198.418 182.887 198.166 182.576 198.166H179.95C179.639 198.166 179.387 198.418 179.387 198.728V205.178C179.387 205.488 179.639 205.741 179.95 205.741H182.576C182.887 205.741 183.139 205.488 183.139 205.178V198.728Z" fill="#69CCF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.456 110.484C204.456 109.909 203.989 109.442 203.414 109.442H36.962C36.3869 109.442 35.9199 109.909 35.9199 110.484V212.599C35.9199 213.174 36.3869 213.641 36.962 213.641H203.414C203.989 213.641 204.456 213.174 204.456 212.599V110.484Z" fill="#1D387D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M202.714 112.303C202.714 111.796 202.302 111.384 201.795 111.384H38.5791C38.0719 111.384 37.6602 111.796 37.6602 112.303V202.366C37.6602 202.874 38.0719 203.285 38.5791 203.285H201.795C202.302 203.285 202.714 202.874 202.714 202.366V112.303Z" fill="#F8FBFF"/>
+<path d="M114.395 179.892C115.585 179.892 116.149 179.297 116.149 178.602C116.149 177.01 113.576 177.611 113.576 176.687C113.576 176.358 113.849 176.097 114.519 176.097C114.897 176.097 115.325 176.209 115.715 176.439L115.969 175.812C115.591 175.564 115.046 175.428 114.525 175.428C113.334 175.428 112.777 176.023 112.777 176.724C112.777 178.335 115.356 177.722 115.356 178.658C115.356 178.981 115.071 179.223 114.395 179.223C113.861 179.223 113.309 179.024 112.963 178.745L112.684 179.371C113.043 179.681 113.718 179.892 114.395 179.892ZM155.706 179.892C157.051 179.892 158.043 178.95 158.043 177.66C158.043 176.37 157.051 175.428 155.706 175.428C154.36 175.428 153.369 176.376 153.369 177.66C153.369 178.944 154.36 179.892 155.706 179.892ZM78.54 179.83H79.3453V175.49H78.54V179.83ZM162.606 179.83L161.608 178.404C162.197 178.175 162.532 177.691 162.532 177.034C162.532 176.072 161.825 175.49 160.684 175.49H158.899V179.83H159.704V178.565H160.684C160.74 178.565 160.796 178.565 160.852 178.559L161.739 179.83H162.606ZM83.5745 175.49V178.429L81.1806 175.49H80.5178V179.83H81.3169V176.891L83.7107 179.83H84.3735V175.49H83.5745ZM101.015 175.49V178.429L98.6214 175.49H97.9587V179.83H98.7577V176.891L101.151 179.83H101.814V175.49H101.015ZM128.797 175.49L127.34 178.838L125.896 175.49H125.022L126.919 179.83H127.712L129.603 175.49H128.797ZM86.4203 179.83H87.2255V176.171H88.6639V175.49H84.9819V176.171H86.4203L86.4203 179.83ZM97.1333 179.83L96.1358 178.404C96.7243 178.175 97.0589 177.691 97.0589 177.034C97.0589 176.072 96.3527 175.49 95.2116 175.49H93.4264V179.83H94.2317V178.565H95.2116C95.2675 178.565 95.3233 178.565 95.3791 178.559L96.266 179.83H97.1333ZM106.229 179.83H107.072L105.113 175.49H104.32L102.367 179.83H103.198L103.625 178.825H105.795L106.229 179.83ZM152.853 179.83L151.856 178.404C152.444 178.175 152.779 177.691 152.779 177.034C152.779 176.072 152.073 175.49 150.932 175.49H149.146V179.83H149.952V178.565H150.932C150.987 178.565 151.043 178.565 151.099 178.559L151.986 179.83H152.853ZM124.81 179.83L123.813 178.404C124.401 178.175 124.736 177.691 124.736 177.034C124.736 176.072 124.03 175.49 122.889 175.49H121.103V179.83H121.909V178.565H122.889C122.944 178.565 123 178.565 123.056 178.559L123.943 179.83H124.81ZM137.923 179.83L136.926 178.404C137.515 178.175 137.849 177.691 137.849 177.034C137.849 176.072 137.143 175.49 136.002 175.49H134.217V179.83H135.022V178.565H136.002C136.058 178.565 136.113 178.565 136.169 178.559L137.056 179.83H137.923ZM148.321 179.83L147.323 178.404C147.912 178.175 148.247 177.691 148.247 177.034C148.247 176.072 147.54 175.49 146.399 175.49H144.614V179.83H145.419V178.565H146.399C146.455 178.565 146.511 178.565 146.567 178.559L147.454 179.83H148.321ZM107.625 179.83H110.699V179.148H108.43V175.49H107.624L107.625 179.83ZM117.755 179.155V177.957H119.85V177.294H117.755V176.165H120.117V175.49H116.949V179.83H120.204V179.155H117.755ZM90.0776 179.155V177.957H92.1732V177.294H90.0776V176.165H92.4399V175.49H89.2724V179.83H92.5266V179.155H90.0776ZM130.868 179.155V177.957H132.963V177.294H130.868V176.165H133.23V175.49H130.063V179.83H133.317V179.155H130.868ZM141.265 179.155V177.957H143.361V177.294H141.265V176.165H143.627V175.49H140.46V179.83H143.714V179.155H141.265ZM155.706 179.186C154.831 179.186 154.18 178.547 154.18 177.66C154.18 176.773 154.831 176.134 155.706 176.134C156.58 176.134 157.231 176.773 157.231 177.66C157.231 178.547 156.58 179.186 155.706 179.186ZM103.898 178.193L104.71 176.295L105.528 178.193H103.898ZM96.2474 177.034C96.2474 177.58 95.8815 177.902 95.1744 177.902H94.2317V176.171H95.1744C95.8815 176.171 96.2474 176.488 96.2474 177.034ZM151.967 177.034C151.967 177.58 151.601 177.902 150.894 177.902H149.952V176.171H150.894C151.601 176.171 151.967 176.488 151.967 177.034ZM161.72 177.034C161.72 177.58 161.354 177.902 160.647 177.902H159.704V176.171H160.647C161.354 176.171 161.72 176.488 161.72 177.034ZM137.038 177.034C137.038 177.58 136.672 177.902 135.965 177.902H135.022V176.171H135.965C136.672 176.171 137.038 176.488 137.038 177.034ZM147.435 177.034C147.435 177.58 147.069 177.902 146.362 177.902H145.419V176.171H146.362C147.069 176.171 147.435 176.488 147.435 177.034ZM123.925 177.034C123.925 177.58 123.559 177.902 122.852 177.902H121.909V176.171H122.852C123.559 176.171 123.925 176.488 123.925 177.034Z" fill="#768BB3"/>
+<path d="M88.9802 149.397H85.4546L86.3133 140.713H100.367V136.786H82.5166L80.8443 153.323H88.0309C95.3533 153.323 97.6132 155.539 97.6132 159.112C97.6132 162.549 94.9013 164.764 90.1102 164.764C86.2682 164.764 82.7426 163.362 80.6182 161.373L78.5391 164.945C81.2511 167.337 85.6806 168.781 90.1553 168.781C98.2452 168.781 102.128 164.403 102.128 158.931C102.128 153.323 98.4259 149.397 88.9802 149.397ZM118.809 168.781C126.179 168.781 131.688 162.911 131.688 152.603C131.688 142.295 126.179 136.424 118.809 136.424C111.394 136.424 105.885 142.295 105.885 152.603C105.885 162.911 111.394 168.781 118.809 168.781ZM148.957 168.781C156.327 168.781 161.836 162.911 161.836 152.603C161.836 142.295 156.327 136.424 148.957 136.424C141.542 136.424 136.033 142.295 136.033 152.603C136.033 162.911 141.542 168.781 148.957 168.781ZM118.809 164.764C113.835 164.764 110.399 160.696 110.399 152.603C110.399 144.51 113.835 140.441 118.809 140.441C123.737 140.441 127.174 144.51 127.174 152.603C127.174 160.696 123.737 164.764 118.809 164.764ZM148.957 164.764C143.983 164.764 140.547 160.696 140.547 152.603C140.547 144.51 143.983 140.441 148.957 140.441C153.886 140.441 157.322 144.51 157.322 152.603C157.322 160.696 153.886 164.764 148.957 164.764Z" fill="#768BB3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M211.967 209.385H28.4082C28.4082 214.473 32.5329 218.598 37.6211 218.598H202.755C207.843 218.598 211.967 214.473 211.967 209.385Z" fill="#182D66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.73 24.0565C117.237 23.2444 118.127 22.751 119.084 22.751C120.041 22.751 120.931 23.2444 121.438 24.0565C125.397 30.4013 133.364 43.1674 137.513 49.8156C138.047 50.6709 138.075 51.7486 137.585 52.6301C137.096 53.5118 136.168 54.0587 135.159 54.0587H103.009C102 54.0587 101.072 53.5118 100.583 52.6301C100.094 51.7486 100.121 50.6709 100.655 49.8156C104.804 43.1674 112.771 30.4013 116.73 24.0565Z" fill="url(#paint2_linear_2716_90126)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.084 46.4608C119.735 46.4608 120.263 47.0369 120.263 47.7465C120.263 48.4561 119.735 49.0323 119.084 49.0323C118.433 49.0323 117.905 48.4561 117.905 47.7465C117.905 47.0369 118.433 46.4608 119.084 46.4608ZM120.61 34.3009C120.63 33.8839 120.477 33.4772 120.189 33.1753C119.901 32.8734 119.501 32.7026 119.084 32.7026C118.666 32.7026 118.267 32.8734 117.979 33.1753C117.69 33.4772 117.538 33.8839 117.557 34.3009C117.676 36.8816 117.906 41.8947 118.005 44.0539C118.032 44.6302 118.507 45.0839 119.084 45.0839C119.661 45.0839 120.136 44.6302 120.162 44.0539C120.262 41.8947 120.492 36.8816 120.61 34.3009Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2716_90126" x1="214.951" y1="70.7778" x2="214.951" y2="209.275" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5E4FB"/>
+<stop offset="1" stop-color="#BCCFF3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2716_90126" x1="272.263" y1="70.7781" x2="272.263" y2="209.275" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B6CFF6"/>
+<stop offset="1" stop-color="#88AFE5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2716_90126" x1="119.082" y1="23.4871" x2="119.082" y2="50.092" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EE8570"/>
+<stop offset="1" stop-color="#F06060"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/public/errors/cannot_load.svg b/frontend/public/errors/cannot_load.svg
new file mode 100644
index 0000000..79890d6
--- /dev/null
+++ b/frontend/public/errors/cannot_load.svg
@@ -0,0 +1,5 @@
+<svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M132.307 78.4648C130.836 89.6844 126.338 100.292 119.297 109.15C112.255 118.007 102.935 124.781 92.3359 128.745C81.737 132.708 70.2591 133.711 59.1332 131.647C48.0073 129.583 37.6532 124.53 29.1812 117.028C20.7093 109.527 14.4391 99.8606 11.0431 89.0665C7.64722 78.2724 7.25365 66.7574 9.90465 55.7566C12.5556 44.7558 18.1512 34.6842 26.0912 26.6218C34.0312 18.5594 44.0161 12.8105 54.9751 9.99161C85.3548 2.19995 116.802 17.8378 128.412 46.9787" stroke="#BE2D46" stroke-width="15.5833" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M133.829 19.8535V49.6868H103.996" stroke="#BE2D46" stroke-width="11.9333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.9961 98.8481C59.9961 97.5922 60.2435 96.3485 60.7241 95.1882C61.2047 94.0279 61.9092 92.9736 62.7973 92.0855C63.6854 91.1974 64.7397 90.4929 65.9 90.0123C67.0603 89.5317 68.304 89.2843 69.5599 89.2843C70.8159 89.2843 72.0595 89.5317 73.2198 90.0123C74.3802 90.4929 75.4345 91.1974 76.3226 92.0855C77.2106 92.9736 77.9151 94.0279 78.3957 95.1882C78.8764 96.3485 79.1237 97.5922 79.1237 98.8481C79.1237 101.385 78.1161 103.817 76.3226 105.611C74.529 107.404 72.0964 108.412 69.5599 108.412C67.0234 108.412 64.5908 107.404 62.7973 105.611C61.0037 103.817 59.9961 101.385 59.9961 98.8481ZM60.9333 41.4173C60.806 40.2108 60.9337 38.9909 61.3083 37.8369C61.6828 36.6829 62.2958 35.6205 63.1074 34.7187C63.919 33.8169 64.9112 33.0958 66.0195 32.6022C67.1278 32.1086 68.3275 31.8535 69.5408 31.8535C70.7541 31.8535 71.9538 32.1086 73.0621 32.6022C74.1704 33.0958 75.1626 33.8169 75.9742 34.7187C76.7858 35.6205 77.3988 36.6829 77.7733 37.8369C78.1479 38.9909 78.2756 40.2108 78.1482 41.4173L74.8009 74.9577C74.6649 76.258 74.0521 77.4619 73.0807 78.337C72.1093 79.2121 70.8482 79.6963 69.5408 79.6963C68.2334 79.6963 66.9723 79.2121 66.0009 78.337C65.0295 77.4619 64.4167 76.258 64.2807 74.9577L60.9333 41.4173Z" fill="#BE2D46"/>
+</svg>
diff --git a/frontend/public/errors/no_internet.svg b/frontend/public/errors/no_internet.svg
new file mode 100644
index 0000000..2cc5baf
--- /dev/null
+++ b/frontend/public/errors/no_internet.svg
@@ -0,0 +1,16 @@
+<svg width="240" height="222" viewBox="0 0 240 222" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2716_90110)">
+<path d="M18.0154 80.8494C14.8168 80.8707 11.7457 79.5963 9.50208 77.3164L8.65076 76.2522C6.31726 73.8441 5.08458 70.5775 5.24543 67.2281C5.36177 63.9071 6.9151 60.8005 9.50208 58.7148C73.0089 3.88686 167.026 3.61565 230.848 58.0763C233.33 60.0811 234.871 63.0244 235.105 66.2065C235.358 69.4403 234.282 72.6375 232.125 75.0603L231.146 76.1671C228.935 78.8288 225.667 80.3852 222.207 80.4237C219.262 80.388 216.42 79.3353 214.162 77.4441C160.077 31.6131 80.7245 31.8115 26.8692 77.9123C24.4203 80.0198 21.2384 81.0753 18.0154 80.8494Z" fill="#C7DEF1"/>
+<path d="M185.811 117.159C183.195 117.178 180.653 116.29 178.617 114.647C144.437 87.3463 95.9099 87.3463 61.7297 114.647C59.694 116.29 57.152 117.178 54.536 117.159C51.3369 117.14 48.2755 115.854 46.0227 113.583L44.9585 112.519C42.5605 110.094 41.2936 106.773 41.4681 103.367C41.6824 99.9209 43.3352 96.7235 46.0227 94.5557C89.4534 60.0107 150.979 60.0107 194.41 94.5557C197.097 96.7235 198.75 99.9209 198.964 103.367C199.139 106.773 197.872 110.094 195.474 112.519L194.41 113.583C192.136 115.875 189.04 117.163 185.811 117.159Z" fill="#C7DEF1"/>
+<path d="M149.416 153.723C147.009 153.713 144.651 153.035 142.606 151.765C128.815 143.421 111.532 143.421 97.7406 151.765C95.695 153.035 93.3375 153.713 90.93 153.723C87.7481 153.788 84.6761 152.559 82.4167 150.318L81.3525 149.254C76.6487 144.516 76.6765 136.861 81.4147 132.158C82.0173 131.559 82.6813 131.026 83.3957 130.567C105.746 116.298 134.345 116.298 156.695 130.567C162.312 134.177 163.939 141.656 160.329 147.273C159.87 147.987 159.337 148.651 158.739 149.254L157.674 150.318C155.415 152.559 152.343 153.788 149.161 153.723H149.416Z" fill="#C7DEF1"/>
+<path d="M132.214 199.816C138.863 193.167 138.863 182.386 132.214 175.737C125.564 169.087 114.784 169.087 108.134 175.737C101.485 182.386 101.485 193.167 108.134 199.816C114.784 206.465 125.564 206.465 132.214 199.816Z" fill="#C7DEF1"/>
+<path d="M233.231 54.9262C216.434 40.6562 197.098 29.681 176.234 22.5757L185.599 6.40037C186.774 4.3551 186.069 1.74419 184.024 0.568748C181.979 -0.606699 179.368 0.0984411 178.192 2.14371L167.891 19.9791C136.61 11.0127 103.44 11.0127 72.159 19.9791C69.88 20.5561 68.5003 22.8714 69.0774 25.1503C69.0828 25.1719 69.0884 25.1933 69.0942 25.2148C69.7308 27.4778 72.0814 28.7964 74.3444 28.1599C74.3538 28.1572 74.3631 28.1546 74.3725 28.1519C103.418 19.8456 134.182 19.6395 163.337 27.5559L154.653 43.0502C108.368 31.9099 59.5487 43.6399 23.3777 74.592C20.3088 77.3008 15.6716 77.1895 12.7361 74.3366L11.6719 73.2299C10.1784 71.6664 9.39341 69.5577 9.50104 67.3982C9.56013 65.3187 10.4862 63.3586 12.055 61.9923C18.6241 56.3629 25.6109 51.2402 32.9552 46.6683C34.9535 45.4224 35.5633 42.7924 34.3173 40.7941C33.0714 38.7959 30.4414 38.186 28.4432 39.432C20.7304 44.2357 13.4013 49.6294 6.52139 55.5647C3.14714 58.4505 1.13944 62.6203 0.987738 67.0577C0.827902 71.6125 2.5525 76.0317 5.75518 79.2743L6.86192 80.3385C9.81778 83.3177 13.8183 85.0279 18.0144 85.1059C21.9707 85.0808 25.7887 83.6472 28.7837 81.0621C62.1863 52.4047 107.118 41.1167 150.098 50.5844L141.457 66.1212C134.428 64.9115 127.307 64.3134 120.174 64.3335C92.312 64.2915 65.2744 73.7847 43.5543 91.2355C36.478 96.7648 35.2239 106.984 40.7531 114.06C41.1224 114.533 41.5176 114.984 41.9368 115.413L42.9584 116.477C48.7065 122.206 57.8101 122.789 64.2416 117.84C80.0918 105.112 99.8469 98.2415 120.174 98.3867H122.558L112.555 115.796C101.417 116.931 90.701 120.664 81.2682 126.693C73.6509 131.538 71.4032 141.64 76.2478 149.258C76.8827 150.256 77.624 151.182 78.4589 152.021L79.523 153.042C81.9676 155.385 85.1022 156.878 88.462 157.299L54.7493 215.615C53.5738 217.651 54.2714 220.254 56.3073 221.43C56.9594 221.806 57.6996 222.003 58.4526 222C59.9794 222.006 61.3925 221.194 62.1559 219.872L99.5293 155.17L99.9975 154.915C112.395 147.385 127.954 147.385 140.351 154.915C146.827 159.077 155.321 158.212 160.825 152.829L161.889 151.808C165.369 148.311 167.089 143.433 166.572 138.527C166.018 133.599 163.284 129.178 159.122 126.481C148.158 119.59 135.545 115.768 122.6 115.413L131.965 99.1529C148.077 101.248 163.295 107.76 175.936 117.967C178.742 120.202 182.224 121.418 185.812 121.415C190.156 121.41 194.321 119.68 197.39 116.605L198.411 115.541C204.78 109.209 204.809 98.9136 198.477 92.5454C198.014 92.0794 197.523 91.642 197.007 91.2355C183.267 80.1882 167.29 72.2582 150.184 67.9942L158.952 52.7979C178.09 58.2741 195.848 67.7479 211.054 80.5939C217.803 86.464 228.022 85.7992 233.954 79.104L234.934 77.9547C237.821 74.6654 239.276 70.3601 238.977 65.9935C238.627 61.682 236.556 57.6929 233.231 54.9262ZM85.5249 147.125L84.5033 146.061C82.8075 144.412 81.974 142.069 82.2473 139.719C82.5073 137.361 83.8222 135.247 85.8229 133.972C92.3383 129.859 99.5516 126.974 107.106 125.459L93.5274 148.956C90.7282 149.904 87.6334 149.197 85.5249 147.125ZM120.174 123.927C132.348 123.932 144.267 127.417 154.525 133.972C156.526 135.247 157.841 137.361 158.101 139.719C158.374 142.069 157.541 144.412 155.845 146.061L154.823 147.125C152.09 149.695 147.948 150.047 144.82 147.977C133.322 140.989 119.404 139.195 106.51 143.039L117.663 123.927H120.174ZM120.174 89.8734C97.9898 89.8424 76.4527 97.3466 59.0911 111.157C56.0195 113.493 51.6863 113.164 49.0028 110.39L47.8109 109.539C46.2437 107.965 45.4229 105.797 45.5549 103.58C45.6852 101.349 46.752 99.2776 48.492 97.8759C68.8103 81.5623 94.1173 72.7259 120.174 72.8468C125.687 72.8704 131.192 73.2828 136.647 74.0812L127.368 90.1713C124.984 89.8734 122.6 89.8734 120.174 89.8734ZM191.728 97.8759C193.468 99.2776 194.535 101.349 194.666 103.58C194.798 105.797 193.977 107.965 192.41 109.539L191.345 110.561C188.653 113.316 184.334 113.644 181.257 111.327C168.298 100.965 152.919 94.0657 136.562 91.2781L145.714 75.7413C162.533 79.5324 178.269 87.1018 191.728 97.8759ZM228.378 72.3359L227.399 73.4427C224.525 76.6508 219.6 76.9361 216.374 74.0812C200.79 60.9272 182.684 51.0923 163.166 45.1785L171.68 30.1099C192.137 36.8139 211.092 47.4408 227.484 61.3964C229.021 62.7019 229.958 64.5772 230.081 66.5895C230.322 68.6571 229.707 70.7335 228.378 72.3359Z" fill="#102D5F"/>
+<path d="M47.8138 37.8995C48.4433 37.895 49.0656 37.7647 49.6441 37.5164C52.3684 36.2394 55.1352 35.0049 57.9446 33.8557C60.1935 33.1707 61.4613 30.7924 60.7764 28.5435C60.0915 26.2946 57.7132 25.0267 55.4643 25.7117C55.2033 25.7912 54.9505 25.8955 54.7095 26.0234C51.7725 27.2153 48.8779 28.4923 45.9834 29.8544C43.8676 30.879 42.983 33.4249 44.0076 35.5407C44.7149 37.0012 46.1911 37.9325 47.8138 37.942L47.8138 37.8995Z" fill="#102D5F"/>
+<path d="M120.175 166.493C108.42 166.493 98.8916 176.022 98.8916 187.776C98.8916 199.531 108.42 209.06 120.175 209.06C131.929 209.06 141.458 199.531 141.458 187.776C141.458 176.022 131.929 166.493 120.175 166.493ZM120.175 200.546C113.122 200.546 107.405 194.829 107.405 187.776C107.405 180.724 113.122 175.006 120.175 175.006C127.228 175.006 132.945 180.724 132.945 187.776C132.945 194.829 127.228 200.546 120.175 200.546Z" fill="#102D5F"/>
+</g>
+<defs>
+<clipPath id="clip0_2716_90110">
+<rect width="238.038" height="222" fill="white" transform="translate(0.980469)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/public/errors/red_x.svg b/frontend/public/errors/red_x.svg
new file mode 100644
index 0000000..7dbfc68
--- /dev/null
+++ b/frontend/public/errors/red_x.svg
@@ -0,0 +1,4 @@
+<svg width="156" height="156" viewBox="0 0 156 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.916 77.9167C155.916 120.95 121.033 155.833 77.9997 155.833C34.9663 155.833 0.0830078 120.95 0.0830078 77.9167C0.0830078 34.8833 34.9663 0 77.9997 0C121.033 0 155.916 34.8833 155.916 77.9167ZM47.6979 108.218C46.9675 107.488 46.5572 106.497 46.5572 105.464C46.5572 104.431 46.9675 103.44 47.6979 102.71L72.491 77.9167L47.6979 53.1236C46.9882 52.3888 46.5955 51.4047 46.6044 50.3832C46.6133 49.3618 47.023 48.3847 47.7453 47.6623C48.4677 46.94 49.4448 46.5303 50.4663 46.5214C51.4877 46.5125 52.4718 46.9052 53.2066 47.6149L77.9997 72.408L102.793 47.6149C103.528 46.9052 104.512 46.5125 105.533 46.5214C106.555 46.5303 107.532 46.94 108.254 47.6623C108.976 48.3847 109.386 49.3618 109.395 50.3832C109.404 51.4047 109.011 52.3888 108.301 53.1236L83.5084 77.9167L108.301 102.71C109.011 103.445 109.404 104.429 109.395 105.45C109.386 106.472 108.976 107.449 108.254 108.171C107.532 108.893 106.555 109.303 105.533 109.312C104.512 109.321 103.528 108.928 102.793 108.218L77.9997 83.4254L53.2066 108.218C52.476 108.949 51.4853 109.359 50.4522 109.359C49.4192 109.359 48.4285 108.949 47.6979 108.218Z" fill="#BE2D46"/>
+<path d="M96.2125 75.6716C94.6466 77.233 94.6448 79.7688 96.2085 81.3324L116.846 101.97C118.408 103.532 118.408 106.065 116.846 107.627L106.709 117.764C105.147 119.326 102.614 119.326 101.052 117.764L80.4105 97.1224C78.8484 95.5603 76.3157 95.5603 74.7536 97.1224L54.0375 117.839C52.4754 119.401 49.9427 119.401 48.3806 117.839L38.2435 107.701C36.6814 106.139 36.6814 103.607 38.2435 102.045L58.9596 81.3284C60.5217 79.7663 60.5217 77.2337 58.9596 75.6716L38.2435 54.9554C36.6814 53.3933 36.6814 50.8607 38.2435 49.2986L48.3806 39.1614C49.9427 37.5993 52.4754 37.5993 54.0375 39.1614L74.7576 59.8816C76.3181 61.4421 78.8477 61.4439 80.4105 59.8856L101.127 39.2279C102.689 37.6696 105.219 37.6714 106.779 39.2319L116.917 49.3691C118.48 50.9327 118.478 53.4685 116.913 55.0299L96.2125 75.6716Z" fill="#F7F7F7"/>
+</svg>
diff --git a/frontend/public/ic_check.svg b/frontend/public/ic_check.svg
new file mode 100644
index 0000000..3122240
--- /dev/null
+++ b/frontend/public/ic_check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7949 8.045L9.79492 20.045C9.6904 20.1499 9.56621 20.2331 9.42947 20.2899C9.29272 20.3467 9.14611 20.3759 8.99804 20.3759C8.84998 20.3759 8.70337 20.3467 8.56662 20.2899C8.42988 20.2331 8.30569 20.1499 8.20117 20.045L2.95117 14.795C2.84652 14.6904 2.76351 14.5661 2.70688 14.4294C2.65024 14.2927 2.62109 14.1461 2.62109 13.9981C2.62109 13.8501 2.65024 13.7036 2.70688 13.5669C2.76351 13.4301 2.84652 13.3059 2.95117 13.2012C3.05582 13.0966 3.18005 13.0136 3.31678 12.957C3.45351 12.9003 3.60005 12.8712 3.74805 12.8712C3.89604 12.8712 4.04258 12.9003 4.17931 12.957C4.31604 13.0136 4.44027 13.0966 4.54492 13.2012L8.99898 17.6553L20.203 6.45312C20.4144 6.24178 20.701 6.12305 20.9999 6.12305C21.2988 6.12305 21.5854 6.24178 21.7968 6.45312C22.0081 6.66447 22.1269 6.95111 22.1269 7.25C22.1269 7.54888 22.0081 7.83553 21.7968 8.04687L21.7949 8.045Z" fill="#F7F7F7"/>
+</svg>
diff --git a/frontend/public/ic_close_large.svg b/frontend/public/ic_close_large.svg
new file mode 100644
index 0000000..1eecd53
--- /dev/null
+++ b/frontend/public/ic_close_large.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="white"/>
+<path d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289Z" fill="#102D5F"/>
+</svg>
diff --git a/frontend/public/ic_close_red.svg b/frontend/public/ic_close_red.svg
new file mode 100644
index 0000000..af8b99b
--- /dev/null
+++ b/frontend/public/ic_close_red.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.70711 5.79289C6.31658 5.40237 5.68342 5.40237 5.29289 5.79289C4.90237 6.18342 4.90237 6.81658 5.29289 7.20711L10.5858 12.5L5.29289 17.7929C4.90237 18.1834 4.90237 18.8166 5.29289 19.2071C5.68342 19.5976 6.31658 19.5976 6.70711 19.2071L12 13.9142L17.2929 19.2071C17.6834 19.5976 18.3166 19.5976 18.7071 19.2071C19.0976 18.8166 19.0976 18.1834 18.7071 17.7929L13.4142 12.5L18.7071 7.20711C19.0976 6.81658 19.0976 6.18342 18.7071 5.79289C18.3166 5.40237 17.6834 5.40237 17.2929 5.79289L12 11.0858L6.70711 5.79289Z" fill="#BE2D46"/>
+</svg>
diff --git a/frontend/public/ic_edit.svg b/frontend/public/ic_edit.svg
index 728339f..5765a8e 100644
--- a/frontend/public/ic_edit.svg
+++ b/frontend/public/ic_edit.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 20.5C4.44772 20.5 4 20.0523 4 19.5C4 18.9477 4.44772 18.5 5 18.5H19C19.5523 18.5 20 18.9477 20 19.5C20 20.0523 19.5523 20.5 19 20.5H5Z" fill="#F7F7F7"/>
-<path d="M14.972 6.03309C14.8125 5.87504 14.5536 5.87504 14.3937 6.03309L6.70294 13.6328L5.31426 16.4652C5.1915 16.8461 5.06084 17.0342 5.35492 17.3249C5.649 17.6156 5.83926 17.4865 6.22452 17.3651L9.08202 15.9848L16.7807 8.3925C16.9406 8.23484 16.9406 7.97884 16.7807 7.82079L14.972 6.03309Z" fill="#F7F7F7"/>
-<path d="M15.7108 4.7033C15.5743 4.83833 15.5743 5.05764 15.7108 5.19267L17.6028 7.06272C17.7394 7.19813 17.9612 7.19813 18.0978 7.06272L18.44 6.74884C18.9551 6.23918 18.9551 5.41342 18.44 4.90376L17.9189 4.38903C17.4038 3.87976 16.5681 3.87976 16.053 4.38903L15.7108 4.7033Z" fill="#F7F7F7"/>
+<path d="M5 20.5C4.44772 20.5 4 20.0523 4 19.5C4 18.9477 4.44772 18.5 5 18.5H19C19.5523 18.5 20 18.9477 20 19.5C20 20.0523 19.5523 20.5 19 20.5H5Z" fill="#102D5F"/>
+<path d="M14.9713 6.0326C14.8118 5.87455 14.5529 5.87455 14.393 6.0326L6.70221 13.6323L5.31353 16.4647C5.19076 16.8456 5.06011 17.0337 5.35418 17.3244C5.64826 17.6151 5.83853 17.486 6.22379 17.3646L9.08129 15.9843L16.78 8.39201C16.9398 8.23436 16.9398 7.97836 16.78 7.82031L14.9713 6.0326Z" fill="#102D5F"/>
+<path d="M15.7118 4.70306C15.5752 4.83808 15.5752 5.0574 15.7118 5.19242L17.6038 7.06247C17.7404 7.19789 17.9622 7.19789 18.0988 7.06247L18.441 6.74859C18.9561 6.23893 18.9561 5.41318 18.441 4.90352L17.9199 4.38879C17.4048 3.87952 16.5691 3.87952 16.054 4.38879L15.7118 4.70306Z" fill="#102D5F"/>
 </svg>
diff --git a/frontend/public/ic_error.svg b/frontend/public/ic_error.svg
new file mode 100644
index 0000000..438f0c6
--- /dev/null
+++ b/frontend/public/ic_error.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25.0443" cy="24.4993" r="16.3333" fill="#BE2D46"/>
+<path d="M25.0417 30.6257C26.1692 30.6257 27.0833 31.5397 27.0833 32.6673C27.0833 33.7949 26.1692 34.709 25.0417 34.709C23.9141 34.709 23 33.7949 23 32.6673C23 31.5397 23.9141 30.6257 25.0417 30.6257Z" fill="#F7F7F7"/>
+<path d="M26.5729 27.5632C26.5729 28.4088 25.8874 29.0944 25.0417 29.0944C24.196 29.0944 23.5104 28.4088 23.5104 27.5632V16.334C23.5104 15.4883 24.196 14.8027 25.0417 14.8027C25.8874 14.8027 26.5729 15.4883 26.5729 16.334V27.5632Z" fill="#F7F7F7"/>
+</svg>
diff --git a/frontend/public/ic_hide.svg b/frontend/public/ic_hide.svg
new file mode 100644
index 0000000..7d20b54
--- /dev/null
+++ b/frontend/public/ic_hide.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic_hide">
+<g id="icon">
+<path id="Mask" fill-rule="evenodd" clip-rule="evenodd" d="M12.5 16.9983C9.739 16.9983 7.5 14.7603 7.5 11.9983C7.5 11.2803 7.657 10.6013 7.93 9.9843L9.541 11.5953L9.53402 11.6435C9.517 11.7603 9.5 11.877 9.5 11.9983C9.5 13.6553 10.843 14.9983 12.5 14.9983C12.6219 14.9983 12.7399 14.9811 12.8575 14.964H12.8575L12.904 14.9573L14.515 16.5683C13.897 16.8413 13.218 16.9983 12.5 16.9983ZM18.296 17.5213L16.159 15.3843L14.745 13.9703L10.528 9.7543L9.114 8.3393L7.03 6.2553L4.627 3.8523C4.237 3.4623 3.604 3.4623 3.213 3.8523C2.822 4.2433 2.822 4.8763 3.213 5.2673L5.41 7.4633C3.937 8.7313 2.717 10.3053 2 11.9983C3.729 16.0813 8.358 19.4983 12.5 19.4983C13.818 19.4983 15.185 19.1503 16.493 18.5463L18.77 20.8233C19.16 21.2143 19.793 21.2143 20.184 20.8233C20.574 20.4333 20.574 19.7993 20.184 19.4093L18.296 17.5213ZM12.5 8.9983C12.111 8.9983 11.742 9.0773 11.403 9.2143L15.284 13.0953C15.421 12.7563 15.5 12.3883 15.5 11.9983C15.5 10.3413 14.157 8.9983 12.5 8.9983ZM12.4999 6.9986C11.5529 6.9986 10.6759 7.2746 9.9239 7.7356L7.9289 5.7406C9.4079 4.9616 10.9859 4.4986 12.4999 4.4986C16.6419 4.4986 21.2709 7.9156 22.9999 11.9986C22.2069 13.8716 20.7989 15.5976 19.1119 16.9236L16.7629 14.5746C17.2239 13.8226 17.4999 12.9456 17.4999 11.9986C17.4999 9.2366 15.2619 6.9986 12.4999 6.9986Z" fill="#232220"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/public/ic_show.svg b/frontend/public/ic_show.svg
new file mode 100644
index 0000000..ab9a4f7
--- /dev/null
+++ b/frontend/public/ic_show.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic_show">
+<g id="icon">
+<path id="Mask" fill-rule="evenodd" clip-rule="evenodd" d="M15.5 12.0598C15.5 13.7168 14.157 15.0598 12.5 15.0598C10.843 15.0598 9.5 13.7168 9.5 12.0598C9.5 10.4028 10.843 9.0598 12.5 9.0598C14.157 9.0598 15.5 10.4028 15.5 12.0598ZM12.5 17.0598C9.739 17.0598 7.5 14.8218 7.5 12.0598C7.5 9.2988 9.739 7.0598 12.5 7.0598C15.262 7.0598 17.5 9.2988 17.5 12.0598C17.5 14.8218 15.262 17.0598 12.5 17.0598ZM12.5 4.5598C8.358 4.5598 3.729 7.9768 2 12.0598C3.729 16.1428 8.358 19.5598 12.5 19.5598C16.642 19.5598 21.271 16.1428 23 12.0598C21.271 7.9768 16.642 4.5598 12.5 4.5598Z" fill="#232220"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/public/ic_success.svg b/frontend/public/ic_success.svg
new file mode 100644
index 0000000..6b9c9d4
--- /dev/null
+++ b/frontend/public/ic_success.svg
@@ -0,0 +1,4 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5013 40.8327C33.522 40.8327 40.8346 33.52 40.8346 24.4993C40.8346 15.4787 33.522 8.16602 24.5013 8.16602C15.4806 8.16602 8.16797 15.4787 8.16797 24.4993C8.16797 33.52 15.4806 40.8327 24.5013 40.8327Z" fill="#3BB966"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0294 19.1413C29.7338 18.2608 31.0186 18.1181 31.8991 18.8225C32.7796 19.5269 32.9224 20.8117 32.218 21.6922L24.0513 31.9005C23.2911 32.8507 21.8738 32.9292 21.0134 32.0688L16.93 27.9854C16.1327 27.1881 16.1327 25.8954 16.93 25.0981C17.7273 24.3007 19.0201 24.3007 19.8174 25.0981L22.2877 27.5684L29.0294 19.1413Z" fill="#F7F7F7"/>
+</svg>
diff --git a/frontend/public/mdi_trash.svg b/frontend/public/mdi_trash.svg
new file mode 100644
index 0000000..313d9b0
--- /dev/null
+++ b/frontend/public/mdi_trash.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4.5H15.5L14.5 3.5H9.5L8.5 4.5H5V6.5H19M6 19.5C6 20.0304 6.21071 20.5391 6.58579 20.9142C6.96086 21.2893 7.46957 21.5 8 21.5H16C16.5304 21.5 17.0391 21.2893 17.4142 20.9142C17.7893 20.5391 18 20.0304 18 19.5V7.5H6V19.5Z" fill="#BE2D46"/>
+</svg>
diff --git a/frontend/src/api/FurnitureItems.ts b/frontend/src/api/FurnitureItems.ts
index edb35d2..e20f904 100644
--- a/frontend/src/api/FurnitureItems.ts
+++ b/frontend/src/api/FurnitureItems.ts
@@ -1,11 +1,5 @@
 import { APIResult, handleAPIError, get } from "@/api/requests";
-export interface FurnitureItemJson {
-  _id: string;
-  category: string;
-  name: string;
-  allowMultiple: boolean;
-  categoryIndex: number;
-}
+
 export interface FurnitureItem {
   _id: string;
   category: string;
@@ -14,21 +8,11 @@ export interface FurnitureItem {
   categoryIndex: number;
 }
 
-function parseFurnitureItem(furnitureItem: FurnitureItemJson) {
-  return {
-    _id: furnitureItem._id,
-    category: furnitureItem.category,
-    name: furnitureItem.name,
-    allowMultiple: furnitureItem.allowMultiple,
-    categoryIndex: furnitureItem.categoryIndex,
-  };
-}
 export async function getFurnitureItems(): Promise<APIResult<FurnitureItem[]>> {
   try {
     const response = await get(`/api/furnitureItems`);
-    const json = (await response.json()) as FurnitureItemJson[];
-    const furnitureItems = json.map(parseFurnitureItem);
-    return { success: true, data: furnitureItems };
+    const json = (await response.json()) as FurnitureItem[];
+    return { success: true, data: json };
   } catch (error) {
     return handleAPIError(error);
   }
diff --git a/frontend/src/api/Users.ts b/frontend/src/api/Users.ts
new file mode 100644
index 0000000..64e76b7
--- /dev/null
+++ b/frontend/src/api/Users.ts
@@ -0,0 +1,21 @@
+import { APIResult, get, handleAPIError } from "@/api/requests";
+
+export interface User {
+  _id: string;
+  uid: string;
+  role: string;
+}
+
+export const createAuthHeader = (firebaseToken: string) => ({
+  Authorization: `Bearer ${firebaseToken}`,
+});
+
+export const getWhoAmI = async (firebaseToken: string): Promise<APIResult<User>> => {
+  try {
+    const response = await get("/api/user/whoami", createAuthHeader(firebaseToken));
+    const json = (await response.json()) as User;
+    return { success: true, data: json };
+  } catch (error) {
+    return handleAPIError(error);
+  }
+};
diff --git a/frontend/src/api/VSRs.ts b/frontend/src/api/VSRs.ts
index 035f41b..8f9b235 100644
--- a/frontend/src/api/VSRs.ts
+++ b/frontend/src/api/VSRs.ts
@@ -1,4 +1,5 @@
-import { APIResult, get, handleAPIError, patch, post } from "@/api/requests";
+import { APIResult, get, handleAPIError, httpDelete, patch, post, put } from "@/api/requests";
+import { createAuthHeader } from "@/api/Users";
 
 export interface FurnitureInput {
   furnitureItemId: string;
@@ -107,39 +108,41 @@ export interface CreateVSRRequest {
   additionalItems: string;
 }
 
+export interface UpdateVSRRequest {
+  name: string;
+  gender: string;
+  age: number;
+  maritalStatus: string;
+  spouseName?: string;
+  agesOfBoys: number[];
+  agesOfGirls: number[];
+  ethnicity: string[];
+  employmentStatus: string;
+  incomeLevel: string;
+  sizeOfHome: string;
+  streetAddress: string;
+  city: string;
+  state: string;
+  zipCode: number;
+  phoneNumber: string;
+  email: string;
+  branch: string[];
+  conflicts: string[];
+  dischargeStatus: string;
+  serviceConnected: boolean;
+  lastRank: string;
+  militaryID: number;
+  petCompanion: boolean;
+  hearFrom: string;
+  selectedFurnitureItems: FurnitureInput[];
+  additionalItems: string;
+}
+
 function parseVSR(vsr: VSRJson) {
   return {
-    _id: vsr._id,
-    name: vsr.name,
-    gender: vsr.gender,
-    age: vsr.age,
-    maritalStatus: vsr.maritalStatus,
-    spouseName: vsr.spouseName,
-    agesOfBoys: vsr.agesOfBoys,
-    agesOfGirls: vsr.agesOfGirls,
-    ethnicity: vsr.ethnicity,
-    employmentStatus: vsr.employmentStatus,
-    incomeLevel: vsr.incomeLevel,
-    sizeOfHome: vsr.sizeOfHome,
-    streetAddress: vsr.streetAddress,
-    city: vsr.city,
-    state: vsr.state,
-    zipCode: vsr.zipCode,
-    phoneNumber: vsr.phoneNumber,
-    email: vsr.email,
-    branch: vsr.branch,
-    conflicts: vsr.conflicts,
-    dischargeStatus: vsr.dischargeStatus,
-    serviceConnected: vsr.serviceConnected,
-    lastRank: vsr.lastRank,
-    militaryID: vsr.militaryID,
-    petCompanion: vsr.petCompanion,
-    selectedFurnitureItems: vsr.selectedFurnitureItems,
-    additionalItems: vsr.additionalItems,
+    ...vsr,
     dateReceived: new Date(vsr.dateReceived),
     lastUpdated: new Date(vsr.lastUpdated),
-    status: vsr.status,
-    hearFrom: vsr.hearFrom,
   };
 }
 
@@ -153,9 +156,9 @@ export async function createVSR(vsr: CreateVSRRequest): Promise<APIResult<VSR>>
   }
 }
 
-export async function getAllVSRs(): Promise<APIResult<VSR[]>> {
+export async function getAllVSRs(firebaseToken: string): Promise<APIResult<VSR[]>> {
   try {
-    const response = await get("/api/vsr");
+    const response = await get("/api/vsr", createAuthHeader(firebaseToken));
     const json = (await response.json()) as VSRListJson;
     return { success: true, data: json.vsrs.map(parseVSR) };
   } catch (error) {
@@ -163,9 +166,9 @@ export async function getAllVSRs(): Promise<APIResult<VSR[]>> {
   }
 }
 
-export async function getVSR(id: string): Promise<APIResult<VSR>> {
+export async function getVSR(id: string, firebaseToken: string): Promise<APIResult<VSR>> {
   try {
-    const response = await get(`/api/vsr/${id}`);
+    const response = await get(`/api/vsr/${id}`, createAuthHeader(firebaseToken));
     const json = (await response.json()) as VSRJson;
     return { success: true, data: parseVSR(json) };
   } catch (error) {
@@ -173,9 +176,40 @@ export async function getVSR(id: string): Promise<APIResult<VSR>> {
   }
 }
 
-export async function updateVSRStatus(id: string, status: string): Promise<APIResult<VSR>> {
+export async function updateVSRStatus(
+  id: string,
+  status: string,
+  firebaseToken: string,
+): Promise<APIResult<VSR>> {
+  try {
+    const response = await patch(
+      `/api/vsr/${id}/status`,
+      { status },
+      createAuthHeader(firebaseToken),
+    );
+    const json = (await response.json()) as VSRJson;
+    return { success: true, data: parseVSR(json) };
+  } catch (error) {
+    return handleAPIError(error);
+  }
+}
+
+export async function deleteVSR(id: string, firebaseToken: string): Promise<APIResult<null>> {
+  try {
+    await httpDelete(`/api/vsr/${id}`, createAuthHeader(firebaseToken));
+    return { success: true, data: null };
+  } catch (error) {
+    return handleAPIError(error);
+  }
+}
+
+export async function updateVSR(
+  id: string,
+  vsr: UpdateVSRRequest,
+  firebaseToken: string,
+): Promise<APIResult<VSR>> {
   try {
-    const response = await patch(`/api/vsr/${id}/status`, { status });
+    const response = await put(`/api/vsr/${id}`, vsr, createAuthHeader(firebaseToken));
     const json = (await response.json()) as VSRJson;
     return { success: true, data: parseVSR(json) };
   } catch (error) {
diff --git a/frontend/src/api/requests.ts b/frontend/src/api/requests.ts
index 691e4ce..9f250c6 100644
--- a/frontend/src/api/requests.ts
+++ b/frontend/src/api/requests.ts
@@ -74,7 +74,7 @@ async function assertOk(response: Response): Promise<void> {
 export async function get(url: string, headers: Record<string, string> = {}): Promise<Response> {
   // GET requests do not have a body
   const response = await fetchRequest("GET", API_BASE_URL + url, undefined, headers);
-  assertOk(response);
+  await assertOk(response);
   return response;
 }
 
@@ -92,7 +92,7 @@ export async function post(
   headers: Record<string, string> = {},
 ): Promise<Response> {
   const response = await fetchRequest("POST", API_BASE_URL + url, body, headers);
-  assertOk(response);
+  await assertOk(response);
   return response;
 }
 
@@ -110,7 +110,7 @@ export async function put(
   headers: Record<string, string> = {},
 ): Promise<Response> {
   const response = await fetchRequest("PUT", API_BASE_URL + url, body, headers);
-  assertOk(response);
+  await assertOk(response);
   return response;
 }
 
@@ -128,7 +128,23 @@ export async function patch(
   headers: Record<string, string> = {},
 ): Promise<Response> {
   const response = await fetchRequest("PATCH", API_BASE_URL + url, body, headers);
-  assertOk(response);
+  await assertOk(response);
+  return response;
+}
+
+/**
+ * Sends a DELETE request to the provided API URL.
+ *
+ * @param url The URL to request
+ * @param headers The headers of the request (optional)
+ * @returns The Response object returned by `fetch()`
+ */
+export async function httpDelete(
+  url: string,
+  headers: Record<string, string> = {},
+): Promise<Response> {
+  const response = await fetchRequest("DELETE", API_BASE_URL + url, undefined, headers);
+  await assertOk(response);
   return response;
 }
 
@@ -157,9 +173,7 @@ export type APIError = { success: false; error: string };
  * })
  * ```
  *
- * See `createTask` in `src/api/tasks` and its use in `src/components/TaskForm`
- * for a more concrete example, and see
- * https://www.typescriptlang.org/docs/handbook/2/narrowing.html for more info
+ * See https://www.typescriptlang.org/docs/handbook/2/narrowing.html for more info
  * about type narrowing.
  */
 export type APIResult<T> = APIData<T> | APIError;
diff --git a/frontend/src/app/dummyPage/layout.tsx b/frontend/src/app/dummyPage/layout.tsx
deleted file mode 100644
index 5ffb94e..0000000
--- a/frontend/src/app/dummyPage/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export const metadata = {
-  title: "Patriots & Paws",
-  description: "Web application for Patriots & Paws",
-};
-
-export default function DummyLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
diff --git a/frontend/src/app/dummyPage/page.tsx b/frontend/src/app/dummyPage/page.tsx
deleted file mode 100644
index 879ddf8..0000000
--- a/frontend/src/app/dummyPage/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Dummy = () => {
-  return <p>Login Successful!</p>;
-};
-
-export default Dummy;
diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
new file mode 100644
index 0000000..0eb79e4
--- /dev/null
+++ b/frontend/src/app/error.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ErrorPage } from "@/components/Errors/ErrorPage";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import Image from "next/image";
+
+const PAP_EMAIL = "info@patriotsandpaws.org";
+
+/**
+ * Page that is shown if our web app throws a 500 Internal Error (e.g. our JavaScript crashes)
+ */
+const InternalError500Page = () => {
+  const { isMobile, isTablet } = useScreenSizes();
+
+  return (
+    <ErrorPage
+      imageComponent={
+        <Image
+          priority
+          src="/errors/500_internal_error.svg"
+          alt="500 Internal Error"
+          width={isMobile ? 100 : isTablet ? 220 : 320}
+          height={isMobile ? 69 : isTablet ? 150 : 220}
+        />
+      }
+      title="Internal Error"
+      content={[
+        "Something went wrong on our end. Our experts are trying to fix the problem.",
+        "Please refresh the page or wait for some time.",
+        <>
+          If you need immediate help while the system is down, please email our staff at{" "}
+          <a href={`mailto:${PAP_EMAIL}`}>{PAP_EMAIL}.</a>
+        </>,
+        "Error Code: 500",
+      ]}
+    />
+  );
+};
+
+export default InternalError500Page;
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 9bdea3d..d96ffcf 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -3,6 +3,7 @@ import React from "react";
 
 import type { Metadata } from "next";
 import "@/app/globals.css";
+import { UserContextProvider } from "@/contexts/userContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,7 +15,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <UserContextProvider>{children}</UserContextProvider>
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/app/login/page.module.css b/frontend/src/app/login/page.module.css
index c06f1c5..2c10ed0 100644
--- a/frontend/src/app/login/page.module.css
+++ b/frontend/src/app/login/page.module.css
@@ -96,19 +96,17 @@
   width: 100%;
   height: 50px;
   flex-shrink: 0;
-  border-radius: 4px;
-  background: var(--Secondary-1, #102d5f);
-  color: #fff;
-  cursor: pointer;
   text-align: center;
   font-family: Lora;
   font-size: 24px;
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
   margin-bottom: 49px;
 }
 
+.disabledButton {
+  background: grey !important;
+}
+
 /* tablet version */
 @media screen and (max-width: 850px) {
   .backgroundImage {
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index d4dcdbd..012c12a 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -2,135 +2,267 @@
 "use client";
 
 import React, { useState } from "react";
-import InputField from "@/components/shared/input/InputField";
 import Image from "next/image";
 import styles from "@/app/login/page.module.css";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { initFirebase } from "@/firebase/firebase";
-import { useRouter } from "next/navigation";
-import { useScreenSizes } from "@/util/useScreenSizes";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { useRedirectToHomeIfSignedIn } from "@/hooks/useRedirection";
+import { getWhoAmI } from "@/api/Users";
+import { ErrorNotification } from "@/components/Errors/ErrorNotification";
+import { FirebaseError } from "firebase/app";
+import { Button } from "@/components/shared/Button";
+import TextField from "@/components/shared/input/TextField";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { IconButton } from "@mui/material";
 
+enum LoginPageError {
+  NO_INTERNET,
+  INVALID_CREDENTIALS,
+  INTERNAL,
+  TOO_MANY_REQUESTS,
+  NONE,
+}
+
+interface ILoginFormInput {
+  email: string;
+  password: string;
+}
+
+/**
+ * The root Login page component.
+ */
 const Login = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [pageError, setPageError] = useState(LoginPageError.NONE);
 
-  const { auth } = initFirebase();
+  useRedirectToHomeIfSignedIn();
 
-  const router = useRouter();
+  const { auth } = initFirebase();
 
   const { isMobile } = useScreenSizes();
 
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isValid },
+  } = useForm<ILoginFormInput>();
+
+  /**
+   * Sends the user's Firebase token to the /api/user/whoami backend route,
+   * to ensure they are a valid user and we can retrieve their identity.
+   */
   const sendTokenToBackend = async (token: string) => {
-    try {
-      const response = await fetch(`http://localhost:3001/api/whoami`, {
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-      });
-
-      if (response.ok) {
-        const userInfo = await response.json();
-        console.log(userInfo);
-        router.push("/dummyPage");
+    const res = await getWhoAmI(token);
+    if (!res.success) {
+      if (res.error === "Failed to fetch") {
+        setPageError(LoginPageError.NO_INTERNET);
       } else {
-        console.error("Failed to get user info from JWT Token");
+        console.error(`Cannot retrieve whoami: error ${res.error}`);
+        setPageError(LoginPageError.INTERNAL);
       }
-    } catch (error) {
-      console.error("error sending JWT token to backend", error);
     }
   };
 
-  const login = async (email: string, password: string) => {
+  /**
+   * Logs the user in using their entered email and password.
+   */
+  const onSubmit: SubmitHandler<ILoginFormInput> = async (data) => {
     try {
-      const userCredential = await signInWithEmailAndPassword(auth, email, password);
+      setLoading(true);
+
+      // Sign in to Firebase
+      const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);
+
+      // Get token for user
       const token = await userCredential.user?.getIdToken();
       if (!token) {
         console.error("JWT token not retrieved.");
+        setPageError(LoginPageError.INTERNAL);
       } else {
+        // Once we have the token, send it to the /api/user/whoami backend route
         await sendTokenToBackend(token);
       }
     } catch (error) {
-      console.error("login failed: ", error);
+      console.error("Firebase login failed with error: ", error);
+
+      // See https://firebase.google.com/docs/auth/admin/errors for Firebase error codes
+      switch ((error as FirebaseError)?.code) {
+        case "auth/invalid-email":
+        case "auth/invalid-credentials":
+        case "auth/invalid-login-credentials":
+          setPageError(LoginPageError.INVALID_CREDENTIALS);
+          break;
+        case "auth/network-request-failed":
+          setPageError(LoginPageError.NO_INTERNET);
+          break;
+        case "auth/too-many-requests":
+          setPageError(LoginPageError.TOO_MANY_REQUESTS);
+          break;
+        default:
+          setPageError(LoginPageError.INTERNAL);
+          break;
+      }
+    } finally {
+      setLoading(false);
     }
   };
 
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault();
-    login(email, password);
+  // Move error notification higher up than usual
+  const errorNotificationStyles = {
+    top: 18,
+  };
+
+  /**
+   * Renders an error notification based on the current error, or renders nothing
+   * if there is no error.
+   */
+  const renderErrorNotification = () => {
+    switch (pageError) {
+      case LoginPageError.NO_INTERNET:
+        return (
+          <ErrorNotification
+            isOpen
+            mainText="No Internet Connection"
+            subText="Unable to login due to no internet connection. Please check your connection and try again."
+            actionText="Dismiss"
+            onActionClicked={() => setPageError(LoginPageError.NONE)}
+            style={errorNotificationStyles}
+          />
+        );
+      case LoginPageError.INVALID_CREDENTIALS:
+        return (
+          <ErrorNotification
+            isOpen
+            mainText="Invalid Credentials"
+            subText="Invalid email and/or password, please try again."
+            actionText="Dismiss"
+            onActionClicked={() => setPageError(LoginPageError.NONE)}
+            style={errorNotificationStyles}
+          />
+        );
+      case LoginPageError.TOO_MANY_REQUESTS:
+        return (
+          <ErrorNotification
+            isOpen
+            mainText="Too Many Requests"
+            subText="You have made too many login attempts. Please try again later."
+            actionText="Dismiss"
+            onActionClicked={() => setPageError(LoginPageError.NONE)}
+            style={errorNotificationStyles}
+          />
+        );
+      case LoginPageError.INTERNAL:
+        return (
+          <ErrorNotification
+            isOpen
+            mainText="Internal Error"
+            subText="Something went wrong with logging in. Our team is working to fix it. Please try again later."
+            actionText="Dismiss"
+            onActionClicked={() => setPageError(LoginPageError.NONE)}
+            style={errorNotificationStyles}
+          />
+        );
+      default:
+        return null;
+    }
   };
 
   return (
-    <body>
-      <div className={styles.loginContainer}>
-        <Image
-          src="/Images/login_bg.png"
-          alt=""
-          layout="fill"
-          objectFit="cover"
-          priority
-          /* Inline styling due to using Image Component*/
-          style={{
-            position: "absolute",
-            top: "0",
-            left: "0",
-            right: "30",
-            bottom: "0",
-          }}
-          className={styles.backgroundImage}
-        />
-        <div
-          style={{
-            position: "absolute",
-            top: "0",
-            left: "0",
-            right: "0",
-            bottom: "0",
-            background: "#232220D9",
-          }}
-        />
-        <div className={styles.loginBox}>
-          <div className={styles.logoContainer}>
-            <div className={styles.logoImage}>
-              <Image
-                src="/Images/LoginImage.png"
-                alt="Logo"
-                className={styles.image}
-                width={isMobile ? 130 : 190}
-                height={isMobile ? 60 : 90}
-              />
-            </div>
+    <div className={styles.loginContainer}>
+      <Image
+        src="/Images/login_bg.png"
+        alt=""
+        layout="fill"
+        objectFit="cover"
+        priority
+        /* Inline styling due to using Image Component*/
+        style={{
+          position: "absolute",
+          top: "0",
+          left: "0",
+          right: "30",
+          bottom: "0",
+        }}
+        className={styles.backgroundImage}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: "0",
+          left: "0",
+          right: "0",
+          bottom: "0",
+          background: "#232220D9",
+        }}
+      />
+      <div className={styles.loginBox}>
+        <div className={styles.logoContainer}>
+          <div className={styles.logoImage}>
+            <Image
+              src="/Images/LoginImage.png"
+              alt="Logo"
+              className={styles.image}
+              width={isMobile ? 130 : 190}
+              height={isMobile ? 60 : 90}
+            />
           </div>
-          <div className={styles.welcomeText}>Welcome!</div>
-          <form onSubmit={handleLogin} className={styles.loginForm}>
-            <div className={styles.inputGroup}>
-              <InputField
-                label="Email"
-                id="email"
-                placeholder="e.g. johndoe@gmail.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div className={styles.inputGroup}>
-              <InputField
-                label="Password"
-                id="password"
-                placeholder=""
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                type="password"
-              />
-            </div>
-            <div className={styles.forgotPassword}>Forgot Password?</div>
-            <button type="submit" className={styles.loginButton}>
-              Log In
-            </button>
-          </form>
         </div>
+        <div className={styles.welcomeText}>Welcome!</div>
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.loginForm}>
+          <div className={styles.inputGroup}>
+            <TextField
+              label="Email"
+              variant="outlined"
+              placeholder="e.g. johndoe@gmail.com"
+              {...register("email", {
+                required: "Email is required",
+              })}
+              required={false}
+              error={!!errors.email}
+              helperText={errors.email?.message}
+            />
+          </div>
+          <div className={styles.inputGroup}>
+            <TextField
+              label="Password"
+              variant="outlined"
+              placeholder=""
+              {...register("password", {
+                required: "Password is required",
+              })}
+              required={false}
+              error={!!errors.password}
+              helperText={errors.password?.message}
+              type={passwordVisible ? "text" : "password"}
+              InputProps={{
+                endAdornment: (
+                  <IconButton onClick={() => setPasswordVisible((prevVisible) => !prevVisible)}>
+                    <Image
+                      src={passwordVisible ? "/ic_show.svg" : "/ic_hide.svg"}
+                      alt={passwordVisible ? "Show" : "Hide"}
+                      width={17}
+                      height={17}
+                    />
+                  </IconButton>
+                ),
+              }}
+            />
+          </div>
+          <div className={styles.forgotPassword}>Forgot Password?</div>
+          <Button
+            variant="primary"
+            outlined={false}
+            text="Log In"
+            loading={loading}
+            type="submit"
+            className={`${styles.loginButton} ${isValid ? "" : styles.disabledButton}`}
+          />
+        </form>
       </div>
-    </body>
+      {renderErrorNotification()}
+    </div>
   );
 };
 
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
new file mode 100644
index 0000000..6dbbe09
--- /dev/null
+++ b/frontend/src/app/not-found.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { ErrorPage } from "@/components/Errors/ErrorPage";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import Image from "next/image";
+
+const VSR_URL = "/vsr";
+
+/**
+ * Page that is shown on any URL that does not match one of our defined frontend routes.
+ */
+const NotFound404Page = () => {
+  const { isMobile, isTablet } = useScreenSizes();
+
+  return (
+    <ErrorPage
+      imageComponent={
+        <Image
+          priority
+          src="/errors/404_not_found.svg"
+          alt="404 Not Found"
+          width={isMobile ? 232 : isTablet ? 310 : 464}
+          height={isMobile ? 90 : isTablet ? 120 : 180}
+        />
+      }
+      title="Page Not Found"
+      content={[
+        "Sorry, we couldn't find the page you're looking for.",
+        <>
+          If you would like to submit a VSR form, please click{" "}
+          {
+            <a
+              style={{
+                textDecoration: "underline",
+                fontStyle: "italic",
+              }}
+              href={VSR_URL}
+            >
+              here
+            </a>
+          }
+          .
+        </>,
+        "Please ensure that the URL is correct and try again.",
+        "Error Code: 404",
+      ]}
+    />
+  );
+};
+
+export default NotFound404Page;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index bcafc39..76ae5e0 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,14 +1,10 @@
-"use client";
-
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-
-const Home = () => {
-  const router = useRouter();
-  useEffect(() => {
-    router.push("/login");
-  });
-  return null;
-};
-
-export default Home;
+import { redirect } from "next/navigation";
+
+/**
+ * On the root URL of our site (i.e. "<domain>/"), redirect the user to the staff login page.
+ */
+const Home = () => {
+  redirect("/login");
+};
+
+export default Home;
diff --git a/frontend/src/app/staff/vsr/[id]/page.tsx b/frontend/src/app/staff/vsr/[id]/page.tsx
index 29226fa..d74047f 100644
--- a/frontend/src/app/staff/vsr/[id]/page.tsx
+++ b/frontend/src/app/staff/vsr/[id]/page.tsx
@@ -1,10 +1,13 @@
 "use client";
-import { Page } from "@/components/VSRIndividual";
+import { VSRIndividualPage } from "@/components/VSRIndividual";
+import { useRedirectToLoginIfNotSignedIn } from "@/hooks/useRedirection";
 
 export default function Individual() {
+  useRedirectToLoginIfNotSignedIn();
+
   return (
     <div>
-      <Page></Page>
+      <VSRIndividualPage />
     </div>
   );
 }
diff --git a/frontend/src/app/staff/vsr/page.module.css b/frontend/src/app/staff/vsr/page.module.css
index 3818081..e664bfc 100644
--- a/frontend/src/app/staff/vsr/page.module.css
+++ b/frontend/src/app/staff/vsr/page.module.css
@@ -1,6 +1,7 @@
 .page {
   background-color: var(--color-background);
   padding-bottom: 67px;
+  min-height: 100vh;
 }
 
 .column {
@@ -62,32 +63,6 @@
   align-items: center;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 137px;
-  padding: 11px 16px;
-  border-radius: 4px;
-  gap: 6px;
-  justify-content: center;
-  background-color: var(--color-tse-secondary-1);
-  cursor: pointer;
-  border: none !important;
-}
-
-.buttontext {
-  color: var(--Primary-Background-Light, #f7f7f7);
-  text-align: center;
-
-  /* Desktop/Body 2 */
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-
 .table {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/app/staff/vsr/page.tsx b/frontend/src/app/staff/vsr/page.tsx
index f34a762..bd5c5e8 100644
--- a/frontend/src/app/staff/vsr/page.tsx
+++ b/frontend/src/app/staff/vsr/page.tsx
@@ -6,18 +6,136 @@ import SearchKeyword from "@/components/VSRTable/SearchKeyword";
 import PageTitle from "@/components/VSRTable/PageTitle";
 import HeaderBar from "@/components/shared/HeaderBar";
 import Image from "next/image";
-import React from "react";
-import { StatusDropdown } from "@/components/VSRIndividual";
+import React, { useContext, useEffect, useState } from "react";
+import { StatusDropdown } from "@/components/shared/StatusDropdown";
 import { useMediaQuery } from "@mui/material";
+import { useRedirectToLoginIfNotSignedIn } from "@/hooks/useRedirection";
+import { UserContext } from "@/contexts/userContext";
+import { DeleteVSRsModal } from "@/components/shared/DeleteVSRsModal";
+import { VSR, getAllVSRs } from "@/api/VSRs";
+import { VSRErrorModal } from "@/components/VSRForm/VSRErrorModal";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
+import { Button } from "@/components/shared/Button";
 
+enum VSRTableError {
+  CANNOT_FETCH_VSRS_NO_INTERNET,
+  CANNOT_FETCH_VSRS_INTERNAL,
+  NONE,
+}
+
+/**
+ * Root component for the VSR list/table view.
+ */
 export default function VSRTableView() {
+  const { isMobile, isTablet } = useScreenSizes();
   const searchOnOwnRow = useMediaQuery("@media screen and (max-width: 1000px)");
-  const buttonIconsOnly = useMediaQuery("@media screen and (max-width: 700px)");
-  const buttonIconSize = buttonIconsOnly ? 16 : 24;
+
+  const { firebaseUser, papUser } = useContext(UserContext);
+  const [loadingVsrs, setLoadingVsrs] = useState(true);
+  const [vsrs, setVsrs] = useState<VSR[]>();
+  const [tableError, setTableError] = useState(VSRTableError.NONE);
+
+  const [selectedVsrIds, setSelectedVsrIds] = useState<string[]>([]);
+  const [deleteVsrModalOpen, setDeleteVsrModalOpen] = useState(false);
+
+  useRedirectToLoginIfNotSignedIn();
+
+  const atLeastOneRowSelected = selectedVsrIds.length > 0;
+
+  /**
+   * Fetches the list of all VSRs from the backend and updates our vsrs state.
+   */
+  const fetchVSRs = () => {
+    if (!firebaseUser) {
+      return;
+    }
+
+    setLoadingVsrs(true);
+    firebaseUser?.getIdToken().then((firebaseToken) => {
+      getAllVSRs(firebaseToken).then((result) => {
+        if (result.success) {
+          setVsrs(result.data);
+        } else {
+          if (result.error === "Failed to fetch") {
+            setTableError(VSRTableError.CANNOT_FETCH_VSRS_NO_INTERNET);
+          } else {
+            console.error(`Error retrieving VSRs: ${result.error}`);
+            setTableError(VSRTableError.CANNOT_FETCH_VSRS_INTERNAL);
+          }
+        }
+        setLoadingVsrs(false);
+      });
+    });
+  };
+
+  // Fetch the VSRs from the backend once the Firebase user loads.
+  useEffect(() => {
+    fetchVSRs();
+  }, [firebaseUser]);
+
+  /**
+   * Renders an error modal corresponding to the page's error state, or renders
+   * nothing if there is no error.
+   */
+  const renderErrorModal = () => {
+    switch (tableError) {
+      case VSRTableError.CANNOT_FETCH_VSRS_NO_INTERNET:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setTableError(VSRTableError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/no_internet.svg"
+                alt="No Internet"
+                width={isMobile ? 100 : isTablet ? 138 : 114}
+                height={isMobile ? 93 : isTablet ? 129 : 106}
+              />
+            }
+            title="No Internet Connection"
+            content="Unable to retrieve the VSRs due to no internet connection. Please check your connection and try again."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setTableError(VSRTableError.NONE);
+              fetchVSRs();
+            }}
+          />
+        );
+      case VSRTableError.CANNOT_FETCH_VSRS_INTERNAL:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setTableError(VSRTableError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/500_internal_error.svg"
+                alt="Internal Error"
+                width={isMobile ? 100 : 155}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="Internal Error"
+            content="Something went wrong with retrieving the VSRs. Our team is working to fix it. Please try again later."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setTableError(VSRTableError.NONE);
+              fetchVSRs();
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  };
 
   return (
     <div className={styles.page}>
-      <HeaderBar />
+      <HeaderBar showLogoutButton />
       <div className={styles.column}>
         <PageTitle />
         <div className={styles.button_row}>
@@ -32,31 +150,68 @@ export default function VSRTableView() {
             </div>
           </div>
           <div className={styles.row_right}>
-            <button className={styles.buttons}>
-              <Image
-                width={buttonIconSize}
-                height={buttonIconSize}
-                src="/round-sort.svg"
-                alt="Filter"
+            {papUser?.role === "admin" && atLeastOneRowSelected ? (
+              <Button
+                variant="error"
+                outlined
+                iconPath="/mdi_trash.svg"
+                iconAlt="Delete"
+                text="Delete VSR(s)"
+                hideTextOnMobile
+                onClick={() => setDeleteVsrModalOpen(true)}
               />
-              {buttonIconsOnly ? null : <text className={styles.buttontext}>Filter</text>}
-            </button>
-            <button className={styles.buttons}>
-              <Image
-                width={buttonIconSize}
-                height={buttonIconSize}
-                src="/upload.svg"
-                alt="Upload"
+            ) : null}
+            {atLeastOneRowSelected ? null : (
+              <Button
+                variant="primary"
+                outlined={false}
+                iconPath="/round-sort.svg"
+                iconAlt="Filter"
+                text="Filter"
+                hideTextOnMobile
+                onClick={() => {
+                  // TODO: implement filtering
+                }}
               />
-              {buttonIconsOnly ? null : <text className={styles.buttontext}>Export</text>}
-            </button>
+            )}
+            <Button
+              variant="primary"
+              outlined={false}
+              iconPath="/upload.svg"
+              iconAlt="Export"
+              text="Export"
+              hideTextOnMobile
+              onClick={() => {
+                // TODO: implement exporting VSRs
+              }}
+            />
           </div>
         </div>
         {searchOnOwnRow ? <SearchKeyword /> : null}
         <div className={styles.table}>
-          <VSRTable />
+          {loadingVsrs ? (
+            <LoadingScreen />
+          ) : (
+            <VSRTable
+              vsrs={vsrs ?? []}
+              selectedVsrIds={selectedVsrIds}
+              onChangeSelectedVsrIds={setSelectedVsrIds}
+            />
+          )}
         </div>
       </div>
+
+      {/* Error modal and delete modal */}
+      {renderErrorModal()}
+      <DeleteVSRsModal
+        isOpen={deleteVsrModalOpen}
+        onClose={() => setDeleteVsrModalOpen(false)}
+        afterDelete={() => {
+          setSelectedVsrIds([]);
+          fetchVSRs();
+        }}
+        vsrIds={selectedVsrIds}
+      />
     </div>
   );
 }
diff --git a/frontend/src/app/vsr/page.module.css b/frontend/src/app/vsr/page.module.css
index ee4dc60..5a5b088 100644
--- a/frontend/src/app/vsr/page.module.css
+++ b/frontend/src/app/vsr/page.module.css
@@ -29,6 +29,11 @@
   line-height: normal;
 }
 
+.emailLink {
+  font-style: italic;
+  text-decoration-line: underline;
+}
+
 .fieldsMarked {
   color: #000;
   font-family: "Open Sans";
@@ -87,15 +92,6 @@
   flex-direction: row;
 }
 
-.numChildren {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-}
-
 .asterisk {
   color: var(--Secondary-2, #be2d46);
 }
@@ -116,10 +112,6 @@
   width: 100%;
 }
 
-.childInputWrapper {
-  width: 100%;
-}
-
 .canvas {
   border-radius: 20px;
   background-color: #fff;
@@ -132,7 +124,7 @@
 .title {
   color: var(--Accent-Blue-1, #102d5f);
   font-family: "Lora";
-  font-size: 24px;
+  font-size: 40px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
@@ -201,24 +193,8 @@
   border-radius: 4px;
 }
 
-.submit {
-  color: white;
-  border: none;
-}
-
-.enabled {
-  background-color: #102d5f;
-}
-
 .disabled {
-  background-color: grey;
-}
-
-.back {
-  background-color: var(--color-tse-primary-light);
-  color: #102d5f;
-  border: 1px solid var(--Secondary-1, #102d5f);
-  background: rgba(255, 255, 255, 0);
+  background-color: grey !important;
 }
 
 /* tablet version */
diff --git a/frontend/src/app/vsr/page.tsx b/frontend/src/app/vsr/page.tsx
index 29bd642..4eadbf1 100644
--- a/frontend/src/app/vsr/page.tsx
+++ b/frontend/src/app/vsr/page.tsx
@@ -1,7 +1,8 @@
 "use client";
+import emailValidator from "email-validator";
 import React, { useEffect, useState } from "react";
 import styles from "src/app/vsr/page.module.css";
-import { useForm, Controller, SubmitHandler } from "react-hook-form";
+import { useForm, Controller, SubmitHandler, RegisterOptions } from "react-hook-form";
 import TextField from "@/components/shared/input/TextField";
 import MultipleChoice from "@/components/shared/input/MultipleChoice";
 import Dropdown from "@/components/shared/input/Dropdown";
@@ -10,208 +11,86 @@ import PageNumber from "@/components/VSRForm/PageNumber";
 import { createVSR, CreateVSRRequest, FurnitureInput } from "@/api/VSRs";
 import { FurnitureItem, getFurnitureItems } from "@/api/FurnitureItems";
 import BinaryChoice from "@/components/shared/input/BinaryChoice";
-import { FurnitureItemSelection } from "@/components/VeteranForm/FurnitureItemSelection";
-import { useScreenSizes } from "@/util/useScreenSizes";
-
-interface IFormInput {
-  name: string;
-  marital_status: string;
-  gender: string;
-  spouse: string;
-  age: number;
-  ethnicity: string;
-  other_ethnicity: string;
-  employment_status: string;
-  income_level: string;
-  size_of_home: string;
-  num_boys: number;
-  num_girls: number;
-  ages_of_boys: number[];
-  ages_of_girls: number[];
-  streetAddress: string;
-  city: string;
-  state: string;
-  zipCode: number;
-  phoneNumber: string;
-  email: string;
-  branch: string[];
-  conflicts: string[];
-  dischargeStatus: string;
-  serviceConnected: boolean;
-  lastRank: string;
-  militaryID: number;
-  petCompanion: boolean;
-  hearFrom: string;
+import { ConfirmVSRSubmissionModal } from "@/components/VSRForm/ConfirmVSRSubmissionModal";
+import { FurnitureItemSelection } from "@/components/VSRForm/FurnitureItemSelection";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { VSRErrorModal } from "@/components/VSRForm/VSRErrorModal";
+import Image from "next/image";
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
+import {
+  branchOptions,
+  conflictsOptions,
+  dischargeStatusOptions,
+  employmentOptions,
+  ethnicityOptions,
+  genderOptions,
+  hearFromOptions,
+  homeOptions,
+  maritalOptions,
+  incomeOptions,
+  stateOptions,
+} from "@/constants/fieldOptions";
+import { ChildrenInput } from "@/components/shared/input/ChildrenInput";
+import { Button } from "@/components/shared/Button";
+import { ICreateVSRFormInput, IVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+enum VSRFormError {
+  CANNOT_RETRIEVE_FURNITURE_NO_INTERNET,
+  CANNOT_RETRIEVE_FURNITURE_INTERNAL,
+  CANNOT_SUBMIT_NO_INTERNET,
+  CANNOT_SUBMIT_INTERNAL,
+  NONE,
 }
 
+/**
+ * Root component for the page with the VSR form for veterans to fill out.
+ */
 const VeteranServiceRequest: React.FC = () => {
+  /**
+   * Form utilities
+   */
+  const formProps = useForm<ICreateVSRFormInput>();
   const {
     register,
     handleSubmit,
     control,
     formState: { errors, isValid },
     watch,
-  } = useForm<IFormInput>();
+    reset,
+  } = formProps;
+
+  /**
+   * Internal state for fields that are complicated and cannot be controlled with a
+   * named form field alone (e.g. there is a multiple choice and a text field for "Other")
+   */
   const [selectedEthnicities, setSelectedEthnicities] = useState<string[]>([]);
   const [otherEthnicity, setOtherEthnicity] = useState("");
 
   const [selectedConflicts, setSelectedConflicts] = useState<string[]>([]);
   const [otherConflict, setOtherConflict] = useState("");
 
-  const [selectedBranch, setSelectedBranch] = useState<string[]>([]);
-
   const [selectedHearFrom, setSelectedHearFrom] = useState("");
   const [otherHearFrom, setOtherHearFrom] = useState("");
 
-  const [pageNumber, setPageNumber] = useState(1);
-
-  const numBoys = watch("num_boys");
-  const numGirls = watch("num_girls");
-
-  const maritalOptions = ["Married", "Single", "It's Complicated", "Widowed/Widower"];
-  const genderOptions = ["Male", "Female", "Other"];
-  const employmentOptions = [
-    "Employed",
-    "Unemployed",
-    "Currently Looking",
-    "Retired",
-    "In School",
-    "Unable to work",
-  ];
-
-  const incomeOptions = [
-    "$12,500 and under",
-    "$12,501 - $25,000",
-    "$25,001 - $50,000",
-    "$50,001 and over",
-  ];
-
-  const homeOptions = [
-    "House",
-    "Apartment",
-    "Studio",
-    "1 Bedroom",
-    "2 Bedroom",
-    "3 Bedroom",
-    "4 Bedroom",
-    "4+ Bedroom",
-  ];
-
-  const ethnicityOptions = [
-    "Asian",
-    "African American",
-    "Caucasian",
-    "Native American",
-    "Pacific Islander",
-    "Middle Eastern",
-    "Prefer not to say",
-  ];
-
-  const branchOptions = [
-    "Air Force",
-    "Air Force Reserve",
-    "Air National Guard",
-    "Army",
-    "Army Air Corps",
-    "Army Reserve",
-    "Coast Guard",
-    "Marine Corps",
-    "Navy",
-    "Navy Reserve",
-  ];
-
-  const conflictsOptions = [
-    "WWII",
-    "Korea",
-    "Vietnam",
-    "Persian Gulf",
-    "Bosnia",
-    "Kosovo",
-    "Panama",
-    "Kuwait",
-    "Iraq",
-    "Somalia",
-    "Desert Shield/Storm",
-    "Operation Enduring Freedom (OEF)",
-    "Afghanistan",
-    "Irani Crisis",
-    "Granada",
-    "Lebanon",
-    "Beirut",
-    "Special Ops",
-    "Peacetime",
-  ];
-
-  const dischargeStatusOptions = [
-    "Honorable Discharge",
-    "General Under Honorable",
-    "Other Than Honorable",
-    "Bad Conduct",
-    "Entry Level",
-    "Dishonorable",
-    "Still Serving",
-    "Civilian",
-    "Medical",
-    "Not Given",
-  ];
+  const [additionalItems, setAdditionalItems] = useState("");
 
-  const hearFromOptions = ["Colleague", "Social Worker", "Friend", "Internet", "Social Media"];
+  const [pageNumber, setPageNumber] = useState(1);
 
-  const stateOptions = [
-    "AL",
-    "AK",
-    "AZ",
-    "AR",
-    "CA",
-    "CO",
-    "CT",
-    "DE",
-    "FL",
-    "GA",
-    "HI",
-    "ID",
-    "IL",
-    "IN",
-    "IA",
-    "KS",
-    "KY",
-    "LA",
-    "ME",
-    "MD",
-    "MA",
-    "MI",
-    "MN",
-    "MS",
-    "MO",
-    "MT",
-    "NE",
-    "NV",
-    "NH",
-    "NJ",
-    "NM",
-    "NY",
-    "NC",
-    "ND",
-    "OH",
-    "OK",
-    "OR",
-    "PA",
-    "RI",
-    "SC",
-    "SD",
-    "TN",
-    "TX",
-    "UT",
-    "VT",
-    "VA",
-    "WA",
-    "WV",
-    "WI",
-    "WY",
-  ];
+  const goToPage = (newPage: number) => {
+    setPageNumber(newPage);
+    // Jump to top of window when going to new page
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  };
 
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  /**
+   * Internal state for loading, errors, and data
+   */
+  const [loadingVsrSubmission, setLoadingVsrSubmission] = useState(false);
+  const [confirmSubmissionModalOpen, setConfirmSubmissionModalOpen] = useState(false);
+  const [vsrFormError, setVsrFormError] = useState<VSRFormError>(VSRFormError.NONE);
 
+  const [loadingFurnitureItems, setLoadingFurnitureItems] = useState(false);
   const [furnitureCategoriesToItems, setFurnitureCategoriesToItems] =
     useState<Record<string, FurnitureItem[]>>();
   // Map furniture item IDs to selections for those items
@@ -219,30 +98,42 @@ const VeteranServiceRequest: React.FC = () => {
     Record<string, FurnitureInput>
   >({});
 
-  const [additionalItems, setAdditionalItems] = useState("");
+  /**
+   * Fetches the list of available furniture items from the backend, and updates
+   * our state for the items to render on page 3.
+   */
+  const fetchFurnitureItems = () => {
+    if (loadingFurnitureItems) {
+      return;
+    }
+    setLoadingFurnitureItems(true);
+    getFurnitureItems().then((result) => {
+      if (result.success) {
+        setFurnitureCategoriesToItems(
+          result.data.reduce(
+            (prevMap: Record<string, FurnitureItem[]>, curItem) => ({
+              ...prevMap,
+              [curItem.category]: [...(prevMap[curItem.category] ?? []), curItem],
+            }),
+            {},
+          ),
+        );
+        setVsrFormError(VSRFormError.NONE);
+      } else {
+        if (result.error === "Failed to fetch") {
+          setVsrFormError(VSRFormError.CANNOT_RETRIEVE_FURNITURE_NO_INTERNET);
+        } else {
+          setVsrFormError(VSRFormError.CANNOT_RETRIEVE_FURNITURE_INTERNAL);
+          console.error(`Cannot retrieve furniture items: error ${result.error}`);
+        }
+      }
+      setLoadingFurnitureItems(false);
+    });
+  };
 
   // Fetch all available furniture items from database
   useEffect(() => {
-    getFurnitureItems()
-      .then((result) => {
-        if (result.success) {
-          setFurnitureCategoriesToItems(
-            result.data.reduce(
-              (prevMap: Record<string, FurnitureItem[]>, curItem) => ({
-                ...prevMap,
-                [curItem.category]: [...(prevMap[curItem.category] ?? []), curItem],
-              }),
-              {},
-            ),
-          );
-          setErrorMessage(null);
-        } else {
-          setErrorMessage("Furniture items not found.");
-        }
-      })
-      .catch((error) => {
-        setErrorMessage(`An error occurred: ${error.message}`);
-      });
+    fetchFurnitureItems();
   }, []);
 
   // Handle furniture item count whenever a change is made
@@ -253,23 +144,29 @@ const VeteranServiceRequest: React.FC = () => {
     }));
   };
 
-  const { isMobile } = useScreenSizes();
+  const { isMobile, isTablet } = useScreenSizes();
 
   // Execute when submit button is pressed
-  const onSubmit: SubmitHandler<IFormInput> = async (data) => {
+  const onSubmit: SubmitHandler<ICreateVSRFormInput> = async (data) => {
+    if (loadingVsrSubmission) {
+      return;
+    }
+    setLoadingVsrSubmission(true);
+
     // Construct the request object
+
     const createVSRRequest: CreateVSRRequest = {
       name: data.name,
       gender: data.gender,
       age: data.age,
-      maritalStatus: data.marital_status,
-      spouseName: data.spouse,
+      maritalStatus: data.maritalStatus,
+      spouseName: data.spouseName,
       agesOfBoys:
-        data.ages_of_boys
+        data.agesOfBoys
           ?.slice(0, data.num_boys)
           .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
       agesOfGirls:
-        data.ages_of_girls
+        data.agesOfGirls
           ?.slice(0, data.num_girls)
           .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
       ethnicity: selectedEthnicities.concat(otherEthnicity === "" ? [] : [otherEthnicity]),
@@ -283,7 +180,7 @@ const VeteranServiceRequest: React.FC = () => {
       zipCode: data.zipCode,
       phoneNumber: data.phoneNumber,
       email: data.email,
-      branch: selectedBranch,
+      branch: data.branch,
       conflicts: selectedConflicts.concat(otherConflict === "" ? [] : [otherConflict]),
       dischargeStatus: data.dischargeStatus,
       serviceConnected: data.serviceConnected,
@@ -299,84 +196,29 @@ const VeteranServiceRequest: React.FC = () => {
       additionalItems,
     };
 
-    try {
-      const response = await createVSR(createVSRRequest);
+    // Send request to backend
+    const response = await createVSR(createVSRRequest);
 
-      if (!response.success) {
-        // TODO: better way of displaying error
-        throw new Error(`HTTP error! status: ${response.error}`);
+    // Handle success/error
+    if (response.success) {
+      setConfirmSubmissionModalOpen(true);
+    } else {
+      if (response.error === "Failed to fetch") {
+        setVsrFormError(VSRFormError.CANNOT_SUBMIT_NO_INTERNET);
+      } else {
+        setVsrFormError(VSRFormError.CANNOT_SUBMIT_INTERNAL);
+        console.error(`Cannot submit VSR, error ${response.error}`);
       }
-
-      // TODO: better way of displaying successful submission (popup/modal)
-      alert("VSR submitted successfully!");
-    } catch (error) {
-      console.error("There was a problem with the fetch operation:", error);
     }
+    setLoadingVsrSubmission(false);
   };
 
   const incrementPageNumber = () => {
-    setPageNumber(pageNumber + 1);
+    goToPage(pageNumber + 1);
   };
 
   const decrementPageNumber = () => {
-    setPageNumber(pageNumber - 1);
-  };
-
-  const renderChildInput = (gender: "boy" | "girl") => {
-    const numChildrenThisGender = gender === "boy" ? numBoys : numGirls;
-
-    return (
-      <>
-        <div className={styles.longText}>
-          <TextField
-            label={`Number of ${gender === "boy" ? "Male" : "Female"} Children`}
-            variant="outlined"
-            placeholder="e.g. 2"
-            type="number"
-            {...register(`num_${gender}s`, {
-              required: `Number of ${gender}s is required`,
-              pattern: {
-                // Only allow up to 2 digits
-                value: /^[0-9][0-9]?$/,
-                message: "This field must be a number less than 100",
-              },
-            })}
-            required
-            error={!!errors[`num_${gender}s`]}
-            helperText={errors[`num_${gender}s`]?.message}
-          />
-        </div>
-
-        {numChildrenThisGender > 0 ? (
-          <div className={styles.numChildren}>
-            {/* Cap it at 99 children per gender to avoid freezing web browser */}
-            {Array.from({ length: Math.min(numChildrenThisGender, 99) }, (_, index) => (
-              <div key={index} className={styles.childInputWrapper}>
-                <TextField
-                  label={`Age of ${gender.substring(0, 1).toUpperCase()}${gender.substring(1)}`}
-                  type="number"
-                  variant="outlined"
-                  {...register(`ages_of_${gender}s.${index}`, {
-                    required: "This field is required",
-                    pattern: {
-                      value: /^[0-9]+$/,
-                      message: "This field must be a number",
-                    },
-                    max: {
-                      value: 17,
-                      message: "Only enter children under 18",
-                    },
-                  })}
-                  error={!!errors[`ages_of_${gender}s`]?.[index]}
-                  helperText={errors[`ages_of_${gender}s`]?.[index]?.message}
-                  required
-                />
-              </div>
-            ))}
-          </div>
-        ) : null}
-      </>
-    );
+    goToPage(pageNumber - 1);
   };
 
   const renderPageNumber = () => {
@@ -387,22 +229,31 @@ const VeteranServiceRequest: React.FC = () => {
     return pageNumber === 1 ? (
       <div className={styles.bottomButton} />
     ) : (
-      <button className={`${styles.bottomButton} ${styles.back}`} onClick={decrementPageNumber}>
-        Back
-      </button>
+      <Button
+        variant="primary"
+        outlined
+        text="Back"
+        className={styles.bottomButton}
+        onClick={decrementPageNumber}
+        /**
+         * We need to set type="button" because the default, type="submit", would cause
+         * this button to be triggered when the user presses enter on any input field.
+         */
+        type="button"
+      />
     );
   };
 
   const renderNextButton = () => {
     return (
-      <button
-        className={`${styles.bottomButton} ${styles.submit} ${
-          isValid ? styles.enabled : styles.disabled
-        }`}
+      <Button
+        variant="primary"
+        outlined={false}
+        loading={loadingVsrSubmission}
+        text={pageNumber === 3 ? "Submit" : "Next"}
+        className={`${styles.bottomButton} ${isValid ? "" : styles.disabled}`}
         type="submit"
-      >
-        {pageNumber === 3 ? "Submit" : "Next"}
-      </button>
+      />
     );
   };
 
@@ -428,11 +279,117 @@ const VeteranServiceRequest: React.FC = () => {
     }
   };
 
+  const renderErrorModal = () => {
+    switch (vsrFormError) {
+      case VSRFormError.CANNOT_RETRIEVE_FURNITURE_NO_INTERNET:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setVsrFormError(VSRFormError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/no_internet.svg"
+                alt="No Internet"
+                width={isMobile ? 100 : isTablet ? 138 : 114}
+                height={isMobile ? 93 : isTablet ? 129 : 106}
+              />
+            }
+            title="No Internet Connection"
+            content="Unable to retrieve the available furniture items due to no internet connection. Please check your connection and try again."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setVsrFormError(VSRFormError.NONE);
+              fetchFurnitureItems();
+            }}
+          />
+        );
+      case VSRFormError.CANNOT_RETRIEVE_FURNITURE_INTERNAL:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setVsrFormError(VSRFormError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/500_internal_error.svg"
+                alt="Internal Error"
+                width={isMobile ? 100 : 155}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="Internal Error"
+            content="Something went wrong with retrieving the available furniture items. Our team is working to fix it. Please try again later."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setVsrFormError(VSRFormError.NONE);
+              fetchFurnitureItems();
+            }}
+          />
+        );
+      case VSRFormError.CANNOT_SUBMIT_NO_INTERNET:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setVsrFormError(VSRFormError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/no_internet.svg"
+                alt="No Internet"
+                width={isMobile ? 100 : isTablet ? 138 : 114}
+                height={isMobile ? 93 : isTablet ? 129 : 106}
+              />
+            }
+            title="No Internet Connection"
+            content="Unable to submit the VSR form due to no internet connection. Please check your connection and try again."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setVsrFormError(VSRFormError.NONE);
+              onSubmit(watch());
+            }}
+          />
+        );
+      case VSRFormError.CANNOT_SUBMIT_INTERNAL:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setVsrFormError(VSRFormError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/500_internal_error.svg"
+                alt="Internal Error"
+                width={isMobile ? 100 : 155}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="Internal Error"
+            content="Something went wrong with submitting the VSR form. Our team is working to fix it. Please try again later."
+            buttonText="OK"
+            onButtonClicked={() => {
+              setVsrFormError(VSRFormError.NONE);
+            }}
+          />
+        );
+      case VSRFormError.NONE:
+      default:
+        return null;
+    }
+  };
+
+  /**
+   * Render different fields based on current page number
+   */
   if (pageNumber == 1) {
     return (
       <div>
         <form onSubmit={handleSubmit(incrementPageNumber)}>
-          <HeaderBar />
+          <HeaderBar showLogoutButton={false} />
           <div className={styles.main}>
             <h1 className={styles.title}>Veteran Service Request Form</h1>
             <p className={styles.description}>
@@ -446,8 +403,11 @@ const VeteranServiceRequest: React.FC = () => {
               spam folder if you don&apos;t receive a response within 48 business hours.
               <br></br>
               <br></br>
-              If you have any questions or concerns, send us an email at
-              veteran@patriotsandpaws.org.
+              If you have any questions or concerns, send us an email at{" "}
+              <a className={styles.emailLink} href="mailto:veteran@patriotsandpaws.org">
+                veteran@patriotsandpaws.org
+              </a>
+              .
             </p>
 
             <div className={styles.fieldsMarked}>
@@ -467,7 +427,10 @@ const VeteranServiceRequest: React.FC = () => {
                         label="Name"
                         variant="outlined"
                         placeholder="e.g. Justin Timberlake"
-                        {...register("name", { required: "Name is required" })}
+                        {...register(
+                          "name",
+                          vsrInputFieldValidators.name as RegisterOptions<IVSRFormInput, "name">,
+                        )}
                         required
                         error={!!errors.name}
                         helperText={errors.name?.message}
@@ -483,7 +446,9 @@ const VeteranServiceRequest: React.FC = () => {
                         defaultValue=""
                         name="gender"
                         control={control}
-                        rules={{ required: "Gender is required" }}
+                        rules={
+                          vsrInputFieldValidators.gender as RegisterOptions<IVSRFormInput, "gender">
+                        }
                         render={({ field }) => (
                           <Dropdown
                             label="Gender"
@@ -504,14 +469,10 @@ const VeteranServiceRequest: React.FC = () => {
                         type="number"
                         variant="outlined"
                         placeholder="Enter your age"
-                        {...register("age", {
-                          required: "Age is required",
-                          pattern: {
-                            // Only allow up to 2 digits
-                            value: /^[0-9]+$/,
-                            message: "This field must be a number",
-                          },
-                        })}
+                        {...register(
+                          "age",
+                          vsrInputFieldValidators.age as RegisterOptions<IVSRFormInput, "age">,
+                        )}
                         required
                         error={!!errors.age}
                         helperText={errors.age?.message}
@@ -522,9 +483,14 @@ const VeteranServiceRequest: React.FC = () => {
 
                 <div className={styles.subSec}>
                   <Controller
-                    name="marital_status"
+                    name="maritalStatus"
                     control={control}
-                    rules={{ required: "Marital status is required" }}
+                    rules={
+                      vsrInputFieldValidators.maritalStatus as RegisterOptions<
+                        IVSRFormInput,
+                        "maritalStatus"
+                      >
+                    }
                     render={({ field }) => (
                       <MultipleChoice
                         label="Marital Status"
@@ -532,24 +498,28 @@ const VeteranServiceRequest: React.FC = () => {
                         value={field.value}
                         onChange={(newValue) => field.onChange(newValue)}
                         required
-                        error={!!errors.marital_status}
-                        helperText={errors.marital_status?.message}
+                        error={!!errors.maritalStatus}
+                        helperText={errors.maritalStatus?.message}
                       />
                     )}
                   />
-                  {watch().marital_status === "Married" ? (
+                  {watch().maritalStatus === "Married" ? (
                     <div className={styles.formRow}>
                       <div className={styles.longText}>
                         <TextField
                           label="Spouse's Name"
                           variant="outlined"
                           placeholder="e.g. Jane Timberlake"
-                          {...register("spouse", {
-                            required: "Spouse's Name is required",
-                          })}
+                          {...register(
+                            "spouseName",
+                            vsrInputFieldValidators.spouseName as RegisterOptions<
+                              IVSRFormInput,
+                              "spouseName"
+                            >,
+                          )}
                           required
-                          error={!!errors.spouse}
-                          helperText={errors.spouse?.message}
+                          error={!!errors.spouseName}
+                          helperText={errors.spouseName?.message}
                         />
                       </div>
                       {/* Add an empty div here with flex: 1 to take up the right half of the row */}
@@ -560,15 +530,21 @@ const VeteranServiceRequest: React.FC = () => {
                   <p className={styles.sectionHeader}>Children Under the Age of 18:</p>
 
                   <div className={`${styles.formRow} ${styles.desktopRowTabletColumn}`}>
-                    <div className={styles.formRow}>{renderChildInput("boy")}</div>
-                    <div className={styles.formRow}>{renderChildInput("girl")}</div>
+                    <div className={styles.formRow}>
+                      <ChildrenInput gender="boy" formProps={formProps} />
+                    </div>
+                    <div className={styles.formRow}>
+                      <ChildrenInput gender="girl" formProps={formProps} />
+                    </div>
                   </div>
                 </div>
 
                 <Controller
                   name="ethnicity"
                   control={control}
-                  rules={{ required: "Ethnicity is required" }}
+                  rules={
+                    vsrInputFieldValidators.ethnicity as RegisterOptions<IVSRFormInput, "ethnicity">
+                  }
                   render={({ field }) => (
                     <>
                       <MultipleChoice
@@ -612,7 +588,12 @@ const VeteranServiceRequest: React.FC = () => {
                 <Controller
                   name="employment_status"
                   control={control}
-                  rules={{ required: "Employment status is required" }}
+                  rules={
+                    vsrInputFieldValidators.employment_status as RegisterOptions<
+                      IVSRFormInput,
+                      "employment_status"
+                    >
+                  }
                   render={({ field }) => (
                     <MultipleChoice
                       label="Employment Status"
@@ -629,7 +610,12 @@ const VeteranServiceRequest: React.FC = () => {
                 <Controller
                   name="income_level"
                   control={control}
-                  rules={{ required: "Income level is required" }}
+                  rules={
+                    vsrInputFieldValidators.income_level as RegisterOptions<
+                      IVSRFormInput,
+                      "income_level"
+                    >
+                  }
                   render={({ field }) => (
                     <MultipleChoice
                       label="Income Level"
@@ -646,7 +632,12 @@ const VeteranServiceRequest: React.FC = () => {
                 <Controller
                   name="size_of_home"
                   control={control}
-                  rules={{ required: "Size of home is required" }}
+                  rules={
+                    vsrInputFieldValidators.size_of_home as RegisterOptions<
+                      IVSRFormInput,
+                      "size_of_home"
+                    >
+                  }
                   render={({ field }) => (
                     <MultipleChoice
                       label="Size of Home"
@@ -664,13 +655,14 @@ const VeteranServiceRequest: React.FC = () => {
             {renderBottomRow()}
           </div>
         </form>
+        {renderErrorModal()}
       </div>
     );
   } else if (pageNumber === 2) {
     return (
       <div>
         <form onSubmit={handleSubmit(incrementPageNumber)}>
-          <HeaderBar />
+          <HeaderBar showLogoutButton={false} />
           <div className={styles.main}>
             <div className={styles.formContainer}>
               <div className={styles.form}>
@@ -684,7 +676,13 @@ const VeteranServiceRequest: React.FC = () => {
                           label="Street Address"
                           variant="outlined"
                           placeholder="e.g. 1234 Baker Street"
-                          {...register("streetAddress", { required: "Street address is required" })}
+                          {...register(
+                            "streetAddress",
+                            vsrInputFieldValidators.streetAddress as RegisterOptions<
+                              IVSRFormInput,
+                              "streetAddress"
+                            >,
+                          )}
                           required
                           error={!!errors.streetAddress}
                           helperText={errors.streetAddress?.message}
@@ -696,7 +694,10 @@ const VeteranServiceRequest: React.FC = () => {
                           label="City"
                           variant="outlined"
                           placeholder="e.g. San Diego"
-                          {...register("city", { required: "City is required" })}
+                          {...register(
+                            "city",
+                            vsrInputFieldValidators.city as RegisterOptions<IVSRFormInput, "city">,
+                          )}
                           required
                           error={!!errors.city}
                           helperText={errors.city?.message}
@@ -709,7 +710,9 @@ const VeteranServiceRequest: React.FC = () => {
                           defaultValue=""
                           name="state"
                           control={control}
-                          rules={{ required: "State is required" }}
+                          rules={
+                            vsrInputFieldValidators.state as RegisterOptions<IVSRFormInput, "state">
+                          }
                           render={({ field }) => (
                             <Dropdown
                               label="State"
@@ -731,14 +734,13 @@ const VeteranServiceRequest: React.FC = () => {
                           type="number"
                           variant="outlined"
                           placeholder="e.g. 92092"
-                          {...register("zipCode", {
-                            required: "Zip Code is required",
-                            pattern: {
-                              // Must be 5 digits
-                              value: /^\d{5}$/,
-                              message: "This field must be a 5 digit number",
-                            },
-                          })}
+                          {...register(
+                            "zipCode",
+                            vsrInputFieldValidators.zipCode as RegisterOptions<
+                              IVSRFormInput,
+                              "zipCode"
+                            >,
+                          )}
                           required
                           error={!!errors.zipCode}
                           helperText={errors.zipCode?.message}
@@ -754,13 +756,13 @@ const VeteranServiceRequest: React.FC = () => {
                         type="tel"
                         variant="outlined"
                         placeholder="e.g. 6197123276"
-                        {...register("phoneNumber", {
-                          required: "Phone Number is required",
-                          pattern: {
-                            value: /^\d{10}$/,
-                            message: "This field must be a 10 digit number",
-                          },
-                        })}
+                        {...register(
+                          "phoneNumber",
+                          vsrInputFieldValidators.phoneNumber as RegisterOptions<
+                            IVSRFormInput,
+                            "phoneNumber"
+                          >,
+                        )}
                         required
                         error={!!errors.phoneNumber}
                         helperText={errors.phoneNumber?.message}
@@ -773,15 +775,39 @@ const VeteranServiceRequest: React.FC = () => {
                         type="email"
                         variant="outlined"
                         placeholder="e.g. justintimberlake@gmail.com"
-                        {...register("email", {
-                          required: "Email Address is required",
-                        })}
+                        {...register(
+                          "email",
+                          vsrInputFieldValidators.email as RegisterOptions<IVSRFormInput, "email">,
+                        )}
                         required
                         error={!!errors.email}
                         helperText={errors.email?.message}
                       />
                     </div>
                   </div>
+                  <div className={styles.formRow}>
+                    {isMobile ? null : <div className={styles.longText} />}
+                    <div className={styles.longText}>
+                      <TextField
+                        label="Confirm Email Address"
+                        type="email"
+                        variant="outlined"
+                        placeholder="e.g. justintimberlake@gmail.com"
+                        {...register("confirmEmail", {
+                          required: "Please confirm your email address",
+                          validate: {
+                            validate: (emailAddress) =>
+                              emailValidator.validate(emailAddress)
+                                ? emailAddress === watch().email || "Emails do not match"
+                                : "This field must be a valid email address",
+                          },
+                        })}
+                        required
+                        error={!!errors.confirmEmail}
+                        helperText={errors.confirmEmail?.message}
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -794,19 +820,15 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="branch"
                     control={control}
-                    rules={{ required: "Military Branch is required" }}
+                    rules={
+                      vsrInputFieldValidators.branch as RegisterOptions<IVSRFormInput, "branch">
+                    }
                     render={({ field }) => (
                       <MultipleChoice
                         label="Branch"
                         options={branchOptions}
-                        value={selectedBranch}
-                        onChange={(newValue) => {
-                          const valueToSet = ((newValue as string[]) ?? [])[0] ?? "";
-                          if (valueToSet !== "") {
-                            field.onChange(valueToSet);
-                          }
-                          setSelectedBranch(newValue as string[]);
-                        }}
+                        value={field.value}
+                        onChange={field.onChange}
                         required
                         error={!!errors.branch}
                         helperText={errors.branch?.message}
@@ -818,7 +840,12 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="conflicts"
                     control={control}
-                    rules={{ required: "Military Conflicts is required" }}
+                    rules={
+                      vsrInputFieldValidators.conflicts as RegisterOptions<
+                        IVSRFormInput,
+                        "conflicts"
+                      >
+                    }
                     render={({ field }) => (
                       <>
                         <MultipleChoice
@@ -862,7 +889,12 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="dischargeStatus"
                     control={control}
-                    rules={{ required: "Discharge status is required" }}
+                    rules={
+                      vsrInputFieldValidators.dischargeStatus as RegisterOptions<
+                        IVSRFormInput,
+                        "dischargeStatus"
+                      >
+                    }
                     render={({ field }) => (
                       <MultipleChoice
                         label="Discharge Status"
@@ -879,10 +911,12 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="serviceConnected"
                     control={control}
-                    rules={{
-                      validate: (value) =>
-                        [true, false].includes(value) || "Service connected is required",
-                    }}
+                    rules={
+                      vsrInputFieldValidators.serviceConnected as RegisterOptions<
+                        IVSRFormInput,
+                        "serviceConnected"
+                      >
+                    }
                     render={({ field }) => (
                       <BinaryChoice
                         label="Service Connected"
@@ -901,7 +935,13 @@ const VeteranServiceRequest: React.FC = () => {
                         label="Last Rank"
                         variant="outlined"
                         placeholder="Enter"
-                        {...register("lastRank", { required: "Last rank is required" })}
+                        {...register(
+                          "lastRank",
+                          vsrInputFieldValidators.lastRank as RegisterOptions<
+                            IVSRFormInput,
+                            "lastRank"
+                          >,
+                        )}
                         required
                         error={!!errors.lastRank}
                         helperText={errors.lastRank?.message}
@@ -913,13 +953,13 @@ const VeteranServiceRequest: React.FC = () => {
                         label="Military ID Number (Last 4)"
                         variant="outlined"
                         placeholder="Enter"
-                        {...register("militaryID", {
-                          required: "Last rank is required",
-                          pattern: {
-                            value: /^\d{4}$/,
-                            message: "This field must be a 4 digit number",
-                          },
-                        })}
+                        {...register(
+                          "militaryID",
+                          vsrInputFieldValidators.militaryID as RegisterOptions<
+                            IVSRFormInput,
+                            "militaryID"
+                          >,
+                        )}
                         required
                         error={!!errors.militaryID}
                         helperText={errors.militaryID?.message}
@@ -937,10 +977,12 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="petCompanion"
                     control={control}
-                    rules={{
-                      validate: (value) =>
-                        [true, false].includes(value) || "Companionship animal is required",
-                    }}
+                    rules={
+                      vsrInputFieldValidators.petCompanion as RegisterOptions<
+                        IVSRFormInput,
+                        "petCompanion"
+                      >
+                    }
                     render={({ field }) => (
                       <BinaryChoice
                         label="Are you interested in a companionship animal (pet)?"
@@ -956,7 +998,9 @@ const VeteranServiceRequest: React.FC = () => {
                   <Controller
                     name="hearFrom"
                     control={control}
-                    rules={{ required: "Referral source is required" }}
+                    rules={
+                      vsrInputFieldValidators.hearFrom as RegisterOptions<IVSRFormInput, "hearFrom">
+                    }
                     render={({ field }) => (
                       <>
                         <MultipleChoice
@@ -1002,41 +1046,46 @@ const VeteranServiceRequest: React.FC = () => {
             {renderBottomRow()}
           </div>
         </form>
+        {renderErrorModal()}
       </div>
     );
   } else {
     return (
       <div>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <HeaderBar />
+          <HeaderBar showLogoutButton={false} />
           <div className={styles.main}>
             <div className={styles.formContainer}>
               <div className={styles.form}>
                 <div className={styles.subSec}>
                   <div className={styles.sectionTitle}>Furnishings</div>
                   <div>
-                    {Object.entries(furnitureCategoriesToItems ?? {}).map(([category, items]) => (
-                      <div className={styles.furnitureItemsSection} key={category}>
-                        <p className={styles.furnitureItemsSectionLabel}>{category}</p>
-                        <div className={styles.chipContainer}>
-                          {(items ?? []).map((furnitureItem) => (
-                            <FurnitureItemSelection
-                              key={furnitureItem._id}
-                              furnitureItem={furnitureItem}
-                              selection={
-                                selectedFurnitureItems[furnitureItem._id] ?? {
-                                  furnitureItemId: furnitureItem._id,
-                                  quantity: 0,
+                    {loadingFurnitureItems ? (
+                      <LoadingScreen />
+                    ) : (
+                      Object.entries(furnitureCategoriesToItems ?? {}).map(([category, items]) => (
+                        <div className={styles.furnitureItemsSection} key={category}>
+                          <p className={styles.furnitureItemsSectionLabel}>{category}</p>
+                          <div className={styles.chipContainer}>
+                            {(items ?? []).map((furnitureItem) => (
+                              <FurnitureItemSelection
+                                key={furnitureItem._id}
+                                furnitureItem={furnitureItem}
+                                selection={
+                                  selectedFurnitureItems[furnitureItem._id] ?? {
+                                    furnitureItemId: furnitureItem._id,
+                                    quantity: 0,
+                                  }
                                 }
-                              }
-                              onChangeSelection={(newSelection) =>
-                                handleSelectionChange(newSelection)
-                              }
-                            />
-                          ))}
+                                onChangeSelection={(newSelection) =>
+                                  handleSelectionChange(newSelection)
+                                }
+                              />
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    ))}
+                      ))
+                    )}
                     <div className={styles.section}>
                       <TextField
                         label="Identify other necessary items"
@@ -1044,7 +1093,7 @@ const VeteranServiceRequest: React.FC = () => {
                         required={false}
                         variant={"outlined"}
                         onChange={(e) => setAdditionalItems(e.target.value)}
-                      ></TextField>
+                      />
                     </div>
                   </div>
                 </div>
@@ -1054,11 +1103,27 @@ const VeteranServiceRequest: React.FC = () => {
           </div>
         </form>
         <div className={styles.footer}></div>
-        {/* TODO: better error handling */}
-        {errorMessage}
+        <ConfirmVSRSubmissionModal
+          isOpen={confirmSubmissionModalOpen}
+          onClose={() => {
+            setConfirmSubmissionModalOpen(false);
+            goToPage(1);
+
+            // Reset all form fields after submission
+            reset();
+            setSelectedEthnicities([]);
+            setOtherEthnicity("");
+            setSelectedConflicts([]);
+            setOtherConflict("");
+            setSelectedHearFrom("");
+            setOtherHearFrom("");
+            setSelectedFurnitureItems({});
+            setAdditionalItems("");
+          }}
+        />
+        {renderErrorModal()}
       </div>
     );
   }
 };
-
 export default VeteranServiceRequest;
diff --git a/frontend/src/components/Errors/ErrorNotification/index.tsx b/frontend/src/components/Errors/ErrorNotification/index.tsx
new file mode 100644
index 0000000..bca7bb5
--- /dev/null
+++ b/frontend/src/components/Errors/ErrorNotification/index.tsx
@@ -0,0 +1,50 @@
+import styles from "@/components/Errors/ErrorNotification/styles.module.css";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { Portal } from "@mui/material";
+import Image from "next/image";
+import { CSSProperties } from "react";
+
+interface ErrorNotificationProps {
+  isOpen: boolean;
+  mainText: string;
+  subText: string;
+  actionText: string;
+  onActionClicked: () => unknown;
+  style?: CSSProperties;
+}
+
+/**
+ * A component that displays an error notification at the top of the screen
+ */
+export const ErrorNotification = ({
+  isOpen,
+  mainText,
+  subText,
+  actionText,
+  onActionClicked,
+  style,
+}: ErrorNotificationProps) => {
+  const { isMobile } = useScreenSizes();
+  const iconSize = isMobile ? 36 : 49;
+
+  return isOpen ? (
+    <Portal>
+      <div className={styles.root} style={style}>
+        <Image
+          className={styles.icon}
+          src="/ic_error.svg"
+          alt="Exclamation Mark"
+          width={iconSize}
+          height={iconSize}
+        />
+        <div className={styles.textColumn}>
+          <p className={styles.mainText}>{mainText}</p>
+          <p className={styles.subText}>{subText}</p>
+        </div>
+        <p className={styles.actionText} onClick={onActionClicked}>
+          {actionText}
+        </p>
+      </div>
+    </Portal>
+  ) : null;
+};
diff --git a/frontend/src/components/Errors/ErrorNotification/styles.module.css b/frontend/src/components/Errors/ErrorNotification/styles.module.css
new file mode 100644
index 0000000..9a002e1
--- /dev/null
+++ b/frontend/src/components/Errors/ErrorNotification/styles.module.css
@@ -0,0 +1,88 @@
+.root {
+  position: fixed;
+  top: 133px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 707px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 5px solid #be2d46;
+  border-radius: 6px;
+  padding: 24px;
+  gap: 16px;
+  background-color: white;
+}
+
+.icon {
+  margin-bottom: auto;
+}
+
+.textColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.mainText {
+  color: var(--Secondary-2, #be2d46);
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+  width: 100%;
+}
+
+.subText {
+  color: var(--Primary-Background-Dark, #232220);
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.actionText {
+  color: rgba(35, 34, 32, 0.5);
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .root {
+    width: calc(100% - 48px);
+  }
+
+  .mainText {
+    font-size: 20px;
+  }
+
+  .subText {
+    font-size: 16px;
+  }
+
+  .actionText {
+    font-size: 16px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .root {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .mainText {
+    font-size: 18px;
+  }
+
+  .subText {
+    font-size: 14px;
+  }
+
+  .actionText {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/components/Errors/ErrorPage/index.tsx b/frontend/src/components/Errors/ErrorPage/index.tsx
new file mode 100644
index 0000000..af12309
--- /dev/null
+++ b/frontend/src/components/Errors/ErrorPage/index.tsx
@@ -0,0 +1,25 @@
+import styles from "@/components/Errors/ErrorPage/styles.module.css";
+import { ReactNode } from "react";
+
+interface ErrorPageProps {
+  imageComponent: ReactNode;
+  title: string;
+  content: (string | ReactNode)[];
+}
+
+/**
+ * A component that renders an error page with a given image, title, and content
+ */
+export const ErrorPage = ({ imageComponent, title, content }: ErrorPageProps) => {
+  return (
+    <div className={styles.root}>
+      {imageComponent}
+      <h1 className={styles.title}>{title}</h1>
+      {content.map((paragraph, index) => (
+        <p key={index} className={styles.content}>
+          {paragraph}
+        </p>
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/src/components/Errors/ErrorPage/styles.module.css b/frontend/src/components/Errors/ErrorPage/styles.module.css
new file mode 100644
index 0000000..032e437
--- /dev/null
+++ b/frontend/src/components/Errors/ErrorPage/styles.module.css
@@ -0,0 +1,60 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: var(--Primary-Background-Light, #f7f7f7);
+  gap: 16px;
+}
+
+.title {
+  color: var(--Secondary-2, #be2d46);
+  text-align: center;
+
+  font-family: "Lora";
+  font-size: 40px;
+  font-weight: 700;
+  margin: 51px 0 16px;
+}
+
+.content {
+  color: var(--Secondary-1, #102d5f);
+  text-align: center;
+
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .root {
+    padding: 0 48px;
+  }
+
+  .title {
+    font-size: 36px;
+    margin: 16px 0 16px;
+  }
+
+  .content {
+    font-size: 18px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .root {
+    padding: 0 24px;
+  }
+
+  .title {
+    font-size: 28px;
+  }
+
+  .content {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/components/VSRForm/ConfirmVSRSubmissionModal/index.tsx b/frontend/src/components/VSRForm/ConfirmVSRSubmissionModal/index.tsx
new file mode 100644
index 0000000..7612f0c
--- /dev/null
+++ b/frontend/src/components/VSRForm/ConfirmVSRSubmissionModal/index.tsx
@@ -0,0 +1,40 @@
+import { BaseModal } from "@/components/shared/BaseModal";
+
+interface ConfirmVSRSubmissionModalProps {
+  isOpen: boolean;
+  onClose: () => unknown;
+}
+
+/**
+ * A modal that displays a confirmation that a VSR was submitted successfully.
+ */
+export const ConfirmVSRSubmissionModal = ({ isOpen, onClose }: ConfirmVSRSubmissionModalProps) => {
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Submitted successfully!"
+      content={
+        <>
+          A copy of your submitted VSR form has been sent to your email. We&apos;ll review it
+          promptly and respond via email as soon as possible. Allow up to 48 business hours to be
+          contacted for appointment scheduling.
+          <br></br>
+          <br></br>
+          Please check your spam folder if you don&apos;t receive a response within 48 business
+          hours.
+          <br></br>
+          <br></br>
+          If you need to make changes to your VSR form, submit another VSR form and let us know at{" "}
+          <a
+            style={{ textDecorationLine: "underline", fontStyle: "italic" }}
+            href="veteran@patriotsandpaws.org"
+          >
+            veteran@patriotsandpaws.org.
+          </a>
+        </>
+      }
+      bottomRow={null}
+    />
+  );
+};
diff --git a/frontend/src/components/VeteranForm/FurnitureItemSelection/index.tsx b/frontend/src/components/VSRForm/FurnitureItemSelection/index.tsx
similarity index 89%
rename from frontend/src/components/VeteranForm/FurnitureItemSelection/index.tsx
rename to frontend/src/components/VSRForm/FurnitureItemSelection/index.tsx
index 4395633..42656bf 100644
--- a/frontend/src/components/VeteranForm/FurnitureItemSelection/index.tsx
+++ b/frontend/src/components/VSRForm/FurnitureItemSelection/index.tsx
@@ -1,6 +1,6 @@
 import { FurnitureItem } from "@/api/FurnitureItems";
 import { FurnitureInput } from "@/api/VSRs";
-import styles from "@/components/VeteranForm/FurnitureItemSelection/styles.module.css";
+import styles from "@/components/VSRForm/FurnitureItemSelection/styles.module.css";
 import Image from "next/image";
 
 export interface FurnitureItemSelectionProps {
@@ -9,6 +9,10 @@ export interface FurnitureItemSelectionProps {
   onChangeSelection: (newSelection: FurnitureInput) => unknown;
 }
 
+/**
+ * An input component that enables a user to select one or more of a single furniture
+ * item on the VSR form.
+ */
 export const FurnitureItemSelection = ({
   furnitureItem,
   selection,
@@ -61,7 +65,7 @@ export const FurnitureItemSelection = ({
                 alt="dropdown"
               />
             </button>
-            <span>{selection.quantity}</span>
+            <span className={styles.quantityText}>{selection.quantity}</span>
             <button
               onClick={(e) => {
                 e.stopPropagation();
diff --git a/frontend/src/components/VeteranForm/FurnitureItemSelection/styles.module.css b/frontend/src/components/VSRForm/FurnitureItemSelection/styles.module.css
similarity index 98%
rename from frontend/src/components/VeteranForm/FurnitureItemSelection/styles.module.css
rename to frontend/src/components/VSRForm/FurnitureItemSelection/styles.module.css
index 318b0f2..b6adcb0 100644
--- a/frontend/src/components/VeteranForm/FurnitureItemSelection/styles.module.css
+++ b/frontend/src/components/VSRForm/FurnitureItemSelection/styles.module.css
@@ -84,6 +84,10 @@
     brightness(103%) contrast(103%);
 }
 
+.quantityText {
+  margin: 0 6px;
+}
+
 /* tablet version */
 @media screen and (max-width: 850px) {
   .chip {
diff --git a/frontend/src/components/VSRForm/PageNumber/index.tsx b/frontend/src/components/VSRForm/PageNumber/index.tsx
index 3ad79da..734bdd6 100644
--- a/frontend/src/components/VSRForm/PageNumber/index.tsx
+++ b/frontend/src/components/VSRForm/PageNumber/index.tsx
@@ -5,6 +5,9 @@ export interface PageNumberProps {
   pageNum: number;
 }
 
+/**
+ * A component that displays the current page number of the VSR form.
+ */
 const PageNumber = ({ pageNum }: PageNumberProps) => {
   return (
     <div className={styles.pageNumber}>
diff --git a/frontend/src/components/VSRForm/VSRErrorModal/index.tsx b/frontend/src/components/VSRForm/VSRErrorModal/index.tsx
new file mode 100644
index 0000000..bb49c60
--- /dev/null
+++ b/frontend/src/components/VSRForm/VSRErrorModal/index.tsx
@@ -0,0 +1,48 @@
+import styles from "@/components/VSRForm/VSRErrorModal/styles.module.css";
+import { Modal } from "@mui/material";
+import { ReactNode } from "react";
+import Image from "next/image";
+import { Button } from "@/components/shared/Button";
+
+export interface VSRErrorModalProps {
+  isOpen: boolean;
+  onClose: () => unknown;
+  imageComponent: ReactNode;
+  title: string;
+  content: string | ReactNode;
+  buttonText: string;
+  onButtonClicked: () => unknown;
+}
+
+/**
+ * A modal that displays an error with loading/submitting a VSR.
+ */
+export const VSRErrorModal = ({
+  isOpen,
+  onClose,
+  imageComponent,
+  title,
+  content,
+  buttonText,
+  onButtonClicked,
+}: VSRErrorModalProps) => {
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <div className={styles.root}>
+        <button onClick={onClose} className={styles.closeButton}>
+          <Image src="/ic_close_large.svg" alt="close" width={24} height={24} />
+        </button>
+        {imageComponent}
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.content}>{content}</p>
+        <Button
+          variant="primary"
+          outlined={false}
+          text={buttonText}
+          className={styles.button}
+          onClick={onButtonClicked}
+        />
+      </div>
+    </Modal>
+  );
+};
diff --git a/frontend/src/components/VSRForm/VSRErrorModal/styles.module.css b/frontend/src/components/VSRForm/VSRErrorModal/styles.module.css
new file mode 100644
index 0000000..8c36932
--- /dev/null
+++ b/frontend/src/components/VSRForm/VSRErrorModal/styles.module.css
@@ -0,0 +1,87 @@
+.root {
+  position: absolute;
+  width: 723px;
+  background-color: white;
+  border-radius: 12px;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 64px;
+  gap: 32px;
+  border: none !important;
+  outline: none !important;
+}
+
+.closeButton {
+  position: absolute;
+  top: 28px;
+  right: 28px;
+  cursor: pointer;
+  border: none !important;
+  background: transparent;
+}
+
+.title {
+  color: var(--Secondary-2, #be2d46);
+  text-align: center;
+  font-family: "Lora";
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.content {
+  color: var(--Secondary-1, #102d5f);
+  text-align: center;
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.button {
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+  padding: 12px 24px;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .root {
+    width: calc(100% - 96px);
+  }
+
+  .title {
+    font-size: 36px;
+  }
+
+  .content {
+    font-size: 18px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .root {
+    width: calc(100% - 48px);
+    padding: 32px 16px;
+  }
+
+  .title {
+    font-size: 28px;
+  }
+
+  .content {
+    font-size: 14px;
+  }
+
+  .button {
+    font-size: 18px;
+  }
+}
diff --git a/frontend/src/components/VSRForm/VSRFormTypes.ts b/frontend/src/components/VSRForm/VSRFormTypes.ts
new file mode 100644
index 0000000..46eb697
--- /dev/null
+++ b/frontend/src/components/VSRForm/VSRFormTypes.ts
@@ -0,0 +1,48 @@
+/**
+ * Common types for the VSR form (create & edit) input fields.
+ */
+
+import { FurnitureInput } from "@/api/VSRs";
+
+export interface IVSRFormInput {
+  name: string;
+  maritalStatus: string;
+  gender: string;
+  spouseName: string;
+  age: number;
+  ethnicity: string[];
+  other_ethnicity: string;
+  employment_status: string;
+  income_level: string;
+  size_of_home: string;
+  num_boys: number;
+  num_girls: number;
+  agesOfBoys: number[];
+  agesOfGirls: number[];
+
+  streetAddress: string;
+  city: string;
+  state: string;
+  zipCode: number;
+  phoneNumber: string;
+  email: string;
+  branch: string[];
+  conflicts: string[];
+  other_conflicts: string;
+  dischargeStatus: string;
+  serviceConnected: boolean;
+  lastRank: string;
+  militaryID: number;
+  petCompanion: boolean;
+  hearFrom: string;
+  other_hearFrom: string;
+
+  selectedFurnitureItems: Record<string, FurnitureInput>;
+  additionalItems: string;
+}
+
+export interface ICreateVSRFormInput extends IVSRFormInput {
+  confirmEmail: string;
+}
+
+export type IEditVSRFormInput = IVSRFormInput;
diff --git a/frontend/src/components/VSRForm/VSRFormValidators.ts b/frontend/src/components/VSRForm/VSRFormValidators.ts
new file mode 100644
index 0000000..65b0e59
--- /dev/null
+++ b/frontend/src/components/VSRForm/VSRFormValidators.ts
@@ -0,0 +1,75 @@
+import emailValidator from "email-validator";
+import { RegisterOptions } from "react-hook-form";
+import { IVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+
+/**
+ * Defines common validators for the VSR form inputs.
+ */
+export const vsrInputFieldValidators: Partial<
+  Record<keyof IVSRFormInput, RegisterOptions<IVSRFormInput, keyof IVSRFormInput>>
+> = {
+  name: { required: "Name is required" },
+  gender: { required: "Gender is required" },
+  age: {
+    required: "Age is required",
+    pattern: {
+      // Only allow up to 2 digits
+      value: /^[0-9]+$/,
+      message: "This field must be a positive number",
+    },
+  },
+  maritalStatus: { required: "Marital status is required" },
+  spouseName: {
+    required: "Spouse's Name is required",
+  },
+  ethnicity: { required: "Ethnicity is required" },
+  employment_status: { required: "Employment status is required" },
+  income_level: { required: "Income level is required" },
+  size_of_home: { required: "Size of home is required" },
+  streetAddress: { required: "Street address is required" },
+  city: { required: "City is required" },
+  state: { required: "State is required" },
+  zipCode: {
+    required: "Zip Code is required",
+    pattern: {
+      // Must be 5 digits
+      value: /^\d{5}$/,
+      message: "This field must be a 5 digit number",
+    },
+  },
+  phoneNumber: {
+    required: "Phone Number is required",
+    pattern: {
+      value: /^\d{10}$/,
+      message: "This field must be a 10 digit number",
+    },
+  },
+  email: {
+    required: "Email Address is required",
+    validate: {
+      validate: (emailAddress) =>
+        emailValidator.validate(emailAddress as string) ||
+        "This field must be a valid email address",
+    },
+  },
+  branch: { required: "Military Branch is required" },
+  conflicts: { required: "Military Conflicts is required" },
+  dischargeStatus: { required: "Discharge status is required" },
+  serviceConnected: {
+    validate: (value) =>
+      [true, false].includes(value as boolean) || "Service connected is required",
+  },
+  lastRank: { required: "Last rank is required" },
+  militaryID: {
+    required: "Last rank is required",
+    pattern: {
+      value: /^\d{4}$/,
+      message: "This field must be a 4 digit number",
+    },
+  },
+  petCompanion: {
+    validate: (value) =>
+      [true, false].includes(value as boolean) || "Companionship animal is required",
+  },
+  hearFrom: { required: "Referral source is required" },
+};
diff --git a/frontend/src/components/VSRIndividual/AdditionalInfo/index.tsx b/frontend/src/components/VSRIndividual/AdditionalInfo/index.tsx
deleted file mode 100644
index f0cac31..0000000
--- a/frontend/src/components/VSRIndividual/AdditionalInfo/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import styles from "src/components/VSRIndividual/ContactInfo/styles.module.css";
-import { ListDetail } from "@/components/VSRIndividual";
-import { type VSR } from "@/api/VSRs";
-import { VSRIndividualAccordion } from "../VSRIndividualAccordion";
-
-export interface AdditionalInfoProps {
-  vsr: VSR;
-}
-
-export const AdditionalInfo = ({ vsr }: AdditionalInfoProps) => {
-  return (
-    <VSRIndividualAccordion title="Additional Information" permanentlyExpanded={false}>
-      <div className={styles.row}>
-        <ListDetail
-          title="Are you interested in a companionship animal (pet)?"
-          values={[vsr.petCompanion ? "Yes" : "No"]}
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="How did you hear about us?" values={[vsr.hearFrom]} />
-      </div>
-    </VSRIndividualAccordion>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/ContactInfo/index.tsx b/frontend/src/components/VSRIndividual/ContactInfo/index.tsx
deleted file mode 100644
index 9169c4b..0000000
--- a/frontend/src/components/VSRIndividual/ContactInfo/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import styles from "src/components/VSRIndividual/ContactInfo/styles.module.css";
-import { SingleDetail } from "@/components/VSRIndividual";
-import { type VSR } from "@/api/VSRs";
-import { VSRIndividualAccordion } from "../VSRIndividualAccordion";
-
-export interface ContactInfoProps {
-  vsr: VSR;
-}
-export const ContactInfo = ({ vsr }: ContactInfoProps) => {
-  return (
-    <VSRIndividualAccordion permanentlyExpanded={false} title="Contact Information">
-      <div className={styles.row}>
-        <SingleDetail title="Phone Number" value={vsr.phoneNumber} />{" "}
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Email Address" value={vsr.email} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Gender" value={vsr.gender} />
-        <SingleDetail className={styles.second} title="Age" value={vsr.age} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Street Address" value={vsr.streetAddress} />
-        <SingleDetail className={styles.second} title="City" value={vsr.city} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Zip Code" value={vsr.zipCode} />
-        <SingleDetail className={styles.second} title="State" value={vsr.state} />
-      </div>
-    </VSRIndividualAccordion>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/ContactInfo/styles.module.css b/frontend/src/components/VSRIndividual/ContactInfo/styles.module.css
deleted file mode 100644
index 19d2092..0000000
--- a/frontend/src/components/VSRIndividual/ContactInfo/styles.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.row {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-.row:not(:last-child) {
-  padding-bottom: 32px;
-}
-
-.row > *:not(:last-child) {
-  width: calc(50% - 16px);
-}
-
-.second {
-  position: absolute;
-  left: 50%;
-  transform: translateX(16px);
-}
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/BinaryChoiceInputDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/BinaryChoiceInputDetail/index.tsx
new file mode 100644
index 0000000..d5e4deb
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/BinaryChoiceInputDetail/index.tsx
@@ -0,0 +1,42 @@
+import { Controller, UseFormReturn } from "react-hook-form";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import BinaryChoice from "@/components/shared/input/BinaryChoice";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+interface BinaryChoiceInputDetailProps {
+  title: string;
+  name: keyof IEditVSRFormInput;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * A component for a binary choice input field on the VSR individual page.
+ */
+export const BinaryChoiceInputDetail = ({
+  title,
+  name,
+  formProps,
+  ...props
+}: BinaryChoiceInputDetailProps) => {
+  return (
+    <FieldDetail title={title}>
+      <Controller
+        name={name}
+        control={formProps.control}
+        rules={vsrInputFieldValidators[name]}
+        render={({ field }) => (
+          <BinaryChoice
+            label=""
+            value={field.value as boolean}
+            onChange={field.onChange}
+            required={false}
+            error={!!formProps.formState.errors[name]}
+            helperText={formProps.formState.errors[name]?.message as string}
+            {...props}
+          />
+        )}
+      />
+    </FieldDetail>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/index.tsx
new file mode 100644
index 0000000..e13a993
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/index.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import styles from "@/components/VSRIndividual/FieldDetails/FieldDetail/styles.module.css";
+
+interface FieldDetailProps {
+  children: ReactNode;
+  title: string;
+  className?: string;
+}
+
+/**
+ * A base component for a field detail on the VSR individual page, that renders a label
+ * above the provided children.
+ */
+export const FieldDetail = ({ children, title, className }: FieldDetailProps) => {
+  return (
+    <div className={className != undefined ? className : styles.items}>
+      <div className={styles.title}>{title}</div>
+      {children}
+    </div>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/styles.module.css b/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/styles.module.css
new file mode 100644
index 0000000..fe3fb59
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/FieldDetail/styles.module.css
@@ -0,0 +1,10 @@
+.title {
+  color: rgba(35, 34, 32, 0.55);
+  font-family: var(--font-open-sans);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 10px;
+  white-space: nowrap;
+}
diff --git a/frontend/src/components/VSRIndividual/ListDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/ListDetail/index.tsx
similarity index 54%
rename from frontend/src/components/VSRIndividual/ListDetail/index.tsx
rename to frontend/src/components/VSRIndividual/FieldDetails/ListDetail/index.tsx
index b3a92a6..5c37f43 100644
--- a/frontend/src/components/VSRIndividual/ListDetail/index.tsx
+++ b/frontend/src/components/VSRIndividual/FieldDetails/ListDetail/index.tsx
@@ -1,11 +1,15 @@
 import React from "react";
-import styles from "src/components/VSRIndividual/ListDetail/styles.module.css";
+import styles from "@/components/VSRIndividual/FieldDetails/ListDetail/styles.module.css";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
 
 export interface ListDetailProps {
   title: string;
   values: string[];
 }
 
+/**
+ * A component that displays a list of values separated by commas on the VSR individual page.
+ */
 export function ListDetail({ title, values }: ListDetailProps) {
   const list = (
     <div className={styles.list}>
@@ -18,12 +22,5 @@ export function ListDetail({ title, values }: ListDetailProps) {
   );
   const noList = <div className={styles.noList}>N/A</div>;
 
-  return (
-    <div>
-      <div className={styles.items}>
-        <div className={styles.title}>{title}</div>
-        {values.includes("N/A") ? noList : list}
-      </div>
-    </div>
-  );
+  return <FieldDetail title={title}>{values.includes("N/A") ? noList : list}</FieldDetail>;
 }
diff --git a/frontend/src/components/VSRIndividual/ListDetail/styles.module.css b/frontend/src/components/VSRIndividual/FieldDetails/ListDetail/styles.module.css
similarity index 100%
rename from frontend/src/components/VSRIndividual/ListDetail/styles.module.css
rename to frontend/src/components/VSRIndividual/FieldDetails/ListDetail/styles.module.css
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceInputDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceInputDetail/index.tsx
new file mode 100644
index 0000000..5204981
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceInputDetail/index.tsx
@@ -0,0 +1,48 @@
+import { Controller, UseFormReturn } from "react-hook-form";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import MultipleChoice from "@/components/shared/input/MultipleChoice";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+interface MultipleChoiceInputDetailProps {
+  title: string;
+  name: keyof IEditVSRFormInput;
+  options: string[];
+  allowMultiple: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * A component for a multiple choice input field on the VSR individual page.
+ */
+export const MultipleChoiceInputDetail = ({
+  title,
+  name,
+  options,
+  allowMultiple,
+  formProps,
+  ...props
+}: MultipleChoiceInputDetailProps) => {
+  return (
+    <FieldDetail title={title}>
+      <Controller
+        name={name}
+        control={formProps.control}
+        rules={vsrInputFieldValidators[name]}
+        render={({ field }) => (
+          <MultipleChoice
+            label=""
+            options={options}
+            value={field.value as string | string[]}
+            onChange={field.onChange}
+            required={false}
+            error={!!formProps.formState.errors[name]}
+            helperText={formProps.formState.errors[name]?.message as string}
+            allowMultiple={allowMultiple}
+            {...props}
+          />
+        )}
+      />
+    </FieldDetail>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail/index.tsx
new file mode 100644
index 0000000..a7e69a4
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail/index.tsx
@@ -0,0 +1,84 @@
+import { Controller, UseFormReturn } from "react-hook-form";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import MultipleChoice from "@/components/shared/input/MultipleChoice";
+import TextField from "@/components/shared/input/TextField";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+interface MultipleChoiceWithOtherInputDetailProps {
+  title: string;
+  name: keyof IEditVSRFormInput;
+  otherName: keyof IEditVSRFormInput;
+  options: string[];
+  allowMultiple: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ *
+ * A component for a multiple choice input field on the VSR individual page,
+ * that also renders a text field below, for the fields with an "Other" option.
+ */
+export const MultipleChoiceWithOtherInputDetail = ({
+  title,
+  name,
+  otherName,
+  options,
+  allowMultiple,
+  formProps,
+  ...props
+}: MultipleChoiceWithOtherInputDetailProps) => {
+  return (
+    <FieldDetail title={title}>
+      <Controller
+        name={name}
+        control={formProps.control}
+        rules={vsrInputFieldValidators[name]}
+        render={({ field }) => (
+          <MultipleChoice
+            label=""
+            options={options}
+            value={field.value as string | string[]}
+            onChange={(value) => {
+              field.onChange(value);
+              if (!allowMultiple && value.length > 0) {
+                // If user can't enter multiple options, clear the "other" text field when they select an option
+                formProps.setValue(otherName, "");
+              }
+            }}
+            required={false}
+            error={!!formProps.formState.errors[name]}
+            helperText={formProps.formState.errors[name]?.message as string}
+            allowMultiple={allowMultiple}
+            {...props}
+          />
+        )}
+      />
+      <Controller
+        name={otherName}
+        control={formProps.control}
+        render={({ field }) => (
+          <div style={{ marginTop: 24 }}>
+            <TextField
+              label="Other"
+              type="text"
+              placeholder="Please specify"
+              value={field.value}
+              onChange={(e) => {
+                const value = e.target.value;
+                field.onChange(value);
+                if (!allowMultiple && value.length > 0) {
+                  // If user can't enter multiple options, clear the chips field when
+                  // they enter something into the "other" text field
+                  formProps.setValue(name, "");
+                }
+              }}
+              variant={"outlined"}
+              required={false}
+            />
+          </div>
+        )}
+      />
+    </FieldDetail>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/SelectInputDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/SelectInputDetail/index.tsx
new file mode 100644
index 0000000..e31d892
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/SelectInputDetail/index.tsx
@@ -0,0 +1,48 @@
+import { Controller, UseFormReturn } from "react-hook-form";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import Dropdown from "@/components/shared/input/Dropdown";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+interface SelectInputDetailProps {
+  title: string;
+  name: keyof IEditVSRFormInput;
+  options: string[];
+  placeholder?: string;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * A component for a dropdown input detail field on the VSR individual pag.e
+ */
+export const SelectInputDetail = ({
+  title,
+  name,
+  options,
+  placeholder,
+  formProps,
+  ...props
+}: SelectInputDetailProps) => {
+  return (
+    <FieldDetail title={title}>
+      <Controller
+        name={name}
+        control={formProps.control}
+        rules={vsrInputFieldValidators[name]}
+        render={({ field }) => (
+          <Dropdown
+            label=""
+            placeholder={placeholder}
+            options={options}
+            value={field.value as string}
+            onChange={field.onChange}
+            required={false}
+            error={!!formProps.formState.errors[name]}
+            helperText={formProps.formState.errors[name]?.message as string}
+            {...props}
+          />
+        )}
+      />
+    </FieldDetail>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/SingleDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/index.tsx
similarity index 58%
rename from frontend/src/components/VSRIndividual/SingleDetail/index.tsx
rename to frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/index.tsx
index 38bb134..bee47f4 100644
--- a/frontend/src/components/VSRIndividual/SingleDetail/index.tsx
+++ b/frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/index.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
-import styles from "src/components/VSRIndividual/SingleDetail/styles.module.css";
+import styles from "@/components/VSRIndividual/FieldDetails/SingleDetail/styles.module.css";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
 
 export interface SingleDetailProps {
   title: string;
@@ -8,6 +9,9 @@ export interface SingleDetailProps {
   className?: string;
 }
 
+/**
+ * A component for a single (non-list) field on the VSR individual page.
+ */
 export function SingleDetail({ title, value, valueFontSize, className }: SingleDetailProps) {
   const valueStyle = {
     fontSize: valueFontSize, // Use the passed font size or default to CSS class
@@ -28,15 +32,12 @@ export function SingleDetail({ title, value, valueFontSize, className }: SingleD
   const noValue = <div className={styles.noValue}>N/A</div>;
 
   return (
-    <div>
-      <div className={`${styles.items} ${className}`}>
-        <div className={styles.title}>{title}</div>
-        {typeof value === "string" && value.includes("@")
-          ? email
-          : typeof value === "string" && value.includes("N/A")
-            ? noValue
-            : basic}
-      </div>
-    </div>
+    <FieldDetail className={className} title={title}>
+      {typeof value === "string" && value.includes("@")
+        ? email
+        : typeof value === "string" && value.includes("N/A")
+          ? noValue
+          : basic}
+    </FieldDetail>
   );
 }
diff --git a/frontend/src/components/VSRIndividual/SingleDetail/styles.module.css b/frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/styles.module.css
similarity index 100%
rename from frontend/src/components/VSRIndividual/SingleDetail/styles.module.css
rename to frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/styles.module.css
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/TextInputDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/TextInputDetail/index.tsx
new file mode 100644
index 0000000..3811f7f
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/FieldDetails/TextInputDetail/index.tsx
@@ -0,0 +1,47 @@
+import { Controller, UseFormReturn } from "react-hook-form";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import TextField from "@/components/shared/input/TextField";
+import { vsrInputFieldValidators } from "@/components/VSRForm/VSRFormValidators";
+
+interface TextInputDetailProps {
+  title: string;
+  name: keyof IEditVSRFormInput;
+  placeholder?: string;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+  type?: string;
+}
+
+/**
+ * A component for a text input detail field on the VSR individual page.
+ */
+export const TextInputDetail = ({
+  title,
+  name,
+  placeholder,
+  formProps,
+  ...props
+}: TextInputDetailProps) => {
+  return (
+    <FieldDetail title={title}>
+      <Controller
+        name={name}
+        control={formProps.control}
+        render={({ field }) => (
+          <TextField
+            label=""
+            variant="outlined"
+            placeholder={placeholder}
+            {...formProps.register(name, vsrInputFieldValidators[name])}
+            value={field.value}
+            onChange={field.onChange}
+            required={false}
+            error={!!formProps.formState.errors[name]}
+            helperText={formProps.formState.errors[name]?.message as string}
+            {...props}
+          />
+        )}
+      />
+    </FieldDetail>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/HeaderBar/styles.module.css b/frontend/src/components/VSRIndividual/HeaderBar/HeaderBar.module.css
similarity index 100%
rename from frontend/src/components/VSRIndividual/HeaderBar/styles.module.css
rename to frontend/src/components/VSRIndividual/HeaderBar/HeaderBar.module.css
diff --git a/frontend/src/components/VSRIndividual/HeaderBar/index.tsx b/frontend/src/components/VSRIndividual/HeaderBar/HeaderBar.tsx
similarity index 85%
rename from frontend/src/components/VSRIndividual/HeaderBar/index.tsx
rename to frontend/src/components/VSRIndividual/HeaderBar/HeaderBar.tsx
index 266dc8e..6f914ab 100644
--- a/frontend/src/components/VSRIndividual/HeaderBar/index.tsx
+++ b/frontend/src/components/VSRIndividual/HeaderBar/HeaderBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "src/components/VSRIndividual/HeaderBar/styles.module.css";
+import styles from "@/components/VSRIndividual/HeaderBar/HeaderBar.module.css";
 import Image from "next/image";
 
 export const HeaderBar = () => {
diff --git a/frontend/src/components/VSRIndividual/MilitaryBackground/index.tsx b/frontend/src/components/VSRIndividual/MilitaryBackground/index.tsx
deleted file mode 100644
index abd6d5e..0000000
--- a/frontend/src/components/VSRIndividual/MilitaryBackground/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import styles from "@/components/VSRIndividual/ContactInfo/styles.module.css";
-import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
-import { type VSR } from "@/api/VSRs";
-import { VSRIndividualAccordion } from "../VSRIndividualAccordion";
-
-export interface MilitaryBackgroundProps {
-  vsr: VSR;
-}
-
-export const MilitaryBackground = ({ vsr }: MilitaryBackgroundProps) => {
-  return (
-    <VSRIndividualAccordion permanentlyExpanded={false} title="Military Background">
-      <div className={styles.row}>
-        <ListDetail
-          title="Branch"
-          values={vsr.branch && vsr.branch.length > 0 ? vsr.branch : ["N/A"]}
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail
-          title="Conflicts"
-          values={vsr.conflicts && vsr.conflicts.length > 0 ? vsr.conflicts : ["N/A"]}
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail
-          title="Discharge Status"
-          values={
-            vsr.dischargeStatus && vsr.dischargeStatus.length > 0 ? [vsr.dischargeStatus] : ["N/A"]
-          }
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="Service Connected" values={[vsr.serviceConnected ? "Yes" : "No"]} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Last Rank:" value={vsr.lastRank} />
-        <SingleDetail className={styles.second} title="Military ID Number" value={vsr.militaryID} />
-      </div>
-    </VSRIndividualAccordion>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/Page/index.tsx b/frontend/src/components/VSRIndividual/Page/index.tsx
deleted file mode 100644
index d50aed5..0000000
--- a/frontend/src/components/VSRIndividual/Page/index.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  HeaderBar,
-  VeteranTag,
-  ContactInfo,
-  CaseDetails,
-  PersonalInformation,
-  MilitaryBackground,
-  AdditionalInfo,
-  RequestedFurnishings,
-} from "@/components/VSRIndividual";
-import styles from "src/components/VSRIndividual/Page/styles.module.css";
-import Image from "next/image";
-import { type VSR, getVSR, updateVSRStatus } from "@/api/VSRs";
-import { useParams } from "next/navigation";
-import { FurnitureItem, getFurnitureItems } from "@/api/FurnitureItems";
-import { useScreenSizes } from "@/util/useScreenSizes";
-
-export const Page = () => {
-  const [vsr, setVSR] = useState<VSR>({} as VSR);
-  const { id } = useParams();
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [furnitureItems, setFurnitureItems] = useState<FurnitureItem[]>();
-
-  const { isMobile, isTablet } = useScreenSizes();
-  const iconSize = isMobile ? 16 : isTablet ? 19 : 24;
-
-  const renderApproveButton = () =>
-    vsr.status == "Received" || vsr.status === undefined ? (
-      <button
-        className={styles.approveButton}
-        onClick={async () => {
-          const res = await updateVSRStatus(vsr._id, "Approved");
-
-          // TODO: error handling
-
-          const newVsr = res.success ? res.data : vsr;
-
-          setVSR(newVsr);
-        }}
-      >
-        Approve VSR
-      </button>
-    ) : null;
-
-  const renderActions = () => (
-    <div className={styles.actions}>
-      <a href="REPLACE">
-        <button id="edit" className={styles.button}>
-          <Image width={iconSize} height={iconSize} src="/ic_edit.svg" alt="edit" />
-          {isMobile ? null : "Edit Form"}
-        </button>
-      </a>
-      <a href="REPLACE">
-        <button className={styles.button}>
-          <Image width={iconSize} height={iconSize} src="/ic_upload.svg" alt="upload" />
-          {isMobile ? null : "Export"}
-        </button>
-      </a>
-    </div>
-  );
-
-  useEffect(() => {
-    getVSR(id as string)
-      .then((result) => {
-        if (result.success) {
-          setVSR(result.data);
-          setErrorMessage(null);
-        } else {
-          setErrorMessage("VSR not found.");
-        }
-      })
-      .catch((error) => {
-        setErrorMessage(`An error occurred: ${error.message}`);
-      });
-  }, [id]);
-
-  // Fetch all available furniture items from database
-  useEffect(() => {
-    getFurnitureItems()
-      .then((result) => {
-        if (result.success) {
-          setFurnitureItems(result.data);
-
-          setErrorMessage(null);
-        } else {
-          setErrorMessage("Furniture items not found.");
-        }
-      })
-      .catch((error) => {
-        setErrorMessage(`An error occurred: ${error.message}`);
-      });
-  }, []);
-
-  return (
-    <>
-      <HeaderBar />
-      <div className={styles.page}>
-        <div className={`${styles.headerRow} ${styles.toDashboardRow}`}>
-          <a href="/staff/vsr">
-            <button className={styles.toDashboard}>
-              <Image src="/ic_arrowback.svg" width={iconSize} height={iconSize} alt="arrowback" />
-              {isMobile ? null : "Dashboard"}
-            </button>
-          </a>
-          {isMobile ? renderActions() : null}
-        </div>
-        <div className={styles.allDetails}>
-          <div className={styles.headerRow}>
-            <div className={styles.name}>
-              {errorMessage && <div className={styles.error}>{errorMessage}</div>}
-
-              <VeteranTag vsr={vsr}></VeteranTag>
-            </div>
-            {isMobile ? null : renderActions()}
-          </div>
-          <div className={styles.bodyDetails}>
-            <CaseDetails vsr={vsr} onUpdateVSR={setVSR}></CaseDetails>
-            <div className={styles.otherDetails}>
-              {isTablet ? renderApproveButton() : null}
-              <div className={styles.personalInfo}>
-                <ContactInfo vsr={vsr} />
-                <PersonalInformation vsr={vsr} />
-                <MilitaryBackground vsr={vsr} />
-                <AdditionalInfo vsr={vsr} />
-              </div>
-              <div className={styles.rightColumn}>
-                <RequestedFurnishings vsr={vsr} furnitureItems={furnitureItems ?? []} />
-                {isTablet ? null : (
-                  <div className={styles.finalActions}>{renderApproveButton()}</div>
-                )}
-              </div>
-            </div>
-          </div>
-          <div className={styles.footer}></div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/PageSections/AdditionalInfo/index.tsx b/frontend/src/components/VSRIndividual/PageSections/AdditionalInfo/index.tsx
new file mode 100644
index 0000000..1e5785d
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/AdditionalInfo/index.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import styles from "@/components/VSRIndividual/PageSections/AdditionalInfo/styles.module.css";
+import { ListDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
+import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
+import { BinaryChoiceInputDetail } from "@/components/VSRIndividual/FieldDetails/BinaryChoiceInputDetail";
+import { UseFormReturn } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { MultipleChoiceWithOtherInputDetail } from "@/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail";
+import { hearFromOptions } from "@/constants/fieldOptions";
+
+export interface AdditionalInfoProps {
+  vsr: VSR;
+  isEditing: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * The "Additional Information" section of the VSR individual page.
+ */
+export const AdditionalInfo = ({ vsr, isEditing, formProps }: AdditionalInfoProps) => {
+  useEffect(() => {
+    formProps.setValue("petCompanion", vsr.petCompanion);
+    const isHearFromChip = hearFromOptions.includes(vsr.hearFrom);
+    formProps.setValue("hearFrom", isHearFromChip ? vsr.hearFrom : "");
+    formProps.setValue("other_hearFrom", isHearFromChip ? "" : vsr.hearFrom);
+  }, [vsr]);
+
+  return (
+    <VSRIndividualAccordion title="Additional Information" permanentlyExpanded={false}>
+      <div className={styles.row}>
+        {isEditing ? (
+          <BinaryChoiceInputDetail
+            name="petCompanion"
+            title="Are you interested in a companionship animal (pet)?"
+            formProps={formProps}
+          />
+        ) : (
+          <ListDetail
+            title="Are you interested in a companionship animal (pet)?"
+            values={[vsr.petCompanion ? "Yes" : "No"]}
+          />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceWithOtherInputDetail
+            name="hearFrom"
+            otherName="other_hearFrom"
+            title="How did you hear about us?"
+            formProps={formProps}
+            options={hearFromOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail title="How did you hear about us?" values={[vsr.hearFrom]} />
+        )}
+      </div>
+    </VSRIndividualAccordion>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/AdditionalInfo/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/AdditionalInfo/styles.module.css
similarity index 100%
rename from frontend/src/components/VSRIndividual/AdditionalInfo/styles.module.css
rename to frontend/src/components/VSRIndividual/PageSections/AdditionalInfo/styles.module.css
diff --git a/frontend/src/components/VSRIndividual/CaseDetails/index.tsx b/frontend/src/components/VSRIndividual/PageSections/CaseDetails/index.tsx
similarity index 58%
rename from frontend/src/components/VSRIndividual/CaseDetails/index.tsx
rename to frontend/src/components/VSRIndividual/PageSections/CaseDetails/index.tsx
index 650a4bc..cd1521b 100644
--- a/frontend/src/components/VSRIndividual/CaseDetails/index.tsx
+++ b/frontend/src/components/VSRIndividual/PageSections/CaseDetails/index.tsx
@@ -1,15 +1,18 @@
-import styles from "src/components/VSRIndividual/CaseDetails/styles.module.css";
-import { SingleDetail, StatusDropdown } from "@/components/VSRIndividual";
-import { updateVSRStatus, type VSR } from "@/api/VSRs";
+import styles from "@/components/VSRIndividual/PageSections/CaseDetails/styles.module.css";
+import { SingleDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
 import moment from "moment";
 import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
-import { STATUS_OPTIONS } from "@/components/shared/StatusDropdown";
+import { STATUS_OPTIONS, StatusDropdown } from "@/components/shared/StatusDropdown";
 import { StatusChip } from "@/components/shared/StatusChip";
-import { useScreenSizes } from "@/util/useScreenSizes";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { CircularProgress } from "@mui/material";
 
 export interface CaseDetailsProp {
   vsr: VSR;
-  onUpdateVSR: (status: VSR) => void;
+  isEditing: boolean;
+  loadingStatus: boolean;
+  onUpdateVSRStatus: (status: string) => void;
 }
 
 /**
@@ -21,10 +24,22 @@ const formatDate = (date: Date) => {
   return `${dateMoment.format("MM-DD-YYYY")} [${dateMoment.format("hh:mm A")}]`;
 };
 
-export const CaseDetails = ({ vsr, onUpdateVSR }: CaseDetailsProp) => {
+/**
+ * The "Case Details" section of the VSR individual page.
+ */
+export const CaseDetails = ({
+  vsr,
+  isEditing,
+  loadingStatus,
+  onUpdateVSRStatus,
+}: CaseDetailsProp) => {
   const { isMobile, isTablet } = useScreenSizes();
 
   const renderStatus = () => {
+    if (loadingStatus) {
+      return <CircularProgress size={24} />;
+    }
+
     if (vsr.status === "Received" || vsr.status === undefined) {
       return (
         <StatusChip
@@ -34,13 +49,7 @@ export const CaseDetails = ({ vsr, onUpdateVSR }: CaseDetailsProp) => {
     }
     return (
       <StatusDropdown
-        onChanged={async (status) => {
-          const res = await updateVSRStatus(vsr._id, status);
-
-          // TODO: error handling
-
-          onUpdateVSR(res.success ? res.data : vsr);
-        }}
+        onChanged={onUpdateVSRStatus}
         value={vsr.status != undefined ? vsr.status : "Received"}
       />
     );
@@ -49,7 +58,11 @@ export const CaseDetails = ({ vsr, onUpdateVSR }: CaseDetailsProp) => {
   const valueFontSize = isMobile ? 14 : isTablet ? 18 : 20;
 
   return (
-    <VSRIndividualAccordion permanentlyExpanded title="Case Details">
+    <VSRIndividualAccordion
+      permanentlyExpanded
+      title="Case Details"
+      className={isEditing ? styles.blurred : ""}
+    >
       <div className={styles.details}>
         <SingleDetail
           title="Date Received:"
@@ -64,7 +77,11 @@ export const CaseDetails = ({ vsr, onUpdateVSR }: CaseDetailsProp) => {
           className={styles.singleDetail}
         />
 
-        <SingleDetail title="Status:" value={renderStatus()} className={styles.singleDetail} />
+        <SingleDetail
+          title="Status:"
+          value={<div className={styles.statusWrapper}>{renderStatus()}</div>}
+          className={styles.singleDetail}
+        />
       </div>
     </VSRIndividualAccordion>
   );
diff --git a/frontend/src/components/VSRIndividual/CaseDetails/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/CaseDetails/styles.module.css
similarity index 70%
rename from frontend/src/components/VSRIndividual/CaseDetails/styles.module.css
rename to frontend/src/components/VSRIndividual/PageSections/CaseDetails/styles.module.css
index d0e9067..1e6a517 100644
--- a/frontend/src/components/VSRIndividual/CaseDetails/styles.module.css
+++ b/frontend/src/components/VSRIndividual/PageSections/CaseDetails/styles.module.css
@@ -9,7 +9,19 @@
   overflow: auto;
 }
 
-.singleDetail {
+.blurred {
+  opacity: 0.5;
+}
+
+.statusWrapper {
+  min-width: 230px;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .statusWrapper {
+    min-width: 190px;
+  }
 }
 
 /* mobile version */
diff --git a/frontend/src/components/VSRIndividual/PageSections/ContactInfo/index.tsx b/frontend/src/components/VSRIndividual/PageSections/ContactInfo/index.tsx
new file mode 100644
index 0000000..f947153
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/ContactInfo/index.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect } from "react";
+import styles from "@/components/VSRIndividual/PageSections/ContactInfo/styles.module.css";
+import { SingleDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
+import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
+import { TextInputDetail } from "@/components/VSRIndividual/FieldDetails/TextInputDetail";
+import { UseFormReturn } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { SelectInputDetail } from "@/components/VSRIndividual/FieldDetails/SelectInputDetail";
+import { genderOptions, stateOptions } from "@/constants/fieldOptions";
+
+export interface ContactInfoProps {
+  vsr: VSR;
+  isEditing: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+/**
+ * The "Contact Information" section of the VSR individual page.
+ */
+export const ContactInfo = ({ vsr, isEditing, formProps }: ContactInfoProps) => {
+  useEffect(() => {
+    formProps.setValue("phoneNumber", vsr.phoneNumber);
+    formProps.setValue("email", vsr.email);
+    formProps.setValue("gender", vsr.gender);
+    formProps.setValue("age", vsr.age);
+    formProps.setValue("streetAddress", vsr.streetAddress);
+    formProps.setValue("city", vsr.city);
+    formProps.setValue("zipCode", vsr.zipCode);
+    formProps.setValue("state", vsr.state);
+  }, [vsr]);
+
+  return (
+    <VSRIndividualAccordion permanentlyExpanded={false} title="Contact Information">
+      <div className={styles.row}>
+        {isEditing ? (
+          <TextInputDetail
+            name="phoneNumber"
+            type="tel"
+            title="Phone Number"
+            formProps={formProps}
+            placeholder="e.g. 6197123276"
+          />
+        ) : (
+          <SingleDetail title="Phone Number" value={vsr.phoneNumber} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <TextInputDetail
+            name="email"
+            title="Email Address"
+            type="email"
+            formProps={formProps}
+            placeholder="e.g. justintimberlake@gmail.com"
+          />
+        ) : (
+          <SingleDetail title="Email Address" value={vsr.email} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <SelectInputDetail
+            name="gender"
+            title="Gender"
+            formProps={formProps}
+            options={genderOptions}
+          />
+        ) : (
+          <SingleDetail title="Gender" value={vsr.gender} />
+        )}
+        {isEditing ? (
+          <TextInputDetail
+            name="age"
+            title="Age"
+            formProps={formProps}
+            placeholder="Enter your age"
+          />
+        ) : (
+          <SingleDetail title="Age" value={vsr.age} />
+        )}
+      </div>
+      {isEditing ? (
+        <>
+          <div className={styles.row}>
+            <TextInputDetail
+              name="streetAddress"
+              title="Street Address"
+              formProps={formProps}
+              placeholder="e.g. 1234 Baker Street"
+            />
+          </div>
+          <div className={styles.row}>
+            <TextInputDetail
+              name="city"
+              title="City"
+              formProps={formProps}
+              placeholder="e.g. San Diego"
+            />
+          </div>
+        </>
+      ) : (
+        <div className={styles.row}>
+          <SingleDetail title="Street Address" value={vsr.streetAddress} />
+          <SingleDetail title="City" value={vsr.city} />
+        </div>
+      )}
+      <div className={styles.row}>
+        {isEditing ? (
+          <SelectInputDetail
+            name="state"
+            title="State"
+            formProps={formProps}
+            options={stateOptions}
+          />
+        ) : (
+          <SingleDetail title="State" value={vsr.state} />
+        )}
+        {isEditing ? (
+          <TextInputDetail
+            name="zipCode"
+            title="Zip Code"
+            formProps={formProps}
+            placeholder="e.g. 92092"
+          />
+        ) : (
+          <SingleDetail title="Zip Code" value={vsr.zipCode} />
+        )}
+      </div>
+    </VSRIndividualAccordion>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/PageSections/ContactInfo/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/ContactInfo/styles.module.css
new file mode 100644
index 0000000..57e3ec4
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/ContactInfo/styles.module.css
@@ -0,0 +1,20 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 32px;
+}
+
+.row:not(:last-child) {
+  padding-bottom: 32px;
+}
+
+.row > * {
+  flex: 1;
+}
+
+@media screen and (max-width: 400px) {
+  .row {
+    flex-direction: column;
+  }
+}
diff --git a/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/index.tsx b/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/index.tsx
new file mode 100644
index 0000000..0872fab
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/index.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect } from "react";
+import styles from "@/components/VSRIndividual/PageSections/MilitaryBackground/styles.module.css";
+import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
+import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
+import { UseFormReturn } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { branchOptions, conflictsOptions, dischargeStatusOptions } from "@/constants/fieldOptions";
+import { MultipleChoiceInputDetail } from "@/components/VSRIndividual/FieldDetails/MultipleChoiceInputDetail";
+import { MultipleChoiceWithOtherInputDetail } from "@/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail";
+import { BinaryChoiceInputDetail } from "@/components/VSRIndividual/FieldDetails/BinaryChoiceInputDetail";
+import { TextInputDetail } from "@/components/VSRIndividual/FieldDetails/TextInputDetail";
+
+export interface MilitaryBackgroundProps {
+  vsr: VSR;
+  isEditing: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * The "Military Background" section of the VSR individual page.
+ */
+export const MilitaryBackground = ({ vsr, isEditing, formProps }: MilitaryBackgroundProps) => {
+  useEffect(() => {
+    formProps.setValue("branch", vsr.branch);
+    const conflictChips = [];
+    formProps.setValue("other_conflicts", "");
+    for (const inputtedConflict of vsr.conflicts) {
+      if (conflictsOptions.includes(inputtedConflict)) {
+        conflictChips.push(inputtedConflict);
+      } else {
+        formProps.setValue("other_conflicts", inputtedConflict);
+      }
+    }
+    formProps.setValue("conflicts", conflictChips);
+    formProps.setValue("dischargeStatus", vsr.dischargeStatus);
+    formProps.setValue("serviceConnected", vsr.serviceConnected);
+    formProps.setValue("lastRank", vsr.lastRank);
+    formProps.setValue("militaryID", vsr.militaryID);
+  }, [vsr]);
+
+  return (
+    <VSRIndividualAccordion permanentlyExpanded={false} title="Military Background">
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="branch"
+            title="Branch"
+            formProps={formProps}
+            options={branchOptions}
+            allowMultiple
+          />
+        ) : (
+          <ListDetail
+            title="Branch"
+            values={vsr.branch && vsr.branch.length > 0 ? vsr.branch : ["N/A"]}
+          />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceWithOtherInputDetail
+            name="conflicts"
+            otherName="other_conflicts"
+            title="Conflicts"
+            formProps={formProps}
+            options={conflictsOptions}
+            allowMultiple
+          />
+        ) : (
+          <ListDetail
+            title="Conflicts"
+            values={vsr.conflicts && vsr.conflicts.length > 0 ? vsr.conflicts : ["N/A"]}
+          />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="dischargeStatus"
+            title="Discharge Status"
+            formProps={formProps}
+            options={dischargeStatusOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail
+            title="Discharge Status"
+            values={
+              vsr.dischargeStatus && vsr.dischargeStatus.length > 0
+                ? [vsr.dischargeStatus]
+                : ["N/A"]
+            }
+          />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <BinaryChoiceInputDetail
+            name="serviceConnected"
+            title="Service Connected"
+            formProps={formProps}
+          />
+        ) : (
+          <ListDetail title="Service Connected" values={[vsr.serviceConnected ? "Yes" : "No"]} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <TextInputDetail
+            name="lastRank"
+            title="Last Rank:"
+            formProps={formProps}
+            placeholder="Enter"
+          />
+        ) : (
+          <SingleDetail title="Last Rank:" value={vsr.lastRank} />
+        )}
+        {isEditing ? (
+          <TextInputDetail
+            name="militaryID"
+            title="Military ID Number"
+            formProps={formProps}
+            placeholder="Enter"
+          />
+        ) : (
+          <SingleDetail title="Military ID Number" value={vsr.militaryID} />
+        )}
+      </div>
+    </VSRIndividualAccordion>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/MilitaryBackground/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/styles.module.css
similarity index 100%
rename from frontend/src/components/VSRIndividual/MilitaryBackground/styles.module.css
rename to frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/styles.module.css
diff --git a/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/index.tsx b/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/index.tsx
new file mode 100644
index 0000000..4d4981e
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/index.tsx
@@ -0,0 +1,242 @@
+import React, { useEffect } from "react";
+import styles from "@/components/VSRIndividual/PageSections/PersonalInformation/styles.module.css";
+import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
+import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
+import { UseFormReturn } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { TextInputDetail } from "@/components/VSRIndividual/FieldDetails/TextInputDetail";
+import { SelectInputDetail } from "@/components/VSRIndividual/FieldDetails/SelectInputDetail";
+import {
+  employmentOptions,
+  ethnicityOptions,
+  homeOptions,
+  incomeOptions,
+  maritalOptions,
+  stateOptions,
+} from "@/constants/fieldOptions";
+import { MultipleChoiceInputDetail } from "@/components/VSRIndividual/FieldDetails/MultipleChoiceInputDetail";
+import { MultipleChoiceWithOtherInputDetail } from "@/components/VSRIndividual/FieldDetails/MultipleChoiceWithOtherInputDetail";
+import { ChildrenInput } from "@/components/shared/input/ChildrenInput";
+
+export interface PersonalInformationProps {
+  vsr: VSR;
+  isEditing: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * The "Personal Information" section of the VSR individual page.
+ */
+export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInformationProps) => {
+  useEffect(() => {
+    formProps.setValue("name", vsr.name);
+    formProps.setValue("streetAddress", vsr.streetAddress);
+    formProps.setValue("city", vsr.city);
+    formProps.setValue("zipCode", vsr.zipCode);
+    formProps.setValue("state", vsr.state);
+    formProps.setValue("maritalStatus", vsr.maritalStatus);
+    formProps.setValue("spouseName", vsr.spouseName ?? "");
+    formProps.setValue("num_boys", vsr.agesOfBoys.length);
+    formProps.setValue("num_girls", vsr.agesOfGirls.length);
+    formProps.setValue("agesOfBoys", vsr.agesOfBoys);
+    formProps.setValue("agesOfGirls", vsr.agesOfGirls);
+    formProps.setValue("other_ethnicity", "");
+    const ethnicityChips = [];
+    for (const inputtedEthnicity of vsr.ethnicity) {
+      if (ethnicityOptions.includes(inputtedEthnicity)) {
+        ethnicityChips.push(inputtedEthnicity);
+      } else {
+        formProps.setValue("other_ethnicity", inputtedEthnicity);
+      }
+    }
+    formProps.setValue("ethnicity", ethnicityChips);
+    formProps.setValue("employment_status", vsr.employmentStatus);
+    formProps.setValue("income_level", vsr.incomeLevel);
+    formProps.setValue("size_of_home", vsr.sizeOfHome);
+  }, [vsr]);
+
+  return (
+    <VSRIndividualAccordion permanentlyExpanded={false} title="Personal Information">
+      <div className={styles.row}>
+        {isEditing ? (
+          <TextInputDetail
+            name="name"
+            title="Name"
+            formProps={formProps}
+            placeholder="e.g. Justin Timberlake"
+          />
+        ) : (
+          <SingleDetail title="Name" value={vsr.name} />
+        )}
+      </div>
+      {isEditing ? (
+        <>
+          <div className={styles.row}>
+            <TextInputDetail
+              name="streetAddress"
+              title="Street Address"
+              formProps={formProps}
+              placeholder="e.g. 1234 Baker Street"
+            />
+          </div>
+          <div className={styles.row}>
+            <TextInputDetail
+              name="city"
+              title="City"
+              formProps={formProps}
+              placeholder="e.g. San Diego"
+            />
+          </div>
+        </>
+      ) : (
+        <div className={styles.row}>
+          <SingleDetail title="Street Address" value={vsr.streetAddress} />
+          <SingleDetail title="City" value={vsr.city} />
+        </div>
+      )}
+      <div className={styles.row}>
+        {isEditing ? (
+          <SelectInputDetail
+            name="state"
+            title="State"
+            formProps={formProps}
+            options={stateOptions}
+          />
+        ) : (
+          <SingleDetail title="State" value={vsr.state} />
+        )}
+        {isEditing ? (
+          <TextInputDetail
+            name="zipCode"
+            title="Zip Code"
+            formProps={formProps}
+            placeholder="e.g. 92092"
+          />
+        ) : (
+          <SingleDetail title="Zip Code" value={vsr.zipCode} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="maritalStatus"
+            title="Marital Status"
+            formProps={formProps}
+            options={maritalOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail title="Marital Status" values={[vsr.maritalStatus]} />
+        )}
+      </div>
+      {formProps.watch().maritalStatus === "Married" ? (
+        <div className={styles.row}>
+          {isEditing ? (
+            <TextInputDetail
+              name="spouseName"
+              title="Spouse's Name"
+              formProps={formProps}
+              placeholder="e.g. Jane Timberlake"
+            />
+          ) : (
+            <SingleDetail
+              title="Spouse's Name"
+              value={vsr.spouseName && vsr.spouseName.length > 0 ? vsr.spouseName : "N/A"}
+            />
+          )}
+        </div>
+      ) : null}
+      <div className={styles.row}>
+        {isEditing ? (
+          <>
+            <ChildrenInput gender="boy" formProps={formProps} />
+          </>
+        ) : (
+          <>
+            <SingleDetail title="Number of Male Children" value={vsr.agesOfBoys?.length ?? 0} />
+            <SingleDetail
+              title="Age(s)"
+              value={
+                vsr.agesOfBoys && vsr.agesOfBoys.length > 0 ? vsr.agesOfBoys.join(", ") : "N/A"
+              }
+            />
+          </>
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <>
+            <ChildrenInput gender="girl" formProps={formProps} />
+          </>
+        ) : (
+          <>
+            <SingleDetail title="Number of Female Children" value={vsr.agesOfGirls?.length ?? 0} />
+            <SingleDetail
+              title="Age(s)"
+              value={
+                vsr.agesOfGirls && vsr.agesOfGirls.length > 0 ? vsr.agesOfGirls.join(", ") : "N/A"
+              }
+            />
+          </>
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceWithOtherInputDetail
+            title="Ethnicity"
+            name="ethnicity"
+            otherName="other_ethnicity"
+            options={ethnicityOptions}
+            allowMultiple
+            formProps={formProps}
+          />
+        ) : (
+          <ListDetail
+            title="Ethnicity"
+            values={vsr.ethnicity && vsr.ethnicity.length > 0 ? vsr.ethnicity : ["N/A"]}
+          />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="employment_status"
+            title="Employment Status"
+            formProps={formProps}
+            options={employmentOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail title="Employment Status" values={[vsr.employmentStatus]} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="income_level"
+            title="Income Level"
+            formProps={formProps}
+            options={incomeOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail title="Income Level" values={[vsr.incomeLevel]} />
+        )}
+      </div>
+      <div className={styles.row}>
+        {isEditing ? (
+          <MultipleChoiceInputDetail
+            name="size_of_home"
+            title="Size of Home"
+            formProps={formProps}
+            options={homeOptions}
+            allowMultiple={false}
+          />
+        ) : (
+          <ListDetail title="Size of Home" values={[vsr.sizeOfHome]} />
+        )}
+      </div>
+    </VSRIndividualAccordion>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/PersonalInformation/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/styles.module.css
similarity index 51%
rename from frontend/src/components/VSRIndividual/PersonalInformation/styles.module.css
rename to frontend/src/components/VSRIndividual/PageSections/PersonalInformation/styles.module.css
index 1b30a8d..a69a98b 100644
--- a/frontend/src/components/VSRIndividual/PersonalInformation/styles.module.css
+++ b/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/styles.module.css
@@ -1,13 +1,19 @@
 .row {
   display: flex;
   flex-direction: row;
+  gap: 32px;
+}
+
+.row:not(:last-child) {
+  padding-bottom: 32px;
 }
 
 .row > * {
-  padding-right: 32px;
-  width: 60%;
+  flex: 1;
 }
 
-.row:not(:last-child) {
-  padding-bottom: 32px;
+@media screen and (max-width: 400px) {
+  .row {
+    flex-direction: column;
+  }
 }
diff --git a/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/index.tsx b/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/index.tsx
new file mode 100644
index 0000000..f08f890
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/index.tsx
@@ -0,0 +1,151 @@
+import styles from "@/components/VSRIndividual/PageSections/RequestedFurnishings/styles.module.css";
+import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
+import { type VSR } from "@/api/VSRs";
+import { VSRIndividualAccordion } from "@/components/VSRIndividual/VSRIndividualAccordion";
+import { FurnitureItem } from "@/api/FurnitureItems";
+import { useEffect, useMemo } from "react";
+import { Controller, UseFormReturn } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { TextInputDetail } from "@/components/VSRIndividual/FieldDetails/TextInputDetail";
+import { FurnitureItemSelection } from "@/components/VSRForm/FurnitureItemSelection";
+import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail";
+
+export interface RequestedFurnishingsProps {
+  vsr: VSR;
+  furnitureItems: FurnitureItem[];
+  isEditing: boolean;
+  formProps: UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * The "Furnishing Requests" section of the VSR individual page.
+ */
+export const RequestedFurnishings = ({
+  vsr,
+  furnitureItems,
+  isEditing,
+  formProps,
+}: RequestedFurnishingsProps) => {
+  useEffect(() => {
+    formProps.setValue(
+      "selectedFurnitureItems",
+      Object.fromEntries(
+        vsr.selectedFurnitureItems.map((selectedItem) => [
+          selectedItem.furnitureItemId,
+          selectedItem,
+        ]),
+      ),
+    );
+    formProps.setValue("additionalItems", vsr.additionalItems);
+  }, [vsr]);
+
+  const furnitureItemIdsToItems = useMemo(
+    () =>
+      furnitureItems?.reduce(
+        (prevMap: Record<string, FurnitureItem>, curItem) => ({
+          ...prevMap,
+          [curItem._id]: curItem,
+        }),
+        {},
+      ) ?? {},
+    [furnitureItems],
+  );
+
+  const furnitureCategoriesToItems = useMemo(
+    () =>
+      furnitureItems.reduce(
+        (prevMap: Record<string, FurnitureItem[]>, curItem) => ({
+          ...prevMap,
+          [curItem.category]: [...(prevMap[curItem.category] ?? []), curItem],
+        }),
+        {},
+      ),
+    [furnitureItems],
+  );
+
+  const findSelectedItemsByCategory = (category: string) => {
+    return Object.values(formProps.watch().selectedFurnitureItems ?? {}).filter(
+      (selectedItem) =>
+        furnitureItemIdsToItems[selectedItem.furnitureItemId]?.category === category,
+    );
+  };
+
+  const renderItemsSection = (categoryTitle: string, categoryName: string) => {
+    const selectedItemsForCategory = findSelectedItemsByCategory(categoryName);
+
+    return isEditing ? (
+      <Controller
+        name="selectedFurnitureItems"
+        control={formProps.control}
+        render={({ field }) => (
+          <div className={styles.row}>
+            <FieldDetail title={categoryTitle}>
+              <div className={styles.chipContainer}>
+                {furnitureCategoriesToItems[categoryName].map((furnitureItem) => (
+                  <FurnitureItemSelection
+                    key={furnitureItem._id}
+                    furnitureItem={furnitureItem}
+                    selection={
+                      formProps.watch().selectedFurnitureItems[furnitureItem._id] ?? {
+                        furnitureItemId: furnitureItem._id,
+                        quantity: 0,
+                      }
+                    }
+                    onChangeSelection={(newSelection) =>
+                      field.onChange({
+                        ...field.value,
+                        [furnitureItem._id]: newSelection,
+                      })
+                    }
+                  />
+                ))}
+              </div>
+            </FieldDetail>
+          </div>
+        )}
+      />
+    ) : (
+      <div className={styles.row}>
+        <ListDetail
+          title={categoryTitle}
+          values={
+            selectedItemsForCategory && selectedItemsForCategory.length > 0
+              ? selectedItemsForCategory.map(
+                  (selectedItem) =>
+                    `${furnitureItemIdsToItems[selectedItem.furnitureItemId].name} ${
+                      furnitureItemIdsToItems[selectedItem.furnitureItemId]?.allowMultiple
+                        ? ": " + selectedItem.quantity
+                        : ""
+                    }`,
+                )
+              : ["N/A"]
+          }
+        />
+      </div>
+    );
+  };
+
+  return (
+    <VSRIndividualAccordion permanentlyExpanded={false} title="Furnishing Requests">
+      {renderItemsSection("Bedroom:", "bedroom")}
+      {renderItemsSection("Bathroom:", "bathroom")}
+      {renderItemsSection("Kitchen:", "kitchen")}
+      {renderItemsSection("Living Room:", "living room")}
+      {renderItemsSection("Dining Room:", "dining room")}
+      {renderItemsSection("Other:", "other")}
+
+      <div className={styles.row}>
+        {isEditing ? (
+          <TextInputDetail name="additionalItems" title="Additional Items:" formProps={formProps} />
+        ) : (
+          <SingleDetail
+            title="Additional Items:"
+            value={
+              vsr.additionalItems && vsr.additionalItems.length > 0 ? vsr.additionalItems : "n/a"
+            }
+          />
+        )}
+      </div>
+    </VSRIndividualAccordion>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/RequestedFurnishings/styles.module.css b/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/styles.module.css
similarity index 59%
rename from frontend/src/components/VSRIndividual/RequestedFurnishings/styles.module.css
rename to frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/styles.module.css
index 44c8480..ae72e2e 100644
--- a/frontend/src/components/VSRIndividual/RequestedFurnishings/styles.module.css
+++ b/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/styles.module.css
@@ -7,3 +7,10 @@
 .row:not(:last-child) {
   padding-bottom: 32px;
 }
+
+.chipContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16px;
+}
diff --git a/frontend/src/components/VSRIndividual/PersonalInformation/index.tsx b/frontend/src/components/VSRIndividual/PersonalInformation/index.tsx
deleted file mode 100644
index 86b06d9..0000000
--- a/frontend/src/components/VSRIndividual/PersonalInformation/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-import styles from "src/components/VSRIndividual/ContactInfo/styles.module.css";
-import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
-import { type VSR } from "@/api/VSRs";
-import { VSRIndividualAccordion } from "../VSRIndividualAccordion";
-
-export interface PersonalInformationProps {
-  vsr: VSR;
-}
-export const PersonalInformation = ({ vsr }: PersonalInformationProps) => {
-  return (
-    <VSRIndividualAccordion permanentlyExpanded={false} title="Personal Information">
-      <div className={styles.row}>
-        <SingleDetail title="Name" value={vsr.name} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Street Address" value={vsr.streetAddress} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="City" value={vsr.city} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="State" value={vsr.state} />
-        <SingleDetail className={styles.second} title="Zip Code" value={vsr.zipCode} />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="Marital Status" values={[vsr.maritalStatus]} />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail
-          title="Spouse's Name"
-          value={vsr.spouseName && vsr.spouseName.length > 0 ? vsr.spouseName : "N/A"}
-        />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Number of boy(s)" value={vsr.agesOfBoys?.length ?? 0} />
-        <SingleDetail
-          className={styles.second}
-          title="Age(s)"
-          value={vsr.agesOfBoys && vsr.agesOfBoys.length > 0 ? vsr.agesOfBoys.join(", ") : "N/A"}
-        />
-      </div>
-      <div className={styles.row}>
-        <SingleDetail title="Number of girl(s)" value={vsr.agesOfGirls?.length ?? 0} />
-        <SingleDetail
-          className={styles.second}
-          title="Age(s)"
-          value={vsr.agesOfGirls && vsr.agesOfGirls.length > 0 ? vsr.agesOfGirls.join(", ") : "N/A"}
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail
-          title="Ethnicity"
-          values={vsr.ethnicity && vsr.ethnicity.length > 0 ? vsr.ethnicity : ["N/A"]}
-        />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="Employment Status" values={[vsr.employmentStatus]} />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="Income Level" values={[vsr.incomeLevel]} />
-      </div>
-      <div className={styles.row}>
-        <ListDetail title="Size of Home" values={[vsr.sizeOfHome]} />
-      </div>
-    </VSRIndividualAccordion>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/RequestedFurnishings/index.tsx b/frontend/src/components/VSRIndividual/RequestedFurnishings/index.tsx
deleted file mode 100644
index c1d4bb7..0000000
--- a/frontend/src/components/VSRIndividual/RequestedFurnishings/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import styles from "src/components/VSRIndividual/RequestedFurnishings/styles.module.css";
-import { SingleDetail, ListDetail } from "@/components/VSRIndividual";
-import { type VSR } from "@/api/VSRs";
-import { VSRIndividualAccordion } from "../VSRIndividualAccordion";
-import { FurnitureItem } from "@/api/FurnitureItems";
-import { useMemo } from "react";
-
-export interface RequestedFurnishingsProps {
-  vsr: VSR;
-  furnitureItems: FurnitureItem[];
-}
-
-export const RequestedFurnishings = ({ vsr, furnitureItems }: RequestedFurnishingsProps) => {
-  const furnitureItemIdsToItems = useMemo(
-    () =>
-      furnitureItems?.reduce(
-        (prevMap: Record<string, FurnitureItem>, curItem) => ({
-          ...prevMap,
-          [curItem._id]: curItem,
-        }),
-        {},
-      ) ?? {},
-    [furnitureItems],
-  );
-
-  const findSelectedItemsByCategory = (category: string) => {
-    return vsr.selectedFurnitureItems?.filter(
-      (selectedItem) =>
-        furnitureItemIdsToItems[selectedItem.furnitureItemId]?.category === category,
-    );
-  };
-
-  const renderItemsSection = (categoryTitle: string, categoryName: string) => {
-    const selectedItemsForCategory = findSelectedItemsByCategory(categoryName);
-
-    return (
-      <div className={styles.row}>
-        <ListDetail
-          title={categoryTitle}
-          values={
-            selectedItemsForCategory && selectedItemsForCategory.length > 0
-              ? selectedItemsForCategory.map(
-                  (selectedItem) =>
-                    `${furnitureItemIdsToItems[selectedItem.furnitureItemId].name} ${
-                      furnitureItemIdsToItems[selectedItem.furnitureItemId]?.allowMultiple
-                        ? ": " + selectedItem.quantity
-                        : ""
-                    }`,
-                )
-              : ["N/A"]
-          }
-        />
-      </div>
-    );
-  };
-
-  return (
-    <VSRIndividualAccordion permanentlyExpanded={false} title="Furnishing Requests">
-      {renderItemsSection("Bedroom:", "bedroom")}
-      {renderItemsSection("Bathroom:", "bathroom")}
-      {renderItemsSection("Kitchen:", "kitchen")}
-      {renderItemsSection("Living Room:", "living room")}
-      {renderItemsSection("Dining Room:", "dining room")}
-      {renderItemsSection("Other:", "other")}
-
-      <div className={styles.row}>
-        <SingleDetail
-          title="Additional Items:"
-          value={
-            vsr.additionalItems && vsr.additionalItems.length > 0 ? vsr.additionalItems : "n/a"
-          }
-        />
-      </div>
-    </VSRIndividualAccordion>
-  );
-};
diff --git a/frontend/src/components/VSRIndividual/VSRIndividualAccordion/index.tsx b/frontend/src/components/VSRIndividual/VSRIndividualAccordion/index.tsx
index 1d5872c..2a94a35 100644
--- a/frontend/src/components/VSRIndividual/VSRIndividualAccordion/index.tsx
+++ b/frontend/src/components/VSRIndividual/VSRIndividualAccordion/index.tsx
@@ -5,35 +5,46 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import Typography from "@mui/material/Typography";
 import Image from "next/image";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
 
 export interface VSRIndividualAccordionProps {
   title: string;
   permanentlyExpanded: boolean;
+  className?: string;
   children: ReactNode;
 }
 
+/**
+ * A component for an accordion for one of the VSR individual pages. Can be either
+ * permanently expanded, or expand/collapse on click.
+ */
 export const VSRIndividualAccordion = ({
   title,
   permanentlyExpanded,
+  className,
   children,
 }: VSRIndividualAccordionProps) => {
   const [expanded, setExpanded] = useState(permanentlyExpanded);
 
+  const { isMobile, isTablet } = useScreenSizes();
+
   useEffect(() => {
     setExpanded(permanentlyExpanded);
   }, [permanentlyExpanded]);
 
   return (
-    <div className={styles.box}>
+    <div className={className}>
       <Accordion
-        className={styles.accordion}
         expanded={expanded || permanentlyExpanded}
         onChange={(e, isExpanded) => setExpanded(isExpanded || permanentlyExpanded)}
         sx={{
+          display: "inline-block",
+          backgroundColor: "hsl(0, 0%, 100%)",
+          width: "100%",
+          borderRadius: 6,
+          boxShadow: "none",
+          padding: "8px 6px",
           paddingTop: "6px",
-          "&.Mui-expanded": {
-            paddingTop: "0px",
-          },
         }}
       >
         <AccordionSummary
@@ -43,15 +54,27 @@ export const VSRIndividualAccordion = ({
             )
           }
           aria-controls="panel1-content"
-          id="military-background-header"
           sx={{
-            ...(expanded && {
-              borderBottom: "1px solid rgba(214, 214, 214)", // Custom line style
-              marginBottom: -1, // Adjust as needed
-            }),
+            ...{
+              borderBottom: `1px solid ${expanded ? "rgba(214, 214, 214)" : "transparent"}`, // Custom line style
+              ".MuiAccordionSummary-content": {
+                margin: "20px 0",
+              },
+            },
           }}
         >
-          <Typography className={styles.title}>{title}</Typography>
+          <Typography
+            sx={{
+              fontFamily: "var(--font-title)",
+              color: "var(--Primary-Background-Dark, #232220)",
+              fontSize: isMobile ? 20 : isTablet ? 28 : 24,
+              fontStyle: "normal",
+              fontWeight: 700,
+              lineHeight: "normal",
+            }}
+          >
+            {title}
+          </Typography>
         </AccordionSummary>
         <AccordionDetails>
           <div className={styles.details}>{children}</div>
diff --git a/frontend/src/components/VSRIndividual/VSRIndividualAccordion/styles.module.css b/frontend/src/components/VSRIndividual/VSRIndividualAccordion/styles.module.css
index eb34b9c..1507da9 100644
--- a/frontend/src/components/VSRIndividual/VSRIndividualAccordion/styles.module.css
+++ b/frontend/src/components/VSRIndividual/VSRIndividualAccordion/styles.module.css
@@ -1,12 +1,3 @@
-.accordion {
-  display: inline-block;
-  background-color: hsl(0, 0%, 100%);
-  width: 100%;
-  border-radius: 6px;
-  box-shadow: none;
-  padding: 8px 6px;
-}
-
 .title {
   font-family: var(--font-title);
   color: var(--Primary-Background-Dark, #232220);
@@ -24,17 +15,3 @@
   padding-left: 6px;
   padding-right: 6px;
 }
-
-/* tablet version */
-@media screen and (max-width: 550px) {
-  .title {
-    font-size: 28px;
-  }
-}
-
-/* mobile version */
-@media screen and (max-width: 550px) {
-  .title {
-    font-size: 20px;
-  }
-}
diff --git a/frontend/src/components/VSRIndividual/VSRIndividualPage/index.tsx b/frontend/src/components/VSRIndividual/VSRIndividualPage/index.tsx
new file mode 100644
index 0000000..0753d4f
--- /dev/null
+++ b/frontend/src/components/VSRIndividual/VSRIndividualPage/index.tsx
@@ -0,0 +1,670 @@
+import React, { useContext, useEffect, useState } from "react";
+import {
+  VeteranTag,
+  ContactInfo,
+  CaseDetails,
+  PersonalInformation,
+  MilitaryBackground,
+  AdditionalInfo,
+  RequestedFurnishings,
+} from "@/components/VSRIndividual";
+import styles from "@/components/VSRIndividual/VSRIndividualPage/styles.module.css";
+import Image from "next/image";
+import { type VSR, getVSR, updateVSRStatus, UpdateVSRRequest, updateVSR } from "@/api/VSRs";
+import { useParams, useRouter } from "next/navigation";
+import { FurnitureItem, getFurnitureItems } from "@/api/FurnitureItems";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import HeaderBar from "@/components/shared/HeaderBar";
+import { SuccessNotification } from "@/components/shared/SuccessNotification";
+import { ErrorNotification } from "@/components/Errors/ErrorNotification";
+import { UserContext } from "@/contexts/userContext";
+import { VSRErrorModal } from "@/components/VSRForm/VSRErrorModal";
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
+import { DeleteVSRsModal } from "@/components/shared/DeleteVSRsModal";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { BaseModal } from "@/components/shared/BaseModal";
+import { Button } from "@/components/shared/Button";
+
+enum VSRIndividualError {
+  CANNOT_RETRIEVE_FURNITURE_NO_INTERNET,
+  CANNOT_RETRIEVE_FURNITURE_INTERNAL,
+  CANNOT_FETCH_VSR_NO_INTERNET,
+  CANNOT_FETCH_VSR_NOT_FOUND,
+  CANNOT_FETCH_VSR_INTERNAL,
+  NONE,
+}
+
+/**
+ * The root component for the VSR individual page.
+ */
+export const VSRIndividualPage = () => {
+  const [loadingVsr, setLoadingVsr] = useState(true);
+  const [vsr, setVSR] = useState<VSR>({} as VSR);
+  const { id } = useParams();
+  const { firebaseUser, papUser } = useContext(UserContext);
+  const router = useRouter();
+  const [loadingFurnitureItems, setLoadingFurnitureItems] = useState(false);
+  const [furnitureItems, setFurnitureItems] = useState<FurnitureItem[]>();
+  const [pageError, setPageError] = useState(VSRIndividualError.NONE);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const formProps = useForm<IEditVSRFormInput>();
+  const { handleSubmit } = formProps;
+
+  const [updateStatusSuccessNotificationOpen, setUpdateStatusSuccessNotificationOpen] =
+    useState(false);
+  const [updateStatusErrorNotificationOpen, setUpdateStatusErrorNotificationOpen] = useState(false);
+  const [previousVSRStatus, setPreviousVSRStatus] = useState<string | null>(null);
+  const [loadingUpdateStatus, setLoadingUpdateStatus] = useState(false);
+
+  const [discardEditsConfirmationModalOpen, setDiscardEditsConfirmationModalOpen] = useState(false);
+  const [saveEditsConfirmationModalOpen, setSaveEditsConfirmationModalOpen] = useState(false);
+  const [editSuccessNotificationOpen, setEditSuccessNotificationOpen] = useState(false);
+  const [editErrorNotificationOpen, setEditErrorNotificationOpen] = useState(false);
+  const [loadingEdit, setLoadingEdit] = useState(false);
+
+  const [deleteVsrModalOpen, setDeleteVsrModalOpen] = useState(false);
+
+  const { isMobile, isTablet } = useScreenSizes();
+
+  /**
+   * Callback triggered when form edits are submitted
+   */
+  const onSubmitEdits: SubmitHandler<IEditVSRFormInput> = async (data) => {
+    if (loadingEdit) {
+      return;
+    }
+
+    setEditSuccessNotificationOpen(false);
+    setEditErrorNotificationOpen(false);
+    setLoadingEdit(true);
+
+    const updateVSRRequest: UpdateVSRRequest = {
+      name: data.name,
+      gender: data.gender,
+      age: data.age,
+      maritalStatus: data.maritalStatus,
+      spouseName: data.spouseName,
+      agesOfBoys:
+        data.agesOfBoys
+          ?.slice(0, data.num_boys)
+          .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
+      agesOfGirls:
+        data.agesOfGirls
+          ?.slice(0, data.num_girls)
+          .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
+      ethnicity: data.ethnicity.concat(data.other_ethnicity === "" ? [] : [data.other_ethnicity]),
+      employmentStatus: data.employment_status,
+      incomeLevel: data.income_level,
+      sizeOfHome: data.size_of_home,
+
+      streetAddress: data.streetAddress,
+      city: data.city,
+      state: data.state,
+      zipCode: data.zipCode,
+      phoneNumber: data.phoneNumber,
+      email: data.email,
+      branch: data.branch,
+      conflicts: data.conflicts.concat(data.other_conflicts === "" ? [] : [data.other_conflicts]),
+      dischargeStatus: data.dischargeStatus,
+      serviceConnected: data.serviceConnected,
+      lastRank: data.lastRank,
+      militaryID: data.militaryID,
+      petCompanion: data.petCompanion,
+      hearFrom: data.hearFrom,
+
+      // Only submit items that the user selected at least 1 of
+      selectedFurnitureItems: Object.values(data.selectedFurnitureItems).filter(
+        (selectedItem) => selectedItem.quantity > 0,
+      ),
+      additionalItems: data.additionalItems,
+    };
+
+    const firebaseToken = await firebaseUser?.getIdToken();
+    if (!firebaseToken) {
+      setLoadingEdit(false);
+      setEditErrorNotificationOpen(true);
+      return;
+    }
+    const response = await updateVSR(vsr._id, updateVSRRequest, firebaseToken);
+
+    // Handle success/error
+    if (response.success) {
+      setIsEditing(false);
+      setVSR(response.data);
+      setEditSuccessNotificationOpen(true);
+    } else {
+      console.error(`Cannot edit VSR, error ${response.error}`);
+      setEditErrorNotificationOpen(true);
+    }
+    setLoadingEdit(false);
+  };
+
+  /**
+   * Callback triggered when the VSR's status is updated to a new value.
+   */
+  const onUpdateVSRStatus = async (newStatus: string) => {
+    if (loadingUpdateStatus) {
+      return;
+    }
+
+    setLoadingUpdateStatus(true);
+    setUpdateStatusSuccessNotificationOpen(false);
+    setUpdateStatusErrorNotificationOpen(false);
+    const currentStatus = vsr.status;
+
+    const firebaseToken = await firebaseUser?.getIdToken();
+    if (!firebaseToken) {
+      setLoadingUpdateStatus(false);
+      setUpdateStatusErrorNotificationOpen(true);
+      return;
+    }
+    const res = await updateVSRStatus(vsr._id, newStatus, firebaseToken);
+
+    if (res.success) {
+      setPreviousVSRStatus(currentStatus);
+      setVSR(res.data);
+      setUpdateStatusSuccessNotificationOpen(true);
+    } else {
+      setUpdateStatusErrorNotificationOpen(true);
+    }
+    setLoadingUpdateStatus(false);
+  };
+
+  /**
+   * Callback triggered when the user clicks "Undo" on the success notification
+   * after updating the VSR's status
+   */
+  const onUndoVSRStatusUpdate = async () => {
+    if (loadingUpdateStatus) {
+      return;
+    }
+
+    setLoadingUpdateStatus(true);
+    setUpdateStatusSuccessNotificationOpen(false);
+    setUpdateStatusErrorNotificationOpen(false);
+
+    const firebaseToken = await firebaseUser?.getIdToken();
+    if (!firebaseToken) {
+      setLoadingUpdateStatus(false);
+      setUpdateStatusErrorNotificationOpen(true);
+      return;
+    }
+    const res = await updateVSRStatus(vsr._id, previousVSRStatus!, firebaseToken);
+
+    if (res.success) {
+      setPreviousVSRStatus(null);
+      setVSR(res.data);
+      setUpdateStatusSuccessNotificationOpen(true);
+    } else {
+      setUpdateStatusErrorNotificationOpen(true);
+    }
+    setLoadingUpdateStatus(false);
+  };
+
+  /**
+   * Conditionally renders the "Approve" button on the page, if the VSR's status is "Received"
+   */
+  const renderApproveButton = () =>
+    vsr.status == "Received" || vsr.status === undefined ? (
+      <Button
+        variant="primary"
+        outlined={false}
+        text="Approve VSR"
+        loading={loadingUpdateStatus}
+        className={styles.approveButton}
+        onClick={() => onUpdateVSRStatus("Approved")}
+      />
+    ) : null;
+
+  /**
+   * Renders the action buttons (Edit, Export, and possibly Delete) at the top of the page.
+   */
+  const renderActions = () =>
+    loadingVsr ? null : (
+      <div className={styles.actions}>
+        {isEditing ? (
+          <>
+            <Button
+              variant="error"
+              outlined
+              iconPath="/ic_close_red.svg"
+              iconAlt="Close"
+              text="Discard Changes"
+              hideTextOnMobile
+              onClick={() => setDiscardEditsConfirmationModalOpen(true)}
+            />
+            <Button
+              variant="primary"
+              outlined={false}
+              iconPath="/ic_check.svg"
+              iconAlt="Check"
+              text="Save Changes"
+              hideTextOnMobile
+              onClick={() => setSaveEditsConfirmationModalOpen(true)}
+            />
+          </>
+        ) : (
+          <>
+            {/* Show delete button only if user is an admin */}
+            {papUser?.role === "admin" ? (
+              <Button
+                variant="error"
+                outlined
+                iconPath="/mdi_trash.svg"
+                iconAlt="Delete"
+                text="Delete"
+                hideTextOnMobile
+                onClick={() => setDeleteVsrModalOpen(true)}
+              />
+            ) : null}
+            <Button
+              variant="primary"
+              outlined
+              iconPath="/ic_edit.svg"
+              iconAlt="Edit"
+              text="Edit Form"
+              hideTextOnMobile
+              onClick={() => setIsEditing(true)}
+            />
+            <Button
+              variant="primary"
+              outlined={false}
+              iconPath="/ic_upload.svg"
+              iconAlt="Export"
+              text="Export"
+              hideTextOnMobile
+              onClick={() => {
+                // TODO: implement VSR export feature
+              }}
+            />
+          </>
+        )}
+      </div>
+    );
+
+  /**
+   * Fetches the current VSR data from the backend and updates our "vsr" state.
+   */
+  const fetchVSR = () => {
+    if (!firebaseUser) {
+      return;
+    }
+
+    setLoadingVsr(true);
+    firebaseUser?.getIdToken().then((firebaseToken) => {
+      setPageError(VSRIndividualError.NONE);
+      getVSR(id as string, firebaseToken).then((result) => {
+        if (result.success) {
+          setVSR(result.data);
+        } else {
+          if (result.error === "Failed to fetch") {
+            setPageError(VSRIndividualError.CANNOT_FETCH_VSR_NO_INTERNET);
+          } else if (result.error.startsWith("404")) {
+            setPageError(VSRIndividualError.CANNOT_FETCH_VSR_NOT_FOUND);
+          } else {
+            console.error(`Error retrieving VSR: ${result.error}`);
+            setPageError(VSRIndividualError.CANNOT_FETCH_VSR_INTERNAL);
+          }
+        }
+        setLoadingVsr(false);
+      });
+    });
+  };
+
+  /**
+   * Fetch the VSR from the backend, once we have the VSR id and the Firebase user is loaded
+   */
+  useEffect(() => {
+    fetchVSR();
+  }, [id, firebaseUser]);
+
+  /**
+   * Fetches the list of available furniture items from the backend and updates
+   * our "furnitureItems" state
+   */
+  const fetchFurnitureItems = () => {
+    if (loadingFurnitureItems) {
+      return;
+    }
+
+    setLoadingFurnitureItems(true);
+    getFurnitureItems().then((result) => {
+      if (result.success) {
+        setFurnitureItems(result.data);
+      } else {
+        if (result.error === "Failed to fetch") {
+          setPageError(VSRIndividualError.CANNOT_RETRIEVE_FURNITURE_NO_INTERNET);
+        } else {
+          console.error(`Error retrieving furniture items: ${result.error}`);
+          setPageError(VSRIndividualError.CANNOT_RETRIEVE_FURNITURE_INTERNAL);
+        }
+      }
+      setLoadingFurnitureItems(false);
+    });
+  };
+
+  // Fetch all available furniture items from database when page first loads
+  useEffect(() => {
+    fetchFurnitureItems();
+  }, []);
+
+  /**
+   * Renders the error modal corresponding to the current page error, or renders nothing
+   * if there is no error.
+   */
+  const renderErrorModal = () => {
+    switch (pageError) {
+      case VSRIndividualError.CANNOT_RETRIEVE_FURNITURE_NO_INTERNET:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setPageError(VSRIndividualError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/no_internet.svg"
+                alt="No Internet"
+                width={isMobile ? 100 : isTablet ? 138 : 114}
+                height={isMobile ? 93 : isTablet ? 129 : 106}
+              />
+            }
+            title="No Internet Connection"
+            content="Unable to retrieve the available furniture items due to no internet connection. Please check your connection and try again."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setPageError(VSRIndividualError.NONE);
+              fetchFurnitureItems();
+            }}
+          />
+        );
+      case VSRIndividualError.CANNOT_RETRIEVE_FURNITURE_INTERNAL:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setPageError(VSRIndividualError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/500_internal_error.svg"
+                alt="Internal Error"
+                width={isMobile ? 100 : 155}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="Internal Error"
+            content="Something went wrong with retrieving the available furniture items. Our team is working to fix it. Please try again later."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setPageError(VSRIndividualError.NONE);
+              fetchFurnitureItems();
+            }}
+          />
+        );
+      case VSRIndividualError.CANNOT_FETCH_VSR_NO_INTERNET:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setPageError(VSRIndividualError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/no_internet.svg"
+                alt="No Internet"
+                width={isMobile ? 100 : isTablet ? 138 : 114}
+                height={isMobile ? 93 : isTablet ? 129 : 106}
+              />
+            }
+            title="No Internet Connection"
+            content="Unable to retrieve the VSR data due to no internet connection. Please check your connection and try again."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setPageError(VSRIndividualError.NONE);
+              fetchVSR();
+            }}
+          />
+        );
+      case VSRIndividualError.CANNOT_FETCH_VSR_NOT_FOUND:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setPageError(VSRIndividualError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/red_x.svg"
+                alt="Red X"
+                width={isMobile ? 69 : 106}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="VSR Not Found"
+            content="Sorry, we couldn't find the VSR you're looking for."
+            buttonText="Back to Dashboard"
+            onButtonClicked={() => {
+              router.push("/staff/vsr");
+            }}
+          />
+        );
+      case VSRIndividualError.CANNOT_FETCH_VSR_INTERNAL:
+        return (
+          <VSRErrorModal
+            isOpen
+            onClose={() => {
+              setPageError(VSRIndividualError.NONE);
+            }}
+            imageComponent={
+              <Image
+                src="/errors/500_internal_error.svg"
+                alt="Internal Error"
+                width={isMobile ? 100 : 155}
+                height={isMobile ? 69 : 106}
+              />
+            }
+            title="Internal Error"
+            content="Something went wrong with retrieving the VSR. Our team is working to fix it. Please try again later."
+            buttonText="Try Again"
+            onButtonClicked={() => {
+              setPageError(VSRIndividualError.NONE);
+              fetchVSR();
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <HeaderBar showLogoutButton />
+      <div className={styles.page}>
+        <div className={`${styles.headerRow} ${styles.toDashboardRow}`}>
+          <a href="/staff/vsr" style={isEditing ? { opacity: 0.5 } : {}}>
+            <Button
+              variant="primary"
+              outlined
+              iconPath="/ic_arrowback.svg"
+              iconAlt="Arrowback"
+              text="Dashboard"
+              hideTextOnMobile
+              className={styles.toDashboard}
+            />
+          </a>
+          {isMobile ? renderActions() : null}
+        </div>
+        {loadingVsr ? (
+          <LoadingScreen />
+        ) : pageError === VSRIndividualError.NONE ? (
+          <div className={styles.allDetails}>
+            <div className={styles.headerRow}>
+              <div className={styles.name}>
+                <VeteranTag vsr={vsr} isEditing={isEditing}></VeteranTag>
+              </div>
+              {isMobile ? null : renderActions()}
+            </div>
+            <div className={styles.bodyDetails}>
+              <CaseDetails
+                vsr={vsr}
+                isEditing={isEditing}
+                loadingStatus={loadingUpdateStatus}
+                onUpdateVSRStatus={onUpdateVSRStatus}
+              ></CaseDetails>
+              <div className={styles.otherDetails}>
+                {isTablet ? renderApproveButton() : null}
+                <div className={styles.personalInfo}>
+                  <ContactInfo vsr={vsr} isEditing={isEditing} formProps={formProps} />
+                  <PersonalInformation vsr={vsr} isEditing={isEditing} formProps={formProps} />
+                  <MilitaryBackground vsr={vsr} isEditing={isEditing} formProps={formProps} />
+                  <AdditionalInfo vsr={vsr} isEditing={isEditing} formProps={formProps} />
+                </div>
+                <div className={styles.rightColumn}>
+                  {loadingFurnitureItems ? (
+                    <LoadingScreen />
+                  ) : (
+                    <RequestedFurnishings
+                      vsr={vsr}
+                      furnitureItems={furnitureItems ?? []}
+                      isEditing={isEditing}
+                      formProps={formProps}
+                    />
+                  )}
+                  {isTablet ? null : (
+                    <div className={styles.finalActions}>{renderApproveButton()}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className={styles.footer}></div>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Success, error, and delete modals/notifications */}
+      {renderErrorModal()}
+      <SuccessNotification
+        isOpen={updateStatusSuccessNotificationOpen}
+        mainText={
+          previousVSRStatus === null ? "Undo Successful" : "VSR Status Successfully Updated"
+        }
+        actions={[
+          ...(previousVSRStatus === null
+            ? []
+            : [
+                {
+                  text: "Undo",
+                  onClick: onUndoVSRStatusUpdate,
+                },
+              ]),
+          {
+            text: "Dismiss",
+            onClick: () => setUpdateStatusSuccessNotificationOpen(false),
+          },
+        ]}
+      />
+      <ErrorNotification
+        isOpen={updateStatusErrorNotificationOpen}
+        mainText="Unable to Update VSR Status"
+        subText="An error occurred, please check your internet connection or try again later"
+        actionText="Dismiss"
+        onActionClicked={() => setUpdateStatusErrorNotificationOpen(false)}
+      />
+      <DeleteVSRsModal
+        isOpen={deleteVsrModalOpen}
+        onClose={() => setDeleteVsrModalOpen(false)}
+        afterDelete={() => {
+          // Redirect user to dashboard after deleting VSR, but give them some time to see the success message first
+          setTimeout(() => {
+            router.push("/staff/vsr");
+          }, 1000);
+        }}
+        vsrIds={[vsr._id]}
+      />
+      <BaseModal
+        isOpen={discardEditsConfirmationModalOpen}
+        onClose={() => setDiscardEditsConfirmationModalOpen(false)}
+        title="Discard Changes"
+        content="Are you sure you want to discard your changes?"
+        bottomRow={
+          <div className={styles.modalBottomRow}>
+            <Button
+              variant="primary"
+              outlined
+              text="Keep Editing"
+              className={styles.modalButton}
+              onClick={() => setDiscardEditsConfirmationModalOpen(false)}
+              style={{ width: "100%" }}
+            />
+            <Button
+              variant="error"
+              outlined={false}
+              text="Discard Changes"
+              className={styles.modalButton}
+              onClick={() => {
+                fetchVSR();
+                setDiscardEditsConfirmationModalOpen(false);
+                setIsEditing(false);
+              }}
+              style={{ width: "100%" }}
+            />
+          </div>
+        }
+      />
+
+      {/* Modals & notifications for saving changes to VSR */}
+      <BaseModal
+        isOpen={saveEditsConfirmationModalOpen}
+        onClose={() => setSaveEditsConfirmationModalOpen(false)}
+        title="Save Changes"
+        content="Would you like to save your changes?"
+        bottomRow={
+          <div className={styles.modalBottomRow}>
+            <Button
+              variant="primary"
+              outlined
+              text="Keep Editing"
+              className={styles.modalButton}
+              onClick={() => setSaveEditsConfirmationModalOpen(false)}
+              style={{ width: "100%" }}
+            />
+            <Button
+              variant="primary"
+              outlined={false}
+              text="Save Changes"
+              className={styles.modalButton}
+              onClick={(e) => {
+                // Close the confirmation modal to enable user to see any errors on the form
+                setSaveEditsConfirmationModalOpen(false);
+                handleSubmit(onSubmitEdits)(e);
+              }}
+              style={{ width: "100%" }}
+            />
+          </div>
+        }
+      />
+      <SuccessNotification
+        isOpen={editSuccessNotificationOpen}
+        mainText={"Changes Saved Successfully"}
+        actions={[
+          {
+            text: "Dismiss",
+            onClick: () => setEditSuccessNotificationOpen(false),
+          },
+        ]}
+      />
+      <ErrorNotification
+        isOpen={editErrorNotificationOpen}
+        mainText="Unable to Save Changes"
+        subText="An error occurred, please check your internet connection or try again later"
+        actionText="Dismiss"
+        onActionClicked={() => setEditErrorNotificationOpen(false)}
+      />
+    </>
+  );
+};
diff --git a/frontend/src/components/VSRIndividual/Page/styles.module.css b/frontend/src/components/VSRIndividual/VSRIndividualPage/styles.module.css
similarity index 82%
rename from frontend/src/components/VSRIndividual/Page/styles.module.css
rename to frontend/src/components/VSRIndividual/VSRIndividualPage/styles.module.css
index 303d516..89f660c 100644
--- a/frontend/src/components/VSRIndividual/Page/styles.module.css
+++ b/frontend/src/components/VSRIndividual/VSRIndividualPage/styles.module.css
@@ -1,6 +1,7 @@
 .page {
   background-color: var(--color-background);
   padding: 0 120px;
+  min-height: 100vh;
 }
 
 .toDashboardRow {
@@ -43,24 +44,32 @@
   flex-direction: row;
 }
 
-.button {
-  border-radius: 4px;
-  border: 1px solid var(--color-tse-accent-blue-1);
-  background-color: var(--color-tse-accent-blue-1);
-  padding: 8px 16px;
-  font-family: var(--font-open-sans);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+.modalButton {
+  font-size: 24px;
   text-align: center;
-  color: white;
-  cursor: pointer;
+  width: 100%;
+}
+
+.blueOutlinedButton {
+  background-color: transparent;
+  border: 1px solid var(--color-tse-accent-blue-1);
+  color: var(--color-tse-accent-blue-1);
+}
+
+.redOutlinedButton {
+  background-color: transparent;
+  border: 1px solid #be2d46;
+  color: #be2d46;
+}
+
+.redButton {
+  background-color: #be2d46;
+}
+
+.modalBottomRow {
   display: flex;
   flex-direction: row;
-  gap: 6px;
-  align-items: center;
-  white-space: nowrap;
+  gap: 32px;
 }
 
 #edit:hover {
@@ -130,19 +139,11 @@
 
 .approveButton {
   width: 207px;
-  border-radius: 4px;
-  border: 1px solid var(--color-tse-secondary-1);
-  color: white;
   text-align: center;
   font-family: "Lora";
   font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  background: var(--color-tse-secondary-1);
   align-items: end;
   padding: 20px 24px;
-  cursor: pointer;
 }
 
 .footer {
@@ -176,8 +177,8 @@
     padding: 0 48px;
   }
 
-  .button {
-    font-size: 14px;
+  .modalButton {
+    font-size: 18px;
   }
 }
 
@@ -194,4 +195,8 @@
   .actions {
     gap: 16px;
   }
+
+  .modalButton {
+    font-size: 14px;
+  }
 }
diff --git a/frontend/src/components/VSRIndividual/VeteranTag/index.tsx b/frontend/src/components/VSRIndividual/VeteranTag/index.tsx
index fa6a3b7..ddb06fa 100644
--- a/frontend/src/components/VSRIndividual/VeteranTag/index.tsx
+++ b/frontend/src/components/VSRIndividual/VeteranTag/index.tsx
@@ -1,13 +1,17 @@
-import styles from "src/components/VSRIndividual/VeteranTag/styles.module.css";
+import styles from "@/components/VSRIndividual/VeteranTag/styles.module.css";
 import { type VSR } from "@/api/VSRs";
 
 export interface AdditionalInfoProps {
   vsr: VSR;
+  isEditing: boolean;
 }
 
-export function VeteranTag({ vsr }: AdditionalInfoProps) {
+/**
+ * A component that displays the veteran's name at the top of the VSR individual page.
+ */
+export function VeteranTag({ vsr, isEditing }: AdditionalInfoProps) {
   return (
-    <div className={styles.items}>
+    <div className={styles.items} style={isEditing ? { opacity: 0.5 } : {}}>
       {vsr.name && vsr.name.length > 0 ? <span> {vsr.name} </span> : <span></span>}
     </div>
   );
diff --git a/frontend/src/components/VSRIndividual/index.ts b/frontend/src/components/VSRIndividual/index.ts
index f17bdd4..6ce85cc 100644
--- a/frontend/src/components/VSRIndividual/index.ts
+++ b/frontend/src/components/VSRIndividual/index.ts
@@ -1,12 +1,10 @@
-export { HeaderBar } from "./HeaderBar";
-export { Page } from "./Page";
+export { VSRIndividualPage } from "./VSRIndividualPage";
 export { VeteranTag } from "./VeteranTag";
-export { CaseDetails } from "./CaseDetails";
-export { ContactInfo } from "./ContactInfo";
-export { PersonalInformation } from "./PersonalInformation";
-export { MilitaryBackground } from "./MilitaryBackground";
-export { AdditionalInfo } from "./AdditionalInfo";
-export { RequestedFurnishings } from "./RequestedFurnishings";
-export { SingleDetail } from "./SingleDetail";
-export { StatusDropdown } from "../shared/StatusDropdown";
-export { ListDetail } from "./ListDetail";
+export { CaseDetails } from "./PageSections/CaseDetails";
+export { ContactInfo } from "./PageSections/ContactInfo";
+export { PersonalInformation } from "./PageSections/PersonalInformation";
+export { MilitaryBackground } from "./PageSections/MilitaryBackground";
+export { AdditionalInfo } from "./PageSections/AdditionalInfo";
+export { RequestedFurnishings } from "./PageSections/RequestedFurnishings";
+export { SingleDetail } from "./FieldDetails/SingleDetail";
+export { ListDetail } from "./FieldDetails/ListDetail";
diff --git a/frontend/src/components/VSRTable/PageTitle/index.tsx b/frontend/src/components/VSRTable/PageTitle/index.tsx
index f52bbde..0bdfbcf 100644
--- a/frontend/src/components/VSRTable/PageTitle/index.tsx
+++ b/frontend/src/components/VSRTable/PageTitle/index.tsx
@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "@/components/VSRTable/PageTitle/styles.module.css";
 
+/**
+ * A component for the title at the top of the VSR table page.
+ */
 export default function PageTitle() {
   return <text className={styles.items}>Service Requests</text>;
 }
diff --git a/frontend/src/components/VSRTable/SearchKeyword/index.tsx b/frontend/src/components/VSRTable/SearchKeyword/index.tsx
index 96c50cd..cf92950 100644
--- a/frontend/src/components/VSRTable/SearchKeyword/index.tsx
+++ b/frontend/src/components/VSRTable/SearchKeyword/index.tsx
@@ -2,6 +2,9 @@ import styles from "@/components/VSRTable/SearchKeyword/styles.module.css";
 import Image from "next/image";
 import * as React from "react";
 
+/**
+ * A component for the Search input above the VSR table.
+ */
 export default function SearchKeyword() {
   return (
     <div className={styles.search}>
diff --git a/frontend/src/components/VSRTable/VSRTable/index.tsx b/frontend/src/components/VSRTable/VSRTable/index.tsx
index b51fe37..c520edd 100644
--- a/frontend/src/components/VSRTable/VSRTable/index.tsx
+++ b/frontend/src/components/VSRTable/VSRTable/index.tsx
@@ -2,28 +2,35 @@
 
 import * as React from "react";
 import Box from "@mui/material/Box";
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from "@mui/x-data-grid";
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GridRowSelectionModel } from "@mui/x-data-grid";
 
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { useEffect } from "react";
-import { VSR, getAllVSRs } from "@/api/VSRs";
 import moment from "moment";
 import { useRouter } from "next/navigation";
-import { StatusChip } from "@/components/shared/StatusChip";
 import { STATUS_OPTIONS } from "@/components/shared/StatusDropdown";
-import { useScreenSizes } from "@/util/useScreenSizes";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { VSR } from "@/api/VSRs";
+import { StatusChip } from "@/components/shared/StatusChip";
 
 const formatDateReceived = (dateReceived: Date) => {
   // Return the empty string on a falsy date received, instead of defaulting to today's date
   return dateReceived ? moment(dateReceived).format("MMMM D, YYYY") : "";
 };
 
-export default function VSRTable() {
-  const [vsrs, setVsrs] = React.useState<VSR[]>();
-  const router = useRouter();
+interface VSRTableProps {
+  vsrs: VSR[];
+  selectedVsrIds: string[];
+  onChangeSelectedVsrIds: (newIds: string[]) => unknown;
+}
 
+/**
+ * A component for the table itself on the VSR table page.
+ */
+export default function VSRTable({ vsrs, selectedVsrIds, onChangeSelectedVsrIds }: VSRTableProps) {
   const { isMobile, isTablet } = useScreenSizes();
+  const router = useRouter();
 
+  // Define the columns to show in the table (some columns are hidden on smaller screens)
   const columns: GridColDef[] = React.useMemo(() => {
     const result = [
       {
@@ -34,20 +41,6 @@ export default function VSRTable() {
     ];
 
     if (!isMobile) {
-      result.push({
-        field: "_id",
-        headerName: "Case ID",
-        type: "string",
-        flex: 1,
-        headerAlign: "left",
-        headerClassName: "header",
-        disableColumnMenu: true,
-        hideSortIcons: true,
-        width: 100,
-      });
-    }
-
-    if (!isTablet) {
       result.push({
         field: "militaryID",
         headerName: "Military ID (Last 4)",
@@ -107,17 +100,6 @@ export default function VSRTable() {
     return result;
   }, [isMobile, isTablet]);
 
-  useEffect(() => {
-    getAllVSRs().then((result) => {
-      if (result.success) {
-        setVsrs(result.data);
-      } else {
-        // TODO better error handling
-        alert(`Could not fetch VSRs: ${result.error}`);
-      }
-    });
-  }, []);
-
   return (
     <Box
       style={{ width: "100%" }}
@@ -141,6 +123,8 @@ export default function VSRTable() {
         },
         ".MuiDataGrid-cell": {
           cursor: "pointer",
+          // Disable the default blue outline around a focused table cell
+          outline: "none !important",
         },
         ".MuiDataGrid-cellContent": {
           fontSize: isMobile ? "0.75rem" : isTablet ? "0.875rem" : "1rem",
@@ -219,6 +203,10 @@ export default function VSRTable() {
             router.push(`/staff/vsr/${params.id}`);
           }
         }}
+        rowSelectionModel={selectedVsrIds}
+        onRowSelectionModelChange={(vsrIds: GridRowSelectionModel) =>
+          onChangeSelectedVsrIds(vsrIds as string[])
+        }
       />
     </Box>
   );
diff --git a/frontend/src/components/shared/BaseModal/index.tsx b/frontend/src/components/shared/BaseModal/index.tsx
new file mode 100644
index 0000000..b72dc46
--- /dev/null
+++ b/frontend/src/components/shared/BaseModal/index.tsx
@@ -0,0 +1,32 @@
+import styles from "@/components/shared/BaseModal/styles.module.css";
+import { Modal } from "@mui/material";
+import Image from "next/image";
+import { ReactElement } from "react";
+
+interface BaseModalProps {
+  isOpen: boolean;
+  onClose: () => unknown;
+  title: string;
+  content: string | ReactElement;
+  bottomRow: ReactElement | null;
+}
+
+/**
+ * A base component for a modal with a title, content, and a bottom row.
+ */
+export const BaseModal = ({ isOpen, onClose, title, content, bottomRow }: BaseModalProps) => {
+  return (
+    <>
+      <Modal open={isOpen} onClose={onClose}>
+        <div className={styles.root}>
+          <button onClick={onClose} className={styles.closeButton}>
+            <Image src="/ic_close_large.svg" alt="close" width={24} height={24} />
+          </button>
+          <h2 className={styles.title}>{title}</h2>
+          <p className={styles.content}>{content}</p>
+          <div className={styles.bottomRowContainer}>{bottomRow}</div>
+        </div>
+      </Modal>
+    </>
+  );
+};
diff --git a/frontend/src/components/shared/BaseModal/styles.module.css b/frontend/src/components/shared/BaseModal/styles.module.css
new file mode 100644
index 0000000..ea52672
--- /dev/null
+++ b/frontend/src/components/shared/BaseModal/styles.module.css
@@ -0,0 +1,80 @@
+.root {
+  position: absolute;
+  width: 723px;
+  background-color: white;
+  border-radius: 12px;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 64px;
+  gap: 16px;
+  border: none !important;
+  outline: none !important;
+}
+
+.closeButton {
+  position: absolute;
+  top: 28px;
+  right: 28px;
+  cursor: pointer;
+  border: none !important;
+  background: transparent;
+}
+
+.title {
+  color: var(--Accent-Blue-2, #04183b);
+  font-family: "Lora";
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.content {
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.bottomRowContainer {
+  margin-top: 48px;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .root {
+    width: calc(100% - 96px);
+  }
+
+  .title {
+    font-size: 36px;
+  }
+
+  .content {
+    font-size: 18px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .root {
+    width: calc(100% - 48px);
+    padding: 64px 24px;
+  }
+
+  .title {
+    font-size: 28px;
+  }
+
+  .content {
+    font-size: 14px;
+  }
+
+  .bottomRowContainer {
+    margin-top: 16px;
+  }
+}
diff --git a/frontend/src/components/shared/Button/index.tsx b/frontend/src/components/shared/Button/index.tsx
new file mode 100644
index 0000000..f207218
--- /dev/null
+++ b/frontend/src/components/shared/Button/index.tsx
@@ -0,0 +1,72 @@
+import styles from "@/components/shared/Button/styles.module.css";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { CircularProgress } from "@mui/material";
+import Image from "next/image";
+import { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  // Variant of the button (primary = dark blue, error = red)
+  variant: "primary" | "error";
+
+  // Whether the button should be outlined instead of filled
+  outlined: boolean;
+
+  // Optional: path to icon image to display on left side of button
+  iconPath?: string;
+
+  // Optional: alt for icon image
+  iconAlt?: string;
+
+  // Optional: Text to display inside the button
+  text?: string;
+
+  // Whether the button is loading (in which case it is disabled and a spinner is rendered)
+  loading?: boolean;
+
+  // Whether to hide the button's text on mobile screens
+  hideTextOnMobile?: boolean;
+}
+
+/**
+ * A reusable button component, styled to our application.
+ */
+export const Button = ({
+  variant,
+  outlined,
+  iconPath,
+  iconAlt,
+  text,
+  loading,
+  hideTextOnMobile = false,
+  ...props
+}: ButtonProps) => {
+  const { isMobile, isTablet } = useScreenSizes();
+  const iconSize = isMobile ? 16 : isTablet ? 19 : 24;
+
+  const mainColor = variant === "primary" ? "var(--color-tse-accent-blue-1)" : "#be2d46";
+
+  return (
+    <button
+      {...props}
+      className={`${styles.button} ${props.className ?? ""}`}
+      style={{
+        backgroundColor: outlined ? "transparent" : mainColor,
+        border: outlined ? `1px solid ${mainColor}` : "none",
+        color: outlined ? mainColor : "white",
+        ...props.style,
+      }}
+      disabled={props.disabled || loading}
+    >
+      {loading ? (
+        <CircularProgress size={24} />
+      ) : (
+        <>
+          {iconPath ? (
+            <Image width={iconSize} height={iconSize} src={iconPath} alt={iconAlt!} />
+          ) : null}
+          {hideTextOnMobile && isMobile ? null : text}
+        </>
+      )}
+    </button>
+  );
+};
diff --git a/frontend/src/components/shared/Button/styles.module.css b/frontend/src/components/shared/Button/styles.module.css
new file mode 100644
index 0000000..ab53931
--- /dev/null
+++ b/frontend/src/components/shared/Button/styles.module.css
@@ -0,0 +1,23 @@
+.button {
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-family: var(--font-open-sans);
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  outline: none !important;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .button {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/components/shared/DeleteVSRsModal/index.tsx b/frontend/src/components/shared/DeleteVSRsModal/index.tsx
new file mode 100644
index 0000000..c595773
--- /dev/null
+++ b/frontend/src/components/shared/DeleteVSRsModal/index.tsx
@@ -0,0 +1,116 @@
+import { deleteVSR } from "@/api/VSRs";
+import styles from "@/components/shared/DeleteVSRsModal/styles.module.css";
+import { UserContext } from "@/contexts/userContext";
+import { useContext, useState } from "react";
+import { SuccessNotification } from "@/components/shared/SuccessNotification";
+import { ErrorNotification } from "@/components/Errors/ErrorNotification";
+import { BaseModal } from "@/components/shared/BaseModal";
+import { Button } from "@/components/shared/Button";
+
+interface DeleteVSRsModalProps {
+  isOpen: boolean;
+  onClose: () => unknown;
+  afterDelete: () => unknown;
+  vsrIds: string[];
+}
+
+/**
+ * A modal that asks the user to confirm whether they want to delete one or more
+ * VSRs, and then deletes them if they confirm that they want to.
+ */
+export const DeleteVSRsModal = ({ isOpen, onClose, afterDelete, vsrIds }: DeleteVSRsModalProps) => {
+  const { firebaseUser } = useContext(UserContext);
+
+  const [loadingDelete, setLoadingDelete] = useState(false);
+  const [successNotificationOpen, setSuccessNotificationOpen] = useState(false);
+  const [errorNotificationOpen, setErrorNotificationOpen] = useState(false);
+
+  const onDelete = async () => {
+    if (loadingDelete || !firebaseUser) {
+      return;
+    }
+
+    setSuccessNotificationOpen(false);
+    setErrorNotificationOpen(false);
+    setLoadingDelete(true);
+
+    try {
+      const firebaseToken = await firebaseUser.getIdToken();
+      if (!firebaseToken) {
+        setLoadingDelete(false);
+        return;
+      }
+
+      await Promise.all(
+        vsrIds.map((vsrId) =>
+          deleteVSR(vsrId, firebaseToken).then((res) => {
+            if (res.success) {
+              return Promise.resolve();
+            } else {
+              return Promise.reject(res.error);
+            }
+          }),
+        ),
+      );
+
+      setSuccessNotificationOpen(true);
+      afterDelete();
+    } catch (error) {
+      console.error(`Error deleting VSR(s): ${error}`);
+      setErrorNotificationOpen(true);
+    } finally {
+      setLoadingDelete(false);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <BaseModal
+        isOpen={isOpen}
+        onClose={onClose}
+        title="Delete VSR(s)"
+        content={
+          <>
+            {"Deleted VSR’s "}
+            <span style={{ fontWeight: 700 }}>cannot</span>
+            {" be recovered. Are you sure you’d like to delete the selected VSR forms ("}
+            {vsrIds.length}
+            {")?"}
+          </>
+        }
+        bottomRow={
+          <div className={styles.buttonContainer}>
+            <Button
+              variant="primary"
+              outlined
+              text="Cancel"
+              onClick={onClose}
+              className={styles.button}
+            />
+            <Button
+              variant="error"
+              outlined={false}
+              text="Delete VSR(s)"
+              onClick={onDelete}
+              loading={loadingDelete}
+              className={styles.button}
+            />
+          </div>
+        }
+      />
+      <SuccessNotification
+        isOpen={successNotificationOpen}
+        mainText="VSR(s) Deleted Successfully"
+        actions={[{ text: "Dismiss", onClick: () => setSuccessNotificationOpen(false) }]}
+      />
+      <ErrorNotification
+        isOpen={errorNotificationOpen}
+        mainText="Unable to Delete VSR(s)"
+        subText="There was an error deleting the VSR(s). Please try again later."
+        actionText="Dismiss"
+        onActionClicked={() => setErrorNotificationOpen(false)}
+      />
+    </>
+  );
+};
diff --git a/frontend/src/components/shared/DeleteVSRsModal/styles.module.css b/frontend/src/components/shared/DeleteVSRsModal/styles.module.css
new file mode 100644
index 0000000..f4d4c9e
--- /dev/null
+++ b/frontend/src/components/shared/DeleteVSRsModal/styles.module.css
@@ -0,0 +1,32 @@
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}
+
+.button {
+  width: 100%;
+  padding: 12px 24px;
+  text-align: center;
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .button {
+    font-size: 18px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .buttonContainer {
+    gap: 16px;
+  }
+
+  .button {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/components/shared/HeaderBar/index.tsx b/frontend/src/components/shared/HeaderBar/index.tsx
index d5b927d..05da385 100644
--- a/frontend/src/components/shared/HeaderBar/index.tsx
+++ b/frontend/src/components/shared/HeaderBar/index.tsx
@@ -1,18 +1,55 @@
 import Image from "next/image";
-import React from "react";
+import React, { useState } from "react";
 import styles from "@/components/shared/HeaderBar/styles.module.css";
-import { useScreenSizes } from "@/util/useScreenSizes";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { signOut } from "firebase/auth";
+import { initFirebase } from "@/firebase/firebase";
+import { ErrorNotification } from "@/components/Errors/ErrorNotification";
+import { Button } from "@/components/shared/Button";
 
-const HeaderBar = () => {
+interface HeaderBarProps {
+  showLogoutButton: boolean;
+}
+
+/**
+ * A component that displays a header bar at the top of the screen and, optionally,
+ * a logout button for staff and admins.
+ */
+const HeaderBar = ({ showLogoutButton }: HeaderBarProps) => {
   const { isTablet } = useScreenSizes();
+  const { auth } = initFirebase();
+  const [loading, setLoading] = useState(false);
+  const [errorNotificationOpen, setErrorNotificationOpen] = useState(false);
+
+  const logout = () => {
+    setErrorNotificationOpen(false);
+    setLoading(true);
+    signOut(auth)
+      .catch((error) => {
+        console.error(`Could not logout: ${error}`);
+        setErrorNotificationOpen(true);
+      })
+      .finally(() => setLoading(false));
+  };
+
   return (
     <div className={styles.headerBar}>
-      <Image
-        className={styles.logo}
-        width={isTablet ? 80 : 99}
-        height={isTablet ? 39 : 48}
-        src="/logo.svg"
-        alt="logo"
+      <Image width={isTablet ? 80 : 99} height={isTablet ? 39 : 48} src="/logo.svg" alt="logo" />
+      {showLogoutButton ? (
+        <Button
+          variant="primary"
+          outlined={false}
+          text="Logout"
+          loading={loading}
+          onClick={logout}
+        />
+      ) : null}
+      <ErrorNotification
+        isOpen={errorNotificationOpen}
+        mainText="Unable to Logout"
+        subText="An error occurred while signing out, please check your internet connection or try again later"
+        actionText="Dismiss"
+        onActionClicked={() => setErrorNotificationOpen(false)}
       />
     </div>
   );
diff --git a/frontend/src/components/shared/HeaderBar/styles.module.css b/frontend/src/components/shared/HeaderBar/styles.module.css
index 07117de..65f7189 100644
--- a/frontend/src/components/shared/HeaderBar/styles.module.css
+++ b/frontend/src/components/shared/HeaderBar/styles.module.css
@@ -1,26 +1,21 @@
 .headerBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
-  height: 101px;
+  padding: 27px 24px 26px 63px;
+  padding-right: 24px;
   background-color: #fff;
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 }
 
-.logo {
-  margin-top: 27px;
-  margin-left: 63px;
-}
-
 /* tablet version */
 @media screen and (max-width: 850px) {
   .headerBar {
-    height: 115px;
-  }
-
-  .logo {
-    margin-top: 52px;
-    margin-left: 24px;
+    padding: 52px 12px 20px 24px;
   }
 }
diff --git a/frontend/src/components/shared/LoadingScreen/index.tsx b/frontend/src/components/shared/LoadingScreen/index.tsx
new file mode 100644
index 0000000..3b41db6
--- /dev/null
+++ b/frontend/src/components/shared/LoadingScreen/index.tsx
@@ -0,0 +1,19 @@
+import styles from "@/components/shared/LoadingScreen/styles.module.css";
+import { CircularProgress } from "@mui/material";
+import { CSSProperties } from "react";
+
+interface LoadingScreenProps {
+  style?: CSSProperties;
+}
+
+/**
+ * A component that displays a loading screen with a spinner and some text
+ */
+export const LoadingScreen = ({ style }: LoadingScreenProps) => {
+  return (
+    <div className={styles.root} style={style}>
+      <CircularProgress />
+      <p className={styles.text}>Please wait...</p>
+    </div>
+  );
+};
diff --git a/frontend/src/components/shared/LoadingScreen/styles.module.css b/frontend/src/components/shared/LoadingScreen/styles.module.css
new file mode 100644
index 0000000..ef1f181
--- /dev/null
+++ b/frontend/src/components/shared/LoadingScreen/styles.module.css
@@ -0,0 +1,29 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+}
+
+.text {
+  color: var(--Secondary-1, #102d5f);
+  text-align: center;
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .text {
+    font-size: 28px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .text {
+    font-size: 20px;
+  }
+}
diff --git a/frontend/src/components/shared/StatusChip/index.tsx b/frontend/src/components/shared/StatusChip/index.tsx
index ec8a04d..ba0ad8c 100644
--- a/frontend/src/components/shared/StatusChip/index.tsx
+++ b/frontend/src/components/shared/StatusChip/index.tsx
@@ -5,6 +5,10 @@ interface StatusChipProps {
   status: StatusOption;
 }
 
+/**
+ * A component that displays a chip with a VSR's status, with a certain text
+ * and background color based on the status
+ */
 export const StatusChip = ({ status }: StatusChipProps) => {
   return (
     <div className={styles.statusChip} style={{ backgroundColor: status.color }}>
diff --git a/frontend/src/components/shared/StatusDropdown/index.tsx b/frontend/src/components/shared/StatusDropdown/index.tsx
index eaa6eec..4cd1589 100644
--- a/frontend/src/components/shared/StatusDropdown/index.tsx
+++ b/frontend/src/components/shared/StatusDropdown/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "@/components/shared/StatusDropdown/styles.module.css";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
@@ -11,6 +11,9 @@ export interface StatusOption {
   color: string;
 }
 
+/**
+ * All available statuses that can be set using the status dropdown
+ */
 export const STATUS_OPTIONS: StatusOption[] = [
   {
     value: "Received",
@@ -24,6 +27,10 @@ export const STATUS_OPTIONS: StatusOption[] = [
     value: "Approved",
     color: "#d7eebc",
   },
+  {
+    value: "Complete",
+    color: "#bfe1f6",
+  },
   {
     value: "Resubmit",
     color: "#fae69e",
@@ -38,6 +45,10 @@ export const STATUS_OPTIONS: StatusOption[] = [
   },
 ];
 
+/**
+ * An input component that displays a dropdown menu with all available status
+ * options and enables the user to select a status.
+ */
 export interface StatusDropdownProps {
   value: string;
   onChanged?: (value: string) => void;
@@ -47,6 +58,8 @@ export function StatusDropdown({ value, onChanged }: StatusDropdownProps) {
   const [selectedValue, setSelectedValue] = useState(value);
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => setSelectedValue(value), [value]);
+
   const handleChange = (event: SelectChangeEvent<string>) => {
     setSelectedValue(event.target.value);
     onChanged?.(event.target.value);
diff --git a/frontend/src/components/shared/SuccessNotification/index.tsx b/frontend/src/components/shared/SuccessNotification/index.tsx
new file mode 100644
index 0000000..3319d14
--- /dev/null
+++ b/frontend/src/components/shared/SuccessNotification/index.tsx
@@ -0,0 +1,37 @@
+import styles from "@/components/shared/SuccessNotification/styles.module.css";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { Portal } from "@mui/material";
+import Image from "next/image";
+
+interface SuccessAction {
+  text: string;
+  onClick: () => unknown;
+}
+
+interface SuccessNotificationProps {
+  isOpen: boolean;
+  mainText: string;
+  actions: SuccessAction[];
+}
+
+/**
+ * A component that displays a success notification at the top of the screen
+ */
+export const SuccessNotification = ({ isOpen, mainText, actions }: SuccessNotificationProps) => {
+  const { isMobile } = useScreenSizes();
+  const iconSize = isMobile ? 36 : 49;
+
+  return isOpen ? (
+    <Portal>
+      <div className={styles.root}>
+        <Image src="/ic_success.svg" alt="Checkmark" width={iconSize} height={iconSize} />
+        <p className={styles.mainText}>{mainText}</p>
+        {actions.map((action, index) => (
+          <p key={index} className={styles.actionText} onClick={action.onClick}>
+            {action.text}
+          </p>
+        ))}
+      </div>
+    </Portal>
+  ) : null;
+};
diff --git a/frontend/src/components/shared/SuccessNotification/styles.module.css b/frontend/src/components/shared/SuccessNotification/styles.module.css
new file mode 100644
index 0000000..dc32813
--- /dev/null
+++ b/frontend/src/components/shared/SuccessNotification/styles.module.css
@@ -0,0 +1,62 @@
+.root {
+  position: fixed;
+  top: 133px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 707px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 5px solid #3bb966;
+  border-radius: 6px;
+  padding: 24px;
+  gap: 16px;
+  background-color: white;
+}
+
+.mainText {
+  color: var(--Functional-Success, #3bb966);
+  font-family: "Lora";
+  font-size: 24px;
+  font-weight: 700;
+  width: 100%;
+}
+
+.actionText {
+  color: rgba(35, 34, 32, 0.5);
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .root {
+    width: calc(100% - 48px);
+  }
+
+  .mainText {
+    font-size: 20px;
+  }
+
+  .actionText {
+    font-size: 16px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .root {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .mainText {
+    font-size: 18px;
+  }
+
+  .actionText {
+    font-size: 14px;
+  }
+}
diff --git a/frontend/src/components/shared/input/BinaryChoice/index.tsx b/frontend/src/components/shared/input/BinaryChoice/index.tsx
index 69a4110..27ace6a 100644
--- a/frontend/src/components/shared/input/BinaryChoice/index.tsx
+++ b/frontend/src/components/shared/input/BinaryChoice/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import Chip from "@mui/material/Chip";
 import styles from "@/components/shared/input/BinaryChoice/styles.module.css";
-import { FormField } from "../FormField";
+import { FormField } from "@/components/shared/input/FormField";
+import { StyledChip } from "@/components/shared/input/StyledChip";
 
 export interface BinaryChoiceProps {
   label: string;
@@ -12,6 +12,9 @@ export interface BinaryChoiceProps {
   helperText?: string;
 }
 
+/**
+ * An input component that allows the user to select either "Yes" or "No" by clicking on chips.
+ */
 const BinaryChoice = ({
   label,
   value,
@@ -30,21 +33,15 @@ const BinaryChoice = ({
   return (
     <FormField label={label} required={required} error={error} helperText={helperText}>
       <div className={styles.chipContainer}>
-        <Chip
-          label="Yes"
+        <StyledChip
+          text="Yes"
+          selected={selectedOption === true}
           onClick={() => handleOptionClick(true)}
-          className={`${styles.chip} ${
-            selectedOption === true ? styles.chipSelected : styles.chipUnselected
-          }`}
-          clickable
         />
-        <Chip
-          label="No"
+        <StyledChip
+          text="No"
+          selected={selectedOption === false}
           onClick={() => handleOptionClick(false)}
-          className={`${styles.chip} ${
-            selectedOption === false ? styles.chipSelected : styles.chipUnselected
-          }`}
-          clickable
         />
       </div>
     </FormField>
diff --git a/frontend/src/components/shared/input/BinaryChoice/styles.module.css b/frontend/src/components/shared/input/BinaryChoice/styles.module.css
index c40c320..34e1e4a 100644
--- a/frontend/src/components/shared/input/BinaryChoice/styles.module.css
+++ b/frontend/src/components/shared/input/BinaryChoice/styles.module.css
@@ -1,40 +1,8 @@
 /* BinaryChoice.module.css */
 
-.chip {
-  border-width: 1px;
-  border-style: solid;
-  text-align: center;
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  border-radius: 64px;
-  border: 1px solid var(--Secondary-1, #102d5f);
-}
-
-.chipSelected {
-  color: white;
-  background: #102d5f;
-}
-
-.chipSelected:hover {
-  background: #102d5f;
-}
-
 .chipContainer {
   display: flex;
   flex-direction: row;
   gap: 16px;
   flex-wrap: wrap;
 }
-
-.chipUnselected {
-  color: var(--Accent-Blue-1, #102d5f);
-  background: rgba(255, 255, 255, 0);
-}
-
-/*Need exact color for this*/
-.chipUnselected:hover {
-  background: rgb(213, 232, 239);
-}
diff --git a/frontend/src/components/shared/input/ChildrenInput/index.tsx b/frontend/src/components/shared/input/ChildrenInput/index.tsx
new file mode 100644
index 0000000..f81b7db
--- /dev/null
+++ b/frontend/src/components/shared/input/ChildrenInput/index.tsx
@@ -0,0 +1,78 @@
+import styles from "@/components/shared/input/ChildrenInput/styles.module.css";
+import { UseFormReturn } from "react-hook-form";
+import TextField from "@/components/shared/input/TextField";
+import { ICreateVSRFormInput, IEditVSRFormInput } from "@/components/VSRForm/VSRFormTypes";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+
+interface ChildrenInputProps {
+  gender: "boy" | "girl";
+  formProps: UseFormReturn<ICreateVSRFormInput> | UseFormReturn<IEditVSRFormInput>;
+}
+
+/**
+ * A component that renders the text fields to input the children of the given gender.
+ */
+export const ChildrenInput = ({ gender, formProps }: ChildrenInputProps) => {
+  const numChildrenThisGender = formProps.watch()[`num_${gender}s`];
+  const fieldInputName = `agesOf${gender[0].toUpperCase()}${gender.substring(1)}s` as
+    | "agesOfBoys"
+    | "agesOfGirls";
+
+  const { isMobile } = useScreenSizes();
+
+  return (
+    <>
+      <div className={styles.textInputWrapper}>
+        <TextField
+          label={`Number of ${gender === "boy" ? "Male" : "Female"} Children`}
+          variant="outlined"
+          placeholder="e.g. 2"
+          type="number"
+          {...(formProps as UseFormReturn<ICreateVSRFormInput>).register(`num_${gender}s`, {
+            required: `Number of ${gender}s is required`,
+            pattern: {
+              // Only allow up to 2 digits
+              value: /^[0-9][0-9]?$/,
+              message: "This field must be a positive number less than 100",
+            },
+          })}
+          required
+          error={!!formProps.formState.errors[`num_${gender}s`]}
+          helperText={formProps.formState.errors[`num_${gender}s`]?.message}
+        />
+      </div>
+
+      {numChildrenThisGender > 0 || !isMobile ? (
+        <div className={styles.numChildren}>
+          {/* Cap it at 99 children per gender to avoid freezing web browser */}
+          {Array.from({ length: Math.min(numChildrenThisGender, 99) }, (_, index) => (
+            <div key={index} className={styles.childInputWrapper}>
+              <TextField
+                label={`Age of ${gender.substring(0, 1).toUpperCase()}${gender.substring(1)}`}
+                type="number"
+                variant="outlined"
+                {...(formProps as UseFormReturn<ICreateVSRFormInput>).register(
+                  `${fieldInputName}.${index}`,
+                  {
+                    required: "This field is required",
+                    pattern: {
+                      value: /^[0-9]+$/,
+                      message: "This field must be a positive number",
+                    },
+                    max: {
+                      value: 17,
+                      message: "Only enter children under 18",
+                    },
+                  },
+                )}
+                error={!!formProps.formState.errors[fieldInputName]?.[index]}
+                helperText={formProps.formState.errors[fieldInputName]?.[index]?.message}
+                required
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+};
diff --git a/frontend/src/components/shared/input/ChildrenInput/styles.module.css b/frontend/src/components/shared/input/ChildrenInput/styles.module.css
new file mode 100644
index 0000000..b9f8ad7
--- /dev/null
+++ b/frontend/src/components/shared/input/ChildrenInput/styles.module.css
@@ -0,0 +1,17 @@
+.textInputWrapper {
+  flex: 1;
+  width: 100%;
+}
+
+.numChildren {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+}
+
+.childInputWrapper {
+  width: 100%;
+}
diff --git a/frontend/src/components/shared/input/Dropdown/index.tsx b/frontend/src/components/shared/input/Dropdown/index.tsx
index e0ed938..9bfebbc 100644
--- a/frontend/src/components/shared/input/Dropdown/index.tsx
+++ b/frontend/src/components/shared/input/Dropdown/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styles from "@/components/shared/input/Dropdown/styles.module.css";
 import { FormControl, Select, MenuItem, SelectChangeEvent } from "@mui/material";
-import { FormField } from "../FormField";
-import { useScreenSizes } from "@/util/useScreenSizes";
+import { FormField } from "@/components/shared/input/FormField";
+import { useScreenSizes } from "@/hooks/useScreenSizes";
 
 export interface DropDownProps {
   label: string;
@@ -15,6 +15,10 @@ export interface DropDownProps {
   placeholder?: string;
 }
 
+/**
+ * An input component that displays a dropdown and enables the user to select one
+ * of the options from the dropdown.
+ */
 const Dropdown = ({
   label,
   options,
@@ -47,6 +51,9 @@ const Dropdown = ({
               height: isMobile ? 16 : isTablet ? 19 : 22,
             },
           }}
+          MenuProps={{
+            disableScrollLock: true,
+          }}
         >
           <MenuItem value="">
             <p className={styles.placeholder}>{placeholder}</p>
diff --git a/frontend/src/components/shared/input/FormField/index.tsx b/frontend/src/components/shared/input/FormField/index.tsx
index 4ef3b50..8e7dfd5 100644
--- a/frontend/src/components/shared/input/FormField/index.tsx
+++ b/frontend/src/components/shared/input/FormField/index.tsx
@@ -9,6 +9,10 @@ export interface FormFieldProps {
   children: ReactNode;
 }
 
+/**
+ * A wrapper component for a form input field, that displays a label, asterisk if the field
+ * is required, the field itself, and helper/error text at the bottom.
+ */
 export const FormField = ({ label, required, error, helperText, children }: FormFieldProps) => {
   return (
     <div className={styles.wrapperClass}>
diff --git a/frontend/src/components/shared/input/InputField/index.tsx b/frontend/src/components/shared/input/InputField/index.tsx
deleted file mode 100644
index d262f62..0000000
--- a/frontend/src/components/shared/input/InputField/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { ChangeEvent } from "react";
-import styles from "@/components/shared/input/InputField/styles.module.css";
-
-interface InputFieldProps {
-  label: string;
-  type?: string;
-  id: string;
-  placeholder: string;
-  value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-}
-
-const InputField: React.FC<InputFieldProps> = ({
-  label,
-  id,
-  placeholder,
-  value,
-  onChange,
-  type = "text",
-}) => {
-  return (
-    <div className={styles.inputField}>
-      <label htmlFor={id} className={styles.label}>
-        {label}
-      </label>
-      <input
-        type={type}
-        id={id}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        className={styles.input}
-      />
-    </div>
-  );
-};
-
-export default InputField;
diff --git a/frontend/src/components/shared/input/InputField/styles.module.css b/frontend/src/components/shared/input/InputField/styles.module.css
deleted file mode 100644
index c3609c9..0000000
--- a/frontend/src/components/shared/input/InputField/styles.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.inputField {
-  margin-bottom: 20px;
-}
-
-.label {
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  color: #818181;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-
-.input {
-  border: 1px solid #d8d8d8;
-  border-radius: 4px;
-  padding: 8px;
-  width: 100%;
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  color: #232220;
-  background: #fff;
-}
-
-.input::placeholder {
-  font-style: italic;
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
-  color: #484848;
-  font-weight: 300;
-  line-height: normal;
-}
-
-@media screen and (max-width: 550px) {
-  .label {
-    font-size: 12px;
-  }
-
-  .input {
-    font-size: 12px;
-    font-weight: 400;
-  }
-
-  .input::placeholder {
-    font-size: 12px;
-  }
-}
diff --git a/frontend/src/components/shared/input/MultipleChoice/index.tsx b/frontend/src/components/shared/input/MultipleChoice/index.tsx
index 23b2566..9592038 100644
--- a/frontend/src/components/shared/input/MultipleChoice/index.tsx
+++ b/frontend/src/components/shared/input/MultipleChoice/index.tsx
@@ -1,6 +1,6 @@
-import Chip from "@mui/material/Chip";
 import styles from "@/components/shared/input/MultipleChoice/styles.module.css";
-import { FormField } from "../FormField";
+import { FormField } from "@/components/shared/input/FormField";
+import { StyledChip } from "@/components/shared/input/StyledChip";
 
 export interface MultipleChoiceProps {
   label: string;
@@ -13,6 +13,10 @@ export interface MultipleChoiceProps {
   helperText?: string;
 }
 
+/**
+ * An input component that displays multiple options as chips, and enables the user
+ * to choose one of them by clicking on it.
+ */
 const MultipleChoice = ({
   label,
   options,
@@ -30,9 +34,10 @@ const MultipleChoice = ({
           const optionIsSelected = allowMultiple ? value?.includes(option) : value === option;
 
           return (
-            <Chip
-              label={option}
+            <StyledChip
               key={option}
+              text={option}
+              selected={optionIsSelected}
               onClick={() => {
                 if (allowMultiple) {
                   if (optionIsSelected) {
@@ -52,15 +57,6 @@ const MultipleChoice = ({
                   }
                 }
               }}
-              className={`${styles.chip} ${
-                optionIsSelected ? styles.chipSelected : styles.chipUnselected
-              }`}
-              clickable
-              sx={{
-                ".MuiChip-label": {
-                  padding: "0 !important",
-                },
-              }}
             />
           );
         })}
diff --git a/frontend/src/components/shared/input/MultipleChoice/styles.module.css b/frontend/src/components/shared/input/MultipleChoice/styles.module.css
index 1076148..f02424d 100644
--- a/frontend/src/components/shared/input/MultipleChoice/styles.module.css
+++ b/frontend/src/components/shared/input/MultipleChoice/styles.module.css
@@ -1,57 +1,8 @@
 /* MultipleChoice.module.css */
 
-.chip {
-  border-width: 1px;
-  text-align: center;
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  border-radius: 64px;
-  border: 1px solid var(--Secondary-1, #102d5f);
-  padding: 8px 16px;
-  height: 40px;
-}
-
-.chipSelected {
-  color: white;
-  background: #102d5f;
-}
-
-.chipSelected:hover {
-  background: #102d5f;
-}
-
 .chipContainer {
   display: flex;
   flex-direction: row;
   gap: 16px;
   flex-wrap: wrap;
 }
-
-.chipUnselected {
-  color: var(--Accent-Blue-1, #102d5f);
-  background: rgba(255, 255, 255, 0);
-}
-
-/*Need exact color for this*/
-.chipUnselected:hover {
-  background: rgb(142, 166, 175);
-}
-
-/* tablet version */
-@media screen and (max-width: 850px) {
-  .chip {
-    font-size: 14px;
-    height: 36px;
-  }
-}
-
-/* mobile version */
-@media screen and (max-width: 550px) {
-  .chip {
-    font-size: 12px;
-    height: 30px;
-  }
-}
diff --git a/frontend/src/components/shared/input/StyledChip/index.tsx b/frontend/src/components/shared/input/StyledChip/index.tsx
new file mode 100644
index 0000000..aac88cc
--- /dev/null
+++ b/frontend/src/components/shared/input/StyledChip/index.tsx
@@ -0,0 +1,49 @@
+import { useScreenSizes } from "@/hooks/useScreenSizes";
+import { Chip } from "@mui/material";
+
+interface StyledChipProps {
+  text: string;
+  selected: boolean;
+  onClick: () => unknown;
+}
+
+/**
+ * A wrapper component around the MUI Chip that provides our app's custom styles.
+ */
+export const StyledChip = ({ text, selected, onClick }: StyledChipProps) => {
+  const { isMobile, isTablet } = useScreenSizes();
+
+  return (
+    <Chip
+      label={text}
+      onClick={onClick}
+      clickable
+      sx={{
+        ".MuiChip-label": {
+          padding: "0 !important",
+        },
+
+        borderWidth: 1,
+        textAlign: "center",
+        fontFamily: "Open Sans",
+        fontSize: isMobile ? 12 : isTablet ? 14 : 16,
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "normal",
+        borderRadius: 64,
+        border: "1px solid var(--Secondary-1, #102d5f)",
+        padding: "8px 16px",
+        height: isMobile ? 30 : isTablet ? 36 : 40,
+        color: selected ? "white" : "var(--Accent-Blue-1, #102d5f)",
+        background: selected ? "#102d5f" : "rgba(255, 255, 255, 0)",
+      }}
+      style={
+        selected
+          ? {
+              background: "#102d5f",
+            }
+          : {}
+      }
+    />
+  );
+};
diff --git a/frontend/src/components/shared/input/TextField/index.tsx b/frontend/src/components/shared/input/TextField/index.tsx
index 0e71772..10002ff 100644
--- a/frontend/src/components/shared/input/TextField/index.tsx
+++ b/frontend/src/components/shared/input/TextField/index.tsx
@@ -1,7 +1,7 @@
 import styles from "@/components/shared/input/TextField/styles.module.css";
 import MUITextField, { TextFieldProps as MUITextFieldProps } from "@mui/material/TextField";
 import { ForwardedRef, forwardRef } from "react";
-import { FormField } from "../FormField";
+import { FormField } from "@/components/shared/input/FormField";
 
 export interface TextFieldProps extends MUITextFieldProps<"outlined"> {
   label: string;
@@ -10,6 +10,9 @@ export interface TextFieldProps extends MUITextFieldProps<"outlined"> {
   required: boolean;
 }
 
+/**
+ * A text input field component
+ */
 const TextField = forwardRef(
   (
     { label, error, required, helperText, ...props }: TextFieldProps,
diff --git a/frontend/src/constants/fieldOptions.ts b/frontend/src/constants/fieldOptions.ts
new file mode 100644
index 0000000..fe0e014
--- /dev/null
+++ b/frontend/src/constants/fieldOptions.ts
@@ -0,0 +1,144 @@
+/**
+ * Defines the list of options for several multiple choice fields on the VSR form.
+ */
+export const maritalOptions = ["Married", "Single", "It's Complicated", "Widowed/Widower"];
+export const genderOptions = ["Male", "Female", "Other"];
+export const employmentOptions = [
+  "Employed",
+  "Unemployed",
+  "Currently Looking",
+  "Retired",
+  "In School",
+  "Unable to work",
+];
+
+export const incomeOptions = [
+  "$12,500 and under",
+  "$12,501 - $25,000",
+  "$25,001 - $50,000",
+  "$50,001 and over",
+];
+
+export const homeOptions = [
+  "House",
+  "Apartment",
+  "Studio",
+  "1 Bedroom",
+  "2 Bedroom",
+  "3 Bedroom",
+  "4 Bedroom",
+  "4+ Bedroom",
+];
+
+export const ethnicityOptions = [
+  "Asian",
+  "African American",
+  "Caucasian",
+  "Native American",
+  "Pacific Islander",
+  "Middle Eastern",
+  "Prefer not to say",
+];
+
+export const branchOptions = [
+  "Air Force",
+  "Air Force Reserve",
+  "Air National Guard",
+  "Army",
+  "Army Air Corps",
+  "Army Reserve",
+  "Coast Guard",
+  "Marine Corps",
+  "Navy",
+  "Navy Reserve",
+];
+
+export const conflictsOptions = [
+  "WWII",
+  "Korea",
+  "Vietnam",
+  "Persian Gulf",
+  "Bosnia",
+  "Kosovo",
+  "Panama",
+  "Kuwait",
+  "Iraq",
+  "Somalia",
+  "Desert Shield/Storm",
+  "Operation Enduring Freedom (OEF)",
+  "Afghanistan",
+  "Irani Crisis",
+  "Granada",
+  "Lebanon",
+  "Beirut",
+  "Special Ops",
+  "Peacetime",
+];
+
+export const dischargeStatusOptions = [
+  "Honorable Discharge",
+  "General Under Honorable",
+  "Other Than Honorable",
+  "Bad Conduct",
+  "Entry Level",
+  "Dishonorable",
+  "Still Serving",
+  "Civilian",
+  "Medical",
+  "Not Given",
+];
+
+export const hearFromOptions = ["Colleague", "Social Worker", "Friend", "Internet", "Social Media"];
+
+export const stateOptions = [
+  "AL",
+  "AK",
+  "AZ",
+  "AR",
+  "CA",
+  "CO",
+  "CT",
+  "DE",
+  "FL",
+  "GA",
+  "HI",
+  "ID",
+  "IL",
+  "IN",
+  "IA",
+  "KS",
+  "KY",
+  "LA",
+  "ME",
+  "MD",
+  "MA",
+  "MI",
+  "MN",
+  "MS",
+  "MO",
+  "MT",
+  "NE",
+  "NV",
+  "NH",
+  "NJ",
+  "NM",
+  "NY",
+  "NC",
+  "ND",
+  "OH",
+  "OK",
+  "OR",
+  "PA",
+  "RI",
+  "SC",
+  "SD",
+  "TN",
+  "TX",
+  "UT",
+  "VT",
+  "VA",
+  "WA",
+  "WV",
+  "WI",
+  "WY",
+];
diff --git a/frontend/src/contexts/userContext.tsx b/frontend/src/contexts/userContext.tsx
new file mode 100644
index 0000000..ae7161d
--- /dev/null
+++ b/frontend/src/contexts/userContext.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { ReactNode, createContext, useEffect, useState } from "react";
+import { User as FirebaseUser, onAuthStateChanged } from "firebase/auth";
+import { User, getWhoAmI } from "@/api/Users";
+import { initFirebase } from "@/firebase/firebase";
+
+interface IUserContext {
+  firebaseUser: FirebaseUser | null;
+  papUser: User | null;
+  loadingUser: boolean;
+  reloadUser: () => unknown;
+}
+
+/**
+ * A context that provides the current Firebase and PAP (MongoDB) user data,
+ * automatically fetching them when the page loads.
+ */
+export const UserContext = createContext<IUserContext>({
+  firebaseUser: null,
+  papUser: null,
+  loadingUser: true,
+  reloadUser: () => {},
+});
+
+/**
+ * A provider component that handles the logic for supplying the context
+ * with its current user & loading state variables.
+ */
+export const UserContextProvider = ({ children }: { children: ReactNode }) => {
+  const [firebaseUser, setFirebaseUser] = useState<FirebaseUser | null>(null);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [papUser, setPapUser] = useState<User | null>(null);
+  const [loadingUser, setLoadingUser] = useState(true);
+
+  const { auth } = initFirebase();
+
+  /**
+   * Callback triggered by Firebase when the user logs in/out, or on page load
+   */
+  onAuthStateChanged(auth, (firebaseUser) => {
+    setFirebaseUser(firebaseUser);
+    setInitialLoading(false);
+  });
+
+  const reloadUser = () => {
+    if (initialLoading) {
+      return;
+    }
+    setLoadingUser(true);
+    setPapUser(null);
+    if (firebaseUser === null) {
+      setLoadingUser(false);
+    } else {
+      firebaseUser.getIdToken().then((token) =>
+        getWhoAmI(token).then((res) => {
+          if (res.success) {
+            setPapUser(res.data);
+          } else {
+            setPapUser(null);
+          }
+          setLoadingUser(false);
+        }),
+      );
+    }
+  };
+
+  useEffect(reloadUser, [initialLoading, firebaseUser]);
+
+  return (
+    <UserContext.Provider value={{ firebaseUser, papUser, loadingUser, reloadUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
diff --git a/frontend/src/firebase/firebase.ts b/frontend/src/firebase/firebase.ts
index 137e33a..a21a24d 100644
--- a/frontend/src/firebase/firebase.ts
+++ b/frontend/src/firebase/firebase.ts
@@ -2,6 +2,10 @@ import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import env from "@/util/validateEnv";
 
+/**
+ * Initializes Firebase for the frontend, using the NEXT_PUBLIC_FIREBASE_SETTINGS
+ * environment variable.
+ */
 export const initFirebase = () => {
   if (!env.NEXT_PUBLIC_FIREBASE_SETTINGS) {
     throw new Error("Cannot get firebase settings");
diff --git a/frontend/src/hooks/useRedirection.ts b/frontend/src/hooks/useRedirection.ts
new file mode 100644
index 0000000..38f864e
--- /dev/null
+++ b/frontend/src/hooks/useRedirection.ts
@@ -0,0 +1,66 @@
+import { User } from "@/api/Users";
+import { UserContext } from "@/contexts/userContext";
+import { User as FirebaseUser } from "firebase/auth";
+import { useRouter } from "next/navigation";
+import { useContext, useEffect } from "react";
+
+export const LOGIN_URL = "/login";
+export const HOME_URL = "/staff/vsr";
+
+/**
+ * An interface for the user's current authentication credentials
+ */
+export interface AuthCredentials {
+  firebaseUser: FirebaseUser | null;
+  papUser: User | null;
+}
+
+/**
+ * A type for a function that determines whether the user should be redirected
+ * based on their current credentials
+ */
+export type CheckShouldRedirect = (authCredentials: AuthCredentials) => boolean;
+
+export interface UseRedirectionProps {
+  checkShouldRedirect: CheckShouldRedirect;
+  redirectURL: string;
+}
+
+/**
+ * A base hook that redirects the user to redirectURL if checkShouldRedirect returns true
+ */
+export const useRedirection = ({ checkShouldRedirect, redirectURL }: UseRedirectionProps) => {
+  const { firebaseUser, papUser, loadingUser } = useContext(UserContext);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Don't redirect if we are still loading the current user
+    if (loadingUser) {
+      return;
+    }
+
+    if (checkShouldRedirect({ firebaseUser, papUser })) {
+      router.push(redirectURL);
+    }
+  }, [firebaseUser, papUser, loadingUser]);
+};
+
+/**
+ * A hook that redirects the user to the staff/admin home page if they are already signed in
+ */
+export const useRedirectToHomeIfSignedIn = () => {
+  useRedirection({
+    checkShouldRedirect: ({ firebaseUser, papUser }) => firebaseUser !== null && papUser !== null,
+    redirectURL: HOME_URL,
+  });
+};
+
+/**
+ * A hook that redirects the user to the login page if they are not signed in
+ */
+export const useRedirectToLoginIfNotSignedIn = () => {
+  useRedirection({
+    checkShouldRedirect: ({ firebaseUser, papUser }) => firebaseUser === null || papUser === null,
+    redirectURL: LOGIN_URL,
+  });
+};
diff --git a/frontend/src/util/useScreenSizes.ts b/frontend/src/hooks/useScreenSizes.ts
similarity index 100%
rename from frontend/src/util/useScreenSizes.ts
rename to frontend/src/hooks/useScreenSizes.ts