diff --git a/cypress/e2e/53_workspaceMission.cy.ts b/cypress/e2e/53_workspaceMission.cy.ts
index d6549dc2..cb889aa5 100644
--- a/cypress/e2e/53_workspaceMission.cy.ts
+++ b/cypress/e2e/53_workspaceMission.cy.ts
@@ -49,6 +49,42 @@ describe('Create Workspace And Update Mission', () => {
     cy.contains(missionStatment).should('exist', { timeout: 1000 });
     cy.contains(tacticsStatment).should('exist', { timeout: 1000 });
 
+    cy.get('button').contains('Add Repository').click();
+    cy.wait(500);
+
+    const repoName = 'Repo Name';
+    cy.get('[data-testid="repo-name-input"]').type(repoName);
+    cy.get('[data-testid="repo-url-input"]').type('https://github.com/test/repo');
+    cy.get('button').contains('Save').click();
+    cy.wait(500);
+
+    cy.contains('Add New Repository').should('not.exist');
+    cy.get('h5').contains('Repositories').should('be.visible');
+    cy.contains(repoName).should('exist', { timeout: 1000 });
+
+    cy.get('img[alt="Three dots icon"]').first().click();
+    cy.wait(500);
+
+    const updatedRepoName = 'Updated Repo';
+    cy.get('[data-testid="repo-name-input"]').clear().type(updatedRepoName);
+    cy.get('[data-testid="repo-url-input"]').clear().type('https://github.com/updated/repo');
+    cy.get('button').contains('Save').click();
+    cy.wait(500);
+
+    cy.contains('Add New Repository').should('not.exist');
+    cy.contains(updatedRepoName).should('be.visible');
+    cy.contains('https://github.com/updated/repo').should('be.visible');
+
+    cy.get('img[alt="Three dots icon"]').first().click();
+    cy.get('button').contains('Delete').click();
+    cy.wait(1000);
+
+    cy.get('button').contains('Delete').click();
+    cy.wait(1000);
+
+    cy.contains(updatedRepoName).should('not.exist');
+    cy.contains('https://github.com/updated/repo').should('not.exist');
+
     cy.logout('carol');
   });
 });
diff --git a/package.json b/package.json
index d3f819fb..63450116 100644
--- a/package.json
+++ b/package.json
@@ -208,4 +208,4 @@
   "devDependencies": {
     "cypress": "^13.6.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx b/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx
index fd51635f..8407a139 100644
--- a/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx
+++ b/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx
@@ -40,6 +40,7 @@ export const DeleteConfirmationModal = ({
             hovercolor={'#E96464'}
             activecolor={'#E15A5A'}
             shadowcolor={'#ED747480'}
+            data-testid="delete-confirmation"
             text="Delete"
             onClick={deleteHandler}
           />
diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
index b4be453e..d7cf75fb 100644
--- a/src/pages/tickets/style.ts
+++ b/src/pages/tickets/style.ts
@@ -57,7 +57,28 @@ export const HeaderWrap = styled.div`
 export const DataWrap = styled.div`
   padding: 40px 50px;
   display: flex;
-  width: 50%;
+  width: 58%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+
+  @media only screen and (max-width: 900px) {
+    width: 90%;
+    padding: 30px 40px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    width: 90%;
+    padding: 20px 10px;
+  }
+`;
+
+export const DataWrap2 = styled.div`
+  padding: 0px;
+  display: flex;
+  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -80,12 +101,13 @@ export const FieldWrap = styled.div`
 `;
 
 export const Label = styled.h5`
-  font-size: 1.12rem;
+  font-size: 1.1rem;
   font-weight: bolder;
 `;
 
 export const Data = styled.div`
-  border: 1px solid #ccc;
+  border: 2px solid #dde1e5;
+  caret-color: #618aff;
   min-height: 50px;
   border-radius: 5px;
   padding: 20px 30px;
@@ -97,8 +119,8 @@ export const Data = styled.div`
   .MaterialIcon {
     font-style: normal;
     font-weight: 900;
-    font-size: 1.4rem;
-    color: #000000;
+    font-size: 1.3rem;
+    color: #36454f;
   }
 `;
 
@@ -149,10 +171,6 @@ export const TextArea = styled.textarea`
   }
 `;
 
-interface ButtonProps {
-  color?: string;
-}
-
 export const FeatureLabel = styled.p`
   color: var(--Text-2, #3c3f41);
   font-family: Barlow;
@@ -187,3 +205,69 @@ export const Spacer = styled.div`
   height: 10px;
   width: 100%;
 `;
+
+export const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const PaginationImg = styled.img`
+  cursor: pointer;
+`;
+
+export const FlexDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+
+  .euiPopover__anchor {
+    margin-top: 6px !important;
+  }
+`;
+
+export const FeatureLink = styled.a`
+  text-decoration: none;
+  color: #000;
+`;
+
+export const StyledList = styled.ul`
+  padding: 0;
+  margin-top: 10px;
+`;
+
+export const StyledListElement = styled.li`
+  display: flex;
+  align-items: center;
+`;
+
+interface PaginationButtonsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active: boolean;
+}
+
+export const PaginationButtons = styled.button<PaginationButtonsProps>`
+  border-radius: 3px;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  outline: none;
+  border: none;
+  text-align: center;
+  margin: 5px;
+  background: ${(props: any) => (props.active ? 'var(--Active-blue, #618AFF)' : 'white')};
+  color: ${(props: any) => (props.active ? 'white' : 'black')};
+`;
+
+export const ImgText = styled.h3`
+  color: #b0b7bc;
+  text-align: center;
+  font-family: 'Barlow';
+  font-size: 1.875rem;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1.0625rem;
+  letter-spacing: 0.01875rem;
+  text-transform: uppercase;
+  opacity: 0.5;
+  margin-bottom: 0;
+`;
diff --git a/src/people/widgetViews/Icons/threeDotsIcon.svg b/src/people/widgetViews/Icons/threeDotsIcon.svg
new file mode 100644
index 00000000..9aa4411b
--- /dev/null
+++ b/src/people/widgetViews/Icons/threeDotsIcon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="bi bi-three-dots-vertical">
+  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+</svg>
\ No newline at end of file
diff --git a/src/people/widgetViews/WorkspaceFeature.tsx b/src/people/widgetViews/WorkspaceFeature.tsx
index 7e08f01c..db249f67 100644
--- a/src/people/widgetViews/WorkspaceFeature.tsx
+++ b/src/people/widgetViews/WorkspaceFeature.tsx
@@ -2,11 +2,6 @@ import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
 import {
   Body,
   FeatureBody,
-  FeatureLabel,
-  FeatureName,
-  Leftheader,
-  Header,
-  HeaderWrap,
   DataWrap,
   FieldWrap,
   Label,
@@ -15,11 +10,19 @@ import {
   TextArea
 } from 'pages/tickets/style';
 import React, { useCallback, useEffect, useState } from 'react';
+import history from 'config/history';
 import { useParams } from 'react-router-dom';
 import { useStores } from 'store';
 import { Feature } from 'store/interface';
 import MaterialIcon from '@material/react-material-icon';
-import { ActionButton, ButtonWrap } from './workspace/style';
+import {
+  ActionButton,
+  ButtonWrap,
+  HeadNameWrap,
+  FeatureHeadWrap,
+  WorkspaceName,
+  WorkspaceOption
+} from './workspace/style';
 
 type DispatchSetStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
 
@@ -72,13 +75,15 @@ const WorkspaceEditableField = ({
             onClick={() => setDisplayOptions(!displayOptions)}
             data-testid={`${dataTestIdPrefix}-option-btn`}
           />
-          <button
-            style={{ display: displayOptions ? 'block' : 'none' }}
-            onClick={handleEditClick}
-            data-testid={`${dataTestIdPrefix}-edit-btn`}
-          >
-            Edit
-          </button>
+          {displayOptions && (
+            <WorkspaceOption>
+              <ul>
+                <li data-testid={`${dataTestIdPrefix}-edit-btn`} onClick={handleEditClick}>
+                  Edit
+                </li>
+              </ul>
+            </WorkspaceOption>
+          )}
         </OptionsWrap>
         {!isEditing ? (
           <div
@@ -184,15 +189,19 @@ const WorkspaceFeature: React.FC = () => {
 
   return (
     <FeatureBody>
-      <HeaderWrap>
-        <Header>
-          <Leftheader>
-            <FeatureName>
-              <FeatureLabel>{featureData?.name}</FeatureLabel>
-            </FeatureName>
-          </Leftheader>
-        </Header>
-      </HeaderWrap>
+      <FeatureHeadWrap>
+        <HeadNameWrap>
+          <MaterialIcon
+            onClick={() => history.goBack()}
+            icon={'arrow_back'}
+            style={{
+              fontSize: 25,
+              cursor: 'pointer'
+            }}
+          />
+          <WorkspaceName>{featureData?.name}</WorkspaceName>
+        </HeadNameWrap>
+      </FeatureHeadWrap>
       <DataWrap>
         <WorkspaceEditableField
           label="Feature Brief"
diff --git a/src/people/widgetViews/WorkspaceMission.tsx b/src/people/widgetViews/WorkspaceMission.tsx
index c7940d58..9a9dc6f8 100644
--- a/src/people/widgetViews/WorkspaceMission.tsx
+++ b/src/people/widgetViews/WorkspaceMission.tsx
@@ -6,15 +6,25 @@ import {
   Header,
   HeaderWrap,
   DataWrap,
+  DataWrap2,
   FieldWrap,
   Label,
   Data,
   OptionsWrap,
-  TextArea
+  TextArea,
+  StyledListElement,
+  FeatureLink,
+  StyledList,
+  FlexDiv,
+  PaginationImg,
+  PageContainer,
+  PaginationButtons
 } from 'pages/tickets/style';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useStores } from 'store';
+import { useDeleteConfirmationModal } from 'components/common';
+import { Box } from '@mui/system';
 import { Feature, featureLimit, Workspace } from 'store/interface';
 import MaterialIcon from '@material/react-material-icon';
 import { Button, Modal } from 'components/common';
@@ -23,34 +33,34 @@ import {
   CompanyNameAndLink,
   CompanyLabel,
   UrlButtonContainer,
-  UrlButton
+  UrlButton,
+  RightHeader,
+  CompanyDescription
 } from 'pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles';
 import githubIcon from 'pages/tickets/workspace/workspaceHeader/Icons/githubIcon.svg';
 import websiteIcon from 'pages/tickets/workspace/workspaceHeader/Icons/websiteIcon.svg';
-import styled from 'styled-components';
+import { EuiToolTip } from '@elastic/eui';
 import { useIsMobile } from 'hooks';
+import styled from 'styled-components';
+import avatarIcon from '../../public/static/profile_avatar.svg';
+import threeDotsIcon from '../widgetViews/Icons/threeDotsIcon.svg';
 import { colors } from '../../config/colors';
 import paginationarrow1 from '../../pages/superadmin/header/icons/paginationarrow1.svg';
 import paginationarrow2 from '../../pages/superadmin/header/icons/paginationarrow2.svg';
 import AddFeature from './workspace/AddFeatureModal';
-import { ActionButton, RowFlex, ButtonWrap } from './workspace/style';
+import {
+  ActionButton,
+  RowFlex,
+  ButtonWrap,
+  RepoName,
+  RepoEliipsis,
+  RepoWrap,
+  WorkspaceOption
+} from './workspace/style';
+import AddRepoModal from './workspace/AddRepoModal';
 
 const color = colors['light'];
 
-export const ImgText = styled.h3`
-  color: #b0b7bc;
-  text-align: center;
-  font-family: 'Barlow';
-  font-size: 1.875rem;
-  font-style: normal;
-  font-weight: 800;
-  line-height: 1.0625rem;
-  letter-spacing: 0.01875rem;
-  text-transform: uppercase;
-  opacity: 0.5;
-  margin-bottom: 0;
-`;
-
 const FeaturesWrap = styled.div`
   margin-top: 25px;
 `;
@@ -106,48 +116,6 @@ const PaginatonSection = styled.div`
   padding: 1em;
 `;
 
-interface PaginationButtonsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  active: boolean;
-}
-
-const PaginationButtons = styled.button<PaginationButtonsProps>`
-  border-radius: 3px;
-  width: 30px;
-  height: 30px;
-  flex-shrink: 0;
-  outline: none;
-  border: none;
-  text-align: center;
-  margin: 5px;
-  background: ${(props: any) => (props.active ? 'var(--Active-blue, #618AFF)' : 'white')};
-  color: ${(props: any) => (props.active ? 'white' : 'black')};
-`;
-
-const PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const PaginationImg = styled.img`
-  cursor: pointer;
-`;
-
-const FlexDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-
-  .euiPopover__anchor {
-    margin-top: 6px !important;
-  }
-`;
-
-const FeatureLink = styled.a`
-  text-decoration: none;
-  color: #000;
-`;
-
 const WorkspaceMission = () => {
   const { main, ui } = useStores();
   const { uuid } = useParams<{ uuid: string }>();
@@ -159,6 +127,12 @@ const WorkspaceMission = () => {
   const [displayTactics, setDidplayTactics] = useState(false);
   const [mission, setMission] = useState(workspaceData?.mission);
   const [tactics, setTactics] = useState(workspaceData?.tactics);
+  const [repoName, setRepoName] = useState('');
+  const [repoUrl, setRepoUrl] = useState('');
+  const [repositories, setRepositories] = useState([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [currentuuid, setCurrentuuid] = useState('');
+  const [modalType, setModalType] = useState('add');
   const [featureModal, setFeatureModal] = useState(false);
   const [features, setFeatures] = useState<Feature[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
@@ -167,9 +141,72 @@ const WorkspaceMission = () => {
 
   const paginationLimit = Math.floor(featuresCount / featureLimit) + 1;
   const visibleTabs = 3;
-
   const isMobile = useIsMobile();
 
+  const fetchRepositories = useCallback(async () => {
+    try {
+      const data = await main.getRepositories(uuid);
+      setRepositories(data);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [main, uuid]);
+
+  const openModal = (type: string, repository?: any) => {
+    if (type === 'add') {
+      setRepoName('');
+      setCurrentuuid('');
+      setRepoUrl('');
+      setIsModalVisible(true);
+      setModalType(type);
+    } else if (type === 'edit') {
+      setRepoName(repository.name);
+      setCurrentuuid(repository.uuid);
+      setRepoUrl(repository.url);
+      setIsModalVisible(true);
+      setModalType(type);
+    }
+  };
+
+  const closeRepoModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const DeleteRepository = async (workspace_uuid: string, repository_uuid: string) => {
+    try {
+      await main.deleteRepository(workspace_uuid, repository_uuid);
+      closeRepoModal();
+      fetchRepositories();
+    } catch (error) {
+      console.error('Error deleteRepository', error);
+    }
+  };
+
+  const handleDelete = () => {
+    closeRepoModal();
+    DeleteRepository(uuid, currentuuid);
+  };
+
+  const { openDeleteConfirmation } = useDeleteConfirmationModal();
+
+  const deleteHandler = () => {
+    openDeleteConfirmation({
+      onDelete: handleDelete,
+      children: (
+        <Box fontSize={20} textAlign="center">
+          Are you sure you want to <br />
+          <Box component="span" fontWeight="500">
+            Delete this Repo?
+          </Box>
+        </Box>
+      )
+    });
+  };
+
+  useEffect(() => {
+    fetchRepositories();
+  }, [fetchRepositories]);
+
   const getWorkspaceData = useCallback(async () => {
     if (!uuid) return;
     const workspaceData = await main.getUserWorkspaceByUuid(uuid);
@@ -344,7 +381,7 @@ const WorkspaceMission = () => {
           <Header>
             <Leftheader>
               <ImageContainer
-                src={workspaceData?.img}
+                src={workspaceData?.img || avatarIcon}
                 width="72px"
                 height="72px"
                 alt="workspace icon"
@@ -371,6 +408,9 @@ const WorkspaceMission = () => {
                 </UrlButtonContainer>
               </CompanyNameAndLink>
             </Leftheader>
+            <RightHeader>
+              <CompanyDescription>{workspaceData?.description}</CompanyDescription>
+            </RightHeader>
           </Header>
         </HeaderWrap>
         <DataWrap>
@@ -384,13 +424,15 @@ const WorkspaceMission = () => {
                   onClick={() => setDidplayMission(!displayMission)}
                   data-testid="mission-option-btn"
                 />
-                <button
-                  style={{ display: displayMission ? 'block' : 'none' }}
-                  onClick={editMissionActions}
-                  data-testid="mission-edit-btn"
-                >
-                  Edit
-                </button>
+                {displayMission && (
+                  <WorkspaceOption>
+                    <ul>
+                      <li data-testid="mission-edit-btn" onClick={editMissionActions}>
+                        Edit
+                      </li>
+                    </ul>
+                  </WorkspaceOption>
+                )}
               </OptionsWrap>
               {!editMission && (
                 <>{workspaceData?.mission ? workspaceData.mission : 'No mission yet'}</>
@@ -434,13 +476,15 @@ const WorkspaceMission = () => {
                   className="MaterialIcon"
                   data-testid="tactics-option-btn"
                 />
-                <button
-                  style={{ display: displayTactics ? 'block' : 'none' }}
-                  onClick={editTacticsActions}
-                  data-testid="tactics-edit-btn"
-                >
-                  Edit
-                </button>
+                {displayTactics && (
+                  <WorkspaceOption>
+                    <ul>
+                      <li data-testid="tactics-edit-btn" onClick={editTacticsActions}>
+                        Edit
+                      </li>
+                    </ul>
+                  </WorkspaceOption>
+                )}
               </OptionsWrap>
               {!editTactics && (
                 <>{workspaceData?.tactics ? workspaceData.tactics : 'No tactics yet'}</>
@@ -474,6 +518,40 @@ const WorkspaceMission = () => {
               )}
             </Data>
           </FieldWrap>
+          <RepoWrap>
+            <DataWrap2>
+              <RowFlex>
+                <Label>Repositories</Label>
+                <Button
+                  onClick={() => openModal('add')}
+                  style={{
+                    borderRadius: '5px',
+                    margin: 0,
+                    marginLeft: 'auto'
+                  }}
+                  dataTestId="new-repository-btn"
+                  text="Add Repository"
+                />
+              </RowFlex>
+              <StyledList>
+                {repositories.map((repository: any) => (
+                  <StyledListElement key={repository.id}>
+                    <RepoEliipsis
+                      src={threeDotsIcon}
+                      alt="Three dots icon"
+                      onClick={() => openModal('edit', repository)}
+                    />
+                    <RepoName>{repository.name} : </RepoName>
+                    <EuiToolTip position="top" content={repository.url}>
+                      <a href={repository.url} target="_blank" rel="noreferrer">
+                        {repository.url}
+                      </a>
+                    </EuiToolTip>
+                  </StyledListElement>
+                ))}
+              </StyledList>
+            </DataWrap2>
+          </RepoWrap>
           <FieldWrap>
             <RowFlex>
               <Label>Features</Label>
@@ -494,9 +572,7 @@ const WorkspaceMission = () => {
                   <FeatureDataWrap key={i}>
                     <FeatureCount>{i + 1}</FeatureCount>
                     <FeatureData>
-                      <FeatureLink href={`/feature/${feat.uuid}`} target="_blank">
-                        {feat.name}
-                      </FeatureLink>
+                      <FeatureLink href={`/feature/${feat.uuid}`}>{feat.name}</FeatureLink>
                       <FeatureDetails>
                         <FeatureText>Filter Status</FeatureText>
                       </FeatureDetails>
@@ -534,7 +610,6 @@ const WorkspaceMission = () => {
             </PaginatonSection>
           </FieldWrap>
         </DataWrap>
-        {toastsEl}
         <Modal
           visible={featureModal}
           style={{
@@ -565,6 +640,42 @@ const WorkspaceMission = () => {
             workspace_uuid={uuid}
           />
         </Modal>
+        <Modal
+          visible={isModalVisible}
+          style={{
+            height: '100%',
+            flexDirection: 'column'
+          }}
+          envStyle={{
+            marginTop: isMobile ? 64 : 0,
+            background: color.pureWhite,
+            zIndex: 20,
+            maxHeight: '100%',
+            borderRadius: '10px',
+            minWidth: isMobile ? '100%' : '25%',
+            minHeight: isMobile ? '100%' : '20%'
+          }}
+          overlayClick={closeRepoModal}
+          bigCloseImage={closeRepoModal}
+          bigCloseImageStyle={{
+            top: '-18px',
+            right: '-18px',
+            background: '#000',
+            borderRadius: '50%'
+          }}
+        >
+          <AddRepoModal
+            closeHandler={closeRepoModal}
+            getRepositories={fetchRepositories}
+            workspace_uuid={uuid}
+            currentUuid={currentuuid}
+            modalType={modalType}
+            handleDelete={deleteHandler}
+            name={repoName}
+            url={repoUrl}
+          />
+        </Modal>
+        {toastsEl}
       </WorkspaceBody>
     )
   );
diff --git a/src/people/widgetViews/workspace/AddFeatureModal.tsx b/src/people/widgetViews/workspace/AddFeatureModal.tsx
index bc7c7ac5..943bf9e2 100644
--- a/src/people/widgetViews/workspace/AddFeatureModal.tsx
+++ b/src/people/widgetViews/workspace/AddFeatureModal.tsx
@@ -56,18 +56,18 @@ const FooterContainer = styled.div`
   gap: 3.56rem;
   align-items: end;
   justify-content: space-between;
-  margin-top: 35px;
+  margin-top: 15px;
 
   @media only screen and (max-width: 500px) {
     flex-direction: column;
     gap: 0.5rem;
-    margin-top: 20px;
+    margin-top: 10px;
   }
 `;
 
 const errcolor = '#FF8F80';
 
-const MAX_ORG_NAME_LENGTH = 20;
+const MAX_NAME_LENGTH = 50;
 
 const AddFeature = (props: {
   closeHandler: () => void;
@@ -82,7 +82,7 @@ const AddFeature = (props: {
 
   const handleWorkspaceNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    if (newValue.length <= MAX_ORG_NAME_LENGTH) {
+    if (newValue.length <= MAX_NAME_LENGTH) {
       setFeatureName(newValue);
       setFeatureNameError(false);
     } else {
diff --git a/src/people/widgetViews/workspace/AddRepoModal.tsx b/src/people/widgetViews/workspace/AddRepoModal.tsx
new file mode 100644
index 00000000..368dfbad
--- /dev/null
+++ b/src/people/widgetViews/workspace/AddRepoModal.tsx
@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useStores } from 'store';
+import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
+import { normalizeInput } from '../../../helpers';
+import { Toast } from './interface';
+import {
+  TextInput,
+  WorkspaceInputContainer,
+  WorkspaceLabel,
+  ActionButton,
+  ButtonWrap
+} from './style';
+
+const AddWorkspaceWrapper = styled.div`
+  min-width: 100%;
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @media only screen and (max-width: 500px) {
+    padding: 1rem;
+    width: 100%;
+  }
+`;
+
+const AddWorkspaceHeader = styled.h2`
+  color: #3c3f41;
+  font-family: 'Barlow';
+  font-size: 1.875rem;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1.875rem;
+  margin-bottom: 0;
+  min-width: 100%;
+
+  @media only screen and (max-width: 500px) {
+    text-align: center;
+    font-size: 1.4rem;
+  }
+`;
+const WorkspaceDetailsContainer = styled.div`
+  margin-top: 3rem;
+  min-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  @media only screen and (max-width: 500px) {
+    flex-direction: column;
+  }
+`;
+
+const FooterContainer = styled.div`
+  display: flex;
+  gap: 2rem;
+  align-items: end;
+  justify-content: space-between;
+  margin-top: 15px;
+
+  @media only screen and (max-width: 500px) {
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 10px;
+  }
+`;
+
+const errcolor = '#FF8F80';
+
+const MAX_NAME_LENGTH = 50;
+
+const AddRepo = (props: {
+  closeHandler: () => void;
+  getRepositories: () => void;
+  handleDelete: () => void;
+  workspace_uuid: string | undefined;
+  modalType: string;
+  currentUuid: string;
+  name: string;
+  url: string;
+}) => {
+  const {
+    workspace_uuid,
+    getRepositories,
+    closeHandler,
+    modalType,
+    currentUuid,
+    handleDelete,
+    name,
+    url
+  } = props;
+  const [repoName, setRepoName] = useState('');
+  const [repoNameError, setRepoNameError] = useState<boolean>(false);
+  const [repoUrl, setRepoUrl] = useState('');
+  const [repoUrlError, setRepoUrlError] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { main } = useStores();
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const handleRepoNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    if (newValue.length <= MAX_NAME_LENGTH) {
+      setRepoName(newValue);
+      setRepoNameError(false);
+    } else {
+      setRepoNameError(true);
+    }
+  };
+
+  const handleRepoUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setRepoUrl(newValue);
+    setRepoUrlError(false);
+  };
+
+  function addSuccessToast() {
+    setToasts([
+      {
+        id: '1',
+        title: 'Add Repository',
+        color: 'success',
+        text: 'Repository added successfully'
+      }
+    ]);
+  }
+
+  function addErrorToast(text: string) {
+    setToasts([
+      {
+        id: '2',
+        title: 'Add Repository',
+        color: 'danger',
+        text
+      }
+    ]);
+  }
+
+  function removeToast() {
+    setToasts([]);
+  }
+
+  const AddRepos = async () => {
+    try {
+      setIsLoading(true);
+
+      const repo = {
+        workspace_uuid,
+        name: normalizeInput(repoName),
+        url: repoUrl
+      };
+      await main.createOrUpdateRepository1(repo);
+      addSuccessToast();
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      addErrorToast(String(error));
+      setIsLoading(false);
+    }
+    getRepositories();
+  };
+
+  const EditRepos = async () => {
+    try {
+      setIsLoading(true);
+      const repo = {
+        uuid: currentUuid,
+        name: normalizeInput(repoName),
+        url: repoUrl,
+        workspace_uuid
+      };
+      await main.createOrUpdateRepository(repo);
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
+    getRepositories();
+  };
+
+  const handleSave = () => {
+    if (modalType === 'add') {
+      AddRepos();
+    } else if (modalType === 'edit') {
+      EditRepos();
+    }
+    closeHandler();
+  };
+
+  return (
+    <AddWorkspaceWrapper>
+      <AddWorkspaceHeader>Add New Repository</AddWorkspaceHeader>
+      <WorkspaceDetailsContainer>
+        <WorkspaceInputContainer feature={true} style={{ color: repoNameError ? errcolor : '' }}>
+          <WorkspaceLabel style={{ color: repoNameError ? errcolor : '' }}>
+            Repository name *
+          </WorkspaceLabel>
+          <TextInput
+            placeholder="Repository name"
+            value={repoName || name}
+            feature={true}
+            data-testid="repo-name-input"
+            onChange={handleRepoNameChange}
+            style={{ borderColor: repoNameError ? errcolor : '' }}
+          />
+        </WorkspaceInputContainer>
+        <WorkspaceInputContainer feature={true} style={{ color: repoUrlError ? errcolor : '' }}>
+          <WorkspaceLabel style={{ color: repoUrlError ? errcolor : '' }}>
+            Repository url *
+          </WorkspaceLabel>
+          <TextInput
+            placeholder="Repository url"
+            value={repoUrl || url}
+            feature={true}
+            data-testid="repo-url-input"
+            onChange={handleRepoUrlChange}
+            style={{ borderColor: repoUrlError ? errcolor : '' }}
+          />
+        </WorkspaceInputContainer>
+      </WorkspaceDetailsContainer>
+      <FooterContainer>
+        <ButtonWrap>
+          <ActionButton
+            data-testid="feature-cancel-btn"
+            onClick={props.closeHandler}
+            color="cancel"
+          >
+            Cancel
+          </ActionButton>
+          <ActionButton
+            disabled={repoNameError || !repoName || !repoUrl}
+            data-testid="add-repo-btn"
+            color="primary"
+            onClick={handleSave}
+          >
+            {isLoading ? <EuiLoadingSpinner size="m" /> : 'Save'}
+          </ActionButton>
+          {modalType === 'edit' && (
+            <ActionButton data-testid="delete-repo-btn" color="danger" onClick={handleDelete}>
+              {isLoading ? <EuiLoadingSpinner size="m" /> : 'Delete'}
+            </ActionButton>
+          )}
+        </ButtonWrap>
+      </FooterContainer>
+      <EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={3000} />
+    </AddWorkspaceWrapper>
+  );
+};
+
+export default AddRepo;
diff --git a/src/people/widgetViews/workspace/interface.ts b/src/people/widgetViews/workspace/interface.ts
index 362c69be..61310944 100644
--- a/src/people/widgetViews/workspace/interface.ts
+++ b/src/people/widgetViews/workspace/interface.ts
@@ -76,3 +76,9 @@ export interface AssignUserModalProps extends ModalProps {
   setLoading: (value: boolean) => void;
   addToast: (title: string, color: 'danger' | 'success') => void;
 }
+
+export interface Repository {
+  workspace_uuid?: string;
+  name?: string;
+  url?: string;
+}
diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
index 7a5422e8..ab436c15 100644
--- a/src/people/widgetViews/workspace/style.ts
+++ b/src/people/widgetViews/workspace/style.ts
@@ -86,6 +86,27 @@ export const HeadWrap = styled.div`
   }
 `;
 
+export const FeatureHeadWrap = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 30px 50px;
+  padding-right: 40px;
+  border-bottom: 1px solid #ebedef;
+  @media only screen and (max-width: 800px) {
+    padding: 15px 15px;
+  }
+  @media only screen and (max-width: 700px) {
+    padding: 12px 10px;
+  }
+  @media only screen and (max-width: 500px) {
+    padding: 0px;
+    padding-bottom: 15px;
+    flex-direction: column;
+    align-items: start;
+    padding: 20px 30px;
+  }
+`;
+
 export const HeadNameWrap = styled.div`
   display: flex;
   align-items: center;
@@ -973,3 +994,68 @@ export const ActionButton = styled.button<ButtonProps>`
     box-shadow: none;
   }
 `;
+
+export const RepoName = styled.h6`
+  padding: 0px;
+  margin: 0px;
+  margin-right: 10px;
+`;
+
+export const RepoEliipsis = styled.img`
+  cursor: pointer;
+  width: 18px;
+  height: 15px;
+  font-weight: 900;
+  color: #36454f;
+  padding: 0px;
+  margin-left: -5px;
+`;
+
+export const RepoWrap = styled.div`
+  margin-bottom: 10px;
+`;
+
+export const WorkspaceOption = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: -40px;
+  width: 110px;
+  height: 55px;
+  display: inline-flex;
+  padding: 15px 10px;
+  flex-direction: column;
+  align-items: center;
+  gap: 25px;
+  border-radius: 6px;
+  background: #fff;
+  overflow-y: scroll;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    color: grey;
+    width: 100%;
+  }
+
+  li {
+    padding: 0px;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 5px;
+    cursor: pointer;
+    color: grey;
+    font-family: 'Barlow', sans-serif;
+    font-size: 0.8rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    border-bottom: 0.5px solid #ccc;
+
+    &:hover {
+      color: #3c3f41;
+    }
+  }
+`;
diff --git a/src/store/main.ts b/src/store/main.ts
index f5e56606..45b324e5 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -2,6 +2,7 @@ import { uniqBy } from 'lodash';
 import memo from 'memo-decorator';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { persist } from 'mobx-persist';
+import { Repository } from 'people/widgetViews/workspace/interface';
 import api from '../api';
 import { getHostIncludingDockerHosts } from '../config/host';
 import { TribesURL } from '../config/host';
@@ -2849,6 +2850,114 @@ export class MainStore {
       console.error('Error pollInvoice', e);
     }
   }
-}
 
+  async getRepositories(workspace_uuid: string): Promise<any> {
+    try {
+      if (!uiStore.meInfo) return [];
+      const info = uiStore.meInfo;
+      const response = await fetch(`${TribesURL}/workspaces/repositories/${workspace_uuid}`, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (e) {
+      console.log('Error getRepositories', e);
+      return [];
+    }
+  }
+  async createOrUpdateRepository1(repo: Repository): Promise<any> {
+    try {
+      if (!uiStore.meInfo) return [];
+      const info = uiStore.meInfo;
+      const response = await fetch(`${TribesURL}/workspaces/repositories`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(repo)
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (e) {
+      console.log('Error createOrUpdateRepository', e);
+      return null;
+    }
+  }
+
+  async createOrUpdateRepository(repo: Repository): Promise<any> {
+    try {
+      if (!uiStore.meInfo) return [];
+      const info = uiStore.meInfo;
+
+      const url = `${TribesURL}/workspaces/repositories`;
+      const method = 'POST';
+      const mode = 'cors';
+      const headers = {
+        'x-jwt': info.tribe_jwt,
+        'Content-Type': 'application/json'
+      };
+      const body = JSON.stringify(repo);
+
+      // Log the request details
+      console.log('Request details:', { url, method, mode, headers, body });
+
+      const response = await fetch(url, { method, mode, headers, body });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (e) {
+      console.log('Error createOrUpdateRepository', e);
+      return null;
+    }
+  }
+
+  async deleteRepository(workspace_uuid: string, repository_uuid: string): Promise<any> {
+    try {
+      if (!uiStore.meInfo) return [];
+      const info = uiStore.meInfo;
+      const response = await fetch(
+        `${TribesURL}/workspaces/${workspace_uuid}/repository/${repository_uuid}`,
+        {
+          method: 'DELETE',
+          mode: 'cors',
+          headers: {
+            'x-jwt': info.tribe_jwt,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      console.log('response', response);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (e) {
+      console.log('Error deleteRepository', e);
+      return null;
+    }
+  }
+}
 export const mainStore = new MainStore();