diff --git a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getCompletedApplications.e2e-spec.ts b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getCompletedApplications.e2e-spec.ts
index 26e0a84e59..b439ee9402 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getCompletedApplications.e2e-spec.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getCompletedApplications.e2e-spec.ts
@@ -150,6 +150,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getComplet
       .expect({
         results: [
           {
+            id: declinedBySABCApplicationOfferingChange.id,
             applicationNumber:
               applicationWithDeclinedBySABCApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -168,6 +169,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getComplet
               declinedBySABCApplicationOfferingChange.assessedDate.toISOString(),
           },
           {
+            id: declinedByStudentApplicationOfferingChange.id,
             applicationNumber:
               applicationWithDeclinedByStudentApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -186,6 +188,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getComplet
               declinedByStudentApplicationOfferingChange.studentActionDate.toISOString(),
           },
           {
+            id: approvedApplicationOfferingChange.id,
             applicationNumber:
               applicationWithApprovedApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -312,6 +315,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getComplet
       .expect({
         results: [
           {
+            id: approvedApplicationOfferingChange.id,
             applicationNumber:
               applicationWithApprovedApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -329,6 +333,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getComplet
               approvedApplicationOfferingChange.assessedDate.toISOString(),
           },
           {
+            id: declinedBySABCApplicationOfferingChange.id,
             applicationNumber:
               applicationWithDeclinedBySABCApplicationOfferingChange.applicationNumber,
             studyStartDate:
diff --git a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getInProgressApplications.e2e-spec.ts b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getInProgressApplications.e2e-spec.ts
index e8f95523d3..7aa965b6f3 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getInProgressApplications.e2e-spec.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/_tests_/e2e/application-offering-change-request.institutions.controller.getInProgressApplications.e2e-spec.ts
@@ -121,6 +121,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getInProgr
       .expect({
         results: [
           {
+            id: inProgressWithSABCApplicationOfferingChange.id,
             applicationNumber:
               applicationWithInProgressWithSABCApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -137,6 +138,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getInProgr
               inProgressWithSABCApplicationOfferingChange.applicationOfferingChangeRequestStatus,
           },
           {
+            id: inProgressWithStudentApplicationOfferingChange.id,
             applicationNumber:
               applicationWithInProgressWithStudentApplicationOfferingChange.applicationNumber,
             studyStartDate:
@@ -203,6 +205,7 @@ describe("ApplicationOfferingChangeRequestInstitutionsController(e2e)-getInProgr
       .expect({
         results: [
           {
+            id: inProgressWithSABCApplicationOfferingChange.id,
             applicationNumber:
               applicationWithInProgressWithSABCApplicationOfferingChange.applicationNumber,
             studyStartDate:
diff --git a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/application-offering-change-request.institutions.controller.ts b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/application-offering-change-request.institutions.controller.ts
index 68684744de..b1b115c7f9 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/application-offering-change-request.institutions.controller.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/application-offering-change-request.institutions.controller.ts
@@ -1,7 +1,20 @@
-import { Controller, Get, Param, ParseIntPipe, Query } from "@nestjs/common";
-import { ApiTags } from "@nestjs/swagger";
+import {
+  Body,
+  Controller,
+  Get,
+  NotFoundException,
+  Param,
+  ParseIntPipe,
+  Post,
+  Query,
+} from "@nestjs/common";
+import { ApiNotFoundResponse, ApiTags } from "@nestjs/swagger";
 import { AuthorizedParties } from "../../auth/authorized-parties.enum";
-import { AllowAuthorizedParty, HasLocationAccess } from "../../auth/decorators";
+import {
+  AllowAuthorizedParty,
+  HasLocationAccess,
+  UserToken,
+} from "../../auth/decorators";
 import { ClientTypeBaseRoute } from "../../types";
 import { getUserFullName } from "../../utilities";
 import { PaginatedResultsAPIOutDTO } from "../models/pagination.dto";
@@ -13,9 +26,14 @@ import {
   OfferingChangePaginationOptionsAPIInDTO,
   InProgressOfferingChangePaginationOptionsAPIInDTO,
   CompletedOfferingChangePaginationOptionsAPIInDTO,
+  ApplicationOfferingChangesAPIOutDTO,
+  ApplicationOfferingChangeSummaryDetailAPIOutDTO,
+  CreateApplicationOfferingChangeRequestAPIInDTO,
 } from "./models/application-offering-change-request.institutions.dto";
 import { ApplicationOfferingChangeRequestService } from "../../services";
 import { ApplicationOfferingChangeRequestStatus } from "@sims/sims-db";
+import { PrimaryIdentifierAPIOutDTO } from "../models/primary.identifier.dto";
+import { IInstitutionUserToken } from "../../auth";
 
 /**
  * Application offering change request controller for institutions client.
@@ -51,7 +69,7 @@ export class ApplicationOfferingChangeRequestInstitutionsController extends Base
     const applications =
       await this.applicationOfferingChangeRequestService.getEligibleApplications(
         locationId,
-        pagination,
+        { pagination },
       );
     return {
       results: applications.results.map((eachApplication) => {
@@ -68,6 +86,42 @@ export class ApplicationOfferingChangeRequestInstitutionsController extends Base
     };
   }
 
+  /**
+   * Gets an eligible application that can be requested for application
+   * offering change.
+   * @param locationId location id.
+   * @param applicationId application id.
+   * @returns eligible application.
+   */
+  @ApiNotFoundResponse({
+    description: "Application not found or it is not eligible.",
+  })
+  @Get("available/application/:applicationId")
+  async getEligibleApplication(
+    @Param("locationId", ParseIntPipe) locationId: number,
+    @Param("applicationId", ParseIntPipe) applicationId: number,
+  ): Promise<ApplicationOfferingChangeSummaryDetailAPIOutDTO> {
+    const application =
+      await this.applicationOfferingChangeRequestService.getEligibleApplications(
+        locationId,
+        { applicationId },
+      );
+    if (!application) {
+      throw new NotFoundException(
+        "Application not found or it is not eligible.",
+      );
+    }
+    return {
+      applicationNumber: application.applicationNumber,
+      programId: application.currentAssessment.offering.educationProgram.id,
+      offeringId: application.currentAssessment.offering.id,
+      offeringIntensity:
+        application.currentAssessment.offering.offeringIntensity,
+      programYearId: application.programYear.id,
+      fullName: getUserFullName(application.student.user),
+    };
+  }
+
   /**
    * Get all in progress application offering change requests.
    * @param locationId location id.
@@ -95,6 +149,7 @@ export class ApplicationOfferingChangeRequestInstitutionsController extends Base
         const offering =
           eachOfferingChange.application.currentAssessment.offering;
         return {
+          id: eachOfferingChange.id,
           applicationNumber: eachOfferingChange.application.applicationNumber,
           applicationId: eachOfferingChange.application.id,
           studyStartDate: offering.studyStartDate,
@@ -137,6 +192,7 @@ export class ApplicationOfferingChangeRequestInstitutionsController extends Base
         const offering =
           eachOfferingChange.application.currentAssessment.offering;
         return {
+          id: eachOfferingChange.id,
           applicationNumber: eachOfferingChange.application.applicationNumber,
           applicationId: eachOfferingChange.application.id,
           studyStartDate: offering.studyStartDate,
@@ -153,4 +209,70 @@ export class ApplicationOfferingChangeRequestInstitutionsController extends Base
       count: offeringChange.count,
     };
   }
+
+  /**
+   * Gets the Application Offering Change Request details.
+   * @param applicationOfferingChangeRequestId the Application Offering Change Request id.
+   * @param locationId location id.
+   * @returns Application Offering Change Request details.
+   */
+  @Get(":applicationOfferingChangeRequestId")
+  @ApiNotFoundResponse({
+    description: "Not able to find an Application Offering Change Request.",
+  })
+  async getById(
+    @Param("applicationOfferingChangeRequestId", ParseIntPipe)
+    applicationOfferingChangeRequestId: number,
+    @Param("locationId", ParseIntPipe) locationId: number,
+  ): Promise<ApplicationOfferingChangesAPIOutDTO> {
+    const request = await this.applicationOfferingChangeRequestService.getById(
+      applicationOfferingChangeRequestId,
+      { locationId },
+    );
+    if (!request) {
+      throw new NotFoundException(
+        "Not able to find an Application Offering Change Request.",
+      );
+    }
+    return {
+      id: request.id,
+      status: request.applicationOfferingChangeRequestStatus,
+      applicationId: request.application.id,
+      applicationNumber: request.application.applicationNumber,
+      locationName: request.application.location.name,
+      activeOfferingId: request.activeOffering.id,
+      requestedOfferingId: request.requestedOffering.id,
+      requestedOfferingDescription: request.requestedOffering.name,
+      requestedOfferingProgramId: request.requestedOffering.educationProgram.id,
+      requestedOfferingProgramName:
+        request.requestedOffering.educationProgram.name,
+      reason: request.reason,
+      assessedNoteDescription: request.assessedNote?.description,
+      studentFullName: getUserFullName(request.application.student.user),
+    };
+  }
+
+  /**
+   * Creates a new application offering change request.
+   * @param locationId location id.
+   * @param payload information to create the new request.
+   * @returns newly change request id created.
+   */
+  @Post()
+  async createApplicationOfferingChangeRequest(
+    @UserToken() userToken: IInstitutionUserToken,
+    @Param("locationId", ParseIntPipe) locationId: number,
+    @Body() payload: CreateApplicationOfferingChangeRequestAPIInDTO,
+  ): Promise<PrimaryIdentifierAPIOutDTO> {
+    // TODO: Apply the same validations from PIR.
+    const applicationOfferingChangeRequest =
+      await this.applicationOfferingChangeRequestService.createRequest(
+        locationId,
+        payload.applicationId,
+        payload.offeringId,
+        payload.reason,
+        userToken.userId,
+      );
+    return { id: applicationOfferingChangeRequest.id };
+  }
 }
diff --git a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/models/application-offering-change-request.institutions.dto.ts b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/models/application-offering-change-request.institutions.dto.ts
index 44aa1ba8d8..99d89757c4 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/models/application-offering-change-request.institutions.dto.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/application-offering-change-request/models/application-offering-change-request.institutions.dto.ts
@@ -1,5 +1,15 @@
-import { ApplicationOfferingChangeRequestStatus } from "@sims/sims-db";
-import { IsIn, IsOptional } from "class-validator";
+import {
+  ApplicationOfferingChangeRequestStatus,
+  OfferingIntensity,
+  REASON_MAX_LENGTH,
+} from "@sims/sims-db";
+import {
+  IsIn,
+  IsNotEmpty,
+  IsOptional,
+  IsPositive,
+  MaxLength,
+} from "class-validator";
 import { PaginationOptionsAPIInDTO } from "../../models/pagination.dto";
 
 /**
@@ -13,10 +23,23 @@ export class ApplicationOfferingChangeSummaryAPIOutDTO {
   fullName: string;
 }
 
+/**
+ * Applications details for an eligible application to request an offering change.
+ */
+export class ApplicationOfferingChangeSummaryDetailAPIOutDTO {
+  applicationNumber: string;
+  programId: number;
+  offeringId: number;
+  offeringIntensity: OfferingIntensity;
+  programYearId: number;
+  fullName: string;
+}
+
 /**
  * In progress application offering change details.
  */
 export class InProgressApplicationOfferingChangesAPIOutDTO {
+  id: number;
   applicationNumber: string;
   applicationId: number;
   studyStartDate: string;
@@ -29,6 +52,7 @@ export class InProgressApplicationOfferingChangesAPIOutDTO {
  * Completed application offering change details.
  */
 export class CompletedApplicationOfferingChangesAPIOutDTO {
+  id: number;
   applicationNumber: string;
   applicationId: number;
   studyStartDate: string;
@@ -64,3 +88,35 @@ export class InProgressOfferingChangePaginationOptionsAPIInDTO extends Paginatio
   @IsIn(["applicationNumber", "fullName"])
   sortField?: string;
 }
+
+/**
+ * Application Offering Change Request details.
+ */
+export class ApplicationOfferingChangesAPIOutDTO {
+  id: number;
+  status: ApplicationOfferingChangeRequestStatus;
+  applicationId: number;
+  applicationNumber: string;
+  locationName: string;
+  activeOfferingId: number;
+  requestedOfferingId: number;
+  requestedOfferingDescription: string;
+  requestedOfferingProgramId: number;
+  requestedOfferingProgramName: string;
+  reason?: string;
+  assessedNoteDescription?: string;
+  studentFullName: string;
+}
+
+/**
+ * Information provided by the institution to create a new Application Offering Change Request.
+ */
+export class CreateApplicationOfferingChangeRequestAPIInDTO {
+  @IsPositive()
+  applicationId: number;
+  @IsPositive()
+  offeringId: number;
+  @IsNotEmpty()
+  @MaxLength(REASON_MAX_LENGTH)
+  reason: string;
+}
diff --git a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.aest.controller.ts b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.aest.controller.ts
index 87bdeec96b..4aa344cbdf 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.aest.controller.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.aest.controller.ts
@@ -185,7 +185,7 @@ export class EducationProgramOfferingAESTController extends BaseController {
   ): Promise<EducationProgramOfferingAPIOutDTO> {
     const offering = await this.programOfferingService.getOfferingById(
       offeringId,
-      true,
+      { isPrecedingOffering: true },
     );
     if (!offering) {
       throw new NotFoundException("Offering not found.");
diff --git a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.controller.service.ts b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.controller.service.ts
index 05cb4b87cf..c5fa79c72d 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.controller.service.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.controller.service.ts
@@ -27,7 +27,11 @@ import {
   OfferingValidationModel,
   CreateFromValidatedOfferingError,
 } from "../../services";
-import { getOfferingNameAndPeriod, getUserFullName } from "../../utilities";
+import {
+  deliveryMethod,
+  getOfferingNameAndPeriod,
+  getUserFullName,
+} from "../../utilities";
 import { OptionItemAPIOutDTO } from "../models/common.dto";
 import {
   OfferingsPaginationOptionsAPIInDTO,
@@ -37,6 +41,7 @@ import {
   EducationProgramOfferingAPIInDTO,
   EducationProgramOfferingAPIOutDTO,
   EducationProgramOfferingSummaryAPIOutDTO,
+  EducationProgramOfferingSummaryViewAPIOutDTO,
   OfferingBulkInsertValidationResultAPIOutDTO,
 } from "./models/education-program-offering.dto";
 
@@ -45,6 +50,7 @@ export class EducationProgramOfferingControllerService {
   constructor(
     private readonly offeringService: EducationProgramOfferingService,
     private readonly programService: EducationProgramService,
+    private readonly programOfferingService: EducationProgramOfferingService,
   ) {}
 
   /**
@@ -338,4 +344,57 @@ export class EducationProgramOfferingControllerService {
       ),
     };
   }
+
+  /**
+   * Gets the offering simplified details, not including, for instance,
+   * validations, approvals and extensive data.
+   * Useful to have an overview of the offering details, for instance,
+   * when the user needs need to have quick access to data in order to
+   * support operations like confirmation of enrolment or scholastic
+   * standing requests or offering change request.
+   * @param offeringId offering id.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns education program offering.
+   */
+  async getOfferingById(
+    offeringId: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<EducationProgramOfferingSummaryViewAPIOutDTO> {
+    const offering = await this.programOfferingService.getOfferingById(
+      offeringId,
+      { locationId: options?.locationId },
+    );
+    if (!offering) {
+      throw new NotFoundException(
+        "Not able to find the Education Program offering.",
+      );
+    }
+    const program = offering.educationProgram;
+    return {
+      id: offering.id,
+      offeringName: offering.name,
+      studyStartDate: offering.studyStartDate,
+      studyEndDate: offering.studyEndDate,
+      actualTuitionCosts: offering.actualTuitionCosts,
+      programRelatedCosts: offering.programRelatedCosts,
+      mandatoryFees: offering.mandatoryFees,
+      exceptionalExpenses: offering.exceptionalExpenses,
+      offeringDelivered: offering.offeringDelivered,
+      lacksStudyBreaks: offering.lacksStudyBreaks,
+      offeringIntensity: offering.offeringIntensity,
+      studyBreaks: offering.studyBreaks?.studyBreaks,
+      locationName: offering.institutionLocation.name,
+      programId: program.id,
+      programName: program.name,
+      programDescription: program.description,
+      programCredential: program.credentialType,
+      programDelivery: deliveryMethod(
+        program.deliveredOnline,
+        program.deliveredOnSite,
+      ),
+    };
+  }
 }
diff --git a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.institutions.controller.ts b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.institutions.controller.ts
index 2a67901946..b11ac0d243 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.institutions.controller.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/education-program-offering.institutions.controller.ts
@@ -51,6 +51,7 @@ import {
   EducationProgramOfferingAPIOutDTO,
   EducationProgramOfferingBasicDataAPIInDTO,
   EducationProgramOfferingSummaryAPIOutDTO,
+  EducationProgramOfferingSummaryViewAPIOutDTO,
   OfferingValidationResultAPIOutDTO,
 } from "./models/education-program-offering.dto";
 import {
@@ -580,4 +581,30 @@ export class EducationProgramOfferingInstitutionsController extends BaseControll
       throw error;
     }
   }
+
+  /**
+   * Gets the offering simplified details, not including, for instance,
+   * validations, approvals and extensive data.
+   * Useful to have an overview of the offering details, for instance,
+   * when the user needs need to have quick access to data in order to
+   * support operations like confirmation of enrolment or scholastic
+   * standing requests or offering change request.
+   * @param offeringId offering.
+   * @param locationId offering location.
+   * @returns offering details.
+   */
+  @HasLocationAccess("locationId")
+  @ApiNotFoundResponse({
+    description: "Not able to find the Education Program offering.",
+  })
+  @Get("location/:locationId/offering/:offeringId/summary-details")
+  async getOfferingSummaryDetailsById(
+    @Param("offeringId", ParseIntPipe) offeringId: number,
+    @Param("locationId", ParseIntPipe) locationId: number,
+  ): Promise<EducationProgramOfferingSummaryViewAPIOutDTO> {
+    return this.educationProgramOfferingControllerService.getOfferingById(
+      offeringId,
+      { locationId },
+    );
+  }
 }
diff --git a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/models/education-program-offering.dto.ts b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/models/education-program-offering.dto.ts
index 4b27bde1d6..5972536db2 100644
--- a/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/models/education-program-offering.dto.ts
+++ b/sources/packages/backend/apps/api/src/route-controllers/education-program-offering/models/education-program-offering.dto.ts
@@ -130,6 +130,27 @@ export class EducationProgramOfferingAPIOutDTO {
   validationInfos: string[];
 }
 
+export class EducationProgramOfferingSummaryViewAPIOutDTO {
+  id: number;
+  offeringName: string;
+  studyStartDate: string;
+  studyEndDate: string;
+  actualTuitionCosts: number;
+  programRelatedCosts: number;
+  mandatoryFees: number;
+  exceptionalExpenses: number;
+  offeringDelivered: string;
+  lacksStudyBreaks: boolean;
+  offeringIntensity: OfferingIntensity;
+  studyBreaks?: StudyBreakAPIOutDTO[];
+  locationName: string;
+  programId: number;
+  programName: string;
+  programDescription: string;
+  programCredential: string;
+  programDelivery: string;
+}
+
 export class EducationProgramOfferingSummaryAPIOutDTO {
   id: number;
   name: string;
diff --git a/sources/packages/backend/apps/api/src/services/application-offering-change-request/application-offering-change-request.service.ts b/sources/packages/backend/apps/api/src/services/application-offering-change-request/application-offering-change-request.service.ts
index b5892c9ba0..64545ce8d7 100644
--- a/sources/packages/backend/apps/api/src/services/application-offering-change-request/application-offering-change-request.service.ts
+++ b/sources/packages/backend/apps/api/src/services/application-offering-change-request/application-offering-change-request.service.ts
@@ -5,6 +5,8 @@ import {
   ApplicationOfferingChangeRequest,
   ApplicationOfferingChangeRequestStatus,
   ApplicationStatus,
+  EducationProgramOffering,
+  User,
   getUserFullNameLikeSearch,
   transformToApplicationEntitySortField,
 } from "@sims/sims-db";
@@ -20,60 +22,101 @@ export class ApplicationOfferingChangeRequestService {
     private readonly applicationOfferingChangeRequestRepo: Repository<ApplicationOfferingChangeRequest>,
   ) {}
 
+  /**
+   * Gets an eligible application that can be requested for application
+   * offering change.
+   * @param locationId location id.
+   * @param options method options:
+   * - `applicationId` specific eligible application to be retrieved.
+   * @returns eligible application.
+   */
+  async getEligibleApplications(
+    locationId: number,
+    options: {
+      applicationId: number;
+    },
+  ): Promise<Application>;
   /**
    * Gets all eligible applications that can be requested for application
    * offering change.
    * @param locationId location id.
-   * @param paginationOptions options to execute the pagination.
+   * @param options method options:
+   * - `pagination` options to execute the pagination.
    * @returns list of eligible applications that can be requested for
    * application offering change.
    */
   async getEligibleApplications(
     locationId: number,
-    paginationOptions: PaginationOptions,
-  ): Promise<PaginatedResults<Application>> {
+    options: {
+      pagination: PaginationOptions;
+    },
+  ): Promise<PaginatedResults<Application>>;
+  /**
+   * Gets all eligible applications that can be requested for application
+   * offering change.
+   * @param locationId location id.
+   * @param options method options:
+   * - `pagination` options to execute the pagination.
+   * - `applicationId` specific eligible application to be retrieved.
+   * @returns list of eligible applications that can be requested for
+   * application offering change.
+   */
+  async getEligibleApplications(
+    locationId: number,
+    options: {
+      pagination?: PaginationOptions;
+      applicationId?: number;
+    },
+  ): Promise<PaginatedResults<Application> | Application> {
     const applicationQuery = this.applicationRepo
       .createQueryBuilder("application")
       .select([
         "application.applicationNumber",
         "application.id",
+        "programYear.id",
         "currentAssessment.id",
+        "educationProgram.id",
+        "offering.id",
         "offering.studyStartDate",
         "offering.studyEndDate",
+        "offering.offeringIntensity",
         "student.id",
         "user.firstName",
         "user.lastName",
       ])
+      .innerJoin("application.programYear", "programYear")
       .innerJoin("application.currentAssessment", "currentAssessment")
       .innerJoin("currentAssessment.offering", "offering")
+      .innerJoin("offering.educationProgram", "educationProgram")
       .leftJoin(
         "application.applicationOfferingChangeRequest",
         "applicationOfferingChangeRequest",
+        "applicationOfferingChangeRequest.applicationOfferingChangeRequestStatus IN (:...status)",
+        {
+          status: [
+            ApplicationOfferingChangeRequestStatus.InProgressWithSABC,
+            ApplicationOfferingChangeRequestStatus.InProgressWithStudent,
+          ],
+        },
       )
       .innerJoin("application.student", "student")
       .innerJoin("student.user", "user")
-      .where(
-        new Brackets((qb) =>
-          qb
-            .where("applicationOfferingChangeRequest.id IS NULL")
-            .orWhere(
-              "applicationOfferingChangeRequest.applicationOfferingChangeRequestStatus NOT IN (:...status)",
-              {
-                status: [
-                  ApplicationOfferingChangeRequestStatus.InProgressWithSABC,
-                  ApplicationOfferingChangeRequestStatus.InProgressWithStudent,
-                ],
-              },
-            ),
-        ),
-      )
+      .where("applicationOfferingChangeRequest.id IS NULL")
       .andWhere("application.location.id = :locationId", { locationId })
       .andWhere("application.applicationStatus = :applicationStatus", {
         applicationStatus: ApplicationStatus.Completed,
       })
       .andWhere("application.isArchived = false");
 
-    if (paginationOptions.searchCriteria?.trim()) {
+    if (options?.applicationId) {
+      applicationQuery.andWhere("application.id = :applicationId", {
+        applicationId: options.applicationId,
+      });
+      // If searching by application id there is no need for pagination.
+      return applicationQuery.getOne();
+    }
+
+    if (options.pagination.searchCriteria?.trim()) {
       applicationQuery
         .andWhere(
           new Brackets((qb) => {
@@ -84,19 +127,20 @@ export class ApplicationOfferingChangeRequestService {
         )
         .setParameter(
           "searchCriteria",
-          `%${paginationOptions.searchCriteria}%`,
+          `%${options.pagination.searchCriteria}%`,
         );
     }
 
     applicationQuery
       .orderBy(
         transformToApplicationEntitySortField(
-          paginationOptions.sortField,
-          paginationOptions.sortOrder,
+          options.pagination.sortField,
+          options.pagination.sortOrder,
         ),
       )
-      .offset(paginationOptions.page * paginationOptions.pageLimit)
-      .limit(paginationOptions.pageLimit);
+      .offset(options.pagination.page * options.pagination.pageLimit)
+      .limit(options.pagination.pageLimit);
+
     const [result, count] = await applicationQuery.getManyAndCount();
     return {
       results: result,
@@ -172,4 +216,114 @@ export class ApplicationOfferingChangeRequestService {
       count,
     };
   }
+
+  /**
+   * Get the Application Offering Change Request by its id.
+   * @param id the Application Offering Change Request id.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns application offering change request.
+   */
+  async getById(
+    id: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<ApplicationOfferingChangeRequest> {
+    return this.applicationOfferingChangeRequestRepo.findOne({
+      select: {
+        id: true,
+        reason: true,
+        applicationOfferingChangeRequestStatus: true,
+        activeOffering: {
+          id: true,
+        },
+        requestedOffering: {
+          id: true,
+          name: true,
+          educationProgram: {
+            id: true,
+            name: true,
+          },
+        },
+        application: {
+          id: true,
+          applicationNumber: true,
+          location: {
+            id: true,
+            name: true,
+          },
+          student: {
+            id: true,
+            user: {
+              id: true,
+              firstName: true,
+              lastName: true,
+            },
+          },
+        },
+        assessedNote: {
+          id: true,
+          description: true,
+        },
+      },
+      relations: {
+        application: {
+          location: true,
+          student: {
+            user: true,
+          },
+        },
+        activeOffering: true,
+        requestedOffering: {
+          educationProgram: true,
+        },
+        assessedNote: true,
+      },
+      where: {
+        id,
+        application: {
+          location: { id: options?.locationId },
+        },
+      },
+    });
+  }
+
+  /**
+   * Creates a new application offering change request.
+   * @param locationId location id used for authorization.
+   * @param applicationId application that will have the change requested.
+   * @param offeringId offering being requested to be changed.
+   * @param reason reason provided by the institution to have the offering changed.
+   * @param auditUserId used creating the request.
+   * @returns created application offering change request.
+   */
+  async createRequest(
+    locationId: number,
+    applicationId: number,
+    offeringId: number,
+    reason: string,
+    auditUserId: number,
+  ): Promise<ApplicationOfferingChangeRequest> {
+    // Validates if the application is eligible to have an offering request change created.
+    const application = await this.getEligibleApplications(locationId, {
+      applicationId,
+    });
+    if (!application) {
+      throw new Error("Application not found or it is not eligible.");
+    }
+    // TODO: Apply the same validations from PIR.
+    const newRequest = new ApplicationOfferingChangeRequest();
+    newRequest.application = application;
+    newRequest.activeOffering = application.currentAssessment.offering;
+    newRequest.requestedOffering = {
+      id: offeringId,
+    } as EducationProgramOffering;
+    newRequest.creator = { id: auditUserId } as User;
+    newRequest.applicationOfferingChangeRequestStatus =
+      ApplicationOfferingChangeRequestStatus.InProgressWithStudent;
+    newRequest.reason = reason;
+
+    return this.applicationOfferingChangeRequestRepo.save(newRequest);
+  }
 }
diff --git a/sources/packages/backend/apps/api/src/services/education-program-offering/education-program-offering.service.ts b/sources/packages/backend/apps/api/src/services/education-program-offering/education-program-offering.service.ts
index 3f7b3860f5..c80d0b3282 100644
--- a/sources/packages/backend/apps/api/src/services/education-program-offering/education-program-offering.service.ts
+++ b/sources/packages/backend/apps/api/src/services/education-program-offering/education-program-offering.service.ts
@@ -656,12 +656,17 @@ export class EducationProgramOfferingService extends RecordDataModelService<Educ
    * Get offering details by offering id.
    * If isPrecedingOffering is supplied then retrieve the preceding offering details.
    * @param offeringId offering id.
-   * @param isPrecedingOffering when true preceding offering details are retrieved.
+   * @param options options for the query:
+   * - `locationId`: location for authorization.
+   * - `isPrecedingOffering`: when true preceding offering details are retrieved.
    * @returns offering object.
    */
   async getOfferingById(
     offeringId: number,
-    isPrecedingOffering?: boolean,
+    options?: {
+      locationId?: number;
+      isPrecedingOffering?: boolean;
+    },
   ): Promise<EducationProgramOffering> {
     const offeringQuery = this.repo
       .createQueryBuilder("offering")
@@ -694,13 +699,19 @@ export class EducationProgramOfferingService extends RecordDataModelService<Educ
         "institution.id",
         "institution.legalOperatingName",
         "institution.operatingName",
+        "educationProgram.id",
+        "educationProgram.name",
+        "educationProgram.description",
+        "educationProgram.credentialType",
+        "educationProgram.deliveredOnline",
+        "educationProgram.deliveredOnSite",
       ])
       .innerJoin("offering.educationProgram", "educationProgram")
       .innerJoin("offering.institutionLocation", "institutionLocation")
       .innerJoin("institutionLocation.institution", "institution")
       .leftJoin("offering.assessedBy", "assessedBy");
 
-    if (isPrecedingOffering) {
+    if (options?.isPrecedingOffering) {
       offeringQuery
         .where((qb) => {
           const subQuery = qb
@@ -719,6 +730,12 @@ export class EducationProgramOfferingService extends RecordDataModelService<Educ
       });
     }
 
+    if (options?.locationId) {
+      offeringQuery.andWhere("institutionLocation.id = :locationId", {
+        locationId: options.locationId,
+      });
+    }
+
     return offeringQuery.getOne();
   }
 
diff --git a/sources/packages/backend/libs/sims-db/src/entities/application-offering-change-request.model.ts b/sources/packages/backend/libs/sims-db/src/entities/application-offering-change-request.model.ts
index ee7128b608..022fbd886b 100644
--- a/sources/packages/backend/libs/sims-db/src/entities/application-offering-change-request.model.ts
+++ b/sources/packages/backend/libs/sims-db/src/entities/application-offering-change-request.model.ts
@@ -14,7 +14,7 @@ import { User } from "./user.model";
 import { Note } from "./note.model";
 import { ApplicationOfferingChangeRequestStatus } from "./application-offering-change-request-status.type";
 
-const REASON_MAX_LENGTH = 500;
+export const REASON_MAX_LENGTH = 500;
 /**
  * Represents the list of application specific offering change request,
  * which is requested by institution.
diff --git a/sources/packages/web/src/assets/css/base.scss b/sources/packages/web/src/assets/css/base.scss
index 3de9593342..bbd31fecfd 100644
--- a/sources/packages/web/src/assets/css/base.scss
+++ b/sources/packages/web/src/assets/css/base.scss
@@ -397,3 +397,12 @@ strong {
   color: #fff;
   background-color: rgba(51, 51, 51, 0.95);
 }
+
+.brand-gray-text {
+  color: $brand-grey;
+}
+
+ul.no-bullets {
+  list-style-type: none !important;
+  margin: 0;
+}
diff --git a/sources/packages/web/src/assets/css/vuetify.scss b/sources/packages/web/src/assets/css/vuetify.scss
index 267ee2d625..7d633c0294 100644
--- a/sources/packages/web/src/assets/css/vuetify.scss
+++ b/sources/packages/web/src/assets/css/vuetify.scss
@@ -169,3 +169,10 @@
 .v-overlay-container .v-tooltip .v-overlay__content {
   @extend .tooltip-style;
 }
+
+// Changes the background of readonly inputs.
+.v-input--readonly {
+  .v-field {
+    background-color: $read-only-background;
+  }
+}
diff --git a/sources/packages/web/src/components/common/OfferingView.vue b/sources/packages/web/src/components/common/OfferingView.vue
new file mode 100644
index 0000000000..2f551f71f2
--- /dev/null
+++ b/sources/packages/web/src/components/common/OfferingView.vue
@@ -0,0 +1,156 @@
+<template>
+  <content-group-info>
+    <h3 class="category-header-medium primary-color">
+      {{ offeringViewData.programName }}
+    </h3>
+    <p>
+      {{ offeringViewData.programDescription }}
+    </p>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Credential"
+          :propertyValue="offeringViewData.programCredential"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Program delivery"
+          :propertyValue="offeringViewData.programDelivery"
+        />
+      </v-col>
+    </v-row>
+  </content-group-info>
+  <content-group-info>
+    <h3 class="category-header-medium primary-color">
+      {{ offeringViewData.offeringName }}
+    </h3>
+    <v-row>
+      <v-col cols="12">
+        <title-value
+          propertyTitle="Location"
+          :propertyValue="offeringViewData.locationName"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Study intensity"
+          :propertyValue="offeringViewData.offeringIntensity"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Study delivery"
+          :propertyValue="offeringViewData.offeringDelivered"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Study dates"
+          :propertyValue="
+            dateOnlyLongPeriodString(
+              offeringViewData.studyStartDate,
+              offeringViewData.studyEndDate,
+            )
+          "
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value propertyTitle="Study breaks">
+          <template #value>
+            <ul class="no-bullets">
+              <li
+                v-for="studyBreak in offeringViewData.studyBreaks"
+                :key="studyBreak.breakStartDate"
+              >
+                {{
+                  dateOnlyLongPeriodString(
+                    studyBreak.breakStartDate,
+                    studyBreak.breakEndDate,
+                  )
+                }}
+              </li>
+            </ul>
+          </template>
+        </title-value>
+      </v-col>
+    </v-row>
+    <h3 class="category-header-medium primary-color mt-6">Study costs</h3>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Tuition"
+          :propertyValue="formatCurrency(offeringViewData.actualTuitionCosts)"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Program related costs"
+          :propertyValue="formatCurrency(offeringViewData.programRelatedCosts)"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Mandatory fees"
+          :propertyValue="formatCurrency(offeringViewData.mandatoryFees)"
+        />
+      </v-col>
+      <v-col cols="12" sm="6">
+        <title-value
+          propertyTitle="Exceptional expenses"
+          :propertyValue="formatCurrency(offeringViewData.exceptionalExpenses)"
+        />
+      </v-col>
+    </v-row>
+  </content-group-info>
+</template>
+
+<script lang="ts">
+import { useFormatters } from "@/composables";
+import { EducationProgramOfferingService } from "@/services/EducationProgramOfferingService";
+import { EducationProgramOfferingSummaryViewAPIOutDTO } from "@/services/http/dto";
+import { defineComponent, watch, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    offeringId: {
+      type: Number,
+      required: false,
+    },
+    locationId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { dateOnlyLongPeriodString, formatCurrency } = useFormatters();
+    const offeringViewData = ref(
+      {} as EducationProgramOfferingSummaryViewAPIOutDTO,
+    );
+
+    watch(
+      () => [props.offeringId, props.locationId],
+      async () => {
+        if (props.offeringId) {
+          offeringViewData.value =
+            await EducationProgramOfferingService.shared.getOfferingSummaryDetailsById(
+              props.offeringId,
+              {
+                locationId: props.locationId,
+              },
+            );
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    return {
+      offeringViewData,
+      formatCurrency,
+      dateOnlyLongPeriodString,
+    };
+  },
+});
+</script>
diff --git a/sources/packages/web/src/components/generic/BodyHeader.vue b/sources/packages/web/src/components/generic/BodyHeader.vue
index 0ddc70af89..0c38747445 100644
--- a/sources/packages/web/src/components/generic/BodyHeader.vue
+++ b/sources/packages/web/src/components/generic/BodyHeader.vue
@@ -1,7 +1,9 @@
 <template>
   <v-row no-gutters>
-    <v-col>
+    <v-col cols="auto" class="mr-2">
       <h2 class="category-header-large color-blue">{{ fullTitleMessage }}</h2>
+    </v-col>
+    <v-col cols="auto" class="mr-2">
       <slot name="status-chip"></slot>
     </v-col>
     <v-col>
diff --git a/sources/packages/web/src/components/generic/DetailHeader.vue b/sources/packages/web/src/components/generic/DetailHeader.vue
index a803efc42b..370e5cd51c 100644
--- a/sources/packages/web/src/components/generic/DetailHeader.vue
+++ b/sources/packages/web/src/components/generic/DetailHeader.vue
@@ -3,13 +3,13 @@
     v-for="([headerKey, headerValue], index) in Object.entries(headerMap)"
     :key="headerKey"
   >
-    <span class="label-bold-normal">{{ headerKey }} : </span>
+    <span class="label-bold-normal">{{ headerKey }}: </span>
     <span class="label-value-normal"> {{ headerValue }} </span>
-    <!-- TODO: v-divider vertical must be used here once Vuetify 3 vertical divider is working.  -->
     <span
       v-if="index < Object.entries(headerMap).length - 1"
-      class="mx-2 vertical-divider"
-    />
+      class="mx-1 brand-gray-text"
+      >|</span
+    >
   </span>
 </template>
 
diff --git a/sources/packages/web/src/components/generic/HeaderTitleValue.vue b/sources/packages/web/src/components/generic/HeaderTitleValue.vue
index 7dca50b470..6d59426f16 100644
--- a/sources/packages/web/src/components/generic/HeaderTitleValue.vue
+++ b/sources/packages/web/src/components/generic/HeaderTitleValue.vue
@@ -3,7 +3,7 @@ Used when we need to display header title and the value
 -->
 <template>
   <div>
-    <span class="label-bold-normal">{{ title }} : </span>
+    <span class="label-bold-normal">{{ title }}: </span>
     <slot name="value">
       <span class="label-value-normal"> {{ value }} </span>
     </slot>
diff --git a/sources/packages/web/src/components/generic/TitleValue.vue b/sources/packages/web/src/components/generic/TitleValue.vue
index 0c7c818383..c1c22eaca9 100644
--- a/sources/packages/web/src/components/generic/TitleValue.vue
+++ b/sources/packages/web/src/components/generic/TitleValue.vue
@@ -8,7 +8,9 @@ Used when we need to display title and the value inside a container
     </slot>
   </div>
   <div class="mb-2 label-value muted-content">
-    {{ propertyValue }}
+    <slot name="value">
+      {{ propertyValue }}
+    </slot>
   </div>
 </template>
 
@@ -18,7 +20,7 @@ export default defineComponent({
   props: {
     propertyValue: {
       type: String,
-      required: true,
+      required: false,
     },
     propertyTitle: {
       type: String,
diff --git a/sources/packages/web/src/components/institutions/request-a-change/AvailableToChangeSummary.vue b/sources/packages/web/src/components/institutions/request-a-change/AvailableToChangeSummary.vue
index 1858db08fe..a6ea64bba4 100644
--- a/sources/packages/web/src/components/institutions/request-a-change/AvailableToChangeSummary.vue
+++ b/sources/packages/web/src/components/institutions/request-a-change/AvailableToChangeSummary.vue
@@ -31,22 +31,25 @@
             :items="applications?.results"
             :items-length="applications?.count"
             :loading="loading"
+            item-value="applicationId"
             v-model:items-per-page="DEFAULT_PAGE_LIMIT"
             @update:options="paginationAndSortEvent"
           >
             <template #[`item.fullName`]="{ item }">
-              {{ item.columns.fullName }}
+              {{ item.raw.fullName }}
             </template>
             <template #[`item.studyStartDate`]="{ item }">
-              {{ dateOnlyLongString(item.columns.studyStartDate) }}
+              {{ dateOnlyLongString(item.raw.studyStartDate) }}
               -
-              {{ dateOnlyLongString(item.value.studyEndDate) }}
+              {{ dateOnlyLongString(item.raw.studyEndDate) }}
             </template>
             <template #[`item.applicationNumber`]="{ item }">
-              {{ item.columns.applicationNumber }}
+              {{ item.raw.applicationNumber }}
             </template>
-            <template #[`item.applicationId`]>
-              <v-btn color="primary">Request a change</v-btn>
+            <template #[`item.applicationId`]="{ item }">
+              <v-btn color="primary" @click="requestAChange(item.value)"
+                >Request a change</v-btn
+              >
             </template>
           </v-data-table-server>
         </toggle-content>
@@ -68,6 +71,8 @@ import {
 import { useFormatters } from "@/composables";
 import { ApplicationOfferingChangeSummaryAPIOutDTO } from "@/services/http/dto";
 import { ApplicationOfferingChangeRequestService } from "@/services/ApplicationOfferingChangeRequestService";
+import { useRouter } from "vue-router";
+import { InstitutionRoutesConst } from "@/constants/routes/RouteConstants";
 
 export default defineComponent({
   props: {
@@ -77,6 +82,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const router = useRouter();
     const loading = ref(false);
     const searchCriteria = ref("");
     const { dateOnlyLongString } = useFormatters();
@@ -139,6 +145,20 @@ export default defineComponent({
       );
     };
 
+    /**
+     * Navigate to the form to allow the request submission.
+     * @param applicationId application to have the request created.
+     */
+    const requestAChange = (applicationId: any) => {
+      router.push({
+        name: InstitutionRoutesConst.REQUEST_CHANGE_FORM_SUBMIT,
+        params: {
+          locationId: props.locationId,
+          applicationId,
+        },
+      });
+    };
+
     watch(
       () => props.locationId,
       async () => {
@@ -157,6 +177,7 @@ export default defineComponent({
       searchCriteria,
       AvailableToChangeOfferingChangeSummaryHeaders,
       loading,
+      requestAChange,
     };
   },
 });
diff --git a/sources/packages/web/src/components/institutions/request-a-change/CompletedOfferingChangeSummary.vue b/sources/packages/web/src/components/institutions/request-a-change/CompletedOfferingChangeSummary.vue
index ad0c6ed41d..13514cda9a 100644
--- a/sources/packages/web/src/components/institutions/request-a-change/CompletedOfferingChangeSummary.vue
+++ b/sources/packages/web/src/components/institutions/request-a-change/CompletedOfferingChangeSummary.vue
@@ -25,6 +25,7 @@
             :items="applications?.results"
             :items-length="applications?.count"
             :loading="loading"
+            item-value="id"
             :items-per-page="DEFAULT_PAGE_LIMIT"
             @update:options="paginationAndSortEvent"
           >
@@ -32,22 +33,24 @@
               {{ dateOnlyLongString(item.columns.dateCompleted) }}
             </template>
             <template #[`item.fullName`]="{ item }">
-              {{ item.columns.fullName }}
+              {{ item.raw.fullName }}
             </template>
             <template #[`item.studyStartDate`]="{ item }">
-              {{ dateOnlyLongString(item.columns.studyStartDate) }}
+              {{ dateOnlyLongString(item.raw.studyStartDate) }}
               -
-              {{ dateOnlyLongString(item.value.studyEndDate) }}
+              {{ dateOnlyLongString(item.raw.studyEndDate) }}
             </template>
             <template #[`item.applicationNumber`]="{ item }">
               {{ item.columns.applicationNumber }} </template
             ><template #[`item.status`]="{ item }">
               <status-chip-application-offering-change
-                :status="item.columns.status"
+                :status="item.raw.status"
               />
             </template>
-            <template #[`item.applicationId`]>
-              <v-btn color="primary">View</v-btn>
+            <template #[`item.id`]="{ item }">
+              <v-btn color="primary" @click="viewRequestAChange(item.value)"
+                >View</v-btn
+              >
             </template>
           </v-data-table-server>
         </toggle-content>
@@ -70,6 +73,8 @@ import { useFormatters } from "@/composables";
 import { CompletedApplicationOfferingChangesAPIOutDTO } from "@/services/http/dto";
 import { ApplicationOfferingChangeRequestService } from "@/services/ApplicationOfferingChangeRequestService";
 import StatusChipApplicationOfferingChange from "@/components/generic/StatusChipApplicationOfferingChange.vue";
+import { useRouter } from "vue-router";
+import { InstitutionRoutesConst } from "@/constants/routes/RouteConstants";
 
 export default defineComponent({
   components: { StatusChipApplicationOfferingChange },
@@ -80,6 +85,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const router = useRouter();
     const loading = ref(false);
     const searchCriteria = ref("");
     const { dateOnlyLongString } = useFormatters();
@@ -145,6 +151,20 @@ export default defineComponent({
       );
     };
 
+    /**
+     * Navigate to the form to view a previously created request.
+     * @param applicationOfferingChangeRequestId request id.
+     */
+    const viewRequestAChange = (applicationOfferingChangeRequestId: any) => {
+      router.push({
+        name: InstitutionRoutesConst.REQUEST_CHANGE_FORM_VIEW,
+        params: {
+          locationId: props.locationId,
+          applicationOfferingChangeRequestId,
+        },
+      });
+    };
+
     watch(
       () => props.locationId,
       async () => {
@@ -163,6 +183,7 @@ export default defineComponent({
       searchCriteria,
       CompletedOfferingChangeSummaryHeaders,
       loading,
+      viewRequestAChange,
     };
   },
 });
diff --git a/sources/packages/web/src/components/institutions/request-a-change/InProgressOfferingChangeSummary.vue b/sources/packages/web/src/components/institutions/request-a-change/InProgressOfferingChangeSummary.vue
index c501f698a4..52c16f8396 100644
--- a/sources/packages/web/src/components/institutions/request-a-change/InProgressOfferingChangeSummary.vue
+++ b/sources/packages/web/src/components/institutions/request-a-change/InProgressOfferingChangeSummary.vue
@@ -28,26 +28,29 @@
             :items="applications?.results"
             :items-length="applications?.count"
             :loading="loading"
+            item-value="id"
             :items-per-page="DEFAULT_PAGE_LIMIT"
             @update:options="paginationAndSortEvent"
           >
             <template #[`item.fullName`]="{ item }">
-              {{ item.columns.fullName }}
+              {{ item.raw.fullName }}
             </template>
             <template #[`item.studyStartDate`]="{ item }">
-              {{ dateOnlyLongString(item.columns.studyStartDate) }}
+              {{ dateOnlyLongString(item.raw.studyStartDate) }}
               -
-              {{ dateOnlyLongString(item.value.studyEndDate) }}
+              {{ dateOnlyLongString(item.raw.studyEndDate) }}
             </template>
             <template #[`item.applicationNumber`]="{ item }">
-              {{ item.columns.applicationNumber }} </template
+              {{ item.raw.applicationNumber }} </template
             ><template #[`item.status`]="{ item }">
               <status-chip-application-offering-change
-                :status="item.columns.status"
+                :status="item.raw.status"
               />
             </template>
-            <template #[`item.applicationId`]>
-              <v-btn color="primary">View</v-btn>
+            <template #[`item.id`]="{ item }">
+              <v-btn color="primary" @click="viewRequestAChange(item.value)"
+                >View</v-btn
+              >
             </template>
           </v-data-table-server>
         </toggle-content>
@@ -70,6 +73,8 @@ import { useFormatters } from "@/composables";
 import { InProgressApplicationOfferingChangesAPIOutDTO } from "@/services/http/dto";
 import { ApplicationOfferingChangeRequestService } from "@/services/ApplicationOfferingChangeRequestService";
 import StatusChipApplicationOfferingChange from "@/components/generic/StatusChipApplicationOfferingChange.vue";
+import { useRouter } from "vue-router";
+import { InstitutionRoutesConst } from "@/constants/routes/RouteConstants";
 
 export default defineComponent({
   components: { StatusChipApplicationOfferingChange },
@@ -80,6 +85,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const router = useRouter();
     const loading = ref(false);
     const searchCriteria = ref("");
     const { dateOnlyLongString } = useFormatters();
@@ -145,6 +151,20 @@ export default defineComponent({
       );
     };
 
+    /**
+     * Navigate to the form to view a previously created request.
+     * @param applicationOfferingChangeRequestId request id.
+     */
+    const viewRequestAChange = (id: any) => {
+      router.push({
+        name: InstitutionRoutesConst.REQUEST_CHANGE_FORM_VIEW,
+        params: {
+          locationId: props.locationId,
+          applicationOfferingChangeRequestId: id,
+        },
+      });
+    };
+
     watch(
       () => props.locationId,
       async () => {
@@ -163,6 +183,7 @@ export default defineComponent({
       searchCriteria,
       InProgressOfferingChangeSummaryHeaders,
       loading,
+      viewRequestAChange,
     };
   },
 });
diff --git a/sources/packages/web/src/components/institutions/request-a-change/RequestAChangeForm.vue b/sources/packages/web/src/components/institutions/request-a-change/RequestAChangeForm.vue
new file mode 100644
index 0000000000..2f9219fbbf
--- /dev/null
+++ b/sources/packages/web/src/components/institutions/request-a-change/RequestAChangeForm.vue
@@ -0,0 +1,84 @@
+<template>
+  <body-header-container>
+    <template #header>
+      <body-header :title="studentName">
+        <template #subtitle
+          ><detail-header :headerMap="headerDetailsData"
+        /></template>
+        <template #status-chip>
+          <status-chip-application-offering-change
+            v-if="status"
+            :status="status"
+          />
+        </template>
+      </body-header>
+    </template>
+    <hr class="horizontal-divider" />
+    <h2 class="category-header-large primary-color">Application Details</h2>
+    <p>Review the active program and offering details below.</p>
+    <offering-view :offeringId="offeringId" :locationId="locationId" />
+    <hr class="horizontal-divider" />
+    <h2 class="category-header-large primary-color">Request details</h2>
+    <p>
+      Select a new program and offering below. This request will be shown to the
+      student to allow or decline the change. If the change is allowed, the
+      request will go to StudentAid BC for a final decision.
+    </p>
+    <!-- Submit or view content. -->
+    <slot></slot>
+  </body-header-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, PropType } from "vue";
+import DetailHeader from "@/components/generic/DetailHeader.vue";
+import OfferingView from "@/components/common/OfferingView.vue";
+import { useInstitutionState } from "@/composables";
+import StatusChipApplicationOfferingChange from "@/components/generic/StatusChipApplicationOfferingChange.vue";
+import { ApplicationOfferingChangeRequestStatus } from "@/types";
+
+export default defineComponent({
+  components: {
+    DetailHeader,
+    OfferingView,
+    StatusChipApplicationOfferingChange,
+  },
+  props: {
+    locationId: {
+      type: Number,
+      required: true,
+    },
+    offeringId: {
+      type: Number,
+      required: false,
+    },
+    studentName: {
+      type: String,
+      required: false,
+    },
+    applicationNumber: {
+      type: String,
+      required: false,
+    },
+    status: {
+      type: String as PropType<ApplicationOfferingChangeRequestStatus>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const activeOfferingId = ref<number>();
+    const { getLocationName } = useInstitutionState();
+    const headerDetailsData = computed(
+      () =>
+        ({
+          "Application #": props.applicationNumber ?? "",
+          Location: getLocationName(props.locationId),
+        } as Record<string, string>),
+    );
+    return {
+      headerDetailsData,
+      activeOfferingId,
+    };
+  },
+});
+</script>
diff --git a/sources/packages/web/src/composables/useFormatters.ts b/sources/packages/web/src/composables/useFormatters.ts
index 72702d5dd5..4ae4cee29b 100644
--- a/sources/packages/web/src/composables/useFormatters.ts
+++ b/sources/packages/web/src/composables/useFormatters.ts
@@ -26,6 +26,7 @@ export function useFormatters() {
   const dateOnlyToLocalDateTimeString = (date: Date | string): string => {
     return dayjs(date).format();
   };
+
   /**
    * Get the date only part of a date/time or string.
    * @param date date/time or string to have the date extracted.
@@ -34,6 +35,7 @@ export function useFormatters() {
   const getISODateOnlyString = (date: Date | string): string => {
     return dayjs(date).format(DATE_ONLY_ISO_FORMAT);
   };
+
   /**
    * Convert a string or date to a string format like "Aug 05 2021".
    * @param date string or date to be converted.
@@ -54,6 +56,32 @@ export function useFormatters() {
     return "";
   };
 
+  /**
+   * Converts a start and end dates to a string format like "Aug 05 2021 - Dec 12 2021".
+   * @param startDate start period date to be converted.
+   * @param endDate end period date to be converted.
+   * @param format specific date string format expected. If the format
+   * is not the expected it will convert the date as as 'Invalid Date'.
+   * @param strict requires that the format and input match exactly,
+   * including delimiters.
+   * @returns string representation (e.g. Aug 05 2021 - Dec 12 2021).
+   */
+  const dateOnlyLongPeriodString = (
+    startDate?: string | Date,
+    endDate?: string | Date,
+    format?: string,
+    strict?: boolean,
+  ): string => {
+    if (startDate && endDate) {
+      return `${dateOnlyLongString(
+        startDate,
+        format,
+        strict,
+      )} - ${dateOnlyLongString(endDate, format, strict)}`;
+    }
+    return DEFAULT_EMPTY_VALUE;
+  };
+
   /**
    * Extract time from any given date in HH:mm format.
    * @param date
@@ -278,6 +306,7 @@ export function useFormatters() {
 
   return {
     dateOnlyLongString,
+    dateOnlyLongPeriodString,
     dateOnlyToLocalDateTimeString,
     getDatesDiff,
     getFormattedAddress,
diff --git a/sources/packages/web/src/composables/useRules.ts b/sources/packages/web/src/composables/useRules.ts
index 046ee99367..f5593f1139 100644
--- a/sources/packages/web/src/composables/useRules.ts
+++ b/sources/packages/web/src/composables/useRules.ts
@@ -12,13 +12,23 @@ export function useRules() {
   };
 
   const checkNotesLengthRule = (notes: string) => {
-    if (notes) {
+    return checkLengthRule(notes, NOTES_MAX_CHARACTERS);
+  };
+
+  const checkLengthRule = (
+    value: string,
+    maxLength: number,
+    fieldName?: string,
+  ) => {
+    if (value) {
       return (
-        checkMaxCharacters(notes, NOTES_MAX_CHARACTERS) ||
-        `Max ${NOTES_MAX_CHARACTERS} characters.`
+        checkMaxCharacters(value, maxLength) || `Max ${maxLength} characters.`
       );
     }
-    return "Note is required.";
+    if (fieldName) {
+      return `${fieldName} is required.`;
+    }
+    return "Required field.";
   };
 
   const checkStringDateFormatRule = (dateString: string) => {
@@ -92,6 +102,7 @@ export function useRules() {
     checkStringDateFormatRule,
     checkNullOrEmptyRule,
     checkOnlyDigitsRule,
+    checkLengthRule,
     numberRangeRule,
   };
 }
diff --git a/sources/packages/web/src/constants/routes/RouteConstants.ts b/sources/packages/web/src/constants/routes/RouteConstants.ts
index 0474640635..9529f5f4c1 100644
--- a/sources/packages/web/src/constants/routes/RouteConstants.ts
+++ b/sources/packages/web/src/constants/routes/RouteConstants.ts
@@ -83,6 +83,8 @@ export const InstitutionRoutesConst = {
   ASSESSMENT_AWARD_VIEW: Symbol(),
   NOTICE_OF_ASSESSMENT_VIEW: Symbol(),
   REQUEST_CHANGE: Symbol(),
+  REQUEST_CHANGE_FORM_SUBMIT: Symbol(),
+  REQUEST_CHANGE_FORM_VIEW: Symbol(),
 };
 
 /**
diff --git a/sources/packages/web/src/router/InstitutionRoutes.ts b/sources/packages/web/src/router/InstitutionRoutes.ts
index 65e4da6969..c78f24d90f 100644
--- a/sources/packages/web/src/router/InstitutionRoutes.ts
+++ b/sources/packages/web/src/router/InstitutionRoutes.ts
@@ -53,6 +53,8 @@ import StudentAppealRequest from "@/views/institution/student/applicationDetails
 import AssessmentAward from "@/views/institution/student/applicationDetails/AssessmentAward.vue";
 import NoticeOfAssessment from "@/views/institution/student/applicationDetails/NoticeOfAssessment.vue";
 import RequestApplicationChange from "@/views/institution/locations/request-a-change/RequestAChange.vue";
+import RequestApplicationChangeFormSubmit from "@/views/institution/locations/request-a-change/RequestAChangeFormSubmit.vue";
+import RequestApplicationChangeFormView from "@/views/institution/locations/request-a-change/RequestAChangeFormView.vue";
 
 export const institutionRoutes: Array<RouteRecordRaw> = [
   {
@@ -185,6 +187,48 @@ export const institutionRoutes: Array<RouteRecordRaw> = [
           ],
         },
       },
+      {
+        path: AppRoutes.RequestApplicationOfferingChangeSubmit,
+        name: InstitutionRoutesConst.REQUEST_CHANGE_FORM_SUBMIT,
+        components: {
+          default: RequestApplicationChangeFormSubmit,
+        },
+        props: {
+          default: (route: RouteLocationNormalized) => ({
+            locationId: parseInt(route.params.locationId as string),
+            applicationId: parseInt(route.params.applicationId as string),
+          }),
+        },
+        meta: {
+          clientType: ClientIdType.Institution,
+          institutionUserTypes: [
+            InstitutionUserTypes.admin,
+            InstitutionUserTypes.user,
+          ],
+        },
+      },
+      {
+        path: AppRoutes.RequestApplicationOfferingChangeView,
+        name: InstitutionRoutesConst.REQUEST_CHANGE_FORM_VIEW,
+        components: {
+          default: RequestApplicationChangeFormView,
+        },
+        props: {
+          default: (route: RouteLocationNormalized) => ({
+            locationId: parseInt(route.params.locationId as string),
+            applicationOfferingChangeRequestId: parseInt(
+              route.params.applicationOfferingChangeRequestId as string,
+            ),
+          }),
+        },
+        meta: {
+          clientType: ClientIdType.Institution,
+          institutionUserTypes: [
+            InstitutionUserTypes.admin,
+            InstitutionUserTypes.user,
+          ],
+        },
+      },
       {
         path: AppRoutes.ActiveApplicationEdit,
         name: InstitutionRoutesConst.ACTIVE_APPLICATION_EDIT,
diff --git a/sources/packages/web/src/services/ApplicationOfferingChangeRequestService.ts b/sources/packages/web/src/services/ApplicationOfferingChangeRequestService.ts
index 3fa0884afd..a938970a45 100644
--- a/sources/packages/web/src/services/ApplicationOfferingChangeRequestService.ts
+++ b/sources/packages/web/src/services/ApplicationOfferingChangeRequestService.ts
@@ -5,6 +5,9 @@ import {
   ApplicationOfferingChangeSummaryAPIOutDTO,
   CompletedApplicationOfferingChangesAPIOutDTO,
   InProgressApplicationOfferingChangesAPIOutDTO,
+  ApplicationOfferingChangesAPIOutDTO,
+  ApplicationOfferingChangeSummaryDetailAPIOutDTO,
+  CreateApplicationOfferingChangeRequestAPIInDTO,
 } from "@/services/http/dto";
 
 export class ApplicationOfferingChangeRequestService {
@@ -35,6 +38,23 @@ export class ApplicationOfferingChangeRequestService {
     );
   }
 
+  /**
+   * Gets an eligible application that can be requested for application
+   * offering change.
+   * @param locationId location id.
+   * @param applicationId application id.
+   * @returns eligible application.
+   */
+  async getEligibleApplication(
+    locationId: number,
+    applicationId: number,
+  ): Promise<ApplicationOfferingChangeSummaryDetailAPIOutDTO> {
+    return ApiClient.ApplicationOfferingChangeRequestApi.getEligibleApplication(
+      locationId,
+      applicationId,
+    );
+  }
+
   /**
    * Gets all in progress application offering request changes.
    * @param locationId location id.
@@ -70,4 +90,38 @@ export class ApplicationOfferingChangeRequestService {
       paginationOptions,
     );
   }
+
+  /**
+   * Gets the Application Offering Change Request details.
+   * @param applicationOfferingChangeRequestId the Application Offering Change Request id.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns Application Offering Change Request details.
+   */
+  async getById(
+    applicationOfferingChangeRequestId: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<ApplicationOfferingChangesAPIOutDTO> {
+    return ApiClient.ApplicationOfferingChangeRequestApi.getById(
+      applicationOfferingChangeRequestId,
+      { locationId: options?.locationId },
+    );
+  }
+
+  /**
+   * Creates a new application offering change request.
+   * @param locationId location id.
+   * @param payload information to create the new request.
+   */
+  async createApplicationOfferingChangeRequest(
+    locationId: number,
+    payload: CreateApplicationOfferingChangeRequestAPIInDTO,
+  ): Promise<void> {
+    await ApiClient.ApplicationOfferingChangeRequestApi.createApplicationOfferingChangeRequest(
+      locationId,
+      payload,
+    );
+  }
 }
diff --git a/sources/packages/web/src/services/EducationProgramOfferingService.ts b/sources/packages/web/src/services/EducationProgramOfferingService.ts
index 96b0cef5e6..b98ae4bc3a 100644
--- a/sources/packages/web/src/services/EducationProgramOfferingService.ts
+++ b/sources/packages/web/src/services/EducationProgramOfferingService.ts
@@ -19,6 +19,7 @@ import {
   OfferingBulkInsertValidationResultAPIOutDTO,
   OfferingValidationResultAPIOutDTO,
   EducationProgramOfferingBasicDataAPIInDTO,
+  EducationProgramOfferingSummaryViewAPIOutDTO,
 } from "@/services/http/dto";
 import {
   OFFERING_CREATION_CRITICAL_ERROR,
@@ -368,4 +369,28 @@ export class EducationProgramOfferingService {
       ),
     };
   }
+
+  /**
+   * Gets the offering simplified details, not including, for instance,
+   * validations, approvals and extensive data.
+   * Useful to have an overview of the offering details, for instance,
+   * when the user needs need to have quick access to data in order to
+   * support operations like confirmation of enrolment or scholastic
+   * standing requests or offering change request.
+   * @param offeringId offering.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns offering details.
+   */
+  async getOfferingSummaryDetailsById(
+    offeringId: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<EducationProgramOfferingSummaryViewAPIOutDTO> {
+    return ApiClient.EducationProgramOffering.getOfferingSummaryDetailsById(
+      offeringId,
+      options,
+    );
+  }
 }
diff --git a/sources/packages/web/src/services/http/ApplicationOfferingChangeRequestApi.ts b/sources/packages/web/src/services/http/ApplicationOfferingChangeRequestApi.ts
index e7c5f8f86b..8acb00d76d 100644
--- a/sources/packages/web/src/services/http/ApplicationOfferingChangeRequestApi.ts
+++ b/sources/packages/web/src/services/http/ApplicationOfferingChangeRequestApi.ts
@@ -5,6 +5,9 @@ import {
   ApplicationOfferingChangeSummaryAPIOutDTO,
   CompletedApplicationOfferingChangesAPIOutDTO,
   InProgressApplicationOfferingChangesAPIOutDTO,
+  ApplicationOfferingChangesAPIOutDTO,
+  ApplicationOfferingChangeSummaryDetailAPIOutDTO,
+  CreateApplicationOfferingChangeRequestAPIInDTO,
 } from "@/services/http/dto";
 import { getPaginationQueryString } from "@/helpers";
 
@@ -30,6 +33,23 @@ export class ApplicationOfferingChangeRequestApi extends HttpBaseClient {
     >(this.addClientRoot(url));
   }
 
+  /**
+   * Gets an eligible application that can be requested for application
+   * offering change.
+   * @param locationId location id.
+   * @param applicationId application id.
+   * @returns eligible application.
+   */
+  async getEligibleApplication(
+    locationId: number,
+    applicationId: number,
+  ): Promise<ApplicationOfferingChangeSummaryDetailAPIOutDTO> {
+    const url = `location/${locationId}/application-offering-change-request/available/application/${applicationId}`;
+    return this.getCall<ApplicationOfferingChangeSummaryDetailAPIOutDTO>(
+      this.addClientRoot(url),
+    );
+  }
+
   /**
    * Gets all in progress application offering request changes.
    * @param locationId location id.
@@ -67,4 +87,38 @@ export class ApplicationOfferingChangeRequestApi extends HttpBaseClient {
       PaginatedResultsAPIOutDTO<CompletedApplicationOfferingChangesAPIOutDTO>
     >(this.addClientRoot(url));
   }
+
+  /**
+   * Gets the Application Offering Change Request details.
+   * @param applicationOfferingChangeRequestId the Application Offering Change Request id.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns Application Offering Change Request details.
+   */
+  async getById(
+    applicationOfferingChangeRequestId: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<ApplicationOfferingChangesAPIOutDTO> {
+    const url = options?.locationId
+      ? `location/${options.locationId}/application-offering-change-request/${applicationOfferingChangeRequestId}`
+      : `application-offering-change-request/${applicationOfferingChangeRequestId}`;
+    return this.getCall<ApplicationOfferingChangesAPIOutDTO>(
+      this.addClientRoot(url),
+    );
+  }
+
+  /**
+   * Creates a new application offering change request.
+   * @param locationId location id.
+   * @param payload information to create the new request.
+   */
+  async createApplicationOfferingChangeRequest(
+    locationId: number,
+    payload: CreateApplicationOfferingChangeRequestAPIInDTO,
+  ): Promise<void> {
+    const url = `location/${locationId}/application-offering-change-request`;
+    await this.postCall(this.addClientRoot(url), payload);
+  }
 }
diff --git a/sources/packages/web/src/services/http/EducationProgramOfferingApi.ts b/sources/packages/web/src/services/http/EducationProgramOfferingApi.ts
index 4586cc0e45..3702998b11 100644
--- a/sources/packages/web/src/services/http/EducationProgramOfferingApi.ts
+++ b/sources/packages/web/src/services/http/EducationProgramOfferingApi.ts
@@ -14,6 +14,7 @@ import {
   EducationProgramOfferingAPIOutDTO,
   OfferingValidationResultAPIOutDTO,
   EducationProgramOfferingBasicDataAPIInDTO,
+  EducationProgramOfferingSummaryViewAPIOutDTO,
 } from "@/services/http/dto";
 import { AxiosRequestConfig } from "axios";
 import ApiClient from "./ApiClient";
@@ -311,4 +312,30 @@ export class EducationProgramOfferingApi extends HttpBaseClient {
       requestConfig,
     );
   }
+
+  /**
+   * Gets the offering simplified details, not including, for instance,
+   * validations, approvals and extensive data.
+   * Useful to have an overview of the offering details, for instance,
+   * when the user needs need to have quick access to data in order to
+   * support operations like confirmation of enrolment or scholastic
+   * standing requests or offering change request.
+   * @param offeringId offering.
+   * @param options method options:
+   * - `locationId`: location for authorization.
+   * @returns offering details.
+   */
+  async getOfferingSummaryDetailsById(
+    offeringId: number,
+    options?: {
+      locationId?: number;
+    },
+  ): Promise<EducationProgramOfferingSummaryViewAPIOutDTO> {
+    const url = options?.locationId
+      ? `education-program-offering/location/${options.locationId}/offering/${offeringId}/summary-details`
+      : `education-program-offering/offering/${offeringId}/summary-details`;
+    return this.getCall<EducationProgramOfferingSummaryViewAPIOutDTO>(
+      this.addClientRoot(url),
+    );
+  }
 }
diff --git a/sources/packages/web/src/services/http/dto/ApplicationOfferingChangeRequest.dto.ts b/sources/packages/web/src/services/http/dto/ApplicationOfferingChangeRequest.dto.ts
index d79a85eac1..0992180d43 100644
--- a/sources/packages/web/src/services/http/dto/ApplicationOfferingChangeRequest.dto.ts
+++ b/sources/packages/web/src/services/http/dto/ApplicationOfferingChangeRequest.dto.ts
@@ -1,4 +1,7 @@
-import { ApplicationOfferingChangeRequestStatus } from "@/types";
+import {
+  ApplicationOfferingChangeRequestStatus,
+  OfferingIntensity,
+} from "@/types";
 
 /**
  * Eligible applications offering change list details.
@@ -11,10 +14,23 @@ export interface ApplicationOfferingChangeSummaryAPIOutDTO {
   fullName: string;
 }
 
+/**
+ * Applications details for an eligible application to request an offering change.
+ */
+export interface ApplicationOfferingChangeSummaryDetailAPIOutDTO {
+  applicationNumber: string;
+  programId: number;
+  offeringId: number;
+  offeringIntensity: OfferingIntensity;
+  programYearId: number;
+  fullName: string;
+}
+
 /**
  * In progress application offering change details.
  */
 export interface InProgressApplicationOfferingChangesAPIOutDTO {
+  id: number;
   applicationNumber: string;
   applicationId: number;
   studyStartDate: string;
@@ -27,6 +43,7 @@ export interface InProgressApplicationOfferingChangesAPIOutDTO {
  * Completed application offering change details.
  */
 export interface CompletedApplicationOfferingChangesAPIOutDTO {
+  id: number;
   applicationNumber: string;
   applicationId: number;
   studyStartDate: string;
@@ -35,3 +52,31 @@ export interface CompletedApplicationOfferingChangesAPIOutDTO {
   status: ApplicationOfferingChangeRequestStatus;
   dateCompleted: Date;
 }
+
+/**
+ * Application Offering Change Request details.
+ */
+export interface ApplicationOfferingChangesAPIOutDTO {
+  id: number;
+  status: ApplicationOfferingChangeRequestStatus;
+  applicationId: number;
+  applicationNumber: string;
+  locationName: string;
+  activeOfferingId: number;
+  requestedOfferingId: number;
+  requestedOfferingDescription: string;
+  requestedOfferingProgramId: number;
+  requestedOfferingProgramName: string;
+  reason?: string;
+  assessedNoteDescription?: string;
+  studentFullName: string;
+}
+
+/**
+ * Information provided by the institution to create a new Application Offering Change Request.
+ */
+export interface CreateApplicationOfferingChangeRequestAPIInDTO {
+  applicationId: number;
+  offeringId: number;
+  reason: string;
+}
diff --git a/sources/packages/web/src/services/http/dto/EducationProgramOffering.dto.ts b/sources/packages/web/src/services/http/dto/EducationProgramOffering.dto.ts
index 1e195ad4a7..335e11de30 100644
--- a/sources/packages/web/src/services/http/dto/EducationProgramOffering.dto.ts
+++ b/sources/packages/web/src/services/http/dto/EducationProgramOffering.dto.ts
@@ -213,3 +213,24 @@ export class EducationProgramOfferingBasicDataAPIInDTO {
   @Expose()
   offeringName: string;
 }
+
+export interface EducationProgramOfferingSummaryViewAPIOutDTO {
+  id: number;
+  offeringName: string;
+  studyStartDate: string;
+  studyEndDate: string;
+  actualTuitionCosts: number;
+  programRelatedCosts: number;
+  mandatoryFees: number;
+  exceptionalExpenses: number;
+  offeringDelivered: string;
+  lacksStudyBreaks: boolean;
+  offeringIntensity: OfferingIntensity;
+  studyBreaks?: StudyBreakAPIOutDTO[];
+  locationName: string;
+  programId: number;
+  programName: string;
+  programDescription: string;
+  programCredential: string;
+  programDelivery: string;
+}
diff --git a/sources/packages/web/src/types/AppRoutes.ts b/sources/packages/web/src/types/AppRoutes.ts
index 1b4802c283..9698ae4314 100644
--- a/sources/packages/web/src/types/AppRoutes.ts
+++ b/sources/packages/web/src/types/AppRoutes.ts
@@ -37,6 +37,8 @@ export enum AppRoutes {
   LocationUsers = "location-users/",
   ActiveApplicationsSummary = "active-applications/location/:locationId/summary",
   RequestApplicationOfferingChange = "location/:locationId/application-offering-change",
+  RequestApplicationOfferingChangeSubmit = "location/:locationId/application/:applicationId/application-offering-change/submit",
+  RequestApplicationOfferingChangeView = "location/:locationId/application-offering-change/:applicationOfferingChangeRequestId",
   ActiveApplicationEdit = "active-applications/location/:locationId/application/:applicationId",
   LocationProgramInfoRequestSummary = "program-info-request/location/:locationId/summary",
   LocationCOESummary = "confirmation-of-enrollment/location/:locationId/summary",
diff --git a/sources/packages/web/src/types/contracts/DataTableContract.ts b/sources/packages/web/src/types/contracts/DataTableContract.ts
index c8c24d90f6..9a90a6a10b 100644
--- a/sources/packages/web/src/types/contracts/DataTableContract.ts
+++ b/sources/packages/web/src/types/contracts/DataTableContract.ts
@@ -206,7 +206,7 @@ export const InProgressOfferingChangeSummaryHeaders = [
   {
     title: "Action",
     sortable: false,
-    key: "applicationId",
+    key: "id",
   },
 ];
 
@@ -240,6 +240,6 @@ export const CompletedOfferingChangeSummaryHeaders = [
   {
     title: "Action",
     sortable: false,
-    key: "applicationId",
+    key: "id",
   },
 ];
diff --git a/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormSubmit.vue b/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormSubmit.vue
new file mode 100644
index 0000000000..daf70f1eba
--- /dev/null
+++ b/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormSubmit.vue
@@ -0,0 +1,210 @@
+<template>
+  <full-page-container>
+    <template #header>
+      <header-navigator
+        title="Request an Application Change"
+        sub-title="Request a Change"
+        :routeLocation="goBackRouteParams"
+      />
+    </template>
+    <request-a-change-form
+      :locationId="locationId"
+      :offeringId="activeOfferingId"
+      :studentName="studentName"
+      :applicationNumber="applicationNumber"
+    >
+      <v-form ref="requestAChangeForm">
+        <v-autocomplete
+          :readonly="processing"
+          hide-details="auto"
+          density="compact"
+          variant="outlined"
+          label="Program"
+          :items="programs"
+          item-title="description"
+          item-value="id"
+          class="mt-4"
+          v-model="selectedProgram"
+          @update:modelValue="selectedProgramChanged"
+          :rules="[(v: string) => checkNullOrEmptyRule(v, 'Program')]"
+        ></v-autocomplete>
+        <v-autocomplete
+          :readonly="processing"
+          hide-details="auto"
+          density="compact"
+          variant="outlined"
+          label="Offering"
+          class="mt-4"
+          :items="offerings"
+          item-title="description"
+          item-value="id"
+          v-model="selectedOffering"
+          :rules="[(v:string) => checkNullOrEmptyRule(v, 'Offering')]"
+        ></v-autocomplete>
+        <v-textarea
+          :readonly="processing"
+          label="Reason for change"
+          variant="outlined"
+          hide-details="auto"
+          class="mt-4"
+          v-model="reasonForChange"
+          :rules="[(v:string) => checkLengthRule(v, 500, 'Reason for change')]"
+        />
+        <p class="mt-1 brand-gray-text">
+          This note is visible to students and StudentAid BC staff.
+        </p>
+      </v-form>
+      <footer-buttons
+        :processing="processing"
+        primaryLabel="Submit requested change"
+        @primaryClick="submit"
+        @secondaryClick="cancel"
+      />
+    </request-a-change-form>
+  </full-page-container>
+</template>
+
+<script lang="ts">
+import { InstitutionRoutesConst } from "@/constants/routes/RouteConstants";
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { RouteLocationRaw, useRouter } from "vue-router";
+import RequestAChangeForm from "@/components/institutions/request-a-change/RequestAChangeForm.vue";
+import {
+  ApplicationOfferingChangeSummaryDetailAPIOutDTO,
+  ApplicationOfferingChangesAPIOutDTO,
+  OptionItemAPIOutDTO,
+} from "@/services/http/dto";
+import { ApplicationOfferingChangeRequestService } from "@/services/ApplicationOfferingChangeRequestService";
+import { VForm } from "@/types";
+import { EducationProgramService } from "@/services/EducationProgramService";
+import { EducationProgramOfferingService } from "@/services/EducationProgramOfferingService";
+import { useRules, useSnackBar } from "@/composables";
+
+export default defineComponent({
+  components: { RequestAChangeForm },
+  props: {
+    locationId: {
+      type: Number,
+      required: true,
+    },
+    applicationId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter();
+    const snackBar = useSnackBar();
+    const { checkNullOrEmptyRule, checkLengthRule } = useRules();
+    const processing = ref(false);
+    // Readonly data.
+    let application: ApplicationOfferingChangeSummaryDetailAPIOutDTO;
+    const studentName = ref("");
+    const applicationNumber = ref("");
+    const reasonForChange = ref("");
+    const requestChangeData = ref({} as ApplicationOfferingChangesAPIOutDTO);
+    const activeOfferingId = ref<number>();
+    // Vue form data.
+    const requestAChangeForm = ref({} as VForm);
+    // Programs dropdown.
+    const programs = ref([] as OptionItemAPIOutDTO[]);
+    const selectedProgram = ref<number>();
+    // Offerings dropdown.
+    const offerings = ref([] as OptionItemAPIOutDTO[]);
+    const selectedOffering = ref<number>();
+
+    onMounted(async () => {
+      application =
+        await ApplicationOfferingChangeRequestService.shared.getEligibleApplication(
+          props.locationId,
+          props.applicationId,
+        );
+      studentName.value = application.fullName;
+      applicationNumber.value = application.applicationNumber;
+      activeOfferingId.value = application.offeringId;
+      programs.value =
+        await EducationProgramService.shared.getProgramsListForInstitutions();
+      selectedProgram.value = application.programId;
+      await selectedProgramChanged();
+    });
+
+    const selectedProgramChanged = async () => {
+      if (selectedProgram.value) {
+        offerings.value =
+          await EducationProgramOfferingService.shared.getProgramOfferingsOptionsList(
+            props.locationId,
+            +selectedProgram.value,
+            application.programYearId,
+            application.offeringIntensity,
+            true,
+          );
+        if (offerings.value.length) {
+          return;
+        }
+      }
+      // Reset offering models.
+      offerings.value = [];
+      selectedOffering.value = undefined;
+    };
+
+    const goBackRouteParams = computed(
+      () =>
+        ({
+          name: InstitutionRoutesConst.REQUEST_CHANGE,
+          params: {
+            locationId: props.locationId,
+          },
+        } as RouteLocationRaw),
+    );
+
+    const cancel = () => {
+      requestAChangeForm.value.reset();
+      router.push(goBackRouteParams.value);
+    };
+
+    const submit = async () => {
+      const validationResult = await requestAChangeForm.value.validate();
+      if (!validationResult.valid) {
+        return;
+      }
+      try {
+        processing.value = true;
+        await ApplicationOfferingChangeRequestService.shared.createApplicationOfferingChangeRequest(
+          props.locationId,
+          {
+            applicationId: props.applicationId,
+            offeringId: Number(selectedOffering.value),
+            reason: reasonForChange.value,
+          },
+        );
+        // TODO: redirect to "in progress".
+        router.push(goBackRouteParams.value);
+      } catch {
+        snackBar.error("Unexpected error while submitting the request.");
+      } finally {
+        processing.value = false;
+      }
+    };
+
+    return {
+      requestChangeData,
+      studentName,
+      applicationNumber,
+      submit,
+      cancel,
+      goBackRouteParams,
+      activeOfferingId,
+      programs,
+      selectedProgram,
+      selectedProgramChanged,
+      offerings,
+      selectedOffering,
+      reasonForChange,
+      requestAChangeForm,
+      checkNullOrEmptyRule,
+      checkLengthRule,
+      processing,
+    };
+  },
+});
+</script>
diff --git a/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormView.vue b/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormView.vue
new file mode 100644
index 0000000000..bf58ee3fcc
--- /dev/null
+++ b/sources/packages/web/src/views/institution/locations/request-a-change/RequestAChangeFormView.vue
@@ -0,0 +1,123 @@
+<template>
+  <full-page-container>
+    <template #header>
+      <header-navigator
+        title="Request an Application Change"
+        :sub-title="subTitle"
+        :routeLocation="goBackRouteParams"
+      />
+    </template>
+    <request-a-change-form
+      :locationId="locationId"
+      :offeringId="changeRequest.activeOfferingId"
+      :studentName="changeRequest.studentFullName"
+      :applicationNumber="changeRequest.applicationNumber"
+      :status="changeRequest.status"
+    >
+      <v-text-field
+        label="Program"
+        :readonly="true"
+        v-model="changeRequest.requestedOfferingProgramName"
+        variant="outlined"
+        class="mt-4"
+      />
+      <v-text-field
+        label="Offering"
+        :readonly="true"
+        v-model="changeRequest.requestedOfferingDescription"
+        variant="outlined"
+        class="mt-4"
+      />
+      <v-textarea
+        :readonly="true"
+        label="Reason for change"
+        variant="outlined"
+        hide-details="auto"
+        class="mt-4"
+        v-model="changeRequest.reason"
+      />
+      <p class="mt-1 brand-gray-text">
+        This note is visible to students and StudentAid BC staff.
+      </p>
+      <v-textarea
+        v-if="showNotesFromStudentAidBC"
+        :readonly="true"
+        label="Notes from StudentAid BC"
+        variant="outlined"
+        hide-details="auto"
+        class="mt-4"
+        v-model="changeRequest.assessedNoteDescription"
+      />
+    </request-a-change-form>
+  </full-page-container>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { RouteLocationRaw } from "vue-router";
+import { ApplicationOfferingChangesAPIOutDTO } from "@/services/http/dto";
+import { ApplicationOfferingChangeRequestService } from "@/services/ApplicationOfferingChangeRequestService";
+import { ApplicationOfferingChangeRequestStatus } from "@/types";
+import { InstitutionRoutesConst } from "@/constants/routes/RouteConstants";
+import RequestAChangeForm from "@/components/institutions/request-a-change/RequestAChangeForm.vue";
+
+export default defineComponent({
+  components: { RequestAChangeForm },
+  props: {
+    locationId: {
+      type: Number,
+      required: true,
+    },
+    applicationOfferingChangeRequestId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const changeRequest = ref({} as ApplicationOfferingChangesAPIOutDTO);
+
+    onMounted(async () => {
+      changeRequest.value =
+        await ApplicationOfferingChangeRequestService.shared.getById(
+          props.applicationOfferingChangeRequestId,
+          { locationId: props.locationId },
+        );
+    });
+
+    const subTitle = computed(() => {
+      switch (changeRequest.value.status) {
+        case ApplicationOfferingChangeRequestStatus.DeclinedBySABC:
+        case ApplicationOfferingChangeRequestStatus.DeclinedByStudent:
+          return "View Outcome";
+        default:
+          return "View Request";
+      }
+    });
+
+    const goBackRouteParams = computed(
+      () =>
+        ({
+          name: InstitutionRoutesConst.REQUEST_CHANGE,
+          params: {
+            locationId: props.locationId,
+          },
+        } as RouteLocationRaw),
+    );
+
+    const showNotesFromStudentAidBC = computed(() => {
+      return [
+        ApplicationOfferingChangeRequestStatus.Approved,
+        ApplicationOfferingChangeRequestStatus.DeclinedBySABC,
+      ].includes(changeRequest.value.status);
+    });
+
+    return {
+      subTitle,
+      changeRequest,
+      goBackRouteParams,
+      showNotesFromStudentAidBC,
+      ApplicationOfferingChangeRequestStatus,
+    };
+  },
+});
+</script>