diff --git a/src/api/plan.js b/src/api/plan.js
index f49659d5..d5fac2fa 100644
--- a/src/api/plan.js
+++ b/src/api/plan.js
@@ -4,12 +4,12 @@ import {
   getAuthHeaderConfig,
   findStatusWithCode,
   isUserAgrologist,
-  canUserAddAttachments
-} from '../utils'
-import * as API from '../constants/api'
-import RUPSchema from '../components/rangeUsePlanPage/schema'
-import { getNetworkStatus } from '../utils/helper/network'
-import { deleteFromQueue } from './delete'
+  canUserAddAttachments,
+} from '../utils';
+import * as API from '../constants/api';
+import RUPSchema from '../components/rangeUsePlanPage/schema';
+import { getNetworkStatus } from '../utils/helper/network';
+import { deleteFromQueue } from './delete';
 import {
   saveGrazingSchedules,
   saveInvasivePlantChecklist,
@@ -109,13 +109,13 @@ export const savePlan = async (plan, user = {}) => {
     }),
   );
 
-  await saveGrazingSchedules(planId, grazingSchedules, newPastures)
-  await saveInvasivePlantChecklist(planId, invasivePlantChecklist)
-  await saveManagementConsiderations(planId, managementConsiderations)
-  await saveMinisterIssues(planId, ministerIssues, newPastures)
-  await saveAdditionalRequirements(planId, additionalRequirements)
+  await saveGrazingSchedules(planId, grazingSchedules, newPastures);
+  await saveInvasivePlantChecklist(planId, invasivePlantChecklist);
+  await saveManagementConsiderations(planId, managementConsiderations);
+  await saveMinisterIssues(planId, ministerIssues, newPastures);
+  await saveAdditionalRequirements(planId, additionalRequirements);
   if (isUserAgrologist(user) && canUserAddAttachments(plan, user)) {
-    await saveAttachments(planId, files)
+    await saveAttachments(planId, files);
   }
 
   return planId;
@@ -247,6 +247,11 @@ export const updateStatus = async ({ planId, note, statusId }) => {
   );
 };
 
+export const createReplacementPlan = async (planId) => {
+  return (await axios.put(API.REPLACEMENT_PLAN(planId), getAuthHeaderConfig()))
+    .data.replacementPlan;
+};
+
 export const updateConfirmation = async ({
   user,
   planId,
diff --git a/src/components/common/Banner.js b/src/components/common/Banner.js
index 51e33eb4..e158bf3d 100644
--- a/src/components/common/Banner.js
+++ b/src/components/common/Banner.js
@@ -14,15 +14,26 @@ const defaultProps = {
   noDefaultHeight: false,
 };
 
-const Banner = ({ header, content, style, noDefaultHeight, contentLine2 }) => (
+const Banner = ({
+  header,
+  content,
+  style,
+  noDefaultHeight,
+  contentLine2,
+  isReplacementPlan,
+}) => (
   <div className="banner" style={style}>
     <div
       className={classnames('banner__container', {
         'banner__container--no-default-height': noDefaultHeight,
+        banner__container__highlighted: isReplacementPlan,
       })}
     >
       <div>
-        <h1 className="banner__header">{header}</h1>
+        <h1 className="banner__header">
+          {header}
+          {isReplacementPlan ? ' (Replacement Plan)' : ''}
+        </h1>
         <div className="banner__content">{content}</div>
         {contentLine2 && (
           <>
diff --git a/src/components/emailTemplatePage/index.js b/src/components/emailTemplatePage/index.js
index ddd9f1a9..aac177a1 100644
--- a/src/components/emailTemplatePage/index.js
+++ b/src/components/emailTemplatePage/index.js
@@ -110,7 +110,6 @@ const EmailTemplatePage = () => {
               <TextField
                 label="From Email"
                 variant="outlined"
-                fullWidth
                 value={selectedTemplate.fromEmail}
                 onChange={(event) =>
                   setSelectedTemplate({
@@ -124,7 +123,6 @@ const EmailTemplatePage = () => {
               <TextField
                 label="Subject"
                 variant="outlined"
-                fullWidth
                 value={selectedTemplate.subject}
                 onChange={(event) => {
                   setSelectedTemplate({
diff --git a/src/components/rangeUsePlanPage/ActionBtns.js b/src/components/rangeUsePlanPage/ActionBtns.js
index 1c1c6f6b..ec7a0438 100644
--- a/src/components/rangeUsePlanPage/ActionBtns.js
+++ b/src/components/rangeUsePlanPage/ActionBtns.js
@@ -123,6 +123,7 @@ const ActionBtns = ({
     ...permissionsOptions,
   };
 
+  console.log(permissions);
   return (
     <>
       <div className="rup__actions__btns__buttons">
diff --git a/src/components/rangeUsePlanPage/PlanForm.js b/src/components/rangeUsePlanPage/PlanForm.js
index 1b176a56..f50b1e5b 100644
--- a/src/components/rangeUsePlanPage/PlanForm.js
+++ b/src/components/rangeUsePlanPage/PlanForm.js
@@ -15,7 +15,12 @@ import { Attachments, AttachmentsHeader } from './attachments';
 import EditableProvider from '../../providers/EditableProvider';
 import { isUUID } from 'uuid-v4';
 import { useUser } from '../../providers/UserProvider';
-import { canUserAttachMaps, canUserAddAttachments, canUserConsiderManagement, canUserAddAdditionalReqs } from '../../utils';
+import {
+  canUserAttachMaps,
+  canUserAddAttachments,
+  canUserConsiderManagement,
+  canUserAddAdditionalReqs,
+} from '../../utils';
 
 const PlanForm = ({
   plan,
@@ -98,26 +103,26 @@ const PlanForm = ({
         <EditableProvider editable={canUserAddAttachments(plan, user)}>
           <Element name={ELEMENT_ID.ATTACHMENTS} id={ELEMENT_ID.ATTACHMENTS}>
             <AttachmentsHeader />
+            <Attachments
+              planId={plan.id}
+              attachments={plan.files}
+              propertyName="decisionAttachments"
+              label="Decision Material"
+            />
             <EditableProvider editable={canUserAttachMaps(plan, user)}>
-              <Attachments
-                planId={plan.id}
-                attachments={plan.files}
-                propertyName="decisionAttachments"
-                label="Decision Material"
-              />
               <Attachments
                 planId={plan.id}
                 attachments={plan.files}
                 propertyName="mapAttachments"
                 label="Map"
               />
-              <Attachments
-                planId={plan.id}
-                attachments={plan.files}
-                propertyName="otherAttachments"
-                label="Other"
-              />
             </EditableProvider>
+            <Attachments
+              planId={plan.id}
+              attachments={plan.files}
+              propertyName="otherAttachments"
+              label="Other"
+            />
           </Element>
         </EditableProvider>
       )}
diff --git a/src/components/rangeUsePlanPage/manageAgentsPage/index.js b/src/components/rangeUsePlanPage/manageAgentsPage/index.js
index b11e4304..688dc6e6 100644
--- a/src/components/rangeUsePlanPage/manageAgentsPage/index.js
+++ b/src/components/rangeUsePlanPage/manageAgentsPage/index.js
@@ -150,7 +150,6 @@ const ManageAgentsPage = ({ match }) => {
                       {...params}
                       label="Select user"
                       variant="outlined"
-                      fullWidth
                       className={classes.autocomplete}
                     />
                   )}
diff --git a/src/components/rangeUsePlanPage/pageForAH/index.js b/src/components/rangeUsePlanPage/pageForAH/index.js
index 9d200c37..814b2205 100644
--- a/src/components/rangeUsePlanPage/pageForAH/index.js
+++ b/src/components/rangeUsePlanPage/pageForAH/index.js
@@ -20,6 +20,7 @@ import PlanForm from '../PlanForm';
 import { createAmendment, savePlan } from '../../../api';
 import { canUserEditThisPlan, isPlanAmendment } from '../../../utils';
 import NetworkStatus from '../../common/NetworkStatus';
+import permissions from '../../../constants/permissions';
 
 // Agreement Holder page
 class PageForAH extends Component {
@@ -172,7 +173,7 @@ class PageForAH extends Component {
     const { isSavingAsDraft, isSubmitting, isCreatingAmendment } = this.state;
     const { openConfirmationModal, plan, user, clientAgreements } = this.props;
     const { confirmations, status } = plan;
-
+    console.log(permissions + '****************************');
     return (
       <ActionBtns
         permissions={{
@@ -265,7 +266,12 @@ class PageForAH extends Component {
           fetchPlan={fetchPlan}
         />
 
-        <Banner noDefaultHeight header={bannerHeader} content={bannerContent} />
+        <Banner
+          noDefaultHeight
+          header={bannerHeader}
+          content={bannerContent}
+          isReplacementPlan={plan.replacementOf != null}
+        />
 
         <StickyHeader>
           <div className="rup__actions__background">
diff --git a/src/components/rangeUsePlanPage/pageForStaff/index.js b/src/components/rangeUsePlanPage/pageForStaff/index.js
index b7632e66..7b3d23ab 100644
--- a/src/components/rangeUsePlanPage/pageForStaff/index.js
+++ b/src/components/rangeUsePlanPage/pageForStaff/index.js
@@ -254,7 +254,12 @@ class PageForStaff extends Component {
           content={strings.SUBMIT_PLAN_CONFIRM_CONTENT}
         />
 
-        <Banner header={bannerHeader} content={bannerContent} noDefaultHeight />
+        <Banner
+          header={bannerHeader}
+          content={bannerContent}
+          noDefaultHeight
+          isReplacementPlan={plan.replacementOf != null}
+        />
 
         <StickyHeader>
           <div className="rup__actions__background">
diff --git a/src/components/selectRangeUsePlanPage/CreateReplacementPlan.js b/src/components/selectRangeUsePlanPage/CreateReplacementPlan.js
new file mode 100644
index 00000000..6f835b9c
--- /dev/null
+++ b/src/components/selectRangeUsePlanPage/CreateReplacementPlan.js
@@ -0,0 +1,23 @@
+import { useHistory } from 'react-router-dom';
+import React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { createReplacementPlan } from '../../api';
+import { RANGE_USE_PLAN } from '../../constants/routes';
+
+const CreateReplacementPlan = ({ planId }) => {
+  const history = useHistory();
+  return (
+    <MenuItem
+      onClick={async (e) => {
+        e.stopPropagation();
+        const replacementPlan = await createReplacementPlan(planId);
+        console.log(replacementPlan);
+        history.push(`${RANGE_USE_PLAN}/${replacementPlan.id}`);
+      }}
+    >
+      Create Replacement Plan
+    </MenuItem>
+  );
+};
+
+export default CreateReplacementPlan;
diff --git a/src/components/selectRangeUsePlanPage/ExtensionColumn.js b/src/components/selectRangeUsePlanPage/ExtensionColumn.js
index 87ca0e0e..e78a4859 100644
--- a/src/components/selectRangeUsePlanPage/ExtensionColumn.js
+++ b/src/components/selectRangeUsePlanPage/ExtensionColumn.js
@@ -147,6 +147,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>Staff Rejected</div>;
         case PLAN_EXTENSION_STATUS.DISTRICT_MANAGER_REJECTED:
           return <div>District Manager Rejected</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           if (
             agreement.plan?.extensionReceivedVotes ===
@@ -205,6 +209,7 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
 
   const renderExtensionForStaff = (user, agreement) => {
     if (isUserStaff(user)) {
+      console.log(agreement.plan?.extensionStatus);
       switch (agreement.plan?.extensionStatus) {
         case PLAN_EXTENSION_STATUS.AWAITING_VOTES:
           if (
@@ -253,6 +258,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>District Manager Rejected</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           return <div>Awaiting Extension</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.EXTENDED:
           return (
             <div>
@@ -302,11 +311,14 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           } else {
             if (
               agreement.plan?.planExtensionRequests.filter((request) => {
-                return request.userId === user.id && request.requestedExtension;
-              }).length === 0
+                return (
+                  request.userId === user.id &&
+                  request.requestedExtension === true
+                );
+              }).length !== 0
             )
-              return <>Rejected</>;
-            return <>Requested</>;
+              return <>Requested</>;
+            return <>-</>;
           }
         case PLAN_EXTENSION_STATUS.AGREEMENT_HOLDER_REJECTED:
           return <div>Agreement Holder Rejected</div>;
@@ -316,6 +328,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>District Manager Rejected</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           return <div>Awaiting Extension</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.EXTENDED:
           return (
             <div>
diff --git a/src/components/selectRangeUsePlanPage/NewPlanButton.js b/src/components/selectRangeUsePlanPage/NewPlanButton.js
index 32ad757b..c0bd462c 100644
--- a/src/components/selectRangeUsePlanPage/NewPlanButton.js
+++ b/src/components/selectRangeUsePlanPage/NewPlanButton.js
@@ -25,7 +25,6 @@ const NewPlanButton = ({ agreement }) => {
 
   return (
     <Button
-      fullWidth
       variant="contained"
       disableElevation
       color="primary"
diff --git a/src/components/selectRangeUsePlanPage/PlanActions.js b/src/components/selectRangeUsePlanPage/PlanActions.js
index 76997bcc..df4859d5 100644
--- a/src/components/selectRangeUsePlanPage/PlanActions.js
+++ b/src/components/selectRangeUsePlanPage/PlanActions.js
@@ -1,18 +1,16 @@
-import React from 'react';
+import { Button } from '@material-ui/core';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Grow from '@material-ui/core/Grow';
+import MenuList from '@material-ui/core/MenuList';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import { Button } from '@material-ui/core';
-import { RANGE_USE_PLAN } from '../../constants/routes';
+import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import React from 'react';
 import * as strings from '../../constants/strings';
-import EditIcon from '@material-ui/icons/Edit';
-import ViewIcon from '@material-ui/icons/Visibility';
-import { Link } from 'react-router-dom';
+import { PLAN_EXTENSION_STATUS } from '../../constants/variables';
+import CreateReplacementPlan from './CreateReplacementPlan';
 import NewPlanMenuItem from './NewPlanMenuItem';
-import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import ViewPlanMenuItem from './ViewPlanMenuItem';
 
 export default function PlanActions({
   agreement,
@@ -35,7 +33,6 @@ export default function PlanActions({
 
     setOpen(false);
   };
-
   return (
     <div>
       <Button
@@ -69,34 +66,31 @@ export default function PlanActions({
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id="menu-list-grow">
                   {planId && (
-                    <MenuItem
-                      fullWidth
-                      variant="outlined"
-                      component={Link}
-                      to={{
-                        pathname: `${RANGE_USE_PLAN}/${planId}`,
-                        state: {
-                          page: currentPage,
-                          prevSearch: location.search,
-                        },
-                      }}
-                    >
-                      {canEdit ? (
-                        <>
-                          <EditIcon fontSize="small" />
-                          {strings.EDIT}
-                        </>
-                      ) : (
-                        <>
-                          <ViewIcon fontSize="small" />
-                          {strings.VIEW}
-                        </>
-                      )}
-                    </MenuItem>
+                    <ViewPlanMenuItem
+                      planId={planId}
+                      currentPage={currentPage}
+                      menuText={canEdit ? strings.EDIT : strings.VIEW}
+                    />
                   )}
                   {canCreatePlan && !planId && (
                     <NewPlanMenuItem agreement={agreement} />
                   )}
+                  {[
+                    PLAN_EXTENSION_STATUS.AGREEMENT_HOLDER_REJECTED,
+                    PLAN_EXTENSION_STATUS.STAFF_REJECTED,
+                    PLAN_EXTENSION_STATUS.DISTRICT_MANAGER_REJECTED,
+                  ].includes(agreement.plan?.extensionStatus) && (
+                    <CreateReplacementPlan planId={planId} />
+                  )}
+                  {[PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED].includes(
+                    agreement.plan?.extensionStatus,
+                  ) && (
+                    <ViewPlanMenuItem
+                      planId={agreement.plan?.replacementPlanId}
+                      currentPage={currentPage}
+                      menuText={'View Replacement Plan'}
+                    />
+                  )}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
diff --git a/src/components/selectRangeUsePlanPage/PlanRow.js b/src/components/selectRangeUsePlanPage/PlanRow.js
index 24772200..ff6b80c6 100644
--- a/src/components/selectRangeUsePlanPage/PlanRow.js
+++ b/src/components/selectRangeUsePlanPage/PlanRow.js
@@ -113,7 +113,9 @@ function PlanRow({ agreement, user, currentPage }) {
         </TableCell>
       </TableRow>
       {agreement.plan?.id && (
-        <VersionsDropdown open={open} planId={agreement.plan.id} />
+        <>
+          <VersionsDropdown open={open} planId={agreement.plan.id} />
+        </>
       )}
     </>
   );
diff --git a/src/components/selectRangeUsePlanPage/ViewPlanMenuItem.js b/src/components/selectRangeUsePlanPage/ViewPlanMenuItem.js
new file mode 100644
index 00000000..129dec23
--- /dev/null
+++ b/src/components/selectRangeUsePlanPage/ViewPlanMenuItem.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { RANGE_USE_PLAN } from '../../constants/routes';
+import { Link } from 'react-router-dom';
+
+const ViewPlanMenuItem = ({ planId, currentPage, menuText }) => {
+  return (
+    <MenuItem
+      variant="outlined"
+      component={Link}
+      to={{
+        pathname: `${RANGE_USE_PLAN}/${planId}`,
+        state: {
+          page: currentPage,
+          prevSearch: location.search,
+        },
+      }}
+    >
+      {menuText}
+    </MenuItem>
+  );
+};
+
+export default ViewPlanMenuItem;
diff --git a/src/constants/api.js b/src/constants/api.js
index af3f3697..68693ebb 100644
--- a/src/constants/api.js
+++ b/src/constants/api.js
@@ -84,11 +84,12 @@ export const UPDATE_USER_PROFILE = '/v1/user/me';
 export const UPDATE_USER_ID_OF_ZONE = (zoneId) => `/v1/zone/${zoneId}/user`;
 export const CREATE_USER_CLIENT_LINK = (userId) => `/v1/user/${userId}/client`;
 export const DELETE_USER_CLIENT_LINK = (userId, clientId) =>
-`/v1/user/${userId}/client/${clientId}`;
+  `/v1/user/${userId}/client/${clientId}`;
 export const MERGE_ACCOUNTS = (userId) => `/v1/user/${userId}/merge`;
 export const ASSIGN_ROLE = (userId) => `/v1/user/${userId}/assignRole`;
 export const ASSIGN_DISTRICT = (userId) => `/v1/user/${userId}/assignDistrict`;
-export const ASSIGN_DISTRICTS = (userId) => `/v1/user/${userId}/assignDistricts`;
+export const ASSIGN_DISTRICTS = (userId) =>
+  `/v1/user/${userId}/assignDistricts`;
 
 export const CREATE_RUP = '/v1/plan';
 export const GET_RUP = (planId) => `/v1/plan/${planId}`;
@@ -104,12 +105,18 @@ export const EXTEND_PLAN = (planId, endDate) =>
 export const REQUEST_EXTENSION = (planId) =>
   `/v1/plan/${planId}/extension/request`;
 export const APPROVE_VOTE = (planId) => `/v1/plan/${planId}/extension/approve`;
+export const GET_EXTENSION_PLAN = (planId) => `/v1/plan/${planId}/extension`;
+export const REPLACEMENT_PLAN = (planId) =>
+  `/v1/plan/${planId}/extension/createReplacementPlan`;
 export const REJECT_VOTE = (planId) => `/v1/plan/${planId}/extension/reject`;
 export const UPDATE_CONFIRMATION = (planId, confirmationId) =>
   `/v1/plan/${planId}/confirmation/${confirmationId}`;
 export const DISCARD_AMENDMENT = (planId) =>
   `v1/plan/${planId}/discard-amendment`;
 
+export const GET_RUP_FUTURE_PLAN = (planId, version) =>
+  `/v1/plan/${planId}/version/${version}`;
+
 export const CREATE_RUP_VERSION = (planId) => `/v1/plan/${planId}/version`;
 export const GET_RUP_VERSIONS = (planId) => `/v1/plan/${planId}/version`;
 export const GET_RUP_VERSION = (planId, version) =>
diff --git a/src/constants/variables.js b/src/constants/variables.js
index 4734c054..0e407658 100644
--- a/src/constants/variables.js
+++ b/src/constants/variables.js
@@ -129,7 +129,7 @@ export const USER_ROLE = {
   2: 'Staff Decision Maker',
   3: 'Staff Agrologist',
   4: 'Range Agreement Holder',
-  5: 'External Auditor'
+  5: 'External Auditor',
 };
 
 export const PURPOSE_OF_ACTION = {
@@ -236,4 +236,7 @@ export const PLAN_EXTENSION_STATUS = {
   AWAITING_EXTENSION: 3,
   EXTENDED: 4,
   IS_EXTENSION: 5,
+  REPLACEMENT_PLAN_CREATED: 8,
+  REPLACEMENT_PLAN_INACTIVE: 9,
+  REPLACEMENT_PLAN_ACTIVE: 10,
 };
diff --git a/src/styles/Common.scss b/src/styles/Common.scss
index 4dad0a16..239982c2 100644
--- a/src/styles/Common.scss
+++ b/src/styles/Common.scss
@@ -128,6 +128,10 @@
     &--no-default-height {
       min-height: 0px !important;
     }
+
+    &__highlighted {
+      background-color: darkorange;
+    }
   }
 
   &__content {