diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f9e76398..8a6351dcd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,8 @@
   - Create and Edit address/site feature introduced
 - App marketplace
   - Add more and collapse button to category view
+- Company Role
+  - enabled agreement handling by adding frontend logic and UI handling of optional agreements
 
 ## 2.0.0
 
diff --git a/DEPENDENCIES b/DEPENDENCIES
index 10be9703e..b11d3dce8 100644
--- a/DEPENDENCIES
+++ b/DEPENDENCIES
@@ -4,7 +4,7 @@ npm/npmjs/-/acorn-jsx/5.3.2, MIT, approved, clearlydefined
 npm/npmjs/-/acorn-walk/8.3.2, MIT, approved, #11942
 npm/npmjs/-/acorn/8.11.3, MIT, approved, clearlydefined
 npm/npmjs/-/agent-base/6.0.2, MIT, approved, clearlydefined
-npm/npmjs/-/ajv/6.12.6, MIT, approved, #979
+npm/npmjs/-/ajv/6.12.6, MIT, approved, #15286
 npm/npmjs/-/ansi-escapes/4.3.2, MIT, approved, clearlydefined
 npm/npmjs/-/ansi-regex/5.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/ansi-styles/3.2.1, MIT, approved, clearlydefined
@@ -59,7 +59,7 @@ npm/npmjs/-/chalk/2.4.2, MIT, approved, clearlydefined
 npm/npmjs/-/chalk/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/chalk/4.1.2, MIT, approved, clearlydefined
 npm/npmjs/-/char-regex/1.0.2, MIT, approved, clearlydefined
-npm/npmjs/-/chokidar/3.6.0, MIT, approved, #13197
+npm/npmjs/-/chokidar/3.6.0, MIT, approved, #15400
 npm/npmjs/-/ci-info/3.9.0, MIT, approved, clearlydefined
 npm/npmjs/-/cjs-module-lexer/1.2.3, MIT, approved, #9069
 npm/npmjs/-/classnames/2.5.1, MIT, approved, clearlydefined
@@ -106,7 +106,7 @@ npm/npmjs/-/detect-newline/3.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/diff-sequences/29.6.3, MIT, approved, clearlydefined
 npm/npmjs/-/diff/4.0.2, BSD-3-Clause, approved, #2728
 npm/npmjs/-/dir-glob/3.0.1, MIT, approved, clearlydefined
-npm/npmjs/-/doctrine/2.1.0, Apache-2.0 AND BSD-2-Clause, approved, #1987
+npm/npmjs/-/doctrine/2.1.0, Apache-2.0 AND BSD-2-Clause, approved, #15247
 npm/npmjs/-/doctrine/3.0.0, Apache-2.0 AND BSD-2-Clause, approved, CQ22628
 npm/npmjs/-/dom-accessibility-api/0.5.16, MIT, approved, clearlydefined
 npm/npmjs/-/dom-accessibility-api/0.6.3, MIT, approved, clearlydefined
@@ -140,7 +140,7 @@ npm/npmjs/-/eslint-config-love/43.1.0, MIT, approved, #13906
 npm/npmjs/-/eslint-config-prettier/9.1.0, MIT, approved, #11979
 npm/npmjs/-/eslint-config-standard/17.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/eslint-import-resolver-node/0.3.9, MIT, approved, #9923
-npm/npmjs/-/eslint-module-utils/2.8.1, MIT, approved, #8209
+npm/npmjs/-/eslint-module-utils/2.8.1, MIT, approved, #15235
 npm/npmjs/-/eslint-plugin-es-x/7.5.0, MIT, approved, #11867
 npm/npmjs/-/eslint-plugin-import/2.29.1, MIT, approved, #11187
 npm/npmjs/-/eslint-plugin-n/16.6.2, MIT, approved, #12657
@@ -148,9 +148,9 @@ npm/npmjs/-/eslint-plugin-promise/6.1.1, ISC, approved, clearlydefined
 npm/npmjs/-/eslint-plugin-react-hooks/4.6.0, MIT, approved, clearlydefined
 npm/npmjs/-/eslint-plugin-react/7.34.1, MIT, approved, #13825
 npm/npmjs/-/eslint-scope/7.2.2, BSD-2-Clause, approved, #9916
-npm/npmjs/-/eslint-visitor-keys/3.4.3, Apache-2.0, approved, #7729
-npm/npmjs/-/eslint/8.57.0, MIT AND ISC AND OFL-1.1 AND CC-BY-SA-2.0, approved, #13450
-npm/npmjs/-/espree/9.6.1, BSD-2-Clause AND BSD-3-Clause AND MIT AND BSD-2-Clause, approved, #9308
+npm/npmjs/-/eslint-visitor-keys/3.4.3, Apache-2.0, approved, #15274
+npm/npmjs/-/eslint/8.57.0, MIT AND ISC AND OFL-1.1 AND CC-BY-SA-2.0, approved, #15317
+npm/npmjs/-/espree/9.6.1, BSD-2-Clause AND BSD-3-Clause AND MIT AND BSD-2-Clause AND BSD-3-Clause AND MIT AND (BSD-2-Clause AND MIT) AND (BSD-3-Clause AND LGPL-2.0-or-later AND MIT) AND LGPL-2.1-or-later, approved, #15293
 npm/npmjs/-/esprima/4.0.1, BSD-2-Clause, approved, #995
 npm/npmjs/-/esquery/1.5.0, BSD-3-Clause, approved, #7469
 npm/npmjs/-/esrecurse/4.3.0, BSD-2-Clause, approved, clearlydefined
@@ -163,7 +163,7 @@ npm/npmjs/-/expect/29.7.0, MIT, approved, clearlydefined
 npm/npmjs/-/fast-deep-equal/3.1.3, MIT, approved, clearlydefined
 npm/npmjs/-/fast-glob/3.3.2, MIT, approved, #9307
 npm/npmjs/-/fast-json-stable-stringify/2.1.0, MIT, approved, clearlydefined
-npm/npmjs/-/fast-levenshtein/2.0.6, MIT, approved, #2428
+npm/npmjs/-/fast-levenshtein/2.0.6, MIT, approved, #15236
 npm/npmjs/-/fastq/1.17.1, ISC, approved, clearlydefined
 npm/npmjs/-/fb-watchman/2.0.2, MIT AND Apache-2.0, approved, #5379
 npm/npmjs/-/file-entry-cache/6.0.1, MIT, approved, clearlydefined
@@ -178,7 +178,7 @@ npm/npmjs/-/follow-redirects/1.15.6, MIT, approved, #10782
 npm/npmjs/-/for-each/0.3.3, MIT, approved, clearlydefined
 npm/npmjs/-/form-data/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/fs.realpath/1.0.0, ISC, approved, clearlydefined
-npm/npmjs/-/fsevents/2.3.3, MIT, approved, #2967
+npm/npmjs/-/fsevents/2.3.3, MIT, approved, #15309
 npm/npmjs/-/function-bind/1.1.2, MIT, approved, #11063
 npm/npmjs/-/function.prototype.name/1.1.6, MIT, approved, #10255
 npm/npmjs/-/functions-have-names/1.2.3, MIT, approved, clearlydefined
@@ -314,8 +314,8 @@ npm/npmjs/-/json-parse-even-better-errors/2.3.1, MIT, approved, clearlydefined
 npm/npmjs/-/json-schema-traverse/0.4.1, MIT, approved, clearlydefined
 npm/npmjs/-/json-stable-stringify-without-jsonify/1.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/json2mq/0.2.0, MIT, approved, clearlydefined
-npm/npmjs/-/json5/1.0.2, MIT, approved, CQ22351
-npm/npmjs/-/json5/2.2.3, MIT, approved, #2126
+npm/npmjs/-/json5/1.0.2, MIT, approved, #15256
+npm/npmjs/-/json5/2.2.3, MIT, approved, #15226
 npm/npmjs/-/jsx-ast-utils/3.3.5, MIT, approved, #9209
 npm/npmjs/-/jwt-decode/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/keycloak-js/23.0.7, Apache-2.0 AND MIT AND EPL-1.0 AND LicenseRef-scancode-oasis-ws-security-spec AND W3C AND LicenseRef-scancode-ws-policy-specification AND W3C AND W3C-19980720 AND (AFL-2.1 OR LGPL-2.0-only) AND (Apache-2.0 AND MIT) AND (Apache-2.0 AND MIT), approved, #11737
@@ -366,7 +366,7 @@ npm/npmjs/-/object-assign/4.1.1, MIT, approved, clearlydefined
 npm/npmjs/-/object-inspect/1.13.1, MIT, approved, #11078
 npm/npmjs/-/object-is/1.1.6, MIT, approved, clearlydefined
 npm/npmjs/-/object-keys/1.1.1, MIT, approved, clearlydefined
-npm/npmjs/-/object.assign/4.1.5, MIT, approved, #3232
+npm/npmjs/-/object.assign/4.1.5, MIT, approved, #15306
 npm/npmjs/-/object.entries/1.1.8, MIT, approved, #4671
 npm/npmjs/-/object.fromentries/2.0.8, MIT, approved, #4600
 npm/npmjs/-/object.groupby/1.0.3, MIT, approved, #10360
@@ -425,7 +425,7 @@ npm/npmjs/-/react-router/6.22.3, MIT, approved, clearlydefined
 npm/npmjs/-/react-slick/0.30.2, MIT, approved, #14009
 npm/npmjs/-/react-transition-group/4.4.5, BSD-3-Clause, approved, CQ22955
 npm/npmjs/-/react/18.2.0, MIT, approved, clearlydefined
-npm/npmjs/-/readdirp/3.6.0, MIT, approved, #2977
+npm/npmjs/-/readdirp/3.6.0, MIT, approved, #15328
 npm/npmjs/-/redent/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/redux-thunk/3.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/redux/4.2.1, CC0-1.0 AND MIT, approved, #7046
@@ -444,7 +444,7 @@ npm/npmjs/-/resolve-from/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/resolve-from/5.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/resolve-pkg-maps/1.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/resolve.exports/2.0.2, MIT, approved, clearlydefined
-npm/npmjs/-/resolve/1.22.8, MIT AND ISC, approved, #2409
+npm/npmjs/-/resolve/1.22.8, MIT AND ISC, approved, #15315
 npm/npmjs/-/resolve/2.0.0-next.5, MIT AND ISC, approved, #3078
 npm/npmjs/-/reusify/1.0.4, MIT, approved, clearlydefined
 npm/npmjs/-/rimraf/3.0.2, ISC, approved, clearlydefined
@@ -468,7 +468,7 @@ npm/npmjs/-/sisteransi/1.0.5, MIT, approved, clearlydefined
 npm/npmjs/-/slash/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/slick-carousel/1.8.1, MIT, approved, #2986
 npm/npmjs/-/snake-case/3.0.4, MIT, approved, clearlydefined
-npm/npmjs/-/source-map-js/1.2.0, BSD-3-Clause, approved, #13911
+npm/npmjs/-/source-map-js/1.2.0, BSD-3-Clause, approved, #15272
 npm/npmjs/-/source-map-support/0.5.13, MIT, approved, clearlydefined
 npm/npmjs/-/source-map/0.5.7, BSD-3-Clause, approved, #2400
 npm/npmjs/-/source-map/0.6.1, BSD-3-Clause, approved, #2417
@@ -528,7 +528,7 @@ npm/npmjs/-/v8-compile-cache-lib/3.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/v8-to-istanbul/9.2.0, ISC, approved, clearlydefined
 npm/npmjs/-/vite-plugin-svgr/4.2.0, MIT, approved, clearlydefined
 npm/npmjs/-/vite-tsconfig-paths/4.3.2, MIT, approved, clearlydefined
-npm/npmjs/-/vite/5.2.11, MIT AND (ISC AND MIT) AND (Apache-2.0 AND BSD-2-Clause AND CC0-1.0 AND ISC AND MIT) AND (BSD-3-Clause AND MIT) AND ISC AND (BSD-2-Clause AND BSD-3-Clause), approved, #13953
+npm/npmjs/-/vite/5.2.11, MIT AND (ISC AND MIT) AND (Apache-2.0 AND BSD-2-Clause AND CC0-1.0 AND ISC AND MIT) AND (BSD-3-Clause AND MIT) AND ISC AND (BSD-2-Clause AND BSD-3-Clause), approved, #15411
 npm/npmjs/-/void-elements/3.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/w3c-xmlserializer/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/walker/1.0.8, Apache-2.0, approved, clearlydefined
@@ -617,7 +617,7 @@ npm/npmjs/@emotion/use-insertion-effect-with-fallbacks/1.0.1, MIT, approved, #84
 npm/npmjs/@emotion/utils/1.2.1, MIT, approved, #8415
 npm/npmjs/@emotion/weak-memoize/0.3.1, MIT, approved, #8402
 npm/npmjs/@esbuild/aix-ppc64/0.20.2, MIT, approved, clearlydefined
-npm/npmjs/@esbuild/android-arm/0.20.2, Apache-2.0 AND MIT AND BSD-3-Clause AND (BSD-2-Clause AND BSD-3-Clause), approved, #13952
+npm/npmjs/@esbuild/android-arm/0.20.2, Apache-2.0 AND MIT AND BSD-3-Clause AND (BSD-2-Clause AND BSD-3-Clause), approved, #15302
 npm/npmjs/@esbuild/android-arm64/0.20.2, MIT, approved, clearlydefined
 npm/npmjs/@esbuild/android-x64/0.20.2, Apache-2.0 AND MIT AND BSD-3-Clause AND (BSD-2-Clause AND BSD-3-Clause), approved, #13954
 npm/npmjs/@esbuild/darwin-arm64/0.20.2, MIT, approved, clearlydefined
@@ -639,7 +639,7 @@ npm/npmjs/@esbuild/sunos-x64/0.20.2, MIT, approved, clearlydefined
 npm/npmjs/@esbuild/win32-arm64/0.20.2, MIT, approved, clearlydefined
 npm/npmjs/@esbuild/win32-ia32/0.20.2, MIT, approved, clearlydefined
 npm/npmjs/@esbuild/win32-x64/0.20.2, MIT, approved, clearlydefined
-npm/npmjs/@eslint-community/eslint-utils/4.4.0, MIT, approved, #8032
+npm/npmjs/@eslint-community/eslint-utils/4.4.0, MIT, approved, #15285
 npm/npmjs/@eslint-community/regexpp/4.10.0, MIT, approved, clearlydefined
 npm/npmjs/@eslint/eslintrc/2.1.4, MIT, approved, #9908
 npm/npmjs/@eslint/js/8.57.0, MIT, approved, clearlydefined
diff --git a/src/components/overlays/UpdateCompanyRole/index.tsx b/src/components/overlays/UpdateCompanyRole/index.tsx
index 9aaa0f4a0..7809264d4 100644
--- a/src/components/overlays/UpdateCompanyRole/index.tsx
+++ b/src/components/overlays/UpdateCompanyRole/index.tsx
@@ -53,6 +53,7 @@ import {
   setOverlayCancel,
 } from 'features/companyRoles/slice'
 import { useFetchFrameDocumentByIdMutation } from 'features/appManagement/apiSlice'
+import uniq from 'lodash.uniq'
 
 export enum AgreementStatus {
   ACTIVE = 'ACTIVE',
@@ -90,9 +91,14 @@ export default function UpdateCompanyRole({ roles }: { roles: string[] }) {
   const newRolesSummary = [...newSelectedRoles, ...newDeselectedRoles]
 
   useEffect(() => {
+    const handleAgreement = (agreement: AgreementsData) => {
+      setAgreements((oldArray: AgreementsData[]) =>
+        uniq([...oldArray, agreement])
+      )
+    }
     newSelectedRoles?.map((role: CompanyRolesResponse) =>
       role.agreements.map((agreement: AgreementsData) => {
-        setAgreements((oldArray: AgreementsData[]) => [...oldArray, agreement])
+        handleAgreement(agreement)
         return null
       })
     )
@@ -393,10 +399,16 @@ export default function UpdateCompanyRole({ roles }: { roles: string[] }) {
                               'content.companyRolesUpdate.overlay.TermsAndCondSpan2'
                             )}
                           </Typography>
+                          <span style={{ color: 'red' }}>
+                            {agreement.mandatory ? ' *' : ''}
+                          </span>
                         </>
                       ) : (
                         <Typography variant="label2">
                           {agreement.agreementName}
+                          <span style={{ color: 'red' }}>
+                            {agreement.mandatory ? ' *' : ''}
+                          </span>
                         </Typography>
                       )}
                     </li>
@@ -431,7 +443,15 @@ export default function UpdateCompanyRole({ roles }: { roles: string[] }) {
             variant="contained"
             onClick={() => handleSubmit()}
             disabled={
-              checkedAgreementsIds.length === agreements?.length ? false : true
+              !(
+                checkedAgreementsIds.length >=
+                  agreements.filter((agreement) => agreement.mandatory)
+                    .length &&
+                agreements
+                  .filter((item) => item.mandatory)
+                  .map((i) => i.agreementId)
+                  .every((value) => checkedAgreementsIds.includes(value))
+              )
             }
           >
             {`${t('content.companyRolesUpdate.overlay.submit')}`}
diff --git a/src/features/companyRoles/companyRoleApiSlice.ts b/src/features/companyRoles/companyRoleApiSlice.ts
index dd2b902ad..2fcad1bf3 100644
--- a/src/features/companyRoles/companyRoleApiSlice.ts
+++ b/src/features/companyRoles/companyRoleApiSlice.ts
@@ -26,6 +26,7 @@ export type AgreementsData = {
   agreementName: string
   consentStatus: string
   documentId: string
+  mandatory?: boolean
 }
 
 export type CompanyRolesResponse = {