diff --git a/epictrack-api/src/api/schemas/response/project_response.py b/epictrack-api/src/api/schemas/response/project_response.py
index 346c5c214..947b9539a 100644
--- a/epictrack-api/src/api/schemas/response/project_response.py
+++ b/epictrack-api/src/api/schemas/response/project_response.py
@@ -19,6 +19,7 @@ class Meta(AutoSchemaBase.Meta):
         model = Project
         include_fk = True
         unknown = EXCLUDE
+        exclude = ("created_by", "updated_at", "updated_by", "is_deleted")
 
     sub_type = fields.Nested(SubTypeSchema, dump_only=True, exclude=("type", "type_id"))
     type = fields.Nested(TypeSchema, dump_only=True)
diff --git a/epictrack-api/src/api/schemas/response/work_response.py b/epictrack-api/src/api/schemas/response/work_response.py
index 9818bf3c4..50356fd9c 100644
--- a/epictrack-api/src/api/schemas/response/work_response.py
+++ b/epictrack-api/src/api/schemas/response/work_response.py
@@ -49,11 +49,10 @@ class Meta(AutoSchemaBase.Meta):
         model = Work
         include_fk = True
         unknown = EXCLUDE
+        exclude = ("created_by", "updated_at", "updated_by", "is_deleted")
 
     project = fields.Nested(
-        ProjectResponseSchema(exclude=("region_env", "region_flnro", "sub_type")),
-        dump_only=True,
-    )
+        ProjectResponseSchema(exclude=("created_by", "updated_at", "updated_by", "is_deleted")), dump_only=True)
     ministry = fields.Nested(MinistrySchema, dump_only=True)
     eao_team = fields.Nested(EAOTeamSchema, dump_only=True)
     ea_act = fields.Nested(EAActSchema, dump_only=True)
diff --git a/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx b/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx
index f7d349f0e..2791154ae 100644
--- a/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx
+++ b/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx
@@ -17,6 +17,7 @@ import Issues from "./issues";
 import WorkState from "./WorkState";
 import ComingSoon from "../../routes/ComingSoon";
 import { isStatusOutOfDate } from "./status/shared";
+import About from "./about";
 
 const IndicatorIcon: React.FC<IconProps> = Icons["IndicatorIcon"];
 
@@ -123,7 +124,8 @@ const WorkPlanContainer = () => {
           ...tabPanel,
         }}
       >
-        <ComingSoon />
+        {/* <ComingSoon /> */}
+        <About />
       </TabPanel>
       <TabPanel
         index={4}
diff --git a/epictrack-web/src/components/workPlan/about/AboutContainer.tsx b/epictrack-web/src/components/workPlan/about/AboutContainer.tsx
new file mode 100644
index 000000000..cfae268ca
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/AboutContainer.tsx
@@ -0,0 +1,183 @@
+import { Box, Grid } from "@mui/material";
+import React, { useContext } from "react";
+import { ETHeading3, ETLink, ETParagraph } from "../../shared";
+import { tabPanelStyle, tabStyle, titleStyle } from "../common/styles";
+import { Palette } from "../../../styles/theme";
+import { ETTabs, ETTab } from "../../shared/tab/Tab";
+import TabPanel from "../../shared/tab/TabPanel";
+import ComingSoon from "../../../routes/ComingSoon";
+import AboutDetails from "./aboutDetails";
+import { ABOUT_RESOURCES } from "../../../constants/application-constant";
+import Icons from "../../icons";
+import { IconProps } from "../../icons/type";
+import { WorkplanContext } from "../WorkPlanContext";
+
+const LinkIcon: React.FC<IconProps> = Icons["LinkIcon"];
+
+const AboutContainer = () => {
+  const { work } = useContext(WorkplanContext);
+  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
+
+  const handleTabSelected = (event: React.SyntheticEvent, index: number) => {
+    setSelectedTabIndex(index);
+  };
+
+  return (
+    <Grid container columnSpacing={1.5}>
+      <Grid item xs={8}>
+        <ETTabs
+          sx={{
+            gap: "2rem",
+            minHeight: "0px",
+            height: "100%",
+          }}
+          onChange={handleTabSelected}
+          value={selectedTabIndex}
+        >
+          <ETTab
+            sx={{
+              paddingLeft: 0,
+              ...tabStyle,
+            }}
+            label="Details"
+          />
+          <ETTab
+            label="Calender"
+            sx={{
+              ...tabStyle,
+            }}
+          />
+        </ETTabs>
+      </Grid>
+      <Grid item xs={4}>
+        <ETHeading3
+          sx={{
+            ...titleStyle,
+          }}
+          color={Palette.primary.main}
+        >
+          Resources
+        </ETHeading3>
+      </Grid>
+      <Grid
+        item
+        xs={8}
+        sx={{
+          pt: "2rem",
+        }}
+      >
+        <TabPanel
+          index={0}
+          value={selectedTabIndex}
+          sx={{
+            ...tabPanelStyle,
+          }}
+        >
+          <AboutDetails />
+        </TabPanel>
+        <TabPanel
+          index={1}
+          value={selectedTabIndex}
+          sx={{
+            ...tabPanelStyle,
+          }}
+        >
+          <ComingSoon />
+        </TabPanel>
+      </Grid>
+      <Grid
+        item
+        xs={4}
+        sx={{
+          pt: "2rem",
+        }}
+      >
+        <Box
+          sx={{
+            ...tabPanelStyle,
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              padding: "1rem 1.5rem",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: ".5rem",
+              alignSelf: "stretch",
+              borderRadius: "4px",
+              backgroundColor: Palette.neutral.bg.light,
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                gap: ".5rem",
+                alignItems: "center",
+              }}
+            >
+              <LinkIcon fill={`${Palette.primary.accent.main}`} />
+              <ETLink
+                to={`https://projects.eao.gov.bc.ca/projects-list?keywords=${work?.project?.name}`}
+                target="_blank"
+                rel="noopener"
+                style={{
+                  fontSize: "1rem",
+                  fontWeight: 700,
+                  lineHeight: "1.5rem",
+                }}
+              >
+                Link to EPIC.Public
+              </ETLink>
+            </Box>
+          </Box>
+          {ABOUT_RESOURCES.map((resource) => {
+            return (
+              <>
+                <Box
+                  sx={{
+                    display: "flex",
+                    padding: "1rem 1.5rem",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    gap: ".5rem",
+                    alignSelf: "stretch",
+                    borderRadius: "4px",
+                    backgroundColor: Palette.neutral.bg.light,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: "flex",
+                      gap: ".5rem",
+                      alignItems: "center",
+                    }}
+                  >
+                    <LinkIcon fill={`${Palette.primary.accent.main}`} />
+                    <ETLink
+                      to={`${resource.url}`}
+                      target="_blank"
+                      rel="noopener"
+                      style={{
+                        fontSize: "1rem",
+                        fontWeight: 700,
+                        lineHeight: "1.5rem",
+                      }}
+                    >
+                      {resource.title}
+                    </ETLink>
+                  </Box>
+                </Box>
+              </>
+            );
+          })}
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default AboutContainer;
diff --git a/epictrack-web/src/components/workPlan/about/AboutContext.tsx b/epictrack-web/src/components/workPlan/about/AboutContext.tsx
new file mode 100644
index 000000000..9d26d8d02
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/AboutContext.tsx
@@ -0,0 +1,23 @@
+import { createContext } from "react";
+import React from "react";
+import { useSearchParams } from "../../../hooks/SearchParams";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface AboutContextProps {}
+
+interface StatusContainerRouteParams extends URLSearchParams {
+  work_id: string;
+}
+
+export const AboutContext = createContext<AboutContextProps>({});
+
+export const AboutProvider = ({
+  children,
+}: {
+  children: JSX.Element | JSX.Element[];
+}) => {
+  const query = useSearchParams<StatusContainerRouteParams>();
+  const workId = React.useMemo(() => query.get("work_id"), [query]);
+
+  return <AboutContext.Provider value={{}}>{children}</AboutContext.Provider>;
+};
diff --git a/epictrack-web/src/components/workPlan/about/aboutDetails/ProjectDetails.tsx b/epictrack-web/src/components/workPlan/about/aboutDetails/ProjectDetails.tsx
new file mode 100644
index 000000000..84697575a
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/aboutDetails/ProjectDetails.tsx
@@ -0,0 +1,123 @@
+import { Box, Divider, Grid } from "@mui/material";
+import { useContext } from "react";
+import { WorkplanContext } from "../../WorkPlanContext";
+import { ETCaption1, ETCaption2, GrayBox } from "../../../shared";
+import { Palette } from "../../../../styles/theme";
+import { MONTH_DAY_YEAR } from "../../../../constants/application-constant";
+import dayjs from "dayjs";
+
+const ProjectDetails = () => {
+  const { work } = useContext(WorkplanContext);
+  return (
+    <GrayBox>
+      <Grid
+        container
+        sx={{
+          padding: "16px 24px",
+        }}
+      >
+        <Grid item xs={12}>
+          <ETCaption1 color={Palette.neutral.main}>
+            PROJECT CREATION DATE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {dayjs(work?.project?.created_at).format(MONTH_DAY_YEAR)}
+          </ETCaption2>
+        </Grid>
+      </Grid>
+      <Divider style={{ width: "100%" }} />
+      <Grid
+        container
+        spacing={1}
+        sx={{
+          padding: "16px 24px",
+        }}
+      >
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            PROPONENT
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.project?.proponent?.name}
+          </ETCaption2>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            PROJECT DESCRIPTION
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.project?.description}
+          </ETCaption2>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            TYPE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            SUBTYPE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.project?.type?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.project?.sub_type?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            LOCATION DESCRIPTION
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.project?.address}
+          </ETCaption2>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            ENV REGION
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            NRS REGION
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.project?.region_env?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.project?.region_flnro?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            ABBREVIATION
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.project?.abbreviation}
+          </ETCaption1>
+        </Grid>
+      </Grid>
+    </GrayBox>
+  );
+};
+
+export default ProjectDetails;
diff --git a/epictrack-web/src/components/workPlan/about/aboutDetails/WorkDetails.tsx b/epictrack-web/src/components/workPlan/about/aboutDetails/WorkDetails.tsx
new file mode 100644
index 000000000..f90714d82
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/aboutDetails/WorkDetails.tsx
@@ -0,0 +1,133 @@
+import { Box, Divider, Grid } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
+import { WorkplanContext } from "../../WorkPlanContext";
+import { ETCaption1, ETCaption2, GrayBox } from "../../../shared";
+import { Palette } from "../../../../styles/theme";
+import dayjs from "dayjs";
+import { MONTH_DAY_YEAR } from "../../../../constants/application-constant";
+
+const WorkDetails = () => {
+  const [phaseInfo, setPhaseInfo] = useState<any>({});
+  const { work, workPhases } = useContext(WorkplanContext);
+
+  const getNextPhaseInfo = () => {
+    workPhases.map((phase) => {
+      if (phase?.work_phase?.id === work?.current_work_phase_id) {
+        setPhaseInfo(phase);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getNextPhaseInfo();
+  }, []);
+
+  return (
+    <GrayBox>
+      <Grid
+        container
+        sx={{
+          padding: "16px 24px",
+        }}
+      >
+        <Grid item xs={12}>
+          <ETCaption1 color={Palette.neutral.main}>WORK START DATE</ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {dayjs(work?.created_at).format(MONTH_DAY_YEAR)}
+          </ETCaption2>
+        </Grid>
+      </Grid>
+      <Divider style={{ width: "100%" }} />
+      <Grid
+        container
+        spacing={1}
+        sx={{
+          padding: "16px 24px",
+        }}
+      >
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            ANTICIPATED REFERRAL DATE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.anticipated_decision_date || "-"}
+          </ETCaption2>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            CURRENT MILESTONE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            NEXT MILESTONE
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>-</ETCaption1>
+        </Grid>
+        <Grid item xs={6}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {phaseInfo?.next_milestone}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            EA ACT
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            FEDERAL INVOLVEMENT
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            FEDERAL ACT
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.ea_act?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.federal_involvement?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={4}>
+          <ETCaption1 color={Palette.neutral.dark}>
+            {work?.substitution_act?.name}
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            RESPONSIBLE MINISTRY
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.ministry?.name}
+          </ETCaption2>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption1 bold color={Palette.primary.main}>
+            DECISION MAKER
+          </ETCaption1>
+        </Grid>
+        <Grid item xs={12}>
+          <ETCaption2 color={Palette.neutral.dark}>
+            {work?.decision_by?.full_name}
+          </ETCaption2>
+        </Grid>
+      </Grid>
+    </GrayBox>
+  );
+};
+
+export default WorkDetails;
diff --git a/epictrack-web/src/components/workPlan/about/aboutDetails/index.tsx b/epictrack-web/src/components/workPlan/about/aboutDetails/index.tsx
new file mode 100644
index 000000000..2ba442c22
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/aboutDetails/index.tsx
@@ -0,0 +1,18 @@
+import { Grid } from "@mui/material";
+import ProjectDetails from "./ProjectDetails";
+import WorkDetials from "./WorkDetails";
+
+const AboutDetials = () => {
+  return (
+    <Grid container direction={"row"} spacing={4}>
+      <Grid item xs={6}>
+        <ProjectDetails />
+      </Grid>
+      <Grid item xs={6}>
+        <WorkDetials />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default AboutDetials;
diff --git a/epictrack-web/src/components/workPlan/about/index.tsx b/epictrack-web/src/components/workPlan/about/index.tsx
new file mode 100644
index 000000000..69da85365
--- /dev/null
+++ b/epictrack-web/src/components/workPlan/about/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import AboutContainer from "./AboutContainer";
+import { AboutProvider } from "./AboutContext";
+
+const Status = () => {
+  return (
+    <AboutProvider>
+      <AboutContainer />
+    </AboutProvider>
+  );
+};
+
+export default Status;
diff --git a/epictrack-web/src/constants/application-constant.ts b/epictrack-web/src/constants/application-constant.ts
index cd8185608..026a68243 100644
--- a/epictrack-web/src/constants/application-constant.ts
+++ b/epictrack-web/src/constants/application-constant.ts
@@ -76,6 +76,17 @@ export const FN_RESOURCES = [
   },
 ];
 
+export const ABOUT_RESOURCES = [
+  {
+    title: "Link to eGuide",
+    url: "https://intranet.gov.bc.ca/eao/our-work/eguide-2018",
+  },
+  {
+    title: "Link to EA Act (2018)",
+    url: "https://www.bclaws.gov.bc.ca/civix/document/id/complete/statreg/18051",
+  },
+];
+
 export const GROUPS = {
   SUPER_USER: "Super User",
   DEVELOPER: "Developer",
diff --git a/epictrack-web/src/models/work.ts b/epictrack-web/src/models/work.ts
index ade89743e..90d54ed14 100644
--- a/epictrack-web/src/models/work.ts
+++ b/epictrack-web/src/models/work.ts
@@ -35,8 +35,18 @@ export interface Work extends MasterBase {
   decision_by_id: number;
   decision_maker_position_id: number;
   start_date_locked: boolean;
-
-  project: ListType & { description: string };
+  created_at: string;
+  project: ListType & {
+    created_at: string;
+    description: string;
+    address: string;
+    abbreviation: string;
+    type: ListType & { name: string };
+    sub_type: ListType & { name: string };
+    proponent: ListType & { name: string };
+    region_env: ListType & { name: string };
+    region_flnro: ListType & { name: string };
+  };
   ministry: Ministry;
   ea_act: ListType;
   eao_team: ListType;