diff --git a/web-server/pages/teams/index.tsx b/web-server/pages/teams/index.tsx
index 5a8e86e2d..34a0b6104 100644
--- a/web-server/pages/teams/index.tsx
+++ b/web-server/pages/teams/index.tsx
@@ -3,7 +3,7 @@ import ExtendedSidebarLayout from 'src/layouts/ExtendedSidebarLayout';
 
 import { Authenticated } from '@/components/Authenticated';
 import { FlexBox } from '@/components/FlexBox';
-import { CreateTeams } from '@/components/Teams/CreateTeams';
+import { CreateEditTeams } from '@/components/Teams/CreateTeams';
 import { TeamsList } from '@/components/TeamsList';
 import { Integration } from '@/constants/integrations';
 import { PageWrapper } from '@/content/PullRequests/PageWrapper';
@@ -39,7 +39,7 @@ function Page() {
       hideAllSelectors
     >
       <FlexBox col gap={4}>
-        {teamsList.length ? <TeamsList /> : <CreateTeams />}
+        {teamsList.length ? <TeamsList /> : <CreateEditTeams />}
       </FlexBox>
     </PageWrapper>
   );
diff --git a/web-server/src/components/OverlayComponents/TeamEdit.tsx b/web-server/src/components/OverlayComponents/TeamEdit.tsx
new file mode 100644
index 000000000..29585f4d7
--- /dev/null
+++ b/web-server/src/components/OverlayComponents/TeamEdit.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+import { CRUDProps } from '@/components/Teams/CreateTeams';
+
+import { FlexBox } from '../FlexBox';
+import { CreateEditTeams } from '../Teams/CreateTeams';
+
+export const TeamEdit: FC<CRUDProps> = ({
+  teamId,
+  hideCardComponents,
+  onSave,
+  onDiscard
+}) => {
+  return (
+    <FlexBox>
+      <CreateEditTeams
+        teamId={teamId}
+        hideCardComponents={hideCardComponents}
+        onDiscard={onDiscard}
+        onSave={onSave}
+      />
+    </FlexBox>
+  );
+};
diff --git a/web-server/src/components/Teams/CreateTeams.tsx b/web-server/src/components/Teams/CreateTeams.tsx
index 8be999dfc..8c2e74990 100644
--- a/web-server/src/components/Teams/CreateTeams.tsx
+++ b/web-server/src/components/Teams/CreateTeams.tsx
@@ -19,20 +19,36 @@ import { BaseRepo } from '@/types/resources';
 import { FlexBox } from '../FlexBox';
 import { Line } from '../Text';
 
-type CRUDCallBacks = {
+export type CRUDProps = {
   onSave?: AnyFunction;
   onDiscard?: AnyFunction;
+  teamId?: ID;
+  hideCardComponents?: boolean;
 };
 
-export const CreateTeams: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
+export const CreateEditTeams: FC<CRUDProps> = ({
+  onSave,
+  onDiscard,
+  teamId,
+  hideCardComponents
+}) => {
   return (
-    <TeamsCRUDProvider>
-      <TeamsCRUD onDiscard={onDiscard} onSave={onSave} />
+    <TeamsCRUDProvider teamId={teamId}>
+      <TeamsCRUD
+        hideCardComponents={hideCardComponents}
+        teamId={teamId}
+        onDiscard={onDiscard}
+        onSave={onSave}
+      />
     </TeamsCRUDProvider>
   );
 };
 
-export const TeamsCRUD: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
+const TeamsCRUD: FC<CRUDProps> = ({
+  onSave,
+  onDiscard,
+  hideCardComponents
+}) => {
   const { isPageLoading } = useTeamCRUD();
   return (
     <>
@@ -43,13 +59,13 @@ export const TeamsCRUD: FC<CRUDCallBacks> = ({ onSave, onDiscard }) => {
           gap={4}
           col
           justifyBetween
-          component={Card}
+          component={!hideCardComponents && Card}
           p={2}
-          maxWidth={'900px'}
+          width={'900px'}
         >
           <Heading />
           <TeamName />
-          <TeamRepos />
+          <TeamRepos hideCardComponents={hideCardComponents} />
           <ActionTray onDiscard={onDiscard} onSave={onSave} />
         </FlexBox>
       )}
@@ -67,12 +83,24 @@ const Loader = () => {
 };
 
 const Heading = () => {
+  const { isEditing, editingTeam } = useTeamCRUD();
+  const heading = isEditing ? 'Edit a team' : 'Create a team';
+
   return (
     <FlexBox col>
       <Line huge semibold>
-        Create a Team
+        {heading}
       </Line>
-      <Line>Create a team to generate metric insights</Line>
+      {isEditing ? (
+        <Line>
+          Currently editing{' '}
+          <Line info semibold>
+            {editingTeam.name}
+          </Line>{' '}
+        </Line>
+      ) : (
+        <Line>Create a team to generate metric insights</Line>
+      )}
     </FlexBox>
   );
 };
@@ -109,7 +137,9 @@ const TeamName = () => {
   );
 };
 
-const TeamRepos = () => {
+const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
+  hideCardComponents
+}) => {
   const {
     repoOptions,
     teamRepoError,
@@ -165,18 +195,24 @@ const TeamRepos = () => {
           )}
           renderTags={() => null}
         />
-        <DisplayRepos />
+        <DisplayRepos hideCardComponents={hideCardComponents} />
       </FlexBox>
     </FlexBox>
   );
 };
 
-const ActionTray: FC<CRUDCallBacks> = ({
+const ActionTray: FC<CRUDProps> = ({
   onSave: onSaveCallBack,
   onDiscard: onDiscardCallBack
 }) => {
-  const { onSave, isSaveLoading, teamName, selectedRepos, onDiscard } =
-    useTeamCRUD();
+  const {
+    onSave,
+    isSaveLoading,
+    teamName,
+    selectedRepos,
+    onDiscard,
+    saveDisabled
+  } = useTeamCRUD();
   const { enqueueSnackbar } = useSnackbar();
 
   return (
@@ -198,7 +234,7 @@ const ActionTray: FC<CRUDCallBacks> = ({
         }}
       >
         <Button
-          disabled={isSaveLoading || !teamName || !selectedRepos.length}
+          disabled={saveDisabled}
           variant="contained"
           onClick={() => onSave(onSaveCallBack)}
           sx={{
@@ -224,24 +260,42 @@ const ActionTray: FC<CRUDCallBacks> = ({
   );
 };
 
-const DisplayRepos = () => {
+const DisplayRepos: FC<{ hideCardComponents?: boolean }> = ({
+  hideCardComponents
+}) => {
   const { selectedRepos } = useTeamCRUD();
   return (
-    <FlexBox gap2 ml={2} minHeight={'49px'}>
+    <FlexBox gap2 ml={2} minHeight={hideCardComponents ? '54px' : '49px'}>
       {!!selectedRepos.length && <Divider flexItem orientation="vertical" />}
       <FlexBox flexWrap={'wrap'} gap2>
         {selectedRepos.map((repo) => (
-          <RepoItem repo={repo} key={repo.id} />
+          <RepoItem
+            hideCardComponents={hideCardComponents}
+            repo={repo}
+            key={repo.id}
+          />
         ))}
       </FlexBox>
     </FlexBox>
   );
 };
 
-const RepoItem: FC<{ repo: BaseRepo }> = ({ repo }) => {
+const RepoItem: FC<{ repo: BaseRepo; hideCardComponents?: boolean }> = ({
+  repo,
+  hideCardComponents
+}) => {
   const { unselectRepo } = useTeamCRUD();
   return (
-    <FlexBox height={'49px'} component={Card} gap={2} alignCenter px={2}>
+    <FlexBox
+      height={hideCardComponents ? '54px' : '49px'}
+      border={hideCardComponents && '1px solid'}
+      borderColor={hideCardComponents && '#353552'}
+      borderRadius={'10px'}
+      component={!hideCardComponents && Card}
+      gap={2}
+      alignCenter
+      px={2}
+    >
       {repo.name}{' '}
       <FlexBox
         pointer
diff --git a/web-server/src/components/Teams/useTeamsConfig.tsx b/web-server/src/components/Teams/useTeamsConfig.tsx
index 854a0e8bb..dca234291 100644
--- a/web-server/src/components/Teams/useTeamsConfig.tsx
+++ b/web-server/src/components/Teams/useTeamsConfig.tsx
@@ -1,11 +1,19 @@
 import { useSnackbar } from 'notistack';
-import { createContext, useContext, SyntheticEvent, useCallback } from 'react';
+import { equals } from 'ramda';
+import {
+  createContext,
+  useContext,
+  SyntheticEvent,
+  useCallback,
+  useMemo,
+  useEffect
+} from 'react';
 
 import { Integration } from '@/constants/integrations';
 import { FetchState } from '@/constants/ui-states';
 import { useAuth } from '@/hooks/useAuth';
 import { useBoolState, useEasyState } from '@/hooks/useEasyState';
-import { fetchTeams, createTeam } from '@/slices/team';
+import { fetchTeams, createTeam, updateTeam } from '@/slices/team';
 import { useDispatch, useSelector } from '@/store';
 import { DB_OrgRepo } from '@/types/api/org_repo';
 import { Team } from '@/types/api/teams';
@@ -33,6 +41,9 @@ interface TeamsCRUDContextType {
   unselectRepo: (id: BaseRepo['id']) => void;
   isPageLoading: boolean;
   onDiscard: (callBack?: AnyFunction) => void;
+  isEditing: boolean;
+  editingTeam: Team | null;
+  saveDisabled: boolean;
 }
 
 const TeamsCRUDContext = createContext<TeamsCRUDContextType | undefined>(
@@ -49,7 +60,9 @@ export const useTeamCRUD = () => {
   return context;
 };
 
-export const TeamsCRUDProvider: React.FC = ({ children }) => {
+export const TeamsCRUDProvider: React.FC<{
+  teamId?: ID;
+}> = ({ children, teamId }) => {
   // team slice logic
   const { enqueueSnackbar } = useSnackbar();
   const dispatch = useDispatch();
@@ -120,13 +133,55 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
     [selections.set, selections.value, teamRepoError.true]
   );
 
+  // editing logic
+  const isEditing = Boolean(teamId);
+  const editingTeam = useMemo(
+    () => teams.find((t) => t.id === teamId) || null,
+    [teamId, teams]
+  );
+  const initState = useMemo(() => {
+    if (isEditing) {
+      const selectedTeam = editingTeam;
+      const selectedTeamRepos: string[] =
+        teamReposMaps?.[teamId]?.map((item) => item.idempotency_key) || [];
+      return {
+        name: selectedTeam?.name || '',
+        repos:
+          orgRepos?.filter((r) => selectedTeamRepos.includes(String(r.id))) ||
+          []
+      };
+    }
+    return {
+      name: '',
+      repos: []
+    };
+  }, [editingTeam, isEditing, orgRepos, teamId, teamReposMaps]);
+
+  useEffect(() => {
+    if (isEditing) {
+      depFn(teamName.set, initState.name);
+      depFn(selections.set, initState.repos);
+    }
+  }, [
+    editingTeam,
+    initState,
+    initState.name,
+    initState.repos,
+    isEditing,
+    orgRepos,
+    selections.set,
+    teamId,
+    teamName.set,
+    teamReposMaps
+  ]);
+
   // save team logic
   const isSaveLoading = useBoolState();
-  const onSave = useCallback(
-    (callBack?: AnyFunction) => {
+  const teamCreation = useCallback(
+    async (callBack?: AnyFunction) => {
       depFn(isSaveLoading.true);
       const repoPayload = {
-        [org.name]: selections.value.map(
+        [org?.name]: selections.value.map(
           (repo) =>
             ({
               idempotency_key: repo.id,
@@ -135,7 +190,7 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
             }) as RepoUniqueDetails
         )
       };
-      dispatch(
+      return dispatch(
         createTeam({
           org_id: orgId,
           team_name: teamName.value,
@@ -166,24 +221,123 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
       fetchTeamsAndRepos,
       isSaveLoading.false,
       isSaveLoading.true,
-      org.name,
+      org?.name,
       orgId,
       selections.value,
       teamName.value
     ]
   );
 
+  const teamUpdation = useCallback(
+    async (callBack?: AnyFunction) => {
+      depFn(isSaveLoading.true);
+      const repoPayload = {
+        [org?.name]: selections.value.map(
+          (repo) =>
+            ({
+              idempotency_key: repo.id,
+              name: repo.name,
+              slug: repo.slug
+            }) as RepoUniqueDetails
+        )
+      };
+      return dispatch(
+        updateTeam({
+          team_id: teamId,
+          org_id: orgId,
+          team_name: teamName.value,
+          org_repos: repoPayload,
+          provider: Integration.GITHUB
+        })
+      )
+        .then((res) => {
+          if (res.meta.requestStatus === 'rejected') {
+            enqueueSnackbar('Failed to update team', {
+              variant: 'error',
+              autoHideDuration: 2000
+            });
+            return console.error('Failed to update team', res.meta);
+          }
+          enqueueSnackbar('Team updated successfully, refreshing...', {
+            variant: 'success',
+            autoHideDuration: 2000
+          });
+          fetchTeamsAndRepos();
+          callBack?.(res);
+        })
+        .finally(isSaveLoading.false);
+    },
+    [
+      dispatch,
+      enqueueSnackbar,
+      fetchTeamsAndRepos,
+      isSaveLoading.false,
+      isSaveLoading.true,
+      org?.name,
+      orgId,
+      selections.value,
+      teamId,
+      teamName.value
+    ]
+  );
+
+  const onSave = useCallback(
+    async (callBack?: AnyFunction) => {
+      if (isEditing) {
+        return await teamUpdation(callBack);
+      }
+      return await teamCreation(callBack);
+    },
+    [isEditing, teamCreation, teamUpdation]
+  );
+
+  const resetErrors = useCallback(() => {
+    depFn(teamRepoError.false);
+    depFn(teamNameError.false);
+  }, [teamNameError.false, teamRepoError.false]);
+
   const onDiscard = useCallback(
     (callBack?: AnyFunction) => {
-      depFn(teamName.set, '');
-      depFn(selections.set, []);
-      depFn(teamRepoError.false);
-      depFn(teamNameError.false);
-      callBack?.();
+      resetErrors();
+      if (!isEditing) {
+        depFn(teamName.set, '');
+        depFn(selections.set, []);
+        return callBack?.();
+      }
+      depFn(teamName.set, initState.name);
+      depFn(selections.set, initState.repos);
+      return callBack?.();
     },
-    [selections.set, teamName.set, teamRepoError.false, teamNameError.false]
+    [
+      resetErrors,
+      isEditing,
+      teamName.set,
+      initState.name,
+      initState.repos,
+      selections.set
+    ]
   );
 
+  const saveDisabled = useMemo(() => {
+    const baseConditions =
+      !teamName.value || !selections.value.length || isSaveLoading.value;
+    if (isEditing) {
+      return (
+        baseConditions ||
+        (teamName.value === initState.name &&
+          equals(selections.value, initState.repos))
+      );
+    }
+    return baseConditions;
+  }, [
+    initState.name,
+    initState.repos,
+    isEditing,
+    isSaveLoading.value,
+    selections.value,
+    teamName.value
+  ]);
+
   const contextValue: TeamsCRUDContextType = {
     teamName: teamName.value,
     showTeamNameError: teamNameError.value,
@@ -201,7 +355,10 @@ export const TeamsCRUDProvider: React.FC = ({ children }) => {
     isSaveLoading: isSaveLoading.value,
     unselectRepo,
     isPageLoading,
-    onDiscard
+    onDiscard,
+    isEditing,
+    editingTeam,
+    saveDisabled
   };
 
   return (
diff --git a/web-server/src/components/TeamsList.tsx b/web-server/src/components/TeamsList.tsx
index a3747d493..3de59254e 100644
--- a/web-server/src/components/TeamsList.tsx
+++ b/web-server/src/components/TeamsList.tsx
@@ -22,11 +22,13 @@ import { Team } from '@/types/api/teams';
 import { depFn } from '@/utils/fn';
 
 import { FlexBox } from './FlexBox';
-import { CreateTeams } from './Teams/CreateTeams';
+import { useOverlayPage } from './OverlayPageContext';
+import { CreateEditTeams } from './Teams/CreateTeams';
 import { Line } from './Text';
 
 type TeamCardProps = {
   team: Team;
+  onEdit: () => void;
 };
 
 const VISIBLE_REPOS_COUNT = 3;
@@ -44,11 +46,18 @@ export const TeamsList = () => {
     );
   }, [searchQuery.value, teamsArray]);
 
+  const showCreate = useBoolState(false);
+  const showCreateTeam = useCallback(() => {
+    depFn(showCreate.toggle);
+  }, [showCreate.toggle]);
+
   return (
     <>
       <SearchFilter
         searchQuery={searchQuery.value}
         onChange={searchQuery.set}
+        showCreateTeam={showCreateTeam}
+        showCreate={showCreate.value}
       />
       {!teamsArrayFiltered.length && teamsArray.length ? (
         <FlexBox fullWidth>
@@ -57,7 +66,7 @@ export const TeamsList = () => {
       ) : null}
       <FlexBox gap={4} grid gridTemplateColumns={'1fr 1fr '} maxWidth={'900px'}>
         {teamsArrayFiltered.map((team, index) => (
-          <TeamCard key={index} team={team} />
+          <TeamCard onEdit={showCreate.false} key={index} team={team} />
         ))}
       </FlexBox>
     </>
@@ -67,11 +76,9 @@ export const TeamsList = () => {
 const SearchFilter: FC<{
   searchQuery: string;
   onChange: (value: string) => void;
-}> = ({ searchQuery, onChange }) => {
-  const showCreate = useBoolState(false);
-  const showCreateTeam = useCallback(() => {
-    depFn(showCreate.toggle);
-  }, [showCreate.toggle]);
+  showCreateTeam: () => void;
+  showCreate: boolean;
+}> = ({ searchQuery, onChange, showCreateTeam, showCreate }) => {
   return (
     <FlexBox col gap={4}>
       <FlexBox width={'900px'} gap={4}>
@@ -110,12 +117,12 @@ const SearchFilter: FC<{
           </FlexBox>
         </FlexBox>
       </FlexBox>
-      {showCreate.value && <CreateTeams onDiscard={showCreate.false} />}
+      {showCreate && <CreateEditTeams onDiscard={showCreateTeam} />}
     </FlexBox>
   );
 };
 
-const TeamCard: React.FC<TeamCardProps> = ({ team }) => {
+const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit }) => {
   const { name: teamName, id: teamId } = team;
   const teamReposMap = useSelector((state) => state.team.teamReposMaps);
   const assignedReposToTeam = useMemo(
@@ -180,22 +187,7 @@ const TeamCard: React.FC<TeamCardProps> = ({ team }) => {
         </FlexBox>
       </FlexBox>
       <FlexBox col justifyBetween height={'70px'}>
-        <FlexBox title={'Edit team'} pointer ml={1 / 2}>
-          <Edit
-            fontSize="small"
-            onClick={() => {
-              // TODO: IMPLEMENT EDIT TEAM
-              //   disableCreation();
-              //   addPage({
-              //     page: {
-              //       title: `Editing team: ${team.name}`,
-              //       ui: 'team_edit',
-              //       props: { teamId: team.id }
-              //     }
-              //   });
-            }}
-          />
-        </FlexBox>
+        <EditTeam teamId={teamId} onEdit={onEdit} />
         <FlexBox pointer>
           <MoreOptions teamId={team.id} />
         </FlexBox>
@@ -331,3 +323,27 @@ const MoreOptions = ({ teamId }: { teamId: ID }) => {
     </>
   );
 };
+
+const EditTeam = ({ teamId, onEdit }: { teamId: ID; onEdit: () => void }) => {
+  const { addPage } = useOverlayPage();
+  return (
+    <FlexBox title={'Edit team'} pointer ml={1 / 2}>
+      <Edit
+        fontSize="small"
+        onClick={() => {
+          onEdit();
+          addPage({
+            page: {
+              title: 'Edit team',
+              ui: 'team_edit',
+              props: {
+                teamId,
+                hideCardComponents: true
+              }
+            }
+          });
+        }}
+      />
+    </FlexBox>
+  );
+};
diff --git a/web-server/src/constants/overlays.ts b/web-server/src/constants/overlays.ts
index b48831e14..6c6aeb76c 100644
--- a/web-server/src/constants/overlays.ts
+++ b/web-server/src/constants/overlays.ts
@@ -10,5 +10,10 @@ export const overlaysImportMap = {
     import('@/components/OverlayComponents/Dummy').then((c) => ({
       default: c.Dummy
     }))
+  ),
+  team_edit: lazy(() =>
+    import('@/components/OverlayComponents/TeamEdit').then((c) => ({
+      default: c.TeamEdit
+    }))
   )
 };
diff --git a/web-server/src/slices/team.ts b/web-server/src/slices/team.ts
index ef515320e..b0d72284a 100644
--- a/web-server/src/slices/team.ts
+++ b/web-server/src/slices/team.ts
@@ -172,6 +172,28 @@ export const createTeam = createAsyncThunk(
   }
 );
 
+export const updateTeam = createAsyncThunk(
+  'teams/updateTeam',
+  async (params: {
+    team_id: ID;
+    team_name: string;
+    org_id: ID;
+    org_repos: Record<string, RepoUniqueDetails[]>;
+    provider: Integration;
+  }) => {
+    const { team_id, team_name, org_id, org_repos, provider } = params;
+    return await handleApi<BaseTeam>(`/resources/orgs/${org_id}/teams/v2`, {
+      method: 'PATCH',
+      data: {
+        name: team_name,
+        org_repos: org_repos,
+        provider: provider,
+        id: team_id
+      }
+    });
+  }
+);
+
 export const fetchTeamReposProductionBranches = createAsyncThunk(
   'teams/teamReposProductionBranches',
   async (params: { team_id: ID }) => {