diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
index ed67ee22b1..591b4b75ff 100644
--- a/source/backend/api/Pims.Api.csproj
+++ b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.7.0-93.2</Version>
-    <Version>5.7.0-93.2</Version>
+    <Version>5.7.0-93.3</Version>
+    <Version>5.7.0-93.3</Version>
     <AssemblyVersion>5.7.0.93</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
diff --git a/source/frontend/package.json b/source/frontend/package.json
index 5bf24ec96b..7da224291e 100644
--- a/source/frontend/package.json
+++ b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.7.0-93.2",
+  "version": "5.7.0-93.3",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",
diff --git a/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx b/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx
index e384a17690..75ec9a04c0 100644
--- a/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx
+++ b/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx
@@ -1,4 +1,5 @@
 import { Formik, FormikProps } from 'formik';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import styled from 'styled-components';
@@ -17,6 +18,7 @@ import { ApiGen_CodeTypes_DocumentRelationType } from '@/models/api/generated/Ap
 import { ApiGen_Concepts_DocumentType } from '@/models/api/generated/ApiGen_Concepts_DocumentType';
 import { ApiGen_Mayan_DocumentTypeMetadataType } from '@/models/api/generated/ApiGen_Mayan_DocumentTypeMetadataType';
 import { ApiGen_Requests_DocumentUpdateRequest } from '@/models/api/generated/ApiGen_Requests_DocumentUpdateRequest';
+import { exists } from '@/utils/utils';
 
 import { StyledH3, StyledScrollable } from '../commonStyles';
 import { ComposedDocument, DocumentUpdateFormData } from '../ComposedDocument';
@@ -58,6 +60,34 @@ export const DocumentDetailForm: React.FunctionComponent<
     [props.documentTypes],
   );
 
+  const [documentTypePurpose, setDocumentTypePurpose] = useState(null);
+
+  const matchDocumentType = useCallback(
+    (documentTypeId: number) => {
+      const purpose = props.documentTypes.find(x => x.id === documentTypeId)?.documentTypePurpose;
+
+      setDocumentTypePurpose(purpose);
+    },
+    [props.documentTypes],
+  );
+
+  useEffect(() => {
+    const documentTypeId = Number(props.formikRef.current?.values?.documentTypeId);
+    matchDocumentType(documentTypeId);
+  }, [matchDocumentType, props.formikRef]);
+
+  const onDocumentTypeChange = useCallback(
+    async (changeEvent: ChangeEvent<HTMLInputElement>) => {
+      if (changeEvent.target.value) {
+        const documentTypeId = Number(changeEvent.target.value);
+        matchDocumentType(documentTypeId);
+      }
+
+      props.onDocumentTypeChange(changeEvent);
+    },
+    [matchDocumentType, props],
+  );
+
   return (
     <StyledContainer>
       <LoadingBackdrop show={props.isLoading} />
@@ -105,13 +135,18 @@ export const DocumentDetailForm: React.FunctionComponent<
                         }
                         field={'documentTypeId'}
                         options={documentTypeOptions}
-                        onChange={props.onDocumentTypeChange}
+                        onChange={onDocumentTypeChange}
                         disabled={
                           documentTypeOptions.length === 1 ||
                           props.relationshipType === ApiGen_CodeTypes_DocumentRelationType.Templates
                         }
                       />
                     </SectionField>
+                    {exists(documentTypePurpose) && (
+                      <SectionField label={null}>
+                        <StyledPurposeText>{documentTypePurpose}</StyledPurposeText>
+                      </SectionField>
+                    )}
                     <SectionField label="Status" labelWidth="4">
                       <Select field="documentStatusCode" options={documentStatusTypes} />
                     </SectionField>
@@ -161,3 +196,8 @@ export const DocumentDetailForm: React.FunctionComponent<
 export const StyledDiv = styled.div`
   margin-bottom: 1rem;
 `;
+
+const StyledPurposeText = styled.div`
+  color: black;
+  font-style: italic;
+`;
diff --git a/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx b/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx
index 685ed9fa2b..cc5afbdb34 100644
--- a/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx
+++ b/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx
@@ -8,6 +8,7 @@ import { SectionField } from '@/components/common/Section/SectionField';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import Claims from '@/constants/claims';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
+import { exists } from '@/utils';
 
 import { StyledH3, StyledNoData, StyledScrollable } from '../commonStyles';
 import { ComposedDocument } from '../ComposedDocument';
@@ -31,6 +32,9 @@ export const DocumentDetailView: React.FunctionComponent<
   const documentTypeLabel =
     props.document.pimsDocumentRelationship?.document?.documentType?.documentTypeDescription;
 
+  const documentTypePurpose =
+    props.document.pimsDocumentRelationship?.document?.documentType?.documentTypePurpose;
+
   return (
     <StyledContainer>
       <LoadingBackdrop show={props.isLoading} />
@@ -70,6 +74,11 @@ export const DocumentDetailView: React.FunctionComponent<
             >
               {documentTypeLabel}
             </SectionField>
+            {exists(documentTypePurpose) && (
+              <SectionField label={null}>
+                <StyledPurposeText>{documentTypePurpose}</StyledPurposeText>
+              </SectionField>
+            )}
             <SectionField label="Status" labelWidth="4">
               {props.document.pimsDocumentRelationship?.document?.statusTypeCode?.description}
             </SectionField>
@@ -99,3 +108,8 @@ const RightFlexDiv = styled.div`
   display: flex;
   flex-direction: row-reverse;
 `;
+
+const StyledPurposeText = styled.div`
+  color: black;
+  font-style: italic;
+`;
diff --git a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
index a8a4d9bb6e..527534036e 100644
--- a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DocumentDetailForm component > renders as expected 1`] = `
-.c9.btn {
+.c10.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,19 +30,19 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c9.btn .Button__value {
+.c10.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c9.btn:hover {
+.c10.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c9.btn:focus {
+.c10.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -50,31 +50,31 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   box-shadow: none;
 }
 
-.c9.btn.btn-primary {
+.c10.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-primary:hover,
-.c9.btn.btn-primary:active,
-.c9.btn.btn-primary:focus {
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c9.btn.btn-secondary {
+.c10.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c9.btn.btn-secondary:hover,
-.c9.btn.btn-secondary:active,
-.c9.btn.btn-secondary:focus {
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-info {
+.c10.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -82,66 +82,66 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   padding-right: 0.6rem;
 }
 
-.c9.btn.btn-info:hover,
-.c9.btn.btn-info:active,
-.c9.btn.btn-info:focus {
+.c10.btn.btn-info:hover,
+.c10.btn.btn-info:active,
+.c10.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c9.btn.btn-light {
+.c10.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c9.btn.btn-light:hover,
-.c9.btn.btn-light:active,
-.c9.btn.btn-light:focus {
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c9.btn.btn-dark {
+.c10.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c9.btn.btn-dark:hover,
-.c9.btn.btn-dark:active,
-.c9.btn.btn-dark:focus {
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c9.btn.btn-danger {
+.c10.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-danger:hover,
-.c9.btn.btn-danger:active,
-.c9.btn.btn-danger:focus {
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-warning {
+.c10.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c9.btn.btn-warning:hover,
-.c9.btn.btn-warning:active,
-.c9.btn.btn-warning:focus {
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c9.btn.btn-link {
+.c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -165,9 +165,9 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   text-decoration: underline;
 }
 
-.c9.btn.btn-link:hover,
-.c9.btn.btn-link:active,
-.c9.btn.btn-link:focus {
+.c10.btn.btn-link:hover,
+.c10.btn.btn-link:active,
+.c10.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -177,15 +177,15 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   outline: none;
 }
 
-.c9.btn.btn-link:disabled,
-.c9.btn.btn-link.disabled {
+.c10.btn.btn-link:disabled,
+.c10.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c9.btn:disabled,
-.c9.btn:disabled:hover {
+.c10.btn:disabled,
+.c10.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -197,15 +197,15 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   cursor: not-allowed;
 }
 
-.c9.Button .Button__icon {
+.c10.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c9.Button--icon-only:focus {
+.c10.Button--icon-only:focus {
   outline: none;
 }
 
-.c9.Button--icon-only .Button__icon {
+.c10.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -242,7 +242,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c8 {
+.c9 {
   font-weight: 700;
   font-size: 1.7rem;
   margin-bottom: 1rem;
@@ -283,6 +283,11 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   margin-right: 1rem;
 }
 
+.c8 {
+  color: black;
+  font-style: italic;
+}
+
 <body>
   <div>
     <div
@@ -750,6 +755,20 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="pb-2 row"
+            >
+              <div
+                class="pr-0 text-left col-4"
+              />
+              <div
+                class="c2 text-left col"
+              >
+                <div
+                  class="c8"
+                />
+              </div>
+            </div>
             <div
               class="pb-2 row"
             >
@@ -833,7 +852,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
               </div>
             </div>
             <h3
-              class="c8"
+              class="c9"
             >
               Details
             </h3>
@@ -883,7 +902,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c9 Button px-5 btn btn-secondary"
+                  class="c10 Button px-5 btn btn-secondary"
                   type="button"
                 >
                   <div
@@ -897,7 +916,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c9 Button px-5 btn btn-primary"
+                  class="c10 Button px-5 btn btn-primary"
                   type="submit"
                 >
                   <div
diff --git a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
index 3553fb8ff0..53329e617c 100644
--- a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
@@ -233,7 +233,7 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   width: 100%;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -242,7 +242,7 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c8 {
+.c9 {
   font-weight: 700;
   font-size: 1.7rem;
   margin-bottom: 1rem;
@@ -252,7 +252,7 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
   border-bottom: solid 0.1rem var(--theme-blue-90);
 }
 
-.c10 {
+.c11 {
   overflow-x: hidden;
   max-height: 50rem;
 }
@@ -293,6 +293,11 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
   flex-direction: row-reverse;
 }
 
+.c8 {
+  color: black;
+  font-style: italic;
+}
+
 <body>
   <div>
     <div
@@ -440,6 +445,20 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
               Survey
             </div>
           </div>
+          <div
+            class="pb-2 row"
+          >
+            <div
+              class="pr-0 text-left col-4"
+            />
+            <div
+              class="c2 text-left col"
+            >
+              <div
+                class="c8"
+              />
+            </div>
+          </div>
           <div
             class="pb-2 row"
           >
@@ -460,12 +479,12 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
             </div>
           </div>
           <h3
-            class="c8"
+            class="c9"
           >
             Details
           </h3>
           <div
-            class="c9 c10"
+            class="c10 c11"
           >
             <div
               class="pb-2 row"