diff --git a/src/app/api/organization.ts b/src/app/api/organization.ts
index f175b07..7af24dc 100644
--- a/src/app/api/organization.ts
+++ b/src/app/api/organization.ts
@@ -124,11 +124,11 @@ export const changeOrgMembersStatus = async (
   orgName: string,
   orgMemberStatus: { [key: string]: string }
 ) => {
-  const url = BACKEND_URL + '/api/protected/org/removeMembers/';
+  const url = BACKEND_URL + '/api/protected/org/changeMembersStatus/'+orgName;
   const respnse = await axios.put(
     url,
     {
-      orgMemberStatus: orgMemberStatus,
+      orgMembersStatus: orgMemberStatus,
     },
     {
       headers: {
diff --git a/src/app/routes/BasicRoutes.tsx b/src/app/routes/BasicRoutes.tsx
index cbfabf1..af764be 100644
--- a/src/app/routes/BasicRoutes.tsx
+++ b/src/app/routes/BasicRoutes.tsx
@@ -10,6 +10,7 @@ import Workspace from 'features/workspace';
 
 import EditWorkspace from 'features/EditWorkspace';
 import EditProject from 'features/EditProject';
+import WorkspaceMembers from 'features/workspace-members ';
 
 const BasicRoutes = () => {
   return (
@@ -22,6 +23,7 @@ const BasicRoutes = () => {
       <Route path={'/addWorkspace'} element={<AddWorkspace />} />
       <Route path={'/editWorkspace/:spaceName'} element ={<EditWorkspace/>} />
       <Route path={'/editProject/:spaceName/:projectName'} element={<EditProject/>}/>
+      <Route path={'/workspaceMembers/:spaceName'} element={<WorkspaceMembers/>}/>
       <Route path={'/*'} element={<Error />} />
       {/* <Route path={'/testing'} element={<ProjectMembers />} /> */}
     </Routes>
diff --git a/src/features/WorkspaceAddMember/index.scss b/src/features/WorkspaceAddMember/index.scss
new file mode 100644
index 0000000..fddf8ac
--- /dev/null
+++ b/src/features/WorkspaceAddMember/index.scss
@@ -0,0 +1,164 @@
+
+
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: max-content;
+  padding: 2rem;
+  .addworkspace-form-container {
+    background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 2rem 1rem;
+    border-radius: 1.25rem;
+    gap: 2rem;
+    .submit {
+      display: flex;
+      padding: 1rem 2rem;
+      align-self: flex-end;
+      font-size: 1.5rem;
+      border-radius: 0.875rem;
+      background: #402aa4;
+      color: white;
+      outline: none;
+      border: none;
+    }
+  }
+
+  .single-form-element-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    .label {
+      color: #8181ff;
+      font-size: 1.5rem;
+      font-weight: 900;
+    }
+  }
+}
+
+.custom-input {
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  background-color: transparent;
+  align-items: flex-start;
+  color: rgba(173, 173, 255, 0.75);
+  padding: 1.5rem 1rem;
+  font-size: 1.25rem;
+  font-family: 'Poppins';
+  outline: none;
+}
+
+.custom-input::placeholder {
+  color: rgba(173, 173, 255, 0.75);
+  font-family: Poppins;
+  font-size: 1.25rem;
+  font-weight: 100;
+  line-height: normal;
+}
+
+.file-input-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 30rem;
+  padding: 2rem;
+  border-radius: 1.25rem;
+  background: linear-gradient(
+    138deg,
+    rgba(20, 20, 50, 0.7) 5.19%,
+    rgba(20, 20, 50, 0.7) 97.11%
+  );
+  backdrop-filter: blur(25px);
+
+  .custom-file-input {
+    visibility: hidden;
+  }
+  .file-label {
+    width: fit-content;
+    padding: 0.4375rem 0.5625rem;
+    border-radius: 1.75rem;
+    background: #402aa4;
+    color: white;
+  }
+}
+
+.add-member-container {
+  position: relative;
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  display: flex;
+  flex-direction: row;
+  outline: #141432;
+  .custom-input {
+    display: flex;
+    width: 100%;
+    border: none;
+    outline: none;
+  }
+  button {
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.25rem;
+    margin: 0.75rem 1rem;
+    color: white;
+    width: 7rem;
+    font-weight: 100 !important;
+    border-radius: 2.3125rem;
+    background: #402aa4;
+  }
+}
+
+.added-members {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  flex-wrap: wrap;
+  width: 100%;
+  .member-card {
+    display: inline-flex;
+    padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5625rem;
+    color: #8989ce;
+    border-radius: 0.75rem;
+    background: #26264e;
+    .member-avatar {
+      width: 40px;
+      height: 40px;
+    }
+    .btn-cross {
+      appearance: none;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+  }
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .main_aworkspace_container {
+    padding: 2rem 5rem;
+    .addworkspace-form-container {
+      padding: 2rem 5rem;
+    }
+  }
+}
diff --git a/src/features/WorkspaceAddMember/index.tsx b/src/features/WorkspaceAddMember/index.tsx
new file mode 100644
index 0000000..de46672
--- /dev/null
+++ b/src/features/WorkspaceAddMember/index.tsx
@@ -0,0 +1,282 @@
+import { getAllUser, getUser } from 'app/api/user';
+import React, { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import toast from 'react-hot-toast';
+import { addOrg, addOrgMembers, getAllOrgs } from 'app/api/organization';
+import { uploadIcon } from 'app/api/file';
+
+import './index.scss';
+import UserContext from 'app/context/user/userContext';
+
+const WorkspaceAddMember = () => {
+  const navigate = useNavigate();
+  const token = localStorage.getItem('token');
+  const userContext = useContext(UserContext);
+
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [name, SetName] = useState<string | null>(null);
+  const [description, setDiscription] = useState<string | null>(null);
+  const [validDescription, setValidDescription] = useState<boolean>(true);
+  const [validName, setValidName] = useState<boolean>(false);
+  const [uniqueName, setUniqueName] = useState<boolean>(false);
+  const [members, setMembers] = useState<string[]>([]);
+  const [memberName, setMemberName] = useState<string | null>(null);
+
+  const [users, setUsers] = useState<string[]>([]);
+  const [orgs, setOrgs] = useState<string[]>([]);
+
+  const dataFetch = async () => {
+    try {
+      if (token) {
+        const users_aray: string[] = [];
+        const org_aray: string[] = [];
+        const allUser = await getAllUser(token);
+        const allOrgs = await getAllOrgs(token);
+        allUser.data.users.forEach((user) => {
+          users_aray.push(user.username);
+        });
+
+        allOrgs.data.organizations.forEach((org) => {
+          org_aray.push(org.name);
+        });
+
+        setUsers(users_aray);
+        setOrgs(org_aray);
+      }
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    dataFetch();
+  }, []);
+
+  const allowedFieTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (file) {
+      if (allowedFieTypes.includes(file.type)) {
+        setSelectedFile(file);
+      } else {
+        setSelectedFile(null);
+        toast.error('Invalid file type');
+      }
+    }
+  };
+
+  function valid_name(str: string): boolean {
+    // Define a regular expression for special characters (excluding letters, digits, and spaces)
+    const specialCharacters = /^[a-zA-Z0-9_-]+$/;
+
+    // Check if the string contains any special characters
+    return specialCharacters.test(str) && !str.endsWith('-userspace');
+  }
+
+  function isUniqueName(str: string): boolean {
+    return !orgs.includes(str);
+  }
+
+  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    SetName(event.target.value);
+    setUniqueName(() => isUniqueName(event.target.value));
+    setValidName(() => valid_name(event.target.value));
+  };
+
+  const handleDesriptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setDiscription(event.target.value);
+    if (description?.length) {
+      setValidDescription(description.length < 200);
+    }
+  };
+
+  const addMembers = () => {
+    if (memberName) {
+      if (
+        users.includes(memberName) &&
+        memberName != userContext?.username &&
+        !members.includes(memberName)
+      ) {
+        setMembers([...members, memberName]);
+        setMemberName(null);
+      }
+    }
+  };
+
+  const removeMembers = (member: string) => {
+    const indexToRemove = members.indexOf(member);
+
+    if (indexToRemove !== -1) {
+      const updatedMembers = [
+        ...members.slice(0, indexToRemove),
+        ...members.slice(indexToRemove + 1),
+      ];
+
+      setMembers(updatedMembers);
+    } else {
+      console.warn(`Member "${member}" not found in the members array.`);
+    }
+  };
+  const SubmitHandler = async (): Promise<void> => {
+    if (
+      description &&
+      token &&
+      name &&
+      validName &&
+      uniqueName &&
+      validDescription
+    ) {
+      const func = async (): Promise<void> => {
+        const dataRes = await addOrg(token, {
+          name: name,
+          description: description,
+        });
+
+        try {
+          if (selectedFile != null) {
+            const fileRes = uploadIcon(token, name, selectedFile);
+          }
+        } catch (e) {}
+        if (members.length > 0) {
+          try {
+            const addMmebersRes = await addOrgMembers(token, name, members);
+          } catch (e) {}
+        }
+        navigate('/');
+      };
+
+      toast.promise(func(), {
+        loading: 'Saving Workspace',
+        success: <b>Workspace saved</b>,
+        error: <b>Could not save</b>,
+      });
+    } else {
+      toast.error('Invalid inputs');
+    }
+  };
+
+  return (
+    <div className='main_aworkspace_container'>
+      <div className='addworkspace-form-container'>
+        <div className='single-form-element-container'>
+          <label className='label'>Add Icon</label>
+          <div className='file-input-container'>
+            <label htmlFor='icon-file' className='file-label'>
+              Choose image files here
+            </label>
+            <input
+              type='file'
+              id='icon-file'
+              className='custom-file-input'
+              onChange={handleFileChange}
+            />
+            <p>Supported formats: JPEG, JPG, PNG</p>
+            <p>Selected File: {selectedFile?.name}</p>
+          </div>
+        </div>
+        <div className='single-form-element-container'>
+          <label className='label' htmlFor='workspace-name'>
+            Name
+          </label>
+          <input
+            type='text'
+            className='custom-input'
+            id='workspace-name'
+            value={name ? name : ''}
+            onChange={handleNameChange}
+            placeholder='workspace name'
+          />
+          {!name ? <p>Name feild should not be empty</p> : <></>}
+          {!validName && name ? <p>Not a valid name</p> : <></>}
+          {!uniqueName && name ? (
+            <p>Name already taken. Try another name</p>
+          ) : (
+            <></>
+          )}
+        </div>
+        <div className='single-form-element-container'>
+          <label className='label' htmlFor='workspace-description'>
+            Description
+          </label>
+          <input
+            id='workspace-description'
+            type='text'
+            className='custom-input'
+            value={description ? description : ''}
+            onChange={handleDesriptionChange}
+            placeholder='workspace description'
+          />
+          {!description ? <p>Description feild should not be empty</p> : <></>}
+          {!validDescription ? (
+            <p>Characters length should be less than 200</p>
+          ) : (
+            <></>
+          )}
+          <div className='add-member-container'>
+            <input
+              type='text'
+              id='add-member'
+              className='custom-input'
+              value={memberName ? memberName : ''}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setMemberName(e.target.value);
+              }}
+              placeholder='Github ID of user'
+            />
+            <button
+              onClick={addMembers}
+              className='add-member-button'
+              disabled={
+                memberName
+                  ? !users.includes(memberName) &&
+                    memberName == userContext?.username
+                  : true
+              }
+            >
+              {'+ Add'}
+            </button>
+          </div>
+        </div>
+        <div className='added-members'>
+          {members.map((member, index) => {
+            return (
+              <div className='member-card' key={index}>
+                <img
+                  className='member-avatar'
+                  src='https://api.multiavatar.com/Binx.png'
+                />{' '}
+                <p className='member-name'>{member}</p>{' '}
+                <button
+                  onClick={() => {
+                    removeMembers(member);
+                  }}
+                  className='btn-cross'
+                >
+                  <svg
+                    width='25'
+                    height='24'
+                    viewBox='0 0 25 24'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path
+                      d='M16.566 8.99502C16.6377 8.92587 16.6948 8.84314 16.7342 8.75165C16.7735 8.66017 16.7943 8.56176 16.7952 8.46218C16.7961 8.3626 16.7772 8.26383 16.7395 8.17164C16.7018 8.07945 16.6462 7.99568 16.5758 7.92523C16.5054 7.85478 16.4217 7.79905 16.3295 7.7613C16.2374 7.72354 16.1386 7.70452 16.0391 7.70534C15.9395 7.70616 15.841 7.7268 15.7495 7.76606C15.658 7.80532 15.5752 7.86242 15.506 7.93402L12.5 10.939L9.495 7.93402C9.42634 7.86033 9.34354 7.80123 9.25154 7.76024C9.15954 7.71925 9.06022 7.69721 8.95952 7.69543C8.85882 7.69365 8.75879 7.71218 8.6654 7.7499C8.57201 7.78762 8.48718 7.84376 8.41596 7.91498C8.34474 7.9862 8.2886 8.07103 8.25087 8.16442C8.21315 8.25781 8.19463 8.35784 8.19641 8.45854C8.19818 8.55925 8.22022 8.65856 8.26122 8.75056C8.30221 8.84256 8.36131 8.92536 8.435 8.99402L11.438 12L8.433 15.005C8.30052 15.1472 8.22839 15.3352 8.23182 15.5295C8.23525 15.7238 8.31396 15.9092 8.45138 16.0466C8.58879 16.1841 8.77417 16.2628 8.96847 16.2662C9.16278 16.2696 9.35082 16.1975 9.493 16.065L12.5 13.06L15.505 16.066C15.6472 16.1985 15.8352 16.2706 16.0295 16.2672C16.2238 16.2638 16.4092 16.1851 16.5466 16.0476C16.684 15.9102 16.7627 15.7248 16.7662 15.5305C16.7696 15.3362 16.6975 15.1482 16.565 15.006L13.562 12L16.566 8.99502Z'
+                      fill='#8989CE'
+                    />
+                  </svg>{' '}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        <button className='submit' onClick={SubmitHandler}>
+          Done
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default WorkspaceAddMember;
diff --git a/src/features/workspace-members /components/BackNavigation.tsx b/src/features/workspace-members /components/BackNavigation.tsx
index a3c3a33..35d43c3 100644
--- a/src/features/workspace-members /components/BackNavigation.tsx	
+++ b/src/features/workspace-members /components/BackNavigation.tsx	
@@ -1,9 +1,12 @@
+import { useNavigate } from "react-router-dom";
+
 const BackNavigation = () => {
-  const clickBack = () => {
-    console.log('Back button clicked');
-  };
+  // const clickBack = () => {
+  //   console.log('Back button clicked');
+  // };
+  const navigate= useNavigate()
   return (
-    <div className='back-title-container' onClick={clickBack}>
+    <div className='back-title-container' onClick={()=>navigate("/")}>
       <button className='button'>
         <span>
           <svg
diff --git a/src/features/workspace-members /components/MemberCard.tsx b/src/features/workspace-members /components/MemberCard.tsx
index a0b5f2b..f3a5011 100644
--- a/src/features/workspace-members /components/MemberCard.tsx	
+++ b/src/features/workspace-members /components/MemberCard.tsx	
@@ -1,15 +1,65 @@
+import { changeOrgMembersStatus, removeOrgMembers } from 'app/api/organization';
+import UserContext from 'app/context/user/userContext';
+import { ChangeEvent, ChangeEventHandler, ReactEventHandler, useContext } from 'react';
+import toast from 'react-hot-toast';
+
 const MemberCard = ({
   image,
   name,
   role,
+  orgMembers,
+  setOrgMembers,
+  spaceName,
 }: {
   image: string;
   name: string;
   role: string;
+  spaceName: string;
+  orgMembers: { [username: string]: string } | null;
+  setOrgMembers: (orgMembers: { [username: string]: string }) => void;
 }) => {
-    const handleRemove = () => {
-        console.log('Remove member');
+  const token = localStorage.getItem('token');
+  const userContext = useContext(UserContext);
+  const handleRemove = async () => {
+    if (token && spaceName && orgMembers) {
+      const func = async () => {
+        const res = await removeOrgMembers(token, spaceName, [name]);
+        delete orgMembers[name];
+        setOrgMembers(orgMembers);
+      };
+      toast.promise(func(), {
+        loading: 'Removing',
+        success: <b>Successfully removed</b>,
+        error: <b>Unable to remove</b>,
+      });
+    }
+  };
+
+  const HandleRoleChange= async(event:ChangeEvent<HTMLSelectElement>)=>{
+    
+    const new_role= event.target.value
+    console.log("helo")
+    if(token&&spaceName&&orgMembers&&new_role!=role){
+        console.log("chu")
+        console.log({[name]:new_role})
+        
+
+        const func= async()=>{
+          console.log({[name]:new_role})
+          const res= await changeOrgMembersStatus(token, spaceName,{[name]:new_role})
+          orgMembers[name]=new_role
+          setOrgMembers(orgMembers)
+        }
+        toast.promise(func(), {
+          loading: 'Changing Role',
+          success: <b>Role changed</b>,
+          error: <b>Unable to change</b>,
+        });
+        
     }
+  }
+
+
   return (
     <div className='member-card'>
       <div className='member-info'>
@@ -17,14 +67,30 @@ const MemberCard = ({
         <h1 className='member-name'>{name}</h1>
       </div>
       <div className='member-actions'>
-        <div className="select-overlay">
-        <select name='role' id='role' defaultValue={role.toLowerCase()}>
-          <option value='maintainer'>Maintainer</option>
-          <option value='manager'>Manager</option>
-          <option value='member'>Member</option>
-        </select>
+        <div className='select-overlay'>
+          {orgMembers &&
+          userContext?.username &&
+          userContext.username != name &&
+          orgMembers[userContext?.username.toString()] == 'admin' ? (
+            <select name='role' onChange={HandleRoleChange} id='role' defaultValue={role.toLowerCase()}>
+              <option value='admin' >Admin</option>
+              <option value='manager' >Manager</option>
+              <option value='member' >Member</option>
+            </select>
+          ) : (
+            <div className='role'>
+              {role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()}
+            </div>
+          )}
         </div>
-        <button className='member-remove-btn' onClick={handleRemove}>Remove</button>
+        {orgMembers &&
+          userContext?.username &&
+          userContext.username != name &&
+          orgMembers[userContext?.username.toString()] == 'admin' && (
+            <button className='member-remove-btn' onClick={handleRemove}>
+              Remove
+            </button>
+          )}
       </div>
     </div>
   );
diff --git a/src/features/workspace-members /components/Options.tsx b/src/features/workspace-members /components/Options.tsx
index d150e54..f32459b 100644
--- a/src/features/workspace-members /components/Options.tsx	
+++ b/src/features/workspace-members /components/Options.tsx	
@@ -1,8 +1,15 @@
-const Options = () => {
+import { useNavigate } from "react-router-dom";
+
+interface Props{
+  spaceName: string
+}
+
+const Options:React.FC<Props> = ({spaceName}) => {
+  const navigate= useNavigate()
   return (
     <div className='options'>
-      <button className='add-people button'>Add People</button>
-      <button className='add-people button'>Filter</button>
+      <button className='add-people button' onClick={()=>navigate(`/workspaceAddMembers/${spaceName}`)}>Add People</button>
+      {/* <button className='add-people button'>Filter</button> */}
     </div>
   );
 };
diff --git a/src/features/workspace-members /index.scss b/src/features/workspace-members /index.scss
index 517d5ed..60986a9 100644
--- a/src/features/workspace-members /index.scss	
+++ b/src/features/workspace-members /index.scss	
@@ -122,9 +122,9 @@
       font-size: 1.2rem;
     }
     .select-overlay {
-        padding-right: 1rem;
-        background: #402aa4;
-        cursor: pointer;
+      padding-right: 1rem;
+      background: #402aa4;
+      cursor: pointer;
     }
     select {
       border: none;
@@ -136,8 +136,8 @@
       cursor: pointer;
     }
     option {
-        padding: 1rem;
-        margin: 2rem;
+      padding: 1rem;
+      margin: 2rem;
     }
   }
 }
@@ -160,6 +160,21 @@
   }
 }
 
+.role {
+  border: none;
+  outline: none;
+  color: white;
+  font-size: 1.2rem;
+  padding: 0.6rem 1rem;
+  background: #402aa4;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  
+}
+
 @media only screen and (max-width: 600px) {
   .member-view {
     width: 90%;
diff --git a/src/features/workspace-members /index.tsx b/src/features/workspace-members /index.tsx
index b917ee3..25c6b37 100644
--- a/src/features/workspace-members /index.tsx	
+++ b/src/features/workspace-members /index.tsx	
@@ -1,22 +1,53 @@
+import { useParams } from 'react-router-dom';
 import BackNavigation from './components/BackNavigation';
 import MemberCard from './components/MemberCard';
 import Options from './components/Options';
 import './index.scss';
+import { useEffect, useState } from 'react';
+import { getOrgMembers } from 'app/api/organization';
+import { AVATAR_URL } from 'app/constants/api';
+import { AVATAR_API } from 'envConstants';
 const WorkspaceMembers = () => {
-  // const  member = await fetch('https://api.github.com/orgs/github/public_members');
+
+  const {spaceName} = useParams()
+  const token= localStorage.getItem('token')
+  const [orgMembers, setOrgMembers]= useState<{[username:string]:string} | null>(null)
+
+  const dataFetch= async()=>{
+    try{
+      if(spaceName&&token){
+        const memRes= await getOrgMembers(token, spaceName)
+      
+        setOrgMembers(memRes.data.members)
+
+      }
+    }catch(e){
+
+    }
+  }
+  useEffect(()=>{
+    dataFetch()
+  },[ setOrgMembers ])
+  
   return (
-    <div className='members-page-container'>
+    spaceName&&<div className='members-page-container'>
       <BackNavigation />
       <div className='member-view'>
-        <Options />
+        <Options spaceName={spaceName}/>
         <div className='members-list'>
-          <MemberCard
+          {orgMembers&&Object.entries(orgMembers).map(([key, value])=>{
+            return <MemberCard
             image={
-              'https://media.licdn.com/dms/image/D4E03AQGI1ZJx1AywYQ/profile-displayphoto-shrink_400_400/0/1665646743847?e=1710979200&v=beta&t=aLom25RLssprCiYXceT78QAtMTFm4Kl_94HoJlZXfTA'
+              AVATAR_URL + '/' + key + '.png?apikey=' + AVATAR_API
             }
-            name={'Karthik Ayangar'}
-            role={'member'}
+            name={key}
+            key={key}
+            role={value}
+            spaceName={spaceName}
+            orgMembers={orgMembers}
+            setOrgMembers={setOrgMembers}
           />
+          })}
         </div>
       </div>
     </div>
diff --git a/src/features/workspace-view/workspace-card/index.scss b/src/features/workspace-view/workspace-card/index.scss
index 2c14e66..25b0b6b 100644
--- a/src/features/workspace-view/workspace-card/index.scss
+++ b/src/features/workspace-view/workspace-card/index.scss
@@ -97,3 +97,7 @@
     opacity: 1;
   }
 }
+
+.image-stack {
+  margin-left: 1rem;
+}
\ No newline at end of file
diff --git a/src/features/workspace-view/workspace-card/index.tsx b/src/features/workspace-view/workspace-card/index.tsx
index b1ee358..25b3bc0 100644
--- a/src/features/workspace-view/workspace-card/index.tsx
+++ b/src/features/workspace-view/workspace-card/index.tsx
@@ -13,7 +13,8 @@ import {
   setOrgBookmarkStatus,
 } from 'app/api/user';
 import { useNavigate } from 'react-router-dom';
-
+import { AVATAR_API } from 'envConstants';
+import { AVATAR_URL } from 'app/constants/api';
 type workspaceCardProps = {
   workspaceName: string;
   role: string;
@@ -33,6 +34,7 @@ const WorkspaceCard = (props: workspaceCardProps) => {
   const [fileName, setFileName] = useState<string | null>(null);
   const [imageSrc, setImageSrc] = useState<string | null>(null);
   const [members, setMembers] = useState<members | null>(null);
+  const [membersArray, setMembersArray]= useState<{username:string}[]>([]);
 
   const userContext = useContext(UserContext);
   const navigate = useNavigate();
@@ -51,6 +53,10 @@ const WorkspaceCard = (props: workspaceCardProps) => {
       try {
         const members_data = await getOrgMembers(token, workspaceName);
         setMembers(members_data.data.members);
+        const membersArray = Object.entries(members_data.data.members).map(([username]) => ({ username }));
+        setMembersArray(membersArray)
+
+
       } catch (e) {}
     }
   };
@@ -166,12 +172,23 @@ const WorkspaceCard = (props: workspaceCardProps) => {
               <div className='archive' onClick={HandleArchive}>
                 {archeive ? 'Unarchive' : 'archive'}
               </div>
-             {members&&userContext?.username&&(members[userContext?.username.toString()]==="admin")&& <div className='delete' onClick={HandleDelete}>
-                delete
-              </div>}
-              {members&&userContext?.username&&(members[userContext?.username.toString()]==="admin")&& <div className='Edit' onClick={()=>navigate(`/editWorkspace/${workspaceName}`)}>
-                edit
-              </div>}
+              {members &&
+                userContext?.username &&
+                members[userContext?.username.toString()] === 'admin' && (
+                  <div className='delete' onClick={HandleDelete}>
+                    delete
+                  </div>
+                )}
+              {members &&
+                userContext?.username &&
+                members[userContext?.username.toString()] === 'admin' && (
+                  <div
+                    className='Edit'
+                    onClick={() => navigate(`/editWorkspace/${workspaceName}`)}
+                  >
+                    edit
+                  </div>
+                )}
             </div>
             <div className='workspace-card-utils'>
               <div className='workspace-logo'>
@@ -190,8 +207,33 @@ const WorkspaceCard = (props: workspaceCardProps) => {
                     ? "USER's WORKSPACE"
                     : workspaceName}
                 </div>
-                <div className='members-view-container'>
-                  <div className='workspace-members-imgs'>img</div>
+                <div className='members-view-container' onClick={()=>navigate(`/workspaceMembers/${workspaceName}`)}>
+                  <div className='workspace-members-imgs'>
+                    <div className='image-stack'>
+                      { membersArray.length > 0 ? (
+                        membersArray.slice(0, 4).map((obj) => {
+                          const url =
+                            AVATAR_URL +
+                            '/' +
+                            obj.username +
+                            '.png?apikey=' +
+                            AVATAR_API;
+                          return (
+                            <img
+                              key={obj.username}
+                              className='project-image'
+                              src={url}
+                            />
+                          );
+                        })
+                      ) : (
+                        <>
+                          <div className='invisible-height'></div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
                   <div>{members ? Object.keys(members).length : 0} members</div>
                 </div>
               </div>