diff --git a/src/Components/CollapseUsage/PanelHeader.jsx b/src/Components/CollapseUsage/PanelHeader.jsx
index 2c7533e6..0987d207 100644
--- a/src/Components/CollapseUsage/PanelHeader.jsx
+++ b/src/Components/CollapseUsage/PanelHeader.jsx
@@ -1,10 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Switch } from "antd";
 import { withNamespaces } from "react-i18next";
 import { Popover } from "antd";
-import { ModalComponentWithNamespace } from "../modals/modal";
-import { DataAgreementDetailsWithNamespace } from "../modals/detailsContainer/dataAgreementDetails";
-import { DataSourcesDetailsWithNamespace } from "../modals/detailsContainer/dataSourcesDetails";
 
 const content = (description) => (
   <div>
@@ -24,123 +21,75 @@ export const PanelHeader = ({
   disabled,
   checked,
   elemRef,
-  showDescription,
-  lawfulBasisOfProcessing,
-  policyURL,
-  jurisdiction,
-  thirdPartyDisclosure,
-  industryScope,
-  geographicRestriction,
-  retentionPeriod,
-  storageLocation,
-  methodOfUse,
-  dataAgreement,
+  disableDataAttributes,
+  key,
+  setOpenViewDataSources,
+  onOpenDataAgreementModal,
 }) => {
-  const [openViewDataAgreementModal, setOpenViewDataAgreementModal] = useState(
-    false
-  );
-  const [openDataSources, setOpenViewDataSources] = useState(false);
-
-  const disableDataAttrubutes =
-    methodOfUse !== "data_using_service" ||
-    (!dataAgreement["dataSources"] ||
-      dataAgreement["dataSources"] === undefined || dataAgreement["dataSources"].length === 0);
-
   return (
-    <>
-      <Popover
-        content={content(description)}
-        placement="bottomRight"
-        trigger="hover|focus"
-        overlayClassName="purpose-tooltip"
-      >
-        <div ref={elemRef}>
-          <div>
-            <div className="panel-header">
-              <div>
-                <p className="title">{text}</p>
-              </div>
-              <Switch
-                disabled={disabled}
-                checked={checked}
-                onChange={onChange}
-              />
-            </div>
-            {showDescription && (
-              <p style={{ width: "97%", fontSize: "12px" }}>
-                {description}
-                <span style={{ float: "right" }}>
-                  {t("dataAgreements.read")}{" "}
-                  <span
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setOpenViewDataAgreementModal(true);
-                    }}
-                    style={{ textDecoration: "underline", color: "#1890FF" }}
-                  >
-                    {t("dataAgreements.daDetails")}
-                  </span>
-                </span>
-              </p>
-            )}
-            <div className="panel-header-count">
-              <p>
-                {" "}
-                {t("userRequests.panelAllow")}
-                {` ${consented} of ${total}`}
-              </p>
-              {showDescription && (
-                <p
-                  style={{
-                    textDecoration: "underline",
-                    color: disableDataAttrubutes ? "grey" : "#1890FF",
-                    cursor: disableDataAttrubutes ? "not-allowed" : "pointer",
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (!disableDataAttrubutes) {
-                      setOpenViewDataSources(true);
-                    }
-                  }}
-                >
-                  {t("dataAgreements.dataSources")}
-                </p>
-              )}
+    <Popover
+      content={content(description)}
+      placement="bottomRight"
+      trigger="hover|focus"
+      overlayClassName="purpose-tooltip"
+      key={key}
+    >
+      <div ref={elemRef}>
+        <div>
+          <div className="panel-header">
+            <div>
+              <p className="title">{text}</p>
             </div>
+            <Switch disabled={disabled} checked={checked} onChange={onChange} />
           </div>
-        </div>
-      </Popover>
+          <p style={{ width: "97%", fontSize: "12px" }}>
+            {description.length > 80
+              ? `${description.substring(0, 80)} ...`
+              : description}
 
-      {/* View Data agreements */}
-      <ModalComponentWithNamespace
-        open={openViewDataAgreementModal}
-        setOpen={setOpenViewDataAgreementModal}
-        header={t("dataAgreements.daataAgreement")}
-      >
-        <DataAgreementDetailsWithNamespace
-          purpose={text}
-          purposeDescription={description}
-          lawfulBasisOfProcessing={lawfulBasisOfProcessing}
-          policyURL={policyURL}
-          jurisdiction={jurisdiction}
-          thirdPartyDisclosure={thirdPartyDisclosure}
-          industryScope={industryScope}
-          geographicRestriction={geographicRestriction}
-          retentionPeriod={retentionPeriod}
-          storageLocation={storageLocation}
-        />
-      </ModalComponentWithNamespace>
+            <span
+              style={{ float: "right", color: "#1890FF", cursor: "pointer" }}
+              onClick={(e) => {
+                onOpenDataAgreementModal(e);
+              }}
+            >
+              {t("dataAgreements.read")} {t("dataAgreements.daDetails")}
+            </span>
+          </p>
 
-      {/* View Data Sources */}
-      <ModalComponentWithNamespace
-        open={openDataSources}
-        setOpen={setOpenViewDataSources}
-        header={t("dataAgreements.dataSources")}
-      >
-        <DataSourcesDetailsWithNamespace dataAgreement={dataAgreement} />
-      </ModalComponentWithNamespace>
-    </>
+          <div className="panel-header-count">
+            <p
+              style={{
+                margin: 0,
+                padding: 0,
+              }}
+            >
+              {" "}
+              {t("userRequests.panelAllow")}
+              {` ${consented} of ${total}`}
+            </p>
+            {!disableDataAttributes && (
+              <span
+                style={{
+                  color: "#1890FF",
+                  cursor: "pointer",
+                  margin: 0,
+                  padding: 0,
+                }}
+                onClick={(e) => {
+                  // if (!disableDataAttributes) {
+                  setOpenViewDataSources(e);
+                  // }
+                }}
+              >
+                {t("dataAgreements.dataSources")}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Popover>
   );
 };
 
-export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
\ No newline at end of file
+export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
diff --git a/src/Components/CollapseUsage/SubCollapse.jsx b/src/Components/CollapseUsage/SubCollapse.jsx
index 8f797493..9bcca091 100644
--- a/src/Components/CollapseUsage/SubCollapse.jsx
+++ b/src/Components/CollapseUsage/SubCollapse.jsx
@@ -7,6 +7,7 @@ const Panel = Collapse.Panel;
 const RadioGroup = Radio.Group;
 
 export const SubCollapse = ({ title, consented, lawfulUsage }) => (
+
   <Collapse
     className="collapse-usage bg-transparent"
     bordered={false}
@@ -14,7 +15,7 @@ export const SubCollapse = ({ title, consented, lawfulUsage }) => (
       <Icon type="caret-right" rotate={isActive ? 90 : 0} />
     )}
   >
-    <Panel className="sub-collapse-panel" header={title} key="1">
+    <Panel className="sub-collapse-panel" header={title} key="1" style={{marginTop:  "5px"}}>
       <div className="group">
         <RadioGroup
           className="radio-group-small"
diff --git a/src/Components/CollapseUsage/collapse.css b/src/Components/CollapseUsage/collapse.css
index 07e175a7..ff75c332 100644
--- a/src/Components/CollapseUsage/collapse.css
+++ b/src/Components/CollapseUsage/collapse.css
@@ -72,7 +72,7 @@
   display: flex;
   justify-content: space-between;
   align-items: top;
-  width:97%
+  width: 97%;
 }
 
 .panel-header > button {
@@ -216,3 +216,7 @@
 .read-text {
   white-space: nowrap;
 }
+
+.collapse-usage .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 0 12px 0 40px;
+}
diff --git a/src/Components/CollapseUsage/index.js b/src/Components/CollapseUsage/index.js
index 8a8c9e10..79b9c393 100644
--- a/src/Components/CollapseUsage/index.js
+++ b/src/Components/CollapseUsage/index.js
@@ -7,6 +7,9 @@ import { PanelHeaderWithNamespace } from "./PanelHeader";
 import { SubCollapse } from "./SubCollapse";
 import { store } from "Provider/store";
 import { withNamespaces } from "react-i18next";
+import { ModalComponentWithNamespace } from "../modals/modal";
+import { DataSourcesDetailsWithNamespace } from "../modals/detailsContainer/dataSourcesDetails";
+import { DataAgreementDetailsWithNamespace } from "../modals/detailsContainer/dataAgreementDetails";
 
 const Panel = Collapse.Panel;
 
@@ -21,7 +24,9 @@ class CollapseUsage extends Component {
     this.state = {
       openKey: [],
       scrolled: false,
-      activeKeys: [],
+      openDataSources: false,
+      openDataAgreement: false,
+      selectedDataAgreement: null,
     };
 
     this.delta = this.delta.bind(this);
@@ -50,8 +55,24 @@ class CollapseUsage extends Component {
     }
   };
 
-  onCollapseChange = (activeKeys) => {
-    this.setState({ activeKeys });
+  setOpenViewDataSources = (open) => {
+    this.setState({ openDataSources: open });
+  };
+
+  openDataSourcesModal = (dataAgreement, e) => {
+    e.stopPropagation();
+    this.setState({
+      openDataSources: true,
+      selectedDataAgreement: dataAgreement,
+    });
+  };
+
+  openDataAgreementModal = (dataAgreement, e) => {
+    e.stopPropagation();
+    this.setState({
+      openDataAgreement: true,
+      selectedDataAgreement: dataAgreement,
+    });
   };
 
   render() {
@@ -59,7 +80,11 @@ class CollapseUsage extends Component {
 
     const { t } = this.props;
     let openKey = "";
-    const { activeKeys } = this.state;
+    const {
+      openDataSources,
+      openDataAgreement,
+      selectedDataAgreement,
+    } = this.state;
 
     if (isFetching) {
       return (
@@ -74,106 +99,169 @@ class CollapseUsage extends Component {
       return acc;
     }, {});
 
-    // Todo : Need to fix the toggle, purpose highlight.
-
-    return !data ? null : (
-      <Collapse
-        className="collapse-usage"
-        bordered={false}
-        defaultActiveKey={openKey.toString()}
-        activeKey={activeKeys}
-        onChange={this.onCollapseChange}
-        expandIcon={({ isActive }) => (
-          <Icon
-            style={{ position: "absolute", top: "22px" }}
-            type="caret-right"
-            rotate={isActive ? 90 : 0}
-          />
-        )}
-      >
-        {!data
-          ? null
-          : data.map((dataAgreement, i) => {
-              const consented =
-                dataAgreement["consentRecords"] === null
-                  ? 0
-                  : dataAgreement["consentRecords"]["optIn"]
-                  ? dataAgreement["dataAttributes"].length
-                  : 0;
-              const checked =
-                dataAgreement["consentRecords"] === null
-                  ? false
-                  : dataAgreement["consentRecords"]["optIn"];
-
-              const isActive = activeKeys.includes(i.toString());
-              return (
-                <Panel
-                  header={
-                    <Spin
+    return (
+      <>
+        {!data ? null : (
+          <Collapse
+            className="collapse-usage"
+            bordered={false}
+            defaultActiveKey={openKey.toString()}
+            expandIcon={({ isActive }) => (
+              <Icon
+                style={{ position: "absolute", top: "22px" }}
+                type="caret-right"
+                rotate={isActive ? 90 : 0}
+              />
+            )}
+          >
+            {!data
+              ? null
+              : data.map((dataAgreement, i) => {
+                  const consented =
+                    dataAgreement["consentRecords"] === null
+                      ? 0
+                      : dataAgreement["consentRecords"]["optIn"]
+                      ? dataAgreement["dataAttributes"].length
+                      : 0;
+                  const checked =
+                    dataAgreement["consentRecords"] === null
+                      ? false
+                      : dataAgreement["consentRecords"]["optIn"];
+
+                  const disableDataAttributes =
+                    dataAgreement["methodOfUse"] !== "data_using_service" ||
+                    (!dataAgreement["dataSources"] ||
+                      dataAgreement["dataSources"] === undefined ||
+                      dataAgreement["dataSources"].length === 0);
+
+                  return (
+                    <Panel
                       key={i}
-                      spinning={loadingUiStore[dataAgreement["id"]]}
-                    >
-                      <PanelHeaderWithNamespace
-                        elemRef={this.elemRefs[dataAgreement["id"]]}
-                        policyURL={dataAgreement["policy"]["url"]}
-                        disabled={dataAgreement["isDisabled"]}
-                        consented={consented}
-                        total={dataAgreement["dataAttributes"].length}
-                        checked={checked}
-                        onChange={(value, e) =>
-                          this.handleSwitch(dataAgreement, value, e)
-                        }
-                        text={`${dataAgreement["purpose"]}`}
-                        description={`${dataAgreement["purposeDescription"]}`}
-                        showDescription={isActive}
-                        dataAgreement={dataAgreement}
-                        lawfulBasisOfProcessing={`${
-                          dataAgreement["lawfulBasis"]
-                        }`}
-                        jurisdiction={dataAgreement["policy"]["jurisdiction"]}
-                        thirdPartyDisclosure={
-                          dataAgreement["policy"]["thirdPartyDataSharing"]
-                            ? "True"
-                            : "False"
-                        }
-                        industryScope={
-                          dataAgreement["policy"]["industrySector"]
-                        }
-                        geographicRestriction={
-                          dataAgreement["policy"]["geographicRestriction"]
-                        }
-                        retentionPeriod={`${Math.floor(
-                          dataAgreement["policy"]["dataRetentionPeriodDays"] /
-                            365
-                        )} years`}
-                        storageLocation={
-                          dataAgreement["policy"]["storageLocation"]
-                        }
-                        methodOfUse={`${dataAgreement["methodOfUse"]}`}
-                      />
-                    </Spin>
-                  }
-                  key={i}
-                  className={`panel-usage panel-usage-${dataAgreement["id"]}`}
-                >
-                  {!dataAgreement["dataAttributes"]
-                    ? null
-                    : dataAgreement["dataAttributes"].map(
-                        (dataAttribute, i) => (
-                          <SubCollapse
+                      header={
+                        <Spin
+                          key={i}
+                          spinning={loadingUiStore[dataAgreement["id"]]}
+                        >
+                          <PanelHeaderWithNamespace
+                            elemRef={this.elemRefs[dataAgreement["id"]]}
+                            policyURL={dataAgreement["policy"]["url"]}
+                            disabled={dataAgreement["isDisabled"]}
+                            consented={consented}
+                            total={dataAgreement["dataAttributes"].length}
+                            checked={checked}
+                            onChange={(value, e) =>
+                              this.handleSwitch(dataAgreement, value, e)
+                            }
+                            text={`${dataAgreement["purpose"]}`}
+                            description={`${
+                              dataAgreement["purposeDescription"]
+                            }`}
+                            disableDataAttributes={disableDataAttributes}
                             key={i}
-                            lawfulUsage={dataAgreement["isDisabled"]}
-                            title={dataAttribute["name"]}
-                            consented={checked}
+                            setOpenViewDataSources={(e) =>
+                              this.openDataSourcesModal(dataAgreement, e)
+                            }
+                            onOpenDataAgreementModal={(e) =>
+                              this.openDataAgreementModal(dataAgreement, e)
+                            }
                           />
-                        )
-                      )}
-                </Panel>
-              );
-            })}
-      </Collapse>
+                        </Spin>
+                      }
+                      className={`panel-usage panel-usage-${
+                        dataAgreement["id"]
+                      }`}
+                    >
+                      {!dataAgreement["dataAttributes"]
+                        ? null
+                        : dataAgreement["dataAttributes"].map(
+                            (dataAttribute, i) => (
+                              <SubCollapse
+                                lawfulUsage={dataAgreement["isDisabled"]}
+                                title={dataAttribute["name"]}
+                                consented={checked}
+                              />
+                            )
+                          )}
+                    </Panel>
+                  );
+                })}
+          </Collapse>
+        )}
+
+        {/* View Data Sources Modal */}
+        {openDataSources && (
+          <ModalComponentWithNamespace
+            open={openDataSources}
+            setOpen={this.setOpenViewDataSources}
+            header={t("dataAgreements.dataSources")}
+          >
+            <DataSourcesDetailsWithNamespace
+              dataAgreement={selectedDataAgreement}
+            />
+          </ModalComponentWithNamespace>
+        )}
+
+        {/* View Data Agreement Modal */}
+        {openDataAgreement && (
+          <ModalComponentWithNamespace
+            open={openDataAgreement}
+            setOpen={(open) => this.setState({ openDataAgreement: open })}
+            header={t("dataAgreements.daataAgreement")}
+          >
+            <DataAgreementDetailsWithNamespace
+              purpose={selectedDataAgreement && selectedDataAgreement.purpose}
+              purposeDescription={
+                selectedDataAgreement &&
+                selectedDataAgreement.purposeDescription
+              }
+              lawfulBasisOfProcessing={
+                selectedDataAgreement && selectedDataAgreement.lawfulBasis
+              }
+              policyURL={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.url
+              }
+              jurisdiction={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.jurisdiction
+              }
+              thirdPartyDisclosure={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.thirdPartyDataSharing
+                  ? "True"
+                  : "False"
+              }
+              industryScope={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.industrySector
+              }
+              geographicRestriction={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.geographicRestriction
+              }
+              retentionPeriod={
+                selectedDataAgreement && selectedDataAgreement.policy
+                  ? `${Math.floor(
+                      selectedDataAgreement.policy.dataRetentionPeriodDays / 365
+                    )} years`
+                  : ""
+              }
+              storageLocation={
+                selectedDataAgreement &&
+                selectedDataAgreement.policy &&
+                selectedDataAgreement.policy.storageLocation
+              }
+            />
+          </ModalComponentWithNamespace>
+        )}
+      </>
     );
   }
 }
 
-export default withNamespaces()(CollapseUsage);
\ No newline at end of file
+export default withNamespaces()(CollapseUsage);
diff --git a/src/Components/modals/detailsContainer/dataSourcesDetails.js b/src/Components/modals/detailsContainer/dataSourcesDetails.js
index 2c3c757a..4e8d0d60 100644
--- a/src/Components/modals/detailsContainer/dataSourcesDetails.js
+++ b/src/Components/modals/detailsContainer/dataSourcesDetails.js
@@ -45,7 +45,6 @@ export const DataSourcesDetails = ({ t, dataAgreement }) => {
         <p
           style={{ color: "grey", fontSize: "15px", cursor: "pointer" }}
           onClick={(e) => {
-            e.stopPropagation();
             e.preventDefault();
           }}
         >
diff --git a/src/Components/modals/modal.js b/src/Components/modals/modal.js
index 0b0cb1ee..758f4753 100644
--- a/src/Components/modals/modal.js
+++ b/src/Components/modals/modal.js
@@ -4,15 +4,17 @@ import { Drawer, Button } from "antd";
 import "./modal.css";
 import { withNamespaces } from "react-i18next";
 
-export const ModalComponent = ({ t, open, setOpen, header, children }) => {
+export const ModalComponent = ({ t, open, setOpen, header, children, key }) => {
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   return (
     <Drawer
+      key={key}
       placement="right"
       closable={true}
-      onClose={(e) => {
-        e.stopPropagation();
-        setOpen(false);
-      }}
+      onClose={handleClose}
       visible={open}
       title={header}
       className="my-custom-drawer"
@@ -22,10 +24,7 @@ export const ModalComponent = ({ t, open, setOpen, header, children }) => {
 
       <div className="footer-container">
         <Button
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen(false);
-          }}
+          onClick={handleClose}
           className="button"
         >
           {t("dataAgreements.close")}
@@ -35,4 +34,4 @@ export const ModalComponent = ({ t, open, setOpen, header, children }) => {
   );
 };
 
-export const ModalComponentWithNamespace = withNamespaces()(ModalComponent);
+export const ModalComponentWithNamespace = withNamespaces()(ModalComponent);
\ No newline at end of file