diff --git a/src/container/DDAgreements/ViewDDAgreementModal.tsx b/src/container/DDAgreements/ViewDDAgreementModal.tsx
index 385986d..e4662aa 100644
--- a/src/container/DDAgreements/ViewDDAgreementModal.tsx
+++ b/src/container/DDAgreements/ViewDDAgreementModal.tsx
@@ -1,186 +1,186 @@
 import React, {
-    Dispatch,
-    SetStateAction,
-  } from "react";
-  import { useForm, FormProvider, useFieldArray } from "react-hook-form";
-  
-  import { Drawer, Typography, Button, Box, Avatar } from "@mui/material";
-  import CloseIcon from "@mui/icons-material/Close";
-  import { Purpose } from "./Purpose";
-  import { Version } from "./Version";
-  import { DataExchangeModeFormControl } from "./DataExchangeMode";
-  import { PurposeDescription } from "./PurposeDescription";
-
-
-  import DefaultBanner from "../../assets/OrganisationDefaultBanner.jpg";
-  import DefaultLogo from "../../assets/OrganisationDefaultLogo.png";
-  
-  import DataAgreementPersonalDataTable from "../dataAgreements/DataAgreementPersonalDataTable";
-  import DataAgreementPolicy from "../dataAgreements/DataAgreementPolicy";
-  import DPIAConfigurations from "../dataAgreements/DPIAConfiguration";
-  import DataSchemaModal from "./dataSchemaModal";
-  
-  import { DataAgreementPayload } from "../dataAgreements/DataAgreementActions";
-  import { HttpService } from "../../service/HTTPService";
-  
-
-  import { LawfullBasisOfProcessingFormControll } from "../dataAgreements/LawfullBasisOfProcessing";
-  import { OrganizationDetailsCRUDContext } from "../../contexts/organizationDetailsCrud";
-  import SnackbarComponent from "../notification";
-  import { isFormDataChanged } from "../../utils/isFormDataChanged";
-  import { useTranslation } from "react-i18next";
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { useForm, FormProvider, useFieldArray } from "react-hook-form";
+
+import { Drawer, Typography, Button, Box, Avatar } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Purpose } from "./Purpose";
+import { Version } from "./Version";
+import { DataExchangeModeFormControl } from "./DataExchangeMode";
+import { PurposeDescription } from "./PurposeDescription";
+
+
+import DefaultBanner from "../../assets/OrganisationDefaultBanner.jpg";
+import DefaultLogo from "../../assets/OrganisationDefaultLogo.png";
+
+import DataAgreementPersonalDataTable from "../dataAgreements/DataAgreementPersonalDataTable";
+import DataAgreementPolicy from "../dataAgreements/DataAgreementPolicy";
+import DPIAConfigurations from "../dataAgreements/DPIAConfiguration";
+import DataSchemaModal from "./dataSchemaModal";
+
+import { DataAgreementPayload } from "../dataAgreements/DataAgreementActions";
+import { HttpService } from "../../service/HTTPService";
+
+
+import { LawfullBasisOfProcessingFormControll } from "../dataAgreements/LawfullBasisOfProcessing";
+import { OrganizationDetailsCRUDContext } from "../../contexts/organizationDetailsCrud";
+import SnackbarComponent from "../notification";
+import { isFormDataChanged } from "../../utils/isFormDataChanged";
+import { useTranslation } from "react-i18next";
 import { defaultCoverImage, defaultLogoImg } from "../../utils/defalultImages";
 import { ConnectedAgreement } from "./ConnectedAgreement";
 import DataSharingRestriction from "./DataSharingRestriction";
-  
-  interface Props {
-    open: boolean;
-    handleClose: Dispatch<SetStateAction<boolean>>;
-    mode: string;
-    successCallback?: any;
-    resourceName?: string;
-    selectededDataAgreementFromDataAgreement?: any;
-    dataAgrreementRevisionIdForSelectedRecord?: string | undefined;
-    setSelectedDropdownValue?: any;
-  }
-  
-  let defaultValue = {
-    Name: "",
-    Description: "",
-    Version: "1.0.0",
-    AttributeType: "null",
-    LawfulBasisOfProcessing: "consent",
-    PolicyURL: "https://igrant.io/policy.html",
-    Jurisdiction: "London, GB",
-    IndustryScope: "Retail",
-    StorageLocation: "Europe",
-    dataRetentionPeriodDays: 0,
-    Restriction: "Europe",
-    Shared3PP: false,
-    DpiaDate: new Date().toISOString().slice(0, 16),
-    DpiaSummaryURL: "https://privacyant.se/dpia_results.html",
-    dataAttributes: [{ attributeName: "", attributeDescription: "" }],
-  };
-  
-  export default function ViewDataAgreementModal(props: Props) {
-    const {
-      open,
-      handleClose,
-      mode,
-      successCallback,
-      resourceName,
-      selectededDataAgreementFromDataAgreement,
-      dataAgrreementRevisionIdForSelectedRecord,
-      setSelectedDropdownValue,
-    } = props;
-    const { t } = useTranslation("translation");
-    
-  
-    return (
-      <>
-        <Drawer anchor="right" open={open}>
-          <Box className="dd-modal-container">
-              <form>
-                <Box className="dd-modal-header">
-                  <Box pl={2}>
-                    <Typography color="#F3F3F6">
-                    Edit Data Agreement: User Data for Third Parties
-                    </Typography>
-                    {mode !== "Create" && (
-                      <Typography color="#F3F3F6">
-                        654cf0db9684ed907ce07c5f
-                      </Typography>
-                    )}
-                  </Box>
-                  <CloseIcon
-                    onClick={handleClose}
-                    sx={{
-                      paddingRight: 2,
-                      cursor: "pointer",
-                      color: "#F3F3F6",
-                    }}
-                  />
-                </Box>
-                <Box className='dd-modal-banner-container'>
-                    <Box
-                    style={{ height: "150px", width: "100%" }}
-                    component="img"
-                    alt="Banner"
-                    src={defaultCoverImage}
-                    />
+
+interface Props {
+  open: boolean;
+  handleClose: Dispatch<SetStateAction<boolean>>;
+  mode: string;
+  successCallback?: any;
+  resourceName?: string;
+  selectededDataAgreementFromDataAgreement?: any;
+  dataAgrreementRevisionIdForSelectedRecord?: string | undefined;
+  setSelectedDropdownValue?: any;
+}
+
+let defaultValue = {
+  Name: "",
+  Description: "",
+  Version: "1.0.0",
+  AttributeType: "null",
+  LawfulBasisOfProcessing: "consent",
+  PolicyURL: "https://igrant.io/policy.html",
+  Jurisdiction: "London, GB",
+  IndustryScope: "Retail",
+  StorageLocation: "Europe",
+  dataRetentionPeriodDays: 0,
+  Restriction: "Europe",
+  Shared3PP: false,
+  DpiaDate: new Date().toISOString().slice(0, 16),
+  DpiaSummaryURL: "https://privacyant.se/dpia_results.html",
+  dataAttributes: [{ attributeName: "", attributeDescription: "" }],
+};
+
+export default function ViewDataAgreementModal(props: Props) {
+  const {
+    open,
+    handleClose,
+    mode,
+    successCallback,
+    resourceName,
+    selectededDataAgreementFromDataAgreement,
+    dataAgrreementRevisionIdForSelectedRecord,
+    setSelectedDropdownValue,
+  } = props;
+  const { t } = useTranslation("translation");
+
+
+  return (
+    <>
+      <Drawer anchor="right" open={open}>
+        <Box className="dd-modal-container">
+          <form>
+            <Box className="dd-modal-header">
+              <Box pl={2}>
+                <Typography color="#F3F3F6">
+                  View Data Disclosure Agreement: User Data for Third Parties
+                </Typography>
+                {mode !== "Create" && (
+                  <Typography color="#F3F3F6">
+                    654cf0db9684ed907ce07c5f
+                  </Typography>
+                )}
               </Box>
-              <Box sx={{ marginBottom: "60px" }}>
-                <Avatar
-                  src={defaultLogoImg}
+              <CloseIcon
+                onClick={handleClose}
+                sx={{
+                  paddingRight: 2,
+                  cursor: "pointer",
+                  color: "#F3F3F6",
+                }}
+              />
+            </Box>
+            <Box className='dd-modal-banner-container'>
+              <Box
+                style={{ height: "150px", width: "100%" }}
+                component="img"
+                alt="Banner"
+                src={defaultCoverImage}
+              />
+            </Box>
+            <Box sx={{ marginBottom: "60px" }}>
+              <Avatar
+                src={defaultLogoImg}
+                style={{
+                  position: "absolute",
+                  marginLeft: 50,
+                  marginTop: "-65px",
+                  width: "110px",
+                  height: "110px",
+                  border: "solid white 6px",
+                }}
+              />
+            </Box>
+
+            <Box className='dd-modal-details'>
+              <Box p={1.5}>
+                <Typography variant="h6" fontWeight="bold">
+                  National ID
+                </Typography>
+                <Typography>
+                  Sweden
+                </Typography>
+                <Typography variant="subtitle1" mt={3}>
+                  {t("common.overView")}
+                </Typography>
+                <Typography
+                  variant="subtitle2"
+                  color="#9F9F9F"
+                  mt={1}
+                  sx={{ wordWrap: "breakWord" }}
+                >
+                  For Queries about how we are managing your data please contact the Data Protection Officer.
+                </Typography>
+
+                <ConnectedAgreement open={true} mode={""} />
+                <Typography
                   style={{
-                    position: "absolute",
-                    marginLeft: 50,
-                    marginTop: "-65px",
-                    width: "110px",
-                    height: "110px",
-                    border: "solid white 6px",
+                    fontSize: "14px",
+                    textDecoration: "underline",
+                    color: "grey",
+                    marginTop: "5px",
+                    cursor: "not-allowed",
                   }}
+                >
+                  (View Data Disclosure Agreement)
+                </Typography>
+
+                <DataExchangeModeFormControl
+                  open={props.open}
+                  mode={props.mode}
+                  selectededDataAgreementFromDataAgreement={
+                    selectededDataAgreementFromDataAgreement
+                  }
                 />
-              </Box>
-
-              <Box className='dd-modal-details'>
-                <Box p={1.5}>
-                  <Typography variant="h6" fontWeight="bold">
-                    National ID
-                  </Typography>
-                  <Typography>
-                    Sweden
-                  </Typography>
-                  <Typography variant="subtitle1" mt={3}>
-                    {t("common.overView")}
-                  </Typography>
-                  <Typography
-                    variant="subtitle2"
-                    color="#9F9F9F"
-                    mt={1}
-                    sx={{ wordWrap: "breakWord" }}
-                  >
-                    For Queries about how we are managing your data please contact the Data Protection Officer.
-                  </Typography>
-
-                  <ConnectedAgreement open={true} mode={""} />
-                  <Typography
-                        style={{
-                          fontSize: "14px",
-                          textDecoration: "underline",
-                          color: "grey",
-                          marginTop: "5px",
-                          cursor: "not-allowed",
-                        }}
-                      >
-                        (View Data Disclosure Agreement)
-                      </Typography>
 
-                  <DataExchangeModeFormControl
-                      open={props.open}
-                      mode={props.mode}
-                      selectededDataAgreementFromDataAgreement={
-                        selectededDataAgreementFromDataAgreement
-                      }
-                    />
-                    
-                    <Purpose open={props.open} mode={props.mode} />
+                <Purpose open={props.open} mode={props.mode} />
 
-                    <Version />
+                <Version />
 
-                    <DataSharingRestriction />
+                <DataSharingRestriction />
 
-                    {/* <LawfullBasisOfProcessingFormControll
+                {/* <LawfullBasisOfProcessingFormControll
                       open={props.open}
                       mode={props.mode}
                     /> */}
 
-                  {/* <Box mt={2}> */}
-                    {/* <Purpose open={props.open} mode={props.mode} /> */}
+                {/* <Box mt={2}> */}
+                {/* <Purpose open={props.open} mode={props.mode} /> */}
 
-                    {/* <Version /> */}
+                {/* <Version /> */}
 
-                    {/* <DataExchangeModeFormControl
+                {/* <DataExchangeModeFormControl
                       open={props.open}
                       mode={props.mode}
                       selectededDataAgreementFromDataAgreement={
@@ -188,8 +188,8 @@ import DataSharingRestriction from "./DataSharingRestriction";
                       }
                     /> */}
 
-                    {/* Required for future purpose in enterprise dashboard */}
-                    {/* <Typography
+                {/* Required for future purpose in enterprise dashboard */}
+                {/* <Typography
                         style={{
                           fontSize: "14px",
                           textDecoration: "underline",
@@ -201,7 +201,7 @@ import DataSharingRestriction from "./DataSharingRestriction";
                         (Choose existing schemas)
                       </Typography> */}
 
-                    {/* <PurposeDescription open={props.open} mode={props.mode} />
+                {/* <PurposeDescription open={props.open} mode={props.mode} />
 
                     <LawfullBasisOfProcessingFormControll
                       open={props.open}
@@ -227,12 +227,11 @@ import DataSharingRestriction from "./DataSharingRestriction";
                     remove={remove}
                     formController={control}
                   /> */}
-                </Box> 
               </Box>
-              </form>
-          </Box>
-        </Drawer>
-      </>
-    );
-  }
-  
\ No newline at end of file
+            </Box>
+          </form>
+        </Box>
+      </Drawer>
+    </>
+  );
+}
diff --git a/src/container/DDAgreements/style.scss b/src/container/DDAgreements/style.scss
index 52e1784..13d8be4 100644
--- a/src/container/DDAgreements/style.scss
+++ b/src/container/DDAgreements/style.scss
@@ -33,16 +33,16 @@
     height: 100vh;
     background-color: #FFFF;
     margin-top: 0;
-    width: 540px;
+    // width: 540px;
     @include tabletAndDown {
         margin-top: 0;
-        width: 380px;
+        // width: 380px;
     }
 }
 
 .dd-modal-header {
     font-size: 16px;
-    background-color: #0A065E;
+    background-color: #03182b;
     display: flex;
     align-items: center;
     height: 80px;