diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 0dd8299..fa4f79d 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -7,7 +7,7 @@ import { Typography } from '@navi/web-ui/lib/primitives';
 import { LoadingIcon } from '@navi/web-ui/lib/icons';
 
 import { ApiService } from '@src/services/api';
-import MembersDetails from '@src/components/MembersDetails';
+import MembersDetails from '@src/components/SevMemberDetails';
 import {
   FETCH_SINGLE_SEVERITY_DATA,
   SeverityFormProps,
diff --git a/src/components/SevMemberDetails/Members.module.scss b/src/components/SevMemberDetails/Members.module.scss
new file mode 100644
index 0000000..7168bd7
--- /dev/null
+++ b/src/components/SevMemberDetails/Members.module.scss
@@ -0,0 +1,13 @@
+.member-details-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  cursor: pointer;
+}
+
+.participant-detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/src/components/SevMemberDetails/index.tsx b/src/components/SevMemberDetails/index.tsx
new file mode 100644
index 0000000..54009f3
--- /dev/null
+++ b/src/components/SevMemberDetails/index.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+
+import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+
+import styles from './Members.module.scss';
+
+const MembersDetails = (props: any) => {
+  const { data } = props;
+  const totalMembers = data?.participants?.length;
+  const [showTotalMembers, setShowTotalMembers] = useState(10);
+
+  return (
+    <div>
+      {totalMembers ? (
+        <>
+          {data?.participants
+            ?.slice(0, showTotalMembers)
+            ?.map((participant, index) => (
+              <div
+                key={participant?.id}
+                className={styles['member-details-wrapper']}
+              >
+                <div className={styles['participant-detail']}>
+                  <Avatar size={20} isImage src={participant?.image} />{' '}
+                  <Typography variant="p3">{participant?.name}</Typography>
+                  {totalMembers > 10 && index === showTotalMembers - 1 ? (
+                    totalMembers !== showTotalMembers ? (
+                      <div onClick={() => setShowTotalMembers(totalMembers)}>
+                        <Typography variant="h5">
+                          +{totalMembers - showTotalMembers} More
+                        </Typography>
+                      </div>
+                    ) : (
+                      <div onClick={() => setShowTotalMembers(10)}>
+                        <Typography variant="h5">View less</Typography>
+                      </div>
+                    )
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            ))}
+        </>
+      ) : (
+        <Typography variant="p3" className={styles['member-details-wrapper']}>
+          -
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default MembersDetails;