diff --git a/.github/workflows/github-actions-demo.yml b/.github/workflows/github-actions-demo.yml
index 8c5e8036c..33c6c45c7 100644
--- a/.github/workflows/github-actions-demo.yml
+++ b/.github/workflows/github-actions-demo.yml
@@ -17,7 +17,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - name: 🪖 Creating .dev.env for nodemailer
+      - name: 🪖 Creating .dev.env for nodemailer/aws
         working-directory: ./server
         run: |
           touch .dev.env
@@ -26,6 +26,9 @@ jobs:
           echo SMTP_USER=${{ secrets.SMTP_USER }} >> .dev.env
           echo SMTP_PASS=${{ secrets.SMTP_PASS }} >> .dev.env
           echo SMTP_PORT=${{ secrets.SMTP_PORT }} >> .dev.env
+          echo AWS_ACCESS_KEY=${{ secrets.AWS_ACCESS_KEY }} >> .dev.env
+          echo AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }} >> .dev.env
+          echo AWS_S3_REGION=${{ secrets.AWS_S3_REGION }} >> .dev.env
           cat .dev.env
       - name: 🎧 Install modules
         working-directory: ./server
diff --git a/client/public/index.html b/client/public/index.html
index a0b379217..bdb8f59c2 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -14,7 +14,6 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/client/src/api/hooks/auth/useEditUserDetails.js b/client/src/api/hooks/auth/useEditUserDetails.js
index e2912c4d6..1e7bb3b56 100644
--- a/client/src/api/hooks/auth/useEditUserDetails.js
+++ b/client/src/api/hooks/auth/useEditUserDetails.js
@@ -14,9 +14,9 @@ export const useEditUserDetails = (successHandler) => {
 
   return useMutation(finishRegistration, {
     mutationKey: 'finishRegistration',
-    onSuccess: () => {
+    onSuccess: async (data) => {
+      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
       successHandler()
-      queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
     },
     onError: (error) => {
       // set error message
diff --git a/client/src/api/hooks/auth/useUpdateAvatar.js b/client/src/api/hooks/auth/useUpdateAvatar.js
index 3dd99ada5..1861b3d89 100644
--- a/client/src/api/hooks/auth/useUpdateAvatar.js
+++ b/client/src/api/hooks/auth/useUpdateAvatar.js
@@ -15,11 +15,14 @@ export const useUpdateAvatar = (type) => {
 
   return useMutation(updateUserAvatar, {
     mutationKey: 'updateUserAvatar',
-    onSuccess: () => {
-      queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+    onSuccess: async () => {
+      if (type === 'teams') {
+        await queryClient.invalidateQueries('getTeamById', { refetchInactive: true })
+      }
+
+      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
     },
     onError: (error) => {
-      console.log(error)
       // set error message
       errorToaster(error)
     },
diff --git a/client/src/api/hooks/team/useCreateTeam.js b/client/src/api/hooks/team/useCreateTeam.js
index 7adec8798..d24d6d376 100644
--- a/client/src/api/hooks/team/useCreateTeam.js
+++ b/client/src/api/hooks/team/useCreateTeam.js
@@ -1,19 +1,10 @@
-import { useMutation, useQueryClient } from 'react-query'
-import { useDispatch } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useMutation } from 'react-query'
 
 import http from '../../../http'
-import { setIsFinishRegistrationStarted, setStep } from '../../../store/reducers/RegistrationAuth'
-import { useUpdateAvatar } from '../auth/useUpdateAvatar'
 
 const { api } = http
 
-export const useCreateTeam = (teamAvatar) => {
-  const queryClient = useQueryClient()
-  const { mutate: updateAvatar } = useUpdateAvatar('teams')
-  const dispatch = useDispatch()
-
-  const navigate = useNavigate()
+export const useCreateTeam = () => {
   const createTeam = async (details) => {
     const response = await api.post('/teams/create', details)
 
@@ -22,14 +13,5 @@ export const useCreateTeam = (teamAvatar) => {
 
   return useMutation(createTeam, {
     mutationKey: 'createTeam',
-    onSuccess: async (data) => {
-      if (teamAvatar) {
-        updateAvatar({ teamID: data._id, image: teamAvatar.split(',')[1] })
-      }
-      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
-      dispatch(setIsFinishRegistrationStarted(false))
-      dispatch(setStep(1))
-      navigate(`/team/${data._id}`)
-    },
   })
 }
diff --git a/client/src/api/hooks/team/useDelete.js b/client/src/api/hooks/team/useDelete.js
index c81c9fee8..27a3b0fb8 100644
--- a/client/src/api/hooks/team/useDelete.js
+++ b/client/src/api/hooks/team/useDelete.js
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 
 import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
 
 const { api } = http
 
@@ -18,7 +19,10 @@ export const useDelete = () => {
     mutationKey: 'deleteTeam',
     onSuccess: () => {
       queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
-      navigate('/team')
+      navigate('/teams')
+    },
+    onError: (error) => {
+      errorToaster(error)
     },
   })
 }
diff --git a/client/src/api/hooks/team/useGetByTag.js b/client/src/api/hooks/team/useGetByTag.js
index f331eee7c..7a0501691 100644
--- a/client/src/api/hooks/team/useGetByTag.js
+++ b/client/src/api/hooks/team/useGetByTag.js
@@ -7,8 +7,6 @@ import { successToaster } from '../../../shared/components/Toasters/Success.toas
 const { api } = http
 
 export const useGetByTag = () => {
-  const queryClient = useQueryClient()
-
   const getTeamByTag = async (tag) => {
     return await api.get(`/teams/tag/${tag}`)
   }
diff --git a/client/src/api/hooks/team/useGetTeamData.js b/client/src/api/hooks/team/useGetTeamData.js
index d6704bf1c..696628fe9 100644
--- a/client/src/api/hooks/team/useGetTeamData.js
+++ b/client/src/api/hooks/team/useGetTeamData.js
@@ -6,16 +6,18 @@ const { api } = http
 
 export const useGetTeamData = (teamId) => {
   const getTeamById = async () => {
-    const response = await api.get(`/teams/${teamId}`)
+    if (teamId) {
+      const response = await api.get(`/teams/${teamId}`)
 
-    return response.data
+      return response.data
+    }
   }
 
-  const { data, isLoading: isTeamLoading } = useQuery(['getTeamById', teamId], getTeamById, {
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    enabled: !!teamId,
-  })
+  const {
+    data,
+    isLoading: isTeamLoading,
+    error,
+  } = useQuery(['getTeamById', teamId], getTeamById, { retry: 0 })
 
-  return { data, isLoading: isTeamLoading }
+  return { data, isLoading: isTeamLoading, error }
 }
diff --git a/client/src/api/hooks/team/useInviteUser.js b/client/src/api/hooks/team/useInviteUser.js
index 9c8415cb5..beb581f05 100644
--- a/client/src/api/hooks/team/useInviteUser.js
+++ b/client/src/api/hooks/team/useInviteUser.js
@@ -1,26 +1,34 @@
 import { useMutation, useQueryClient } from 'react-query'
 
 import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+import { successToaster } from '../../../shared/components/Toasters/Success.toaster'
 
 const { api } = http
 
-export const useInviteUser = (successHandler) => {
+export const useInviteUser = () => {
   const queryClient = useQueryClient()
 
   const inviteUser = async (details) => {
-    const { email, teamId, userId } = details
+    const { email, teamid, from_user_id } = details
+
+    console.log(details)
+
     const response = await api.post('/teams/invite', {
       email,
-      teamid: teamId,
-      from_user_id: userId,
+      teamid: teamid,
+      from_user_id: from_user_id,
     })
   }
 
   return useMutation(inviteUser, {
     mutationKey: 'inviteUser',
-    onSuccess: async () => {
-      successHandler()
-      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+    onSuccess: () => {
+      successToaster('User was successfully invited.')
+      queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+    },
+    onError: (error) => {
+      errorToaster(error)
     },
   })
 }
diff --git a/client/src/api/hooks/team/useJoinTeam.js b/client/src/api/hooks/team/useJoinTeam.js
new file mode 100644
index 000000000..f063738ec
--- /dev/null
+++ b/client/src/api/hooks/team/useJoinTeam.js
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useJoinTeam = () => {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  const joinTeam = async (details) => {
+    const response = await api.put('/teams/join', details)
+
+    return response.data
+  }
+
+  return useMutation(joinTeam, {
+    mutationKey: 'joinTeam',
+    onSuccess: async (data) => {
+      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+      await queryClient.invalidateQueries('getTeamById', { refetchInactive: true })
+      navigate(`/team/${data._id}`)
+    },
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+}
diff --git a/client/src/api/hooks/team/useLeaveAndJoin.js b/client/src/api/hooks/team/useLeaveAndJoin.js
new file mode 100644
index 000000000..8e9832caa
--- /dev/null
+++ b/client/src/api/hooks/team/useLeaveAndJoin.js
@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+import { useJoinTeam } from './useJoinTeam'
+import { useLeave } from './useLeaveTeam'
+
+export const useLeaveAndJoin = () => {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const joinTeamMutation = useJoinTeam()
+  const leaveTeamMutation = useLeave()
+
+  const leaveAndJoin = async (details) => {
+    await leaveTeamMutation.mutateAsync(details.leaveDetails)
+
+    const joinResult = await joinTeamMutation.mutateAsync(details.joinDetails)
+
+    return joinResult
+  }
+
+  const onSuccess = async (joinDetails) => {
+    queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+    navigate(`/team/${joinDetails._id}`)
+  }
+
+  const leaveAndJoinMutation = useMutation(leaveAndJoin, {
+    mutationKey: 'leaveAndJoin',
+    onSuccess,
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+
+  return {
+    leaveAndJoin: leaveAndJoinMutation,
+    isLeaving: leaveTeamMutation.isLoading,
+    isJoining: joinTeamMutation.isLoading,
+  }
+}
diff --git a/client/src/api/hooks/team/useLeaveTeam.js b/client/src/api/hooks/team/useLeaveTeam.js
new file mode 100644
index 000000000..05d05c2eb
--- /dev/null
+++ b/client/src/api/hooks/team/useLeaveTeam.js
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useLeave = () => {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  const leaveTeam = async (details) => {
+    const response = await api.put(`/teams/leave`, details)
+
+    return response.data
+  }
+
+  return useMutation(leaveTeam, {
+    mutationKey: 'leaveTeam',
+    onSuccess: () => {
+      queryClient.invalidateQueries('checkAuth')
+      navigate(`/teams`)
+    },
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+}
diff --git a/client/src/api/hooks/team/useLoadTeams.js b/client/src/api/hooks/team/useLoadTeams.js
new file mode 100644
index 000000000..13b0dfc8b
--- /dev/null
+++ b/client/src/api/hooks/team/useLoadTeams.js
@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react'
+import { useInfiniteQuery } from 'react-query'
+import { useSelector } from 'react-redux'
+import qs from 'qs'
+import uuid from 'uuidv4'
+
+import http from '../../../http'
+import checkEntriesForValue from '../../../utils/checkEntriesForValue'
+import filteredQueryMaker from '../../../utils/filteredQueryMaker'
+import { normalizeFilters } from '../../../utils/normalizeFilters'
+
+const { api } = http
+
+export const useLoadTeams = () => {
+  const [filtered, setFiltered] = useState(false)
+  const filters = useSelector((state) => state.teamsFilters)
+
+  const normalizedFilters = normalizeFilters(filters)
+  const [id, setId] = useState()
+
+  useEffect(() => {
+    if (checkEntriesForValue(filters)) {
+      setFiltered(true)
+      setId(uuid())
+    } else {
+      setFiltered(false)
+    }
+  }, [filters])
+
+  const getTeams = async ({ pageParam = 1 }) => {
+    const response = await api.get('/teams', { params: { page: pageParam } })
+
+    return response.data
+  }
+
+  const getTeamsFiltered = async ({ pageParam = 1 }) => {
+    const filtersQuery = filteredQueryMaker.teams(
+      normalizedFilters.countries,
+      normalizedFilters.people,
+      normalizedFilters.name,
+      normalizedFilters.tag,
+    )
+
+    let queryString = qs.stringify(filtersQuery)
+    const response = await api.get('/teams/filtered', {
+      params: { page: pageParam, filtersQuery: queryString },
+    })
+
+    return response.data
+  }
+
+  const query = useInfiniteQuery(
+    [filtered ? 'teamsFiltered' : 'teams', id],
+    filtered ? getTeamsFiltered : getTeams,
+    {
+      getNextPageParam: (lastPage, allPages) => {
+        return Math.ceil(lastPage.total / lastPage.limit) !== allPages.length
+          ? allPages.length + 1
+          : undefined
+      },
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  return {
+    ...query,
+    filtered,
+  }
+}
diff --git a/client/src/api/hooks/team/useRemoveMember.js b/client/src/api/hooks/team/useRemoveMember.js
new file mode 100644
index 000000000..16f9899d8
--- /dev/null
+++ b/client/src/api/hooks/team/useRemoveMember.js
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+// refetch data
+
+export const useRemoveMember = () => {
+  const queryClient = useQueryClient()
+  const removeMember = async (details) => {
+    const response = await api.put(`/teams/remove-member`, details)
+
+    return response.data
+  }
+
+  return useMutation(removeMember, {
+    mutationKey: 'removeMember',
+    onSuccess: async () => {
+      await queryClient.invalidateQueries('getTeamById') // useQuery key
+    },
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+}
diff --git a/client/src/api/hooks/team/useTransferLeader.js b/client/src/api/hooks/team/useTransferLeader.js
new file mode 100644
index 000000000..5174d08ac
--- /dev/null
+++ b/client/src/api/hooks/team/useTransferLeader.js
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useTransferLeader = () => {
+  const queryClient = useQueryClient()
+  const transferLeader = async (details) => {
+    const response = await api.put(`/teams/leader/transfer`, details)
+
+    return response.data
+  }
+
+  return useMutation(transferLeader, {
+    mutationKey: 'transferLeader',
+    onSuccess: async () => {
+      await queryClient.invalidateQueries('getTeamById')
+      await queryClient.invalidateQueries('checkAuth', { refetchInactive: true })
+    },
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+}
diff --git a/client/src/api/hooks/team/useUpdateTeam.js b/client/src/api/hooks/team/useUpdateTeam.js
new file mode 100644
index 000000000..4be4d5ab5
--- /dev/null
+++ b/client/src/api/hooks/team/useUpdateTeam.js
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from 'react-query'
+
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useUpdateTeam = () => {
+  const queryClient = useQueryClient()
+  const updateTeam = async (details) => {
+    const response = await api.put(`/teams/update-team`, details)
+
+    return response.data
+  }
+
+  return useMutation(updateTeam, {
+    mutationKey: 'updateTeam',
+    onSuccess: () => {
+      queryClient.invalidateQueries('getTeamById')
+    },
+    onError: (error) => {
+      errorToaster(error)
+    },
+  })
+}
diff --git a/client/src/api/hooks/temeights/useLoadUsers.js b/client/src/api/hooks/temeights/useLoadUsers.js
index b106fb729..1db80eb5b 100644
--- a/client/src/api/hooks/temeights/useLoadUsers.js
+++ b/client/src/api/hooks/temeights/useLoadUsers.js
@@ -1,21 +1,30 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useInfiniteQuery } from 'react-query'
 import { useSelector } from 'react-redux'
 import qs from 'qs'
 import uuid from 'uuidv4'
 
 import http from '../../../http'
+import checkEntriesForValue from '../../../utils/checkEntriesForValue'
 import filteredQueryMaker from '../../../utils/filteredQueryMaker'
+import { normalizeFilters } from '../../../utils/normalizeFilters'
 
 const { api } = http
 
-export const useLoadUsers = (isFiltered) => {
-  const { filters } = useSelector((state) => state.sharedReducer)
+export const useLoadUsers = () => {
+  const [filtered, setFiltered] = useState(false)
+  const filters = useSelector((state) => state.usersFilters)
 
+  const normalizedFilters = normalizeFilters(filters)
   const [id, setId] = useState()
 
   useEffect(() => {
-    setId(uuid())
+    if (checkEntriesForValue(filters)) {
+      setFiltered(true)
+      setId(uuid())
+    } else {
+      setFiltered(false)
+    }
   }, [filters])
 
   const getUsers = async ({ pageParam = 1 }) => {
@@ -23,13 +32,17 @@ export const useLoadUsers = (isFiltered) => {
 
     return response.data
   }
+
   const getUsersFiltered = async ({ pageParam = 1 }) => {
+    console.log(normalizedFilters)
     const filtersQuery = filteredQueryMaker.users(
-      filters.countries,
-      filters.roles,
-      filters.languages,
-      filters.frameworks,
+      normalizedFilters.countries,
+      normalizedFilters.concentrations,
+      normalizedFilters.languages,
+      normalizedFilters.frameworks,
+      normalizedFilters.name,
     )
+
     let queryString = qs.stringify(filtersQuery)
     const response = await api.get('/users/get-filtered', {
       params: { page: pageParam, filtersQuery: queryString },
@@ -38,9 +51,9 @@ export const useLoadUsers = (isFiltered) => {
     return response.data
   }
 
-  return useInfiniteQuery(
-    [isFiltered ? 'usersFiltered' : 'users', id],
-    isFiltered ? getUsersFiltered : getUsers,
+  const query = useInfiniteQuery(
+    [filtered ? 'usersFiltered' : 'users', id],
+    filtered ? getUsersFiltered : getUsers,
     {
       getNextPageParam: (lastPage, allPages) => {
         return Math.ceil(lastPage.total / lastPage.limit) !== allPages.length
@@ -50,4 +63,9 @@ export const useLoadUsers = (isFiltered) => {
       refetchOnWindowFocus: false,
     },
   )
+
+  return {
+    ...query,
+    filtered,
+  }
 }
diff --git a/client/src/assets/.DS_Store b/client/src/assets/.DS_Store
new file mode 100644
index 000000000..0e3ba7eea
Binary files /dev/null and b/client/src/assets/.DS_Store differ
diff --git a/client/src/assets/Arrows/LongArrowLeft.js b/client/src/assets/Arrows/LongArrowLeft.js
new file mode 100644
index 000000000..c0f351374
--- /dev/null
+++ b/client/src/assets/Arrows/LongArrowLeft.js
@@ -0,0 +1,20 @@
+function LongArrowLeft() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.541748 6.99996C0.541748 6.65478 0.82157 6.37496 1.16675 6.37496H12.8334C13.1786 6.37496 13.4584 6.65478 13.4584 6.99996C13.4584 7.34514 13.1786 7.62496 12.8334 7.62496H1.16675C0.82157 7.62496 0.541748 7.34514 0.541748 6.99996Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.44202 0.724684C7.6861 0.968762 7.6861 1.36449 7.44202 1.60857L2.05063 6.99996L7.44202 12.3914C7.6861 12.6354 7.6861 13.0312 7.44202 13.2752C7.19795 13.5193 6.80222 13.5193 6.55814 13.2752L0.724806 7.4419C0.480729 7.19782 0.480729 6.8021 0.724806 6.55802L6.55814 0.724684C6.80222 0.480607 7.19795 0.480607 7.44202 0.724684Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
+export default LongArrowLeft
diff --git a/client/src/assets/Arrows/LongArrowRight.js b/client/src/assets/Arrows/LongArrowRight.js
new file mode 100644
index 000000000..a5df848b6
--- /dev/null
+++ b/client/src/assets/Arrows/LongArrowRight.js
@@ -0,0 +1,20 @@
+function LongArrowRight() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.541504 6.99996C0.541504 6.65478 0.821326 6.37496 1.1665 6.37496H12.8332C13.1783 6.37496 13.4582 6.65478 13.4582 6.99996C13.4582 7.34514 13.1783 7.62496 12.8332 7.62496H1.1665C0.821326 7.62496 0.541504 7.34514 0.541504 6.99996Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.5579 0.724684C6.80197 0.480607 7.1977 0.480607 7.44178 0.724684L13.2751 6.55802C13.5192 6.8021 13.5192 7.19782 13.2751 7.4419L7.44178 13.2752C7.1977 13.5193 6.80197 13.5193 6.5579 13.2752C6.31382 13.0312 6.31382 12.6354 6.5579 12.3914L11.9493 6.99996L6.5579 1.60857C6.31382 1.36449 6.31382 0.968762 6.5579 0.724684Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
+export default LongArrowRight
diff --git a/client/src/assets/LanguageLogo/C.js b/client/src/assets/LanguageLogo/C.js
index 55cb9299b..8a590e7d3 100644
--- a/client/src/assets/LanguageLogo/C.js
+++ b/client/src/assets/LanguageLogo/C.js
@@ -1,10 +1,10 @@
 function C() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M21.0313 6.28136L21.0876 6.24386C20.9751 6.03761 20.8063 5.85011 20.6376 5.75636L11.5813 0.543848C11.4313 0.450098 11.225 0.412598 11 0.412598C10.775 0.412598 10.5688 0.468848 10.4188 0.543848L1.41875 5.77511C1.1 5.96261 0.875 6.43136 0.875 6.78761V17.2314C0.875 17.4376 0.9125 17.6626 1.04375 17.8689L1.00625 17.8876C1.1 18.0376 1.23125 18.1689 1.3625 18.2439L10.4 23.4752C10.55 23.5689 10.7563 23.6064 10.9813 23.6064C11.2063 23.6064 11.4125 23.5502 11.5625 23.4752L20.5626 18.2439C20.8813 18.0564 21.1063 17.5876 21.1063 17.2314V6.76886C21.1251 6.61886 21.1063 6.45011 21.0313 6.28136ZM11 16.5939C12.7063 16.5939 14.2063 15.6564 14.9938 14.2689L17.4125 15.6939C16.1375 17.9064 13.7375 19.4064 11 19.4064C6.91252 19.4064 3.59376 16.0876 3.59376 12.0001C3.59376 7.91262 6.91252 4.59386 11 4.59386C13.7563 4.59386 16.1563 6.11261 17.4313 8.34387L14.9938 9.75012C14.2063 8.34387 12.7063 7.40637 11 7.40637C8.46877 7.40637 6.40626 9.46887 6.40626 12.0001C6.40626 14.5314 8.46877 16.5939 11 16.5939Z"
         fill="white"
-        d="M117.5 33.5l.3-.2c-.6-1.1-1.5-2.1-2.4-2.6L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.3.9 3.4l-.2.1c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c.1-.8 0-1.7-.4-2.6zM64 88.5c9.1 0 17.1-5 21.3-12.4l12.9 7.6c-6.8 11.8-19.6 19.8-34.2 19.8-21.8 0-39.5-17.7-39.5-39.5S42.2 24.5 64 24.5c14.7 0 27.5 8.1 34.3 20l-13 7.5C81.1 44.5 73.1 39.5 64 39.5c-13.5 0-24.5 11-24.5 24.5s11 24.5 24.5 24.5z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Cplusplus.js b/client/src/assets/LanguageLogo/Cplusplus.js
index bcac026a3..86688ba4c 100644
--- a/client/src/assets/LanguageLogo/Cplusplus.js
+++ b/client/src/assets/LanguageLogo/Cplusplus.js
@@ -1,10 +1,10 @@
 function Cplusplus() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M21.0313 6.28136L21.0876 6.24386C20.9751 6.03761 20.8063 5.85011 20.6376 5.75636L11.5813 0.543848C11.4313 0.450098 11.225 0.412598 11 0.412598C10.775 0.412598 10.5688 0.468848 10.4188 0.543848L1.41875 5.77511C1.1 5.96261 0.875 6.43136 0.875 6.78761V17.2314C0.875 17.4376 0.9125 17.6626 1.04375 17.8689L1.00625 17.8876C1.1 18.0376 1.23125 18.1689 1.3625 18.2439L10.4 23.4752C10.55 23.5689 10.7563 23.6064 10.9813 23.6064C11.2063 23.6064 11.4125 23.5502 11.5625 23.4752L20.5626 18.2439C20.8813 18.0564 21.1063 17.5876 21.1063 17.2314V6.76886C21.1251 6.61886 21.1063 6.45011 21.0313 6.28136ZM14.375 12.3751V11.6251H15.3125V10.6876H16.25V11.6251H17.1875V12.3751H16.25V13.3126H15.3125V12.3751H14.375ZM14.9938 9.75012C14.2063 8.34387 12.7063 7.40637 11 7.40637C8.46877 7.40637 6.40626 9.46887 6.40626 12.0001C6.40626 14.5314 8.46877 16.5939 11 16.5939C12.7063 16.5939 14.2063 15.6564 14.9938 14.2689L17.4125 15.6939C16.1375 17.9064 13.7375 19.4064 11 19.4064C6.91252 19.4064 3.59376 16.0876 3.59376 12.0001C3.59376 7.91262 6.91252 4.59386 11 4.59386C13.7563 4.59386 16.1563 6.11261 17.4313 8.34387L14.9938 9.75012ZM20.5626 12.3751H19.625V13.3126H18.875V12.3751H17.75V11.6251H18.875V10.6876H19.625V11.6251H20.5626V12.3751Z"
         fill="white"
-        d="M117.5 33.5l.3-.2c-.6-1.1-1.5-2.1-2.4-2.6L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.3.9 3.4l-.2.1c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c.1-.8 0-1.7-.4-2.6zM82 66v-4h5v-5h5v5h5v4h-5v5h-5v-5h-5zm3.3-14C81.1 44.5 73.1 39.5 64 39.5c-13.5 0-24.5 11-24.5 24.5s11 24.5 24.5 24.5c9.1 0 17.1-5 21.3-12.4l12.9 7.6c-6.8 11.8-19.6 19.8-34.2 19.8-21.8 0-39.5-17.7-39.5-39.5S42.2 24.5 64 24.5c14.7 0 27.5 8.1 34.3 20l-13 7.5zM115 66h-5v5h-4v-5h-6v-4h6v-5h4v5h5v4z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Csharp.js b/client/src/assets/LanguageLogo/Csharp.js
index 3ea136e18..2fa13e5a7 100644
--- a/client/src/assets/LanguageLogo/Csharp.js
+++ b/client/src/assets/LanguageLogo/Csharp.js
@@ -1,10 +1,10 @@
 function Csharp() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M117.5 33.5l.3-.2c-.6-1.1-1.5-2.1-2.4-2.6L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.3.9 3.4l-.2.1c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c.1-.8 0-1.7-.4-2.6zm-53.5 70c-21.8 0-39.5-17.7-39.5-39.5S42.2 24.5 64 24.5c14.7 0 27.5 8.1 34.3 20l-13 7.5C81.1 44.5 73.1 39.5 64 39.5c-13.5 0-24.5 11-24.5 24.5s11 24.5 24.5 24.5c9.1 0 17.1-5 21.3-12.4l12.9 7.6c-6.8 11.8-19.6 19.8-34.2 19.8zM115 62h-3.2l-.9 4h4.1v5h-5l-1.2 6h-4.9l1.2-6h-3.8l-1.2 6h-4.8l1.2-6H94v-5h3.5l.9-4H94v-5h5.3l1.2-6h4.9l-1.2 6h3.8l1.2-6h4.8l-1.2 6h2.2v5zm-12.7 4h3.8l.9-4h-3.8z"
+        d="M21.0313 6.28136L21.0876 6.24386C20.9751 6.03761 20.8063 5.85011 20.6376 5.75636L11.5813 0.543848C11.4313 0.450098 11.225 0.412598 11 0.412598C10.775 0.412598 10.5688 0.468848 10.4188 0.543848L1.41875 5.77511C1.1 5.96261 0.875 6.43136 0.875 6.78761V17.2314C0.875 17.4376 0.9125 17.6626 1.04375 17.8689L1.00625 17.8876C1.1 18.0376 1.23125 18.1689 1.3625 18.2439L10.4 23.4752C10.55 23.5689 10.7563 23.6064 10.9813 23.6064C11.2063 23.6064 11.4125 23.5502 11.5625 23.4752L20.5626 18.2439C20.8813 18.0564 21.1063 17.5876 21.1063 17.2314V6.76886C21.1251 6.61886 21.1063 6.45011 21.0313 6.28136ZM11 19.4064C6.91252 19.4064 3.59376 16.0876 3.59376 12.0001C3.59376 7.91262 6.91252 4.59386 11 4.59386C13.7563 4.59386 16.1563 6.11261 17.4313 8.34387L14.9938 9.75012C14.2063 8.34387 12.7063 7.40637 11 7.40637C8.46877 7.40637 6.40626 9.46887 6.40626 12.0001C6.40626 14.5314 8.46877 16.5939 11 16.5939C12.7063 16.5939 14.2063 15.6564 14.9938 14.2689L17.4125 15.6939C16.1375 17.9064 13.7375 19.4064 11 19.4064ZM20.5626 11.6251H19.9626L19.7938 12.3751H20.5626V13.3126H19.625L19.4 14.4376H18.4813L18.7063 13.3126H17.9938L17.7688 14.4376H16.8688L17.0938 13.3126H16.625V12.3751H17.2813L17.45 11.6251H16.625V10.6876H17.6188L17.8438 9.56262H18.7625L18.5375 10.6876H19.25L19.475 9.56262H20.3751L20.1501 10.6876H20.5626V11.6251ZM18.1813 12.3751H18.8938L19.0625 11.6251H18.35L18.1813 12.3751Z"
         fill="white"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Dart.js b/client/src/assets/LanguageLogo/Dart.js
index 6d71c9847..6cb9ad7f5 100644
--- a/client/src/assets/LanguageLogo/Dart.js
+++ b/client/src/assets/LanguageLogo/Dart.js
@@ -1,14 +1,10 @@
 function Dart() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M4.23293 4.23284C4.23293 4.23284 8.56407 2.06856 10.7292 0.985127C11.1233 0.790866 11.5596 0.69806 11.9986 0.715127C12.6552 0.755413 13.4361 1.39056 13.4361 1.39056L21.2858 9.24113V17.6317H17.6318V21.2857H9.10493L1.39064 13.5714C0.97407 13.1428 0.714355 12.5386 0.714355 11.9471C0.714355 11.6737 0.868641 11.246 0.985213 11L4.23293 4.23284ZM4.81493 4.81484V14.918C4.81664 15.3834 4.83293 15.7957 5.24178 16.2106L9.46064 20.4286H16.7746V16.7746L4.81493 4.81484ZM15.1478 4.2337C14.3772 3.4657 13.5972 2.70798 12.7992 1.96827C12.5404 1.73941 12.3132 1.56713 11.8821 1.57227C11.5649 1.58427 11.1364 1.73941 11.1364 1.73941L6.1495 4.23284L15.1478 4.2337Z"
         fill="white"
-        d="M65.3 55.4c2.8 2.6 4.2 6.1 4.2 10.6s-1.4 8.1-4.1 10.8c-2.7 2.6-6.9 4-12.4 4h-9.8V51.7h10.1c5.2 0 9.2 1.2 12 3.7zm-4.8 17.3c1.6-1.5 2.4-3.7 2.4-6.6 0-2.9-.8-5.1-2.4-6.7-1.6-1.5-4.1-2.4-7.4-2.4h-3.8v18h4.2c3.1 0 5.4-.8 7-2.3zm32.1 8.1h-5.8V78c-1.7 2-3.6 3-6 3s-4.4-.7-6-2.1-2.4-3.2-2.4-5.5.8-4 2.5-5.1 4-1.7 6.9-1.7h4.6v-.2c0-2.4-1.2-3.6-3.8-3.6-1.1 0-2.2.2-3.4.6-1.2.4-2.2 1-3.1 1.6l-2.8-4.1c3-2.2 6.3-3.2 10.1-3.2 2.7 0 4.9.7 6.6 2.1 1.7 1.4 2.5 3.5 2.5 6.5v14.5h.1zm-6.3-8.6v-.9h-3.9c-2.5 0-3.8.7-3.8 2.2 0 .8.3 1.4.9 1.8s1.4.6 2.6.6c1.1 0 2.1-.3 2.9-1 .9-.7 1.3-1.6 1.3-2.7zm22.8-8.4c-1.9 0-3.4.6-4.3 2-.9 1.3-1.5 3.1-1.5 5.3v9.8h-6.2V58.4h6.2v2.9c.8-.9 2-1.7 3.2-2.3s2.6-1 3.9-1v5.9l-1.3-.1zm11.3-.9v9.9c0 .9.2 1.5.7 2 .4.5 1 .7 1.6.7 1.2 0 2.2-.5 3-1.6l2.3 4.4c-1.9 1.8-4 2.7-6.1 2.7-2.2 0-4-.7-5.5-2.1s-2.2-3.4-2.2-5.8V51.7h6.2V58h6.6l-3.4 5-3.2-.1zM23.1 76.5l2.8-1.3L7.1 56.4v13.9c0 .1 0 .3.1.5l15.9 5.7zm-.4-21.1c-.2 0-.4-.1-.6-.1H8.2L27 74.1l1.3-2.9-5.6-15.8zm-1.2-1.6h.8c.4 0 .8.1 1.2.2h.1l-.6-1.5-3.8-3.8c-.9-.9-2.1-1.1-2.7-.6L8 53.8h13.5z"
-      ></path>
-      <path
-        fill="white"
-        d="M27.2 56.6c-.7-.7-1.9-1.4-3.1-1.7l5.8 16.4-1.7 3.9.4.4 3.9-1.3V61.9l-5.3-5.3zM5.7 70.3V56.2L.3 64.4c-.5.6-.3 1.8.6 2.7L4.6 71l1.2.4c-.1-.4-.1-.7-.1-1.1zm17.5 7.8l-.3-.1-15.7-5.6c.4 1 .9 2.1 1.6 2.7l5.5 5.4h12.2l1.4-4.6-4.7 2.2z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/GO.js b/client/src/assets/LanguageLogo/GO.js
index 9bfc54a78..d5dd1bcb3 100644
--- a/client/src/assets/LanguageLogo/GO.js
+++ b/client/src/assets/LanguageLogo/GO.js
@@ -1,13 +1,16 @@
 function GO() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
-      <g fill="white" fillRule="evenodd">
-        <path d="M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zM2.004 60.404c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zM79.58 53.738c-3.819.97-6.425 1.697-10.182 2.666-.91.243-.97.303-1.758-.606-.909-1.03-1.576-1.697-2.848-2.303-3.819-1.878-7.516-1.333-10.97.91-4.121 2.666-6.242 6.605-6.182 11.514.06 4.849 3.394 8.849 8.182 9.516 4.121.545 7.576-.91 10.303-4 .545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818.788-1.879 2.242-5.03 3.09-6.606.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91-.667 4.363-2.303 8.363-4.97 11.878-4.364 5.758-10.06 9.333-17.273 10.303-5.939.788-11.454-.364-16.302-4-4.485-3.394-7.03-7.879-7.697-13.454-.788-6.606 1.151-12.546 5.151-17.758 4.303-5.636 10-9.212 16.97-10.485 5.697-1.03 11.151-.363 16.06 2.97 3.212 2.121 5.515 5.03 7.03 8.545.364.546.122.849-.606 1.03z"></path>
-        <path
-          d="M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334-3.576-3.09-5.818-7.03-6.545-11.697-1.091-6.848.787-12.909 4.909-18.302 4.424-5.819 9.757-8.849 16.97-10.122 6.181-1.09 12-.484 17.272 3.091 4.788 3.273 7.757 7.697 8.545 13.515 1.03 8.182-1.333 14.849-6.97 20.546-4 4.06-8.909 6.606-14.545 7.757-1.636.303-3.273.364-4.848.546zm14.424-24.485c-.06-.788-.06-1.394-.182-2-1.09-6-6.606-9.394-12.363-8.06-5.637 1.272-9.273 4.848-10.606 10.545-1.091 4.727 1.212 9.515 5.575 11.454 3.334 1.455 6.667 1.273 9.879-.363 4.788-2.485 7.394-6.364 7.697-11.576z"
-          fillRule="nonzero"
-        ></path>
-      </g>
+    <svg width="24" height="10" viewBox="0 0 24 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.09177 3.28047C2.0462 3.28047 2.03495 3.2576 2.05764 3.22366L2.29633 2.91672C2.31883 2.8826 2.37583 2.85991 2.4212 2.85991H6.47814C6.5237 2.85991 6.53495 2.89404 6.51227 2.92816L6.31914 3.22366C6.29645 3.2576 6.23964 3.29172 6.20552 3.29172L2.09177 3.28047ZM0.375767 4.32579C0.330392 4.32579 0.318954 4.30329 0.341642 4.26897L0.580329 3.96222C0.603017 3.9281 0.659829 3.90541 0.705392 3.90541H5.88714C5.93252 3.90541 5.95539 3.93954 5.94395 3.97366L5.85302 4.24629C5.84177 4.29185 5.7962 4.31454 5.75083 4.31454L0.375767 4.32579ZM3.12564 5.37129C3.08027 5.37129 3.06902 5.33716 3.0917 5.30304L3.2507 5.01897C3.27358 4.98485 3.31895 4.95091 3.36452 4.95091H5.63702C5.68258 4.95091 5.70527 4.98485 5.70527 5.03041L5.68277 5.30304C5.68277 5.3486 5.6372 5.38272 5.60308 5.38272L3.12564 5.37129ZM14.9213 3.07591C14.2052 3.25779 13.7166 3.3941 13.0121 3.57579C12.8415 3.62135 12.8303 3.6326 12.6825 3.46216C12.5121 3.26904 12.387 3.14397 12.1485 3.03035C11.4325 2.67822 10.7393 2.78041 10.0916 3.20097C9.31895 3.70085 8.92127 4.43941 8.93252 5.35985C8.94377 6.26904 9.56889 7.01904 10.4666 7.1441C11.2393 7.24629 11.8871 6.97347 12.3985 6.3941C12.5006 6.26904 12.5916 6.13272 12.7052 5.97354H10.512C10.2735 5.97354 10.2167 5.82579 10.2962 5.63266C10.444 5.28035 10.7166 4.68954 10.8756 4.39404C10.9099 4.32579 10.9894 4.21216 11.1598 4.21216H15.2961C15.2736 4.5191 15.2736 4.82585 15.228 5.13279C15.103 5.95085 14.7962 6.70085 14.2961 7.35991C13.4779 8.43954 12.4099 9.10985 11.0575 9.29173C9.94389 9.43948 8.90983 9.22347 8.00083 8.54172C7.15989 7.90535 6.6827 7.06441 6.55764 6.0191C6.40989 4.78047 6.77345 3.66672 7.52345 2.68947C8.33027 1.63272 9.39845 0.962224 10.7053 0.723537C11.7735 0.530412 12.7961 0.655474 13.7166 1.28041C14.3188 1.6781 14.7506 2.22354 15.0347 2.8826C15.103 2.98497 15.0576 3.04179 14.9211 3.07572L14.9213 3.07591Z"
+        fill="white"
+      />
+      <path
+        d="M18.6824 9.35993C17.6484 9.33705 16.7051 9.04174 15.9097 8.3598C15.2392 7.78043 14.8188 7.04168 14.6825 6.16662C14.4779 4.88262 14.8301 3.74618 15.6029 2.73499C16.4324 1.64393 17.4324 1.0758 18.7848 0.837115C19.9437 0.63274 21.0348 0.746365 22.0233 1.41668C22.9211 2.03036 23.4777 2.85986 23.6255 3.95074C23.8186 5.48486 23.3756 6.73493 22.3186 7.80311C21.5686 8.56436 20.6482 9.04174 19.5914 9.25755C19.2847 9.31437 18.9777 9.3258 18.6824 9.35993ZM21.3869 4.76899C21.3757 4.62124 21.3757 4.50762 21.3528 4.39399C21.1484 3.26899 20.1142 2.63261 19.0347 2.88274C17.9778 3.12124 17.2961 3.79174 17.0461 4.85993C16.8416 5.74624 17.2734 6.64399 18.0914 7.00755C18.7166 7.28036 19.3415 7.24624 19.9437 6.93949C20.8415 6.47355 21.3301 5.74624 21.3869 4.76899Z"
+        fill="white"
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Html.js b/client/src/assets/LanguageLogo/Html.js
index 22d21465b..974e535a2 100644
--- a/client/src/assets/LanguageLogo/Html.js
+++ b/client/src/assets/LanguageLogo/Html.js
@@ -1,10 +1,10 @@
 function Html() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M0.669189 5.06261L2.1855 21.9224L8.98969 23.7378L15.8128 21.9567L17.3308 5.06261H0.669189ZM14.1769 8.90093L14.0818 9.9948L14.04 10.5001H6.05831L6.249 12.7501H13.8503L13.7994 13.1684L13.3091 18.5889L13.2731 18.9057L9 20.0559V20.0549L8.99494 20.0572L4.72425 18.9479L4.43438 15.7501H6.52838L6.67669 17.3364L8.99888 17.9249L9 17.8811V17.8833L11.3273 17.3866L11.5703 14.8126H4.34119L3.82856 9.03086L3.7785 8.43761H14.2268L14.1769 8.90093ZM2.24175 0.305176H3.29588V1.34693H4.26038V0.305176H5.31469V3.4593H4.26038V2.40311H3.29606V3.4593H2.24175V0.305176ZM6.70088 1.35124H5.77275V0.305176H8.68369V1.35124H7.75519V3.4593H6.70088V1.35124ZM9.14569 0.305176H10.2448L10.9211 1.41349L11.5967 0.305176H12.6964V3.4593H11.6462V1.89593L10.9211 3.01736H10.9028L10.1771 1.89593V3.4593H9.1455L9.14569 0.305176ZM13.2212 0.305176H14.2757V2.4168H15.7583V3.45949H13.2212V0.305176Z"
         fill="white"
-        d="M9.032 2l10.005 112.093 44.896 12.401 45.02-12.387L118.968 2H9.032zm89.126 26.539l-.627 7.172L97.255 39H44.59l1.257 14h50.156l-.336 3.471-3.233 36.119-.238 2.27L64 102.609v.002l-.034.018-28.177-7.423L33.876 74h13.815l.979 10.919L63.957 89H64v-.546l15.355-3.875L80.959 67H33.261l-3.383-38.117L29.549 25h68.939l-.33 3.539z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/JS.js b/client/src/assets/LanguageLogo/JS.js
index b7ae110db..56e1baef8 100644
--- a/client/src/assets/LanguageLogo/JS.js
+++ b/client/src/assets/LanguageLogo/JS.js
@@ -1,10 +1,12 @@
 function JS() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6122 0.03123C10.2897 0.102915 10.339 0.077525 8.84527 0.941225C8.24675 1.2873 7.43172 1.75836 7.03408 1.98802C6.63644 2.21768 5.85342 2.67012 5.29404 2.99342C3.51022 4.02436 2.55393 4.57674 1.89972 4.95414C1.54926 5.15628 1.19466 5.36947 1.1117 5.4279C0.705805 5.71375 0.42654 6.19739 0.366987 6.71761C0.349317 6.87211 0.343386 8.6011 0.348385 12.1521L0.355738 17.3599L0.410096 17.5508C0.515724 17.9215 0.74666 18.2796 1.02997 18.512C1.19118 18.6443 3.45721 19.9516 3.85524 20.142C4.20675 20.3101 4.68181 20.4757 4.95041 20.5236C5.20654 20.5693 5.91707 20.5679 6.19148 20.5211C7.14885 20.3579 7.79732 19.7962 8.07286 18.8913C8.21572 18.4221 8.21016 18.6631 8.2103 12.9406L8.21045 7.6879L8.13881 7.61626L8.06718 7.54462H7.40496H6.74273L6.67397 7.60376L6.6052 7.66292L6.59294 12.8545C6.57917 18.6851 6.59841 18.1429 6.3946 18.4481C6.17038 18.7839 5.85171 18.9402 5.39207 18.94C5.14175 18.9398 4.92556 18.8944 4.66404 18.7869C4.44208 18.6957 2.08328 17.3295 2.00388 17.2461L1.93648 17.1754V12.0157C1.93648 7.61271 1.94158 6.84628 1.97119 6.78979C1.99486 6.74464 2.12926 6.6523 2.39394 6.49927C2.97541 6.16308 4.36777 5.35918 5.29404 4.82483C6.21651 4.29267 7.41616 3.59992 8.2227 3.13361C10.3418 1.90849 10.8613 1.61104 10.9216 1.58808C10.9593 1.57377 11.018 1.56901 11.052 1.57757C11.0861 1.58612 11.8751 2.03218 12.8053 2.56883C13.7356 3.10547 15.2852 3.99949 16.249 4.55554C17.2127 5.1116 18.2876 5.73159 18.6375 5.93329C19.4953 6.42773 19.9043 6.66453 19.9558 6.69651C20.0782 6.77261 20.0722 6.49584 20.0721 12.0087C20.072 16.9787 20.0706 17.1417 20.0261 17.2146C19.9781 17.2934 20.0262 17.2648 16.9719 19.0273C16.2306 19.4551 15.2325 20.0314 14.754 20.308C12.4358 21.6476 11.3244 22.2889 11.2126 22.3514C11.0357 22.4503 10.9426 22.4431 10.7282 22.3142C9.32871 21.4722 8.54905 21.0238 8.4845 21.0238C8.44421 21.0238 8.34122 21.0636 8.25569 21.1121C7.93905 21.2918 7.64981 21.4266 7.30575 21.5547C7.11143 21.6271 6.93774 21.6985 6.91975 21.7134C6.8615 21.7618 6.88223 21.851 6.96669 21.9152C7.03575 21.9678 7.70763 22.3684 9.64415 23.5116C10.2151 23.8486 10.2605 23.8719 10.49 23.9439C10.6479 23.9935 10.7213 24.0013 11.0166 23.9996C11.5753 23.9965 11.3732 24.0922 13.884 22.6415C14.5445 22.2599 15.6142 21.6422 16.2612 21.2688C16.9082 20.8954 18.16 20.173 19.0428 19.6635C19.9257 19.154 20.7164 18.6941 20.7998 18.6415C21.0441 18.4877 21.32 18.1769 21.4517 17.907C21.6726 17.4544 21.6529 18.0308 21.6529 12.0173C21.6529 6.98737 21.6505 6.68896 21.6089 6.51172C21.5221 6.1418 21.2809 5.74333 21.0048 5.51355C20.8479 5.38297 20.7331 5.31337 19.5453 4.62821C19.1409 4.39497 18.3193 3.92053 17.7194 3.57389C17.1196 3.22725 15.8127 2.4721 14.8153 1.89577C13.8178 1.31943 12.7536 0.703819 12.4503 0.527731C11.8405 0.173693 11.6584 0.0881123 11.3977 0.0332886C11.1909 -0.010237 10.8033 -0.0112419 10.6122 0.03123ZM13.063 6.87434C12.3967 6.93722 12.2136 6.96605 11.7639 7.07883C10.5276 7.3889 9.64849 8.09511 9.31633 9.04511C9.19943 9.37951 9.15753 9.64209 9.15689 10.0444C9.15557 10.8891 9.3743 11.4637 9.88004 11.9441C10.2799 12.3238 10.8296 12.5913 11.6157 12.7885C12.1648 12.9262 12.5859 12.9936 13.5409 13.0966C15.189 13.2744 16.045 13.4478 16.5267 13.7014C16.7344 13.8107 16.9399 14.0186 16.9921 14.1722C17.0453 14.3287 17.0472 14.7347 16.9957 14.9327C16.8197 15.6084 16.1821 15.9596 14.921 16.0752C14.4959 16.1142 13.145 16.0912 12.7777 16.0388C12.3336 15.9754 11.9535 15.8689 11.666 15.7275C11.4471 15.6198 11.3794 15.5712 11.2126 15.402C10.9374 15.1227 10.809 14.8512 10.7105 14.3408C10.6539 14.0478 10.6398 14.0145 10.5458 13.9507C10.4825 13.9078 10.4231 13.9044 9.75206 13.9044C8.96188 13.9044 8.92679 13.9098 8.85782 14.0432C8.78878 14.1767 8.82885 14.7826 8.93259 15.1741C9.29435 16.5392 10.4065 17.3896 12.2542 17.7139C12.8251 17.8141 13.259 17.8463 14.0433 17.8465C14.8793 17.8468 15.2651 17.8136 15.8936 17.6873C16.8127 17.5026 17.5789 17.1473 18.0854 16.6708C18.683 16.1087 18.9712 15.4646 19.0106 14.6028C19.0587 13.5518 18.7204 12.7833 17.9967 12.2992C17.3072 11.838 16.3752 11.5896 14.2271 11.2942C12.7552 11.0918 11.9422 10.919 11.5629 10.7279C11.2575 10.574 11.1523 10.4138 11.1329 10.073C11.072 9.00278 12.0367 8.53647 14.1299 8.62433C15.7383 8.69185 16.3738 9.07978 16.7057 10.1966C16.8029 10.5235 16.8484 10.5953 16.9824 10.6325C17.0964 10.6642 18.2935 10.6642 18.4075 10.6325C18.4556 10.6191 18.5218 10.5796 18.5545 10.5447C18.608 10.4876 18.6137 10.4611 18.6113 10.2812C18.6099 10.1712 18.5851 9.95922 18.5563 9.81019C18.1679 7.79887 16.571 6.83946 13.6498 6.86233C13.3742 6.86449 13.1101 6.8699 13.063 6.87434Z"
         fill="white"
-        d="M112.678 30.334L68.535 4.729c-2.781-1.584-6.424-1.584-9.227 0L14.82 30.334C11.951 31.985 10 35.088 10 38.407v51.142c0 3.319 1.992 6.423 4.862 8.083l11.729 6.688c5.627 2.772 7.186 2.772 9.746 2.772 8.334 0 12.662-5.039 12.662-13.828v-50.49C49 42.061 49.445 41 48.744 41h-5.622C42.41 41 41 42.061 41 42.773v50.49c0 3.896-3.616 7.773-10.202 4.48L18.676 90.73c-.422-.23-.676-.693-.676-1.181V38.407c0-.482.463-.966.891-1.213l44.378-25.561a1.508 1.508 0 011.415 0l43.963 25.555c.421.253.354.722.354 1.219v51.142c0 .488.092.963-.323 1.198l-44.133 25.576c-.378.227-.87.227-1.285 0l-11.317-6.749c-.341-.198-.752-.269-1.08-.086-3.145 1.783-3.729 2.02-6.679 3.043-.727.253-1.799.692.408 1.929l14.798 8.754a9.29 9.29 0 004.647 1.246 9.303 9.303 0 004.666-1.246l43.976-25.582c2.871-1.672 4.322-4.764 4.322-8.083V38.407c-.001-3.319-1.452-6.414-4.323-8.073zM77.727 81.445c-11.727 0-14.309-3.235-15.17-9.066-.102-.628-.634-1.379-1.274-1.379h-5.73c-.709 0-1.28.86-1.28 1.566 0 7.466 4.06 16.512 23.454 16.512 14.038 0 22.088-5.455 22.088-15.109 0-9.572-6.467-12.084-20.082-13.886-13.762-1.819-15.16-2.738-15.16-5.962 0-2.658 1.184-6.203 11.374-6.203 9.104 0 12.46 1.954 13.841 8.091.119.577.646.991 1.241.991h5.754c.354 0 .691-.143.939-.396.241-.272.367-.613.336-.979-.893-10.569-7.913-15.494-22.112-15.494-12.632 0-20.166 5.334-20.166 14.275 0 9.698 7.497 12.378 19.622 13.577 14.505 1.422 15.633 3.542 15.633 6.395 0 4.956-3.978 7.067-13.308 7.067z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Java.js b/client/src/assets/LanguageLogo/Java.js
index 00b8aec89..3b54766e6 100644
--- a/client/src/assets/LanguageLogo/Java.js
+++ b/client/src/assets/LanguageLogo/Java.js
@@ -1,10 +1,33 @@
 function Java() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
-      <path
-        fill="white"
-        d="M47.617 98.12c-19.192 5.362 11.677 16.439 36.115 5.969-4.003-1.556-6.874-3.351-6.874-3.351-10.897 2.06-15.952 2.222-25.844 1.092-8.164-.935-3.397-3.71-3.397-3.71zm33.189-10.46c-14.444 2.779-22.787 2.69-33.354 1.6-8.171-.845-2.822-4.805-2.822-4.805-21.137 7.016 11.767 14.977 41.309 6.336-3.14-1.106-5.133-3.131-5.133-3.131zm11.319-60.575c.001 0-42.731 10.669-22.323 34.187 6.024 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.793 15.634-29.58zm9.998 81.144s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.095.171-4.45-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.952-3.487-32.013 6.85-13.742 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM85 77.896c2.395-1.634 5.703-3.053 5.703-3.053s-9.424 1.685-18.813 2.474c-11.494.964-23.823 1.154-30.012.326-14.652-1.959 8.033-7.348 8.033-7.348s-8.812-.596-19.644 4.644C17.455 81.134 61.958 83.958 85 77.896zm5.609 15.145c-.108.29-.468.616-.468.616 31.273-8.221 19.775-28.979 4.822-23.725-1.312.464-2 1.543-2 1.543s.829-.334 2.678-.72c7.559-1.575 18.389 10.119-5.032 22.286zM64.181 70.069c-4.614-10.429-20.26-19.553.007-35.559C89.459 14.563 76.492 1.587 76.492 1.587c5.23 20.608-18.451 26.833-26.999 39.667-5.821 8.745 2.857 18.142 14.688 28.815zm27.274 51.748c-19.187 3.612-42.854 3.191-56.887.874 0 0 2.874 2.38 17.646 3.331 22.476 1.437 57-.8 57.816-11.436.001 0-1.57 4.032-18.575 7.231z"
-      ></path>
+    <svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_420_11992)">
+        <path
+          d="M6.04333 17.36C6.04333 17.36 5.19242 17.8588 6.6489 18.0275C8.41338 18.2304 9.31519 18.2013 11.2597 17.8304C11.2597 17.8304 11.7709 18.1535 12.4848 18.4334C8.12584 20.3165 2.61957 18.3243 6.04333 17.36ZM5.51069 14.9026C5.51069 14.9026 4.5563 15.6147 6.01386 15.7667C7.89874 15.9627 9.38727 15.9787 11.963 15.4788C11.963 15.4788 12.3193 15.8428 12.8795 16.0419C7.60916 17.5954 1.73901 16.1644 5.51069 14.9026Z"
+          fill="white"
+        />
+        <path
+          d="M10.001 10.7342C11.0751 11.9806 9.71886 13.1024 9.71886 13.1024C9.71886 13.1024 12.446 11.6832 11.1935 9.90614C10.0237 8.24883 9.12668 7.42547 13.983 4.58643C13.9831 4.58637 6.36016 6.50544 10.001 10.7342Z"
+          fill="white"
+        />
+        <path
+          d="M15.7665 19.1776C15.7665 19.1776 16.3962 19.7007 15.073 20.1052C12.5569 20.8735 4.60084 21.1055 2.39067 20.1359C1.59618 19.7874 3.08609 19.3039 3.55475 19.2025C4.04353 19.0956 4.32285 19.1155 4.32285 19.1155C3.43928 18.4881 -1.38815 20.3474 1.87075 20.88C10.7582 22.3328 18.0718 20.2258 15.7665 19.1776ZM6.45283 12.3565C6.45283 12.3565 2.40586 13.3254 5.0197 13.6773C6.12334 13.8262 8.32343 13.7925 10.3727 13.6194C12.0475 13.477 13.7293 13.1743 13.7293 13.1743C13.7293 13.1743 13.1387 13.4292 12.7115 13.7232C8.60184 14.8128 0.662799 14.3059 2.94835 13.1915C4.88124 12.2497 6.45283 12.3565 6.45283 12.3565ZM13.7126 16.4469C17.8902 14.2587 15.9587 12.1558 14.6105 12.4391C14.28 12.5085 14.1327 12.5685 14.1327 12.5685C14.1327 12.5685 14.2554 12.3748 14.4896 12.291C17.1568 11.3458 19.208 15.0787 13.6286 16.5573C13.6286 16.5573 13.6933 16.4991 13.7126 16.4469Z"
+          fill="white"
+        />
+        <path
+          d="M11.194 0.00195312C11.194 0.00195312 13.5077 2.33483 8.99964 5.92228C5.38466 8.79992 8.17531 10.4407 8.99814 12.3154C6.88808 10.3963 5.33953 8.707 6.37842 7.13469C7.9032 4.82668 12.1275 3.70768 11.194 0.00195312Z"
+          fill="white"
+        />
+        <path
+          d="M6.86319 22.3767C10.8732 22.6354 17.031 22.2331 17.1768 20.3206C17.1768 20.3206 16.8965 21.0455 13.8627 21.6214C10.4402 22.2706 6.2188 22.1949 3.71509 21.7788C3.71521 21.7786 4.22769 22.2063 6.86319 22.3767Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_420_11992">
+          <rect width="17.4545" height="24" fill="white" transform="translate(0.272705)" />
+        </clipPath>
+      </defs>
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Perl.js b/client/src/assets/LanguageLogo/Perl.js
index 7cc96f27c..84e167b1e 100644
--- a/client/src/assets/LanguageLogo/Perl.js
+++ b/client/src/assets/LanguageLogo/Perl.js
@@ -1,10 +1,10 @@
 function Perl() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M53.343 127.515c-13.912-2.458-25.845-8.812-35.707-19.004C9.252 99.845 3.48 88.926.851 76.764-.284 71.51-.284 56.477.85 51.222c1.776-8.219 5.228-16.388 9.927-23.509 3.112-4.71 12.227-13.825 16.938-16.937 7.121-4.698 15.292-8.15 23.511-9.925 5.256-1.135 20.29-1.135 25.546 0 12.809 2.769 23.454 8.553 32.638 17.736 9.188 9.187 14.969 19.827 17.738 32.635 1.135 5.255 1.135 20.287 0 25.542-2.769 12.808-8.55 23.452-17.738 32.635-9.043 9.042-19.55 14.81-32.146 17.652-4.469 1.005-19.24 1.295-23.922.464zm11.565-12.772c0-4.194-.06-4.496-.908-4.496-.84 0-.904.29-.868 3.899.04 4.262.34 5.574 1.207 5.284.404-.134.57-1.494.57-4.687zm-6.758 1.445c1.196-1.194 1.543-1.917 1.543-3.209 0-1.315-.162-1.634-.763-1.517-.416.08-.92.759-1.114 1.505-.198.751-1.002 1.906-1.785 2.572-1.417 1.194-1.47 2.191-.121 2.191.384 0 1.393-.694 2.24-1.542zm14.945 1.05c.166-.271-.339-1.037-1.126-1.699-.783-.666-1.587-1.821-1.784-2.572-.194-.746-.699-1.425-1.115-1.505-.601-.117-.763.202-.763 1.517 0 2.608 3.747 5.942 4.788 4.259zm-20.66-8.146c0-.262-.635-.823-1.41-1.247-5.058-2.769-10.984-7.177-14.282-10.612-6.435-6.704-9.33-13.385-9.402-21.676-.044-5.542.67-8.432 3.367-13.607 2.608-5 5.631-8.779 13.947-17.42 9.29-9.648 11.429-12.195 13.043-15.53 1.147-2.369 1.296-3.232 1.458-8.238.197-6.216-.182-10.506-.929-10.506-.339 0-.403 1.614-.21 5.235.622 11.593-1.53 15.19-14.892 24.88-9.2 6.677-13.422 10.302-16.612 14.261-4.517 5.615-6.52 10.471-7.02 17.054-1.207 15.868 8.85 29.628 26.591 36.385 3.916 1.49 6.35 1.881 6.35 1.021zm30.696-1.287c6.1-2.539 10.738-5.611 15.11-10.007 6.665-6.7 9.442-12.965 9.858-22.24.363-8.134-1.405-13.515-6.439-19.61-3.447-4.173-7.161-7.16-17.173-13.812-13.47-8.95-16.632-12.513-16.632-18.746 0-1.659.299-4.004.662-5.219.622-2.066.606-3.491-.02-1.857-.593 1.546-1.946.836-2.676-1.408l-.703-2.156.267 2.043c.94 7.241 1.061 10.272.641 16.614-.56 8.565-1.614 14.426-4.505 25.074-2.87 10.572-3.387 14.402-3.031 22.475.298 6.826 1.255 11.932 3.475 18.592 2.06 6.188 2.443 6.656 6.23 7.625 2.086.533 4.06 1.433 5.63 2.567 1.474 1.066 2.952 1.76 3.78 1.776.75.012 3.237-.759 5.526-1.711zm-1.369-3.076c-.565-.565-.302-1.046 1.91-3.492 6.972-7.697 10.096-15.645 10.185-25.906.06-6.995-1.482-11.625-6.197-18.592-2.135-3.152-9.636-11.011-13.265-13.893-2.664-2.115-5.397-5.72-5.886-7.762-.496-2.067.888-1.522 2.495.985.787 1.227 2.495 3.027 3.79 4 1.297.977 5.132 3.834 8.523 6.357 11.666 8.67 16.858 16.065 18.024 25.668.679 5.558-.395 11.302-3.108 16.634-2.81 5.526-7.937 11.545-12.325 14.479-2.7 1.8-3.552 2.115-4.146 1.522zm-22.836.585c.133-.343-1.034-2.535-2.592-4.872-4.13-6.192-5.926-9.61-7.602-14.454-1.413-4.09-1.49-4.646-1.501-10.887-.016-9.433 1.005-12.424 8.49-24.848 7.056-11.722 8.013-16.259 7.217-34.286-.286-6.462-.61-11.839-.718-11.948-.747-.746-.904 1.167-.63 7.665.549 12.941-.287 20.15-3.016 26.064-1.857 4.024-3.936 7.076-9.53 14.002-7.788 9.64-9.984 14.75-9.944 23.125.029 5.744.808 9.276 3.129 14.188 2.51 5.316 7.133 10.685 12.926 15.012 2.669 1.99 3.391 2.228 3.77 1.239z"
+        d="M10.0019 23.9091C7.39338 23.4482 5.15595 22.2569 3.30682 20.3459C1.73482 18.721 0.65257 16.6737 0.159633 14.3933C-0.0531797 13.4082 -0.0531797 10.5895 0.159445 9.60417C0.492445 8.06311 1.1397 6.53142 2.02076 5.19623C2.60426 4.31311 4.31332 2.60405 5.19663 2.02055C6.53182 1.13967 8.06388 0.492422 9.60495 0.159609C10.5904 -0.0532031 13.4093 -0.0532031 14.3948 0.159609C16.7965 0.678797 18.7924 1.7633 20.5144 3.48511C22.2372 5.20767 23.3211 7.20267 23.8403 9.60417C24.0531 10.5895 24.0531 13.408 23.8403 14.3933C23.3211 16.7948 22.2372 18.7905 20.5144 20.5124C18.8189 22.2077 16.8488 23.2892 14.4871 23.8221C13.6491 24.0105 10.8796 24.0649 10.0017 23.9091H10.0019ZM12.1703 21.5144C12.1703 20.728 12.1591 20.6714 12.0001 20.6714C11.8426 20.6714 11.8306 20.7257 11.8373 21.4024C11.8448 22.2015 11.9011 22.4475 12.0636 22.3932C12.1394 22.368 12.1705 22.113 12.1705 21.5144H12.1703ZM10.9032 21.7853C11.1274 21.5614 11.1925 21.4259 11.1925 21.1836C11.1925 20.937 11.1621 20.8772 11.0494 20.8992C10.9714 20.9142 10.8769 21.0415 10.8406 21.1814C10.8034 21.3222 10.6527 21.5387 10.5059 21.6636C10.2402 21.8875 10.2303 22.0744 10.4832 22.0744C10.5552 22.0744 10.7444 21.9443 10.9032 21.7853ZM13.7054 21.9822C13.7365 21.9314 13.6418 21.7877 13.4943 21.6636C13.3474 21.5387 13.1967 21.3222 13.1598 21.1814C13.1234 21.0415 13.0287 20.9142 12.9507 20.8992C12.838 20.8772 12.8076 20.937 12.8076 21.1836C12.8076 21.6726 13.5102 22.2977 13.7054 21.9822ZM9.83163 20.4548C9.83163 20.4057 9.71257 20.3005 9.56726 20.221C8.61888 19.7018 7.50776 18.8753 6.88938 18.2312C5.68282 16.9742 5.14001 15.7215 5.12651 14.167C5.11826 13.1279 5.25213 12.586 5.75782 11.6157C6.24682 10.6782 6.81363 9.96961 8.37288 8.34942C10.1148 6.54042 10.5158 6.06286 10.8184 5.43755C11.0335 4.99336 11.0614 4.83155 11.0918 3.89292C11.1288 2.72742 11.0577 1.92305 10.9176 1.92305C10.8541 1.92305 10.8421 2.22567 10.8783 2.90461C10.9949 5.0783 10.5914 5.75273 8.08601 7.56961C6.36101 8.82155 5.56938 9.50124 4.97126 10.2435C4.12432 11.2964 3.74876 12.2069 3.65501 13.4412C3.4287 16.4164 5.31438 18.9964 8.64082 20.2634C9.37507 20.5427 9.83144 20.616 9.83144 20.4548H9.83163ZM15.5871 20.2135C16.7309 19.7374 17.6005 19.1614 18.4203 18.3372C19.6699 17.0809 20.1906 15.9062 20.2686 14.1672C20.3367 12.642 20.0052 11.6331 19.0613 10.4903C18.415 9.70786 17.7186 9.1478 15.8414 7.90055C13.3158 6.22242 12.7229 5.55436 12.7229 4.38567C12.7229 4.07461 12.7789 3.63492 12.847 3.40711C12.9636 3.01973 12.9606 2.75255 12.8433 3.05892C12.7321 3.3488 12.4784 3.21567 12.3415 2.79492L12.2097 2.39067L12.2598 2.77373C12.436 4.13142 12.4587 4.69973 12.3799 5.88886C12.2749 7.4948 12.0773 8.59373 11.5353 10.5902C10.9971 12.5725 10.9002 13.2906 10.9669 14.8043C11.0228 16.0842 11.2023 17.0415 11.6185 18.2903C12.0048 19.4505 12.0766 19.5383 12.7866 19.72C13.1778 19.8199 13.5479 19.9887 13.8423 20.2013C14.1186 20.4012 14.3958 20.5313 14.551 20.5343C14.6916 20.5365 15.1579 20.392 15.5871 20.2135ZM15.3304 19.6367C15.2245 19.5308 15.2738 19.4406 15.6886 18.982C16.9958 17.5388 17.5816 16.0485 17.5983 14.1246C17.6095 12.813 17.3204 11.9449 16.4363 10.6386C16.036 10.0476 14.6296 8.57405 13.9491 8.03367C13.4496 7.63711 12.9372 6.96117 12.8455 6.5783C12.7525 6.19073 13.012 6.29292 13.3133 6.76298C13.4609 6.99305 13.7811 7.33055 14.0239 7.51298C14.2671 7.69617 14.9862 8.23186 15.622 8.70492C17.8094 10.3305 18.7829 11.7171 19.0015 13.5177C19.1288 14.5598 18.9274 15.6368 18.4188 16.6365C17.8919 17.6727 16.9306 18.8012 16.1078 19.3514C15.6016 19.6889 15.4418 19.7479 15.3304 19.6367ZM11.0487 19.7464C11.0736 19.6821 10.8548 19.2711 10.5627 18.8329C9.78832 17.6719 9.45157 17.031 9.13732 16.1228C8.87238 15.3559 8.85794 15.2517 8.85588 14.0815C8.85288 12.3128 9.04432 11.752 10.4478 9.42248C11.7708 7.22461 11.9502 6.37392 11.8009 2.99386C11.7473 1.78223 11.6866 0.774047 11.6663 0.753609C11.5263 0.613734 11.4968 0.972422 11.5482 2.1908C11.6511 4.61723 11.4944 5.96892 10.9827 7.0778C10.6345 7.8323 10.2447 8.40455 9.19582 9.70317C7.73557 11.5107 7.32382 12.4688 7.33132 14.0391C7.33676 15.1161 7.48282 15.7784 7.91801 16.6994C8.38863 17.6961 9.25544 18.7028 10.3416 19.5141C10.8421 19.8872 10.9774 19.9319 11.0485 19.7464H11.0487Z"
         fill="white"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Php.js b/client/src/assets/LanguageLogo/Php.js
index 047671fb1..0c14003d8 100644
--- a/client/src/assets/LanguageLogo/Php.js
+++ b/client/src/assets/LanguageLogo/Php.js
@@ -1,10 +1,10 @@
 function Php() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="24" height="13" viewBox="0 0 24 13" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M1.96821 2.58549H5.50779C6.54675 2.59419 7.29957 2.89209 7.76619 3.47913C8.23287 4.06617 8.38695 4.86789 8.22849 5.88423C8.16687 6.34863 8.03043 6.80421 7.81905 7.25103C7.61655 7.69791 7.33479 8.10093 6.97383 8.46021C6.53355 8.91579 6.06249 9.20493 5.56059 9.32757C5.05875 9.45027 4.53927 9.51159 4.00215 9.51159H2.41731L1.91541 12.0087H0.0795898L1.96821 2.58549ZM3.51351 4.08363L2.72109 8.02647C2.77389 8.03523 2.82669 8.03961 2.87955 8.03961H3.06447C3.90969 8.04837 4.61409 7.96515 5.17767 7.78989C5.74107 7.60593 6.11967 6.96633 6.31347 5.87109C6.47187 4.95111 6.31341 4.42101 5.83791 4.28085C5.37129 4.14063 4.78575 4.07499 4.08141 4.08369C3.98037 4.09226 3.87903 4.09664 3.77763 4.09683H3.50031L3.51351 4.08363ZM10.3202 0.0759277H12.1428L11.6277 2.58621H13.2654C14.1636 2.60367 14.8327 2.78769 15.273 3.13821C15.722 3.48861 15.8541 4.15455 15.6691 5.13585L14.7843 9.51231H12.9353L13.7805 5.33301C13.8686 4.89489 13.8421 4.58385 13.7013 4.39983C13.5604 4.21587 13.2566 4.12389 12.79 4.12389L11.3239 4.11069L10.241 9.51231H8.41839L10.3202 0.0759277ZM17.6266 2.58543H21.1661C22.2051 2.59419 22.958 2.89215 23.4246 3.47913C23.8912 4.06617 24.0453 4.86789 23.8868 5.88423C23.8252 6.34863 23.6887 6.80421 23.4774 7.25103C23.2749 7.69791 22.9931 8.10093 22.6322 8.46021C22.1919 8.91579 21.7209 9.20493 21.2189 9.32757C20.7171 9.45027 20.1976 9.51159 19.6605 9.51159H18.0756L17.5738 12.0086H15.7379L17.6266 2.58543ZM19.1718 4.08363L18.3794 8.02647C18.4318 8.03518 18.4848 8.03958 18.5379 8.03961H18.7227C19.5681 8.04837 20.2725 7.96515 20.8359 7.78989C21.3995 7.60593 21.7781 6.96633 21.9718 5.87109C22.1303 4.95111 21.9718 4.42101 21.4963 4.28085C21.0297 4.14063 20.4441 4.07499 19.7397 4.08369C19.6387 4.09225 19.5374 4.09663 19.4361 4.09683H19.1586L19.1718 4.08363Z"
         fill="white"
-        d="M64 33.039C30.26 33.039 2.906 46.901 2.906 64S30.26 94.961 64 94.961 125.094 81.099 125.094 64 97.74 33.039 64 33.039zM48.103 70.032c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34H41.7c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515a15.118 15.118 0 01-2.972 3.748zM69.414 73l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528L76.772 73h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zm-56.985 0h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458S41.708 54 38.934 54z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Python.js b/client/src/assets/LanguageLogo/Python.js
index 4da9a295c..78343315c 100644
--- a/client/src/assets/LanguageLogo/Python.js
+++ b/client/src/assets/LanguageLogo/Python.js
@@ -1,10 +1,10 @@
 function Python() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M9.8832 0.486239C9.10802 0.489824 8.36774 0.555953 7.71638 0.671212C5.79753 1.01021 5.44914 1.71976 5.44914 3.02829V4.75646H9.98361V5.33252H5.44914H3.7474C2.42955 5.33252 1.27561 6.12462 0.914675 7.63146C0.498338 9.35865 0.47987 10.4365 0.914675 12.2399C1.237 13.5823 2.00676 14.5389 3.3246 14.5389H4.88366V12.4672C4.88366 10.9705 6.17862 9.6503 7.71638 9.6503H12.2456C13.5063 9.6503 14.5128 8.61223 14.5128 7.34607V3.02829C14.5128 1.79942 13.4761 0.876305 12.2456 0.671212C11.4666 0.541545 10.6584 0.482638 9.8832 0.486239ZM7.43099 1.87618C7.89937 1.87618 8.28186 2.26492 8.28186 2.7429C8.28186 3.2192 7.89937 3.60435 7.43099 3.60435C6.96093 3.60435 6.58012 3.2192 6.58012 2.7429C6.58011 2.26492 6.96093 1.87618 7.43099 1.87618ZM15.0783 5.33252V7.34607C15.0783 8.90716 13.7548 10.2211 12.2456 10.2211H7.71638C6.47576 10.2211 5.44914 11.2829 5.44914 12.5253V16.8431C5.44914 18.072 6.51773 18.7948 7.71638 19.1473C9.15173 19.5694 10.5282 19.6456 12.2456 19.1473C13.3871 18.8168 14.5128 18.1516 14.5128 16.8431V15.1149H9.98361V14.5389H14.5128H16.78C18.0979 14.5389 18.589 13.6196 19.0473 12.2399C19.5207 10.8195 19.5005 9.45357 19.0473 7.63146C18.7216 6.31954 18.0995 5.33252 16.78 5.33252H15.0783ZM12.5309 16.267C13.001 16.267 13.3818 16.6522 13.3818 17.1285C13.3818 17.6065 13.001 17.9952 12.5309 17.9952C12.0626 17.9952 11.6801 17.6065 11.6801 17.1285C11.6801 16.6522 12.0626 16.267 12.5309 16.267Z"
         fill="white"
-        d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Ruby.js b/client/src/assets/LanguageLogo/Ruby.js
index b511be134..cc4ab8cb4 100644
--- a/client/src/assets/LanguageLogo/Ruby.js
+++ b/client/src/assets/LanguageLogo/Ruby.js
@@ -1,12 +1,10 @@
 function Ruby() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
+        d="M6.09202 18.4375C10.7533 19.0735 15.3313 19.699 20 20.3365C18.4093 17.6882 16.8598 15.1075 15.2975 12.5057C12.2368 14.4782 9.20377 16.432 6.09202 18.4375ZM21.3163 3.77872C20.9053 4.39597 20.4935 5.01247 20.0833 5.62972C18.674 7.74997 17.2648 9.87022 15.857 11.9912C15.7783 12.1097 15.677 12.2035 15.7873 12.385C17.1478 14.6312 18.497 16.8842 19.85 19.135C20.0638 19.4905 20.279 19.8445 20.5558 20.1857C20.8288 14.7227 21.1025 9.25972 21.3763 3.79672C21.356 3.79072 21.3358 3.78397 21.3163 3.77872ZM2.74627 10.7822C2.81002 10.843 2.96827 10.8775 3.04252 10.8415C4.34752 10.2002 5.66077 9.57322 6.93652 8.87872C7.35277 8.65222 7.67302 8.24722 8.03152 7.91797C9.21877 6.82897 10.4045 5.73772 11.5895 4.64647C11.6623 4.57972 11.7478 4.51447 11.7913 4.43047C12.2173 3.59872 12.635 2.76247 13.0685 1.90222C12.5518 1.70797 12.0628 1.51822 11.567 1.34572C11.5003 1.32247 11.3938 1.36897 11.321 1.40947C10.1735 2.04997 9.00502 2.65672 7.89427 3.35572C7.33852 3.70522 6.88552 4.22122 6.39352 4.66972C5.60002 5.39347 4.80802 6.11947 4.02652 6.85597C3.81877 7.05172 3.62977 7.27447 3.46852 7.50997C2.93377 8.28847 2.41552 9.07822 1.87327 9.88972C2.17627 10.204 2.45227 10.504 2.74702 10.783L2.74627 10.7822ZM7.51477 9.71872C6.86602 12.4607 6.22027 15.1877 5.55352 18.004C8.67952 15.9895 11.7343 14.0215 14.768 12.067C12.3538 11.2855 9.94702 10.5062 7.51477 9.71947V9.71872ZM20.519 3.80497C17.8775 4.24597 15.299 4.67722 12.6875 5.11297C13.577 7.27672 14.4485 9.39697 15.3455 11.578C17.0803 8.97172 18.7805 6.41797 20.5198 3.80497H20.519ZM7.62352 9.15772C10.0025 9.93022 12.3335 10.687 14.7328 11.4655C13.8418 9.29497 12.9815 7.20022 12.1033 5.06197C10.607 6.42997 9.13402 7.77697 7.62352 9.15772ZM2.84452 12.3812C2.00077 14.398 1.18627 16.3457 0.356766 18.3287C1.95127 18.2815 3.49702 18.2357 5.09527 18.1885C4.34452 16.252 3.60877 14.3537 2.84452 12.3812ZM5.15077 16.81C5.17027 16.8062 5.18977 16.801 5.21002 16.7972C5.77852 14.4317 6.35602 12.082 6.93727 9.62347C5.64127 10.297 4.40527 10.939 3.13552 11.5997C3.78352 13.2842 4.47352 15.061 5.15077 16.81ZM19.5628 3.42172C18.806 3.22147 18.0493 3.02047 17.2925 2.82097C16.2043 2.53522 15.1153 2.25247 14.0278 1.96372C13.892 1.92772 13.7938 1.90372 13.7135 2.06797C13.3295 2.85547 12.9328 3.63697 12.5428 4.42147C12.5308 4.44547 12.533 4.47697 12.524 4.53772C14.8805 4.18072 17.2213 3.82597 19.5613 3.47122C19.562 3.45472 19.562 3.43822 19.5628 3.42172ZM15.173 1.63072C17.2048 2.19322 19.2373 2.75497 21.3403 3.33697C20.9863 2.32897 20.6585 1.39447 20.321 0.432971C18.5938 0.816221 16.8883 1.19422 15.182 1.57222C15.179 1.59172 15.176 1.61122 15.173 1.63072ZM5.67427 18.892C4.91002 18.8042 4.12627 18.8852 3.35152 18.898C2.71477 18.9092 2.07877 18.9332 1.44277 18.9527C1.37677 18.955 1.31152 18.9677 1.24627 19.0382C6.50752 19.525 11.7688 20.011 17.0293 20.4977C17.033 20.4745 17.036 20.4505 17.0398 20.4272C15.353 20.197 13.667 19.9667 11.9803 19.7365C9.87876 19.4492 7.78102 19.135 5.67427 18.892ZM0.460266 16.5137C1.13827 14.941 1.81327 13.366 2.49427 11.7947C2.56252 11.6372 2.55727 11.53 2.42377 11.4032C2.13877 11.1325 1.87477 10.84 1.56352 10.5167C1.14277 12.5942 0.732516 14.6192 0.322266 16.645C0.337266 16.6517 0.353016 16.6592 0.368016 16.6667C0.399516 16.6165 0.437766 16.5685 0.461016 16.5145L0.460266 16.5137ZM13.8223 1.21522C14.9653 0.920471 16.1255 0.689471 17.2783 0.432221C17.3525 0.415721 17.426 0.390971 17.4995 0.369971C17.4958 0.351221 17.492 0.332471 17.4883 0.313721C15.8645 0.531971 14.24 0.750971 12.5338 0.980471C12.9988 1.18372 13.3573 1.33447 13.8223 1.21522Z"
         fill="white"
-        d="M35.971 111.33l81.958 11.188c-9.374-15.606-18.507-30.813-27.713-46.144L35.971 111.33zm89.71-86.383c-2.421 3.636-4.847 7.269-7.265 10.907a67619.72 67619.72 0 00-24.903 37.485c-.462.696-1.061 1.248-.41 2.321 8.016 13.237 15.969 26.513 23.942 39.777 1.258 2.095 2.53 4.182 4.157 6.192l4.834-96.58-.355-.102zM16.252 66.22c.375.355 1.311.562 1.747.347 7.689-3.779 15.427-7.474 22.948-11.564 2.453-1.333 4.339-3.723 6.452-5.661 6.997-6.417 13.983-12.847 20.966-19.278.427-.395.933-.777 1.188-1.275 2.508-4.902 4.973-9.829 7.525-14.898-3.043-1.144-5.928-2.263-8.849-3.281-.396-.138-1.02.136-1.449.375-6.761 3.777-13.649 7.353-20.195 11.472-3.275 2.061-5.943 5.098-8.843 7.743-4.674 4.266-9.342 8.542-13.948 12.882a24.011 24.011 0 00-3.288 3.854c-3.15 4.587-6.206 9.24-9.402 14.025 1.786 1.847 3.41 3.613 5.148 5.259zm28.102-6.271l-11.556 48.823 54.3-34.987-42.744-13.836zm76.631-34.846l-46.15 7.71 15.662 38.096c10.221-15.359 20.24-30.41 30.488-45.806zM44.996 56.644l41.892 13.6c-5.25-12.79-10.32-25.133-15.495-37.737L44.996 56.644zM16.831 75.643L2.169 110.691l27.925-.825-13.263-34.223zm13.593 26.096l.346-.076c3.353-13.941 6.754-27.786 10.177-42.272L18.544 71.035c3.819 9.926 7.891 20.397 11.88 30.704zm84.927-78.897c-4.459-1.181-8.918-2.366-13.379-3.539-6.412-1.686-12.829-3.351-19.237-5.052-.801-.213-1.38-.352-1.851.613-2.265 4.64-4.6 9.245-6.901 13.868-.071.143-.056.328-.111.687l41.47-6.285.009-.292zM89.482 12.288l36.343 10.054-6.005-17.11-30.285 6.715-.053.341zM33.505 114.007c-4.501-.519-9.122-.042-13.687.037-3.75.063-7.5.206-11.25.323-.386.012-.771.09-1.156.506 31.003 2.866 62.005 5.732 93.007 8.6l.063-.414-29.815-4.07c-12.384-1.691-24.747-3.551-37.162-4.982zM2.782 99.994c3.995-9.27 7.973-18.546 11.984-27.809.401-.929.37-1.56-.415-2.308-1.678-1.597-3.237-3.318-5.071-5.226-2.479 12.24-4.897 24.177-7.317 36.113l.271.127c.185-.297.411-.578.548-.897zm78.74-90.153c6.737-1.738 13.572-3.097 20.367-4.613.44-.099.87-.244 1.303-.368l-.067-.332-29.194 3.928c2.741 1.197 4.853 2.091 7.591 1.385z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/SQL.js b/client/src/assets/LanguageLogo/SQL.js
index 870ee2ce3..f6101684a 100644
--- a/client/src/assets/LanguageLogo/SQL.js
+++ b/client/src/assets/LanguageLogo/SQL.js
@@ -1,10 +1,12 @@
 function SQL() {
   return (
-    <svg width="35px" height="35px" viewBox="0 0 128 128">
+    <svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.07834 0.506245C3.82813 0.768321 1.69701 1.56741 0.902527 2.44689C0.581284 2.80244 0.529297 2.9346 0.529297 3.3953C0.529297 3.85599 0.581284 3.98816 0.902527 4.3437C1.57921 5.09273 3.20483 5.76867 5.24559 6.14951C6.71675 6.42402 11.189 6.42198 12.6416 6.14618C15.8045 5.5455 17.6737 4.37446 17.407 3.16066C17.1491 1.98609 14.708 0.844318 11.7305 0.505602C10.6299 0.380299 7.15569 0.380727 6.07834 0.506245ZM0.529297 7.44745C0.529297 8.65975 0.552985 8.82954 0.764897 9.13889C1.51736 10.237 4.07734 11.0934 7.33801 11.3375C11.9181 11.6806 16.4474 10.5749 17.2495 8.91797C17.4264 8.55267 17.4651 8.25576 17.4651 7.26491C17.4651 6.60066 17.4288 6.0734 17.3847 6.09323C17.3405 6.11317 16.8943 6.33183 16.3932 6.57923C14.0562 7.73311 9.73668 8.27634 6.34974 7.84233C4.12997 7.55786 2.64295 7.16169 1.34329 6.5088L0.529297 6.09988V7.44745ZM0.529297 12.5026V13.8923L0.865547 14.2753C1.52336 15.0245 2.93707 15.6296 5.03121 16.0582C6.14222 16.2856 6.53357 16.3099 8.99719 16.3047C11.5118 16.2994 11.8334 16.2769 13.0168 16.0241C15.3404 15.5279 16.9506 14.7093 17.314 13.8394C17.5043 13.384 17.5291 11.1129 17.3437 11.1129C17.277 11.1129 17.0714 11.2062 16.8867 11.3204C15.861 11.9543 13.8987 12.5292 11.9172 12.7763C7.98629 13.2667 3.40409 12.6748 1.08142 11.3767C0.821814 11.2315 0.591466 11.1129 0.569385 11.1129C0.547305 11.1129 0.529297 11.7382 0.529297 12.5026ZM0.530048 17.4122C0.530798 18.9284 0.596933 19.1235 1.28851 19.649C2.71133 20.7303 5.50188 21.3423 8.99719 21.3396C12.4147 21.3369 14.9711 20.777 16.5618 19.6826C17.2952 19.1779 17.4598 18.7334 17.4627 17.2494C17.464 16.5862 17.4426 16.0435 17.4151 16.0435C17.3877 16.0435 17.0622 16.2097 16.6916 16.4127C15.0684 17.3023 12.5513 17.8441 9.58672 17.942C6.36657 18.0483 3.09582 17.4526 1.19922 16.4143L0.529297 16.0476L0.530048 17.4122Z"
         fill="white"
-        d="M2.001 90.458h4.108V74.235l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108V74.262c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976C2.632 71.917 2 72.681 2 74.261v16.197zm31.898-13.206h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0V77.208h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417H33.988v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219zM56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738H63.504c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816a.98.98 0 01.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026H56.63v2.738zm43.881-4.766c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706V87.72h-10.784c-2.41 0-3.318-.606-3.318-2.055V71.497h-4.108v14.195zm-23.008.142v-9.765c0-2.48 1.742-3.985 5.186-4.46a7.8 7.8 0 011.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395a9.075 9.075 0 01-2.414-.343c-2.613-.712-3.88-2.085-3.88-4.355zm4.435-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288zm40.398-18.645c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441a93.068 93.068 0 01-2.585-5.458c-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437a11.222 11.222 0 01-1.149-2.011c-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593a5.124 5.124 0 00-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Scala.js b/client/src/assets/LanguageLogo/Scala.js
index a5a7dc0d7..d752f2b90 100644
--- a/client/src/assets/LanguageLogo/Scala.js
+++ b/client/src/assets/LanguageLogo/Scala.js
@@ -1,9 +1,10 @@
 function Scala() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
-      <g fill="white">
-        <path d="M25.411 110.572V95.077l11.842-.474c12.315-.473 21.45-1.488 34.847-3.789 15.225-2.639 30.246-7.375 31.803-10.082.406-.677.676 4.534.676 14.616v15.698l-1.76 1.353c-1.894 1.489-9.202 3.993-17.524 6.09C72.303 121.737 40.568 126 29.742 126h-4.33zM25.411 71.327V55.83l11.842-.406c13.127-.541 23.344-1.691 36.877-4.195 15.157-2.842 28.96-7.443 29.976-9.947.203-.473.406 6.09.406 14.616.067 13.533-.068 15.698-1.083 16.78-2.368 2.64-20.638 7.376-39.449 10.286-11.435 1.76-30.381 3.79-35.66 3.79h-2.909zM25.411 32.352V17.195l2.098-.406c1.15-.203 3.992-.406 6.293-.406 11.367 0 38.366-3.722 51.628-7.105 9.27-2.436 15.698-4.872 17.931-6.902 1.15-1.015 1.218-.406 1.218 14.48 0 14.548-.067 15.63-1.285 16.714-1.827 1.691-14.345 5.548-24.09 7.51-15.765 3.113-41.951 6.429-50.883 6.429h-2.91z"></path>
-      </g>
+    <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0.764648 20.7323V17.827L2.98502 17.7381C5.29409 17.6495 7.0069 17.4591 9.51884 17.0277C12.3735 16.5329 15.19 15.6449 15.4819 15.1373C15.558 15.0104 15.6086 15.9875 15.6086 17.8778V20.8212L15.2786 21.0749C14.9235 21.3541 13.5533 21.8236 11.9929 22.2168C9.5569 22.8258 3.60659 23.6251 1.57671 23.6251H0.764836L0.764648 20.7323ZM0.764648 13.3739V10.4682L2.98502 10.3921C5.44634 10.2906 7.36202 10.075 9.89946 9.60552C12.7414 9.07264 15.3295 8.20996 15.52 7.74046C15.558 7.65177 15.5961 8.88233 15.5961 10.481C15.6086 13.0184 15.5833 13.4243 15.393 13.6272C14.949 14.1222 11.5234 15.0102 7.99634 15.5558C5.85227 15.8858 2.2999 16.2665 1.31009 16.2665H0.764648V13.3739ZM0.764648 6.06608V3.22414L1.15802 3.14802C1.37365 3.10996 1.90652 3.07189 2.33796 3.07189C4.46927 3.07189 9.53159 2.37402 12.0182 1.73971C13.7563 1.28296 14.9616 0.826206 15.3803 0.445581C15.5959 0.255268 15.6086 0.369456 15.6086 3.16058C15.6086 5.88833 15.5961 6.09121 15.3677 6.29446C15.0251 6.61152 12.678 7.33471 10.8508 7.70258C7.8949 8.28627 2.98502 8.90802 1.31027 8.90802H0.764648V6.06608Z"
+        fill="white"
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/LanguageLogo/Swift.js b/client/src/assets/LanguageLogo/Swift.js
index cc4eee59d..721331955 100644
--- a/client/src/assets/LanguageLogo/Swift.js
+++ b/client/src/assets/LanguageLogo/Swift.js
@@ -1,10 +1,10 @@
 function Swift() {
   return (
-    <svg width="30px" height="30px" viewBox="0 0 128 128">
+    <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M16.5939 18.6171C13.9987 20.1351 10.4468 20.2913 6.85091 18.7287C3.9478 17.4787 1.53953 15.2911 0 12.7909C0.736775 13.4048 1.60551 13.907 2.52923 14.3535C6.2351 16.1058 9.92997 15.9831 12.5362 14.3535C8.83031 11.4627 5.67427 7.70133 3.33198 4.63196C2.83714 4.1297 2.47425 3.50466 2.10036 2.9466C11.2056 9.69921 10.8097 11.4181 4.75055 1.8193C10.1279 7.33301 15.1204 10.4582 15.1204 10.4582C15.2963 10.5586 15.3953 10.6368 15.5163 10.7037C15.6262 10.4247 15.7252 10.1345 15.8022 9.83315C16.6709 6.65217 15.6812 3.0024 13.5149 0C18.5184 3.06937 21.4874 8.82863 20.2448 13.6615C20.2118 13.7843 20.1789 13.907 20.1898 14.0968C22.6531 17.2555 21.9933 20.548 21.6744 19.923C20.3438 17.2555 17.8476 18.0814 16.5939 18.6171Z"
         fill="white"
-        d="M125.54 26.23a28.78 28.78 0 00-2.65-7.58 28.84 28.84 0 00-4.76-6.32 23.42 23.42 0 00-6.62-4.55 27.27 27.27 0 00-7.68-2.53c-2.65-.51-5.56-.51-8.21-.76H30.25a45.46 45.46 0 00-6.09.51 21.81 21.81 0 00-5.82 1.52c-.53.25-1.32.51-1.85.76a33.82 33.82 0 00-5 3.28c-.53.51-1.06.76-1.59 1.26a22.41 22.41 0 00-4.76 6.32 23.61 23.61 0 00-2.65 7.58 78.47 78.47 0 00-.79 7.83v60.39a39.32 39.32 0 00.79 7.83 28.78 28.78 0 002.65 7.58 28.84 28.84 0 004.76 6.32 23.42 23.42 0 006.62 4.55 27.27 27.27 0 007.68 2.53c2.65.51 5.56.51 8.21.76h63.22a45.08 45.08 0 008.21-.76 27.27 27.27 0 007.68-2.53 30.13 30.13 0 006.62-4.55 22.41 22.41 0 004.76-6.32 23.61 23.61 0 002.65-7.58 78.47 78.47 0 00.79-7.83V34.06a39.32 39.32 0 00-.8-7.83zm-18.79 75.54C101 91 90.37 94.33 85 96.5c-11.11 6.13-26.38 6.76-41.75.47A64.53 64.53 0 0113.84 73a50 50 0 0010.85 6.32c15.87 7.1 31.73 6.61 42.9 0-15.9-11.66-29.4-26.82-39.46-39.2a43.47 43.47 0 01-5.29-6.82c12.16 10.61 31.5 24 38.38 27.79a271.77 271.77 0 01-27-32.34 266.8 266.8 0 0044.47 34.87c.71.38 1.26.7 1.7 1a32.71 32.71 0 001.21-3.51c3.71-12.89-.53-27.54-9.79-39.67C93.25 33.81 106 57.05 100.66 76.51c-.14.53-.29 1-.45 1.55l.19.22c10.6 12.63 7.67 26.02 6.35 23.49z"
-      ></path>
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/Platform/TeameightsLogo.js b/client/src/assets/Platform/TeameightsLogo.js
index 21cd8f7e1..116e1068a 100644
--- a/client/src/assets/Platform/TeameightsLogo.js
+++ b/client/src/assets/Platform/TeameightsLogo.js
@@ -1,16 +1,20 @@
 function TeameightsLogo() {
   return (
     <svg
-      width="146"
-      height="30"
-      viewBox="0 0 146 30"
+      width="141"
+      height="28"
+      viewBox="0 0 141 28"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M13.566 24.422C14.798 24.422 15.414 25.15 15.414 26.606C15.414 27.474 15.246 28.09 14.91 28.454C14.574 28.818 14.084 29 13.44 29H11.214C8.862 29 7.126 28.538 6.006 27.614C4.914 26.662 4.368 25.052 4.368 22.784V12.452H2.52C1.876 12.452 1.414 12.298 1.134 11.99C0.882 11.682 0.756 11.178 0.756 10.478C0.756 9.806 0.882 9.316 1.134 9.008C1.414 8.7 1.876 8.546 2.52 8.546H4.368V4.262C4.368 3.002 5.278 2.372 7.098 2.372C8.918 2.372 9.828 3.002 9.828 4.262V8.546H13.566C14.21 8.546 14.658 8.7 14.91 9.008C15.19 9.316 15.33 9.806 15.33 10.478C15.33 11.178 15.19 11.696 14.91 12.032C14.658 12.34 14.21 12.48 13.566 12.452H9.828V21.188C9.828 21.86 9.856 22.406 9.912 22.826C9.996 23.246 10.136 23.582 10.332 23.834C10.528 24.058 10.794 24.212 11.13 24.296C11.466 24.38 11.9 24.422 12.432 24.422H13.566ZM22.8382 20.096C22.9782 21.692 23.4402 22.966 24.2242 23.918C25.0362 24.842 26.2682 25.304 27.9202 25.304C28.8162 25.304 29.6002 25.136 30.2722 24.8C30.9442 24.464 31.5182 23.918 31.9942 23.162C32.4422 22.49 33.4642 22.154 35.0602 22.154C35.9562 22.154 36.5582 22.308 36.8662 22.616C37.2022 22.924 37.3702 23.232 37.3702 23.54C37.3702 23.764 37.3142 24.002 37.2022 24.254C36.5582 26.046 35.3962 27.362 33.7162 28.202C32.0362 29.014 30.0762 29.42 27.8362 29.42C26.2962 29.42 24.8822 29.21 23.5942 28.79C22.3062 28.37 21.1862 27.726 20.2342 26.858C19.2822 25.99 18.5402 24.898 18.0082 23.582C17.4762 22.238 17.2102 20.642 17.2102 18.794C17.2102 16.946 17.4762 15.364 18.0082 14.048C18.5402 12.704 19.2822 11.598 20.2342 10.73C21.1862 9.834 22.3062 9.176 23.5942 8.756C24.8822 8.336 26.2962 8.126 27.8362 8.126C29.2362 8.126 30.5382 8.322 31.7422 8.714C32.9462 9.078 34.0102 9.624 34.9342 10.352C35.8582 11.08 36.5862 11.99 37.1182 13.082C37.6782 14.146 37.9862 15.378 38.0422 16.778V17.912C38.0422 18.556 37.8182 19.088 37.3702 19.508C36.9222 19.9 36.3622 20.096 35.6902 20.096H22.8382ZM32.3722 16.694C32.3722 15.266 31.9382 14.174 31.0702 13.418C30.2022 12.634 29.0822 12.242 27.7102 12.242C26.2542 12.242 25.1482 12.648 24.3922 13.46C23.6642 14.272 23.1882 15.35 22.9642 16.694H32.3722ZM55.0059 26.396C54.3059 27.292 53.3539 28.02 52.1499 28.58C50.9739 29.14 49.4619 29.42 47.6139 29.42C46.7459 29.42 45.8639 29.336 44.9679 29.168C44.0999 29 43.3159 28.706 42.6159 28.286C41.9159 27.866 41.3419 27.292 40.8939 26.564C40.4739 25.808 40.2639 24.842 40.2639 23.666C40.2639 22.238 40.5999 21.132 41.2719 20.348C41.9439 19.564 42.7839 18.976 43.7919 18.584C44.8279 18.164 45.9479 17.87 47.1519 17.702C48.3559 17.534 49.4759 17.38 50.5119 17.24C51.5479 17.072 52.4159 16.848 53.1159 16.568C53.8439 16.288 54.2359 15.812 54.2919 15.14C54.1799 13.068 52.8779 12.032 50.3859 12.032C49.2379 12.032 48.3699 12.2 47.7819 12.536C47.1939 12.844 46.8019 13.348 46.6059 14.048C46.4379 14.58 46.0599 14.958 45.4719 15.182C44.9119 15.378 44.3659 15.476 43.8339 15.476C42.1539 15.476 41.3139 14.93 41.3139 13.838C41.3139 13.698 41.3279 13.544 41.3559 13.376C41.4959 12.62 41.7759 11.92 42.1959 11.276C42.6159 10.632 43.1899 10.086 43.9179 9.638C44.6739 9.162 45.5839 8.798 46.6479 8.546C47.7119 8.266 48.9719 8.126 50.4279 8.126C53.3959 8.126 55.6779 8.686 57.2739 9.806C58.8979 10.926 59.7099 12.704 59.7099 15.14V22.994C59.7099 23.638 59.7799 24.1 59.9199 24.38C60.0599 24.632 60.2979 24.758 60.6339 24.758H60.7599C61.1239 24.758 61.4039 24.94 61.5999 25.304C61.7959 25.668 61.8939 26.158 61.8939 26.774C61.8659 27.642 61.6419 28.258 61.2219 28.622C60.8019 28.958 60.0599 29.126 58.9959 29.126H58.7859C56.8259 29.126 55.5659 28.216 55.0059 26.396ZM46.0599 23.33C46.0599 24.086 46.3259 24.688 46.8579 25.136C47.3899 25.584 48.2019 25.808 49.2939 25.808C50.9739 25.808 52.2199 25.29 53.0319 24.254C53.8719 23.218 54.2919 21.902 54.2919 20.306V19.424C53.5359 19.844 52.6819 20.124 51.7299 20.264C50.7779 20.376 49.8819 20.516 49.0419 20.684C48.2019 20.852 47.4879 21.118 46.8999 21.482C46.3399 21.846 46.0599 22.462 46.0599 23.33ZM96.7477 27.488C96.7477 28.776 95.8377 29.42 94.0177 29.42C92.2257 29.42 91.3297 28.776 91.3297 27.488V16.862C91.3297 15.322 90.9657 14.244 90.2377 13.628C89.5097 13.012 88.6417 12.704 87.6337 12.704C86.0657 12.704 84.9317 13.348 84.2317 14.636C83.5597 15.896 83.2237 17.632 83.2237 19.844V27.488C83.2237 28.776 82.3137 29.42 80.4937 29.42C78.6737 29.42 77.7637 28.776 77.7637 27.488V16.862C77.7637 15.322 77.3997 14.244 76.6717 13.628C75.9717 13.012 75.1037 12.704 74.0677 12.704C72.5277 12.704 71.4077 13.348 70.7077 14.636C70.0077 15.896 69.6577 17.632 69.6577 19.844V27.488C69.6577 28.776 68.7477 29.42 66.9277 29.42C65.1077 29.42 64.1977 28.776 64.1977 27.488V10.184C64.1977 9.484 64.3937 8.966 64.7857 8.63C65.2057 8.294 65.8637 8.126 66.7597 8.126C67.4877 8.126 68.0477 8.294 68.4397 8.63C68.8597 8.938 69.1817 9.428 69.4057 10.1L69.5317 11.528C70.1757 10.464 71.0297 9.638 72.0937 9.05C73.1857 8.434 74.5297 8.126 76.1257 8.126C77.7217 8.126 79.0657 8.462 80.1577 9.134C81.2777 9.806 82.0897 10.884 82.5937 12.368C83.2377 11.024 84.1197 9.988 85.2397 9.26C86.3877 8.504 87.8717 8.126 89.6917 8.126C91.9037 8.126 93.6397 8.784 94.8997 10.1C96.1597 11.416 96.7757 13.558 96.7477 16.526V27.488ZM100.528 20.978C100.528 19.214 100.976 17.772 101.872 16.652C102.796 15.532 103.944 14.678 105.316 14.09C104.252 13.53 103.37 12.746 102.67 11.738C101.998 10.73 101.662 9.442 101.662 7.874C101.662 6.53 101.928 5.368 102.46 4.388C103.02 3.38 103.762 2.554 104.686 1.91C105.638 1.266 106.73 0.789999 107.962 0.481999C109.222 0.173998 110.566 0.0199976 111.994 0.0199976C113.394 0.0199976 114.71 0.173998 115.942 0.481999C117.202 0.789999 118.294 1.266 119.218 1.91C120.142 2.554 120.87 3.38 121.402 4.388C121.962 5.368 122.242 6.53 122.242 7.874C122.242 9.442 121.906 10.73 121.234 11.738C120.562 12.746 119.694 13.53 118.63 14.09C119.974 14.678 121.094 15.532 121.99 16.652C122.914 17.772 123.376 19.214 123.376 20.978C123.376 22.434 123.082 23.694 122.494 24.758C121.906 25.822 121.094 26.704 120.058 27.404C119.022 28.076 117.804 28.58 116.404 28.916C115.032 29.252 113.562 29.42 111.994 29.42C110.398 29.42 108.9 29.252 107.5 28.916C106.1 28.58 104.882 28.076 103.846 27.404C102.838 26.704 102.026 25.822 101.41 24.758C100.822 23.694 100.528 22.434 100.528 20.978ZM111.994 12.41C112.526 12.41 113.058 12.34 113.59 12.2C114.122 12.06 114.598 11.836 115.018 11.528C115.466 11.22 115.816 10.828 116.068 10.352C116.348 9.848 116.488 9.246 116.488 8.546C116.488 7.286 116.068 6.334 115.228 5.69C114.416 5.046 113.338 4.724 111.994 4.724C110.594 4.724 109.488 5.046 108.676 5.69C107.864 6.334 107.458 7.286 107.458 8.546C107.458 9.246 107.584 9.848 107.836 10.352C108.116 10.828 108.466 11.22 108.886 11.528C109.334 11.836 109.824 12.06 110.356 12.2C110.916 12.34 111.462 12.41 111.994 12.41ZM111.994 24.674C113.702 24.674 115.06 24.352 116.068 23.708C117.104 23.036 117.622 21.972 117.622 20.516C117.622 19.732 117.44 19.074 117.076 18.542C116.74 18.01 116.292 17.59 115.732 17.282C115.2 16.974 114.598 16.75 113.926 16.61C113.282 16.47 112.638 16.4 111.994 16.4C111.35 16.4 110.692 16.47 110.02 16.61C109.348 16.75 108.732 16.974 108.172 17.282C107.64 17.59 107.192 18.01 106.828 18.542C106.492 19.074 106.324 19.732 106.324 20.516C106.324 21.972 106.828 23.036 107.836 23.708C108.844 24.352 110.23 24.674 111.994 24.674ZM131.609 23.666C131.917 24.338 132.365 24.842 132.953 25.178C133.569 25.486 134.451 25.64 135.599 25.64C136.971 25.64 137.965 25.444 138.581 25.052C139.197 24.66 139.505 24.086 139.505 23.33C139.505 22.714 139.183 22.252 138.539 21.944C137.895 21.636 137.083 21.384 136.103 21.188C135.151 20.992 134.115 20.782 132.995 20.558C131.875 20.334 130.825 19.998 129.845 19.55C128.893 19.074 128.095 18.43 127.451 17.618C126.807 16.806 126.485 15.7 126.485 14.3C126.485 13.292 126.709 12.41 127.157 11.654C127.605 10.87 128.221 10.226 129.005 9.722C129.817 9.19 130.783 8.798 131.903 8.546C133.023 8.266 134.255 8.126 135.599 8.126C140.275 8.126 143.145 9.624 144.209 12.62C144.433 13.264 144.321 13.796 143.873 14.216C143.453 14.636 142.823 14.846 141.983 14.846C141.339 14.846 140.751 14.72 140.219 14.468C139.687 14.216 139.267 13.852 138.959 13.376C138.483 12.396 137.377 11.906 135.641 11.906C134.437 11.906 133.541 12.102 132.953 12.494C132.365 12.886 132.071 13.418 132.071 14.09C132.071 14.79 132.393 15.322 133.037 15.686C133.681 16.05 134.479 16.358 135.431 16.61C136.383 16.834 137.419 17.072 138.539 17.324C139.687 17.548 140.737 17.884 141.689 18.332C142.641 18.752 143.439 19.354 144.083 20.138C144.727 20.894 145.049 21.93 145.049 23.246C145.049 25.458 144.209 27.04 142.529 27.992C140.877 28.944 138.595 29.42 135.683 29.42C134.227 29.42 132.953 29.308 131.861 29.084C130.797 28.86 129.887 28.552 129.131 28.16C128.375 27.74 127.773 27.25 127.325 26.69C126.877 26.102 126.541 25.458 126.317 24.758C126.093 24.114 126.205 23.582 126.653 23.162C127.129 22.714 127.857 22.49 128.837 22.49C129.397 22.49 129.943 22.588 130.475 22.784C131.007 22.952 131.385 23.246 131.609 23.666Z"
+        d="M12.0405 27C10.4698 27 9.12715 26.7467 8.01249 26.24C6.89782 25.708 6.04915 24.8973 5.46648 23.808C4.90915 22.7187 4.63048 21.3507 4.63048 19.704V11.724H1.66648C1.38782 11.724 1.15982 11.6353 0.982484 11.458C0.805151 11.2807 0.716484 11.0527 0.716484 10.774V8.19C0.716484 7.91133 0.805151 7.68333 0.982484 7.506C1.15982 7.32867 1.38782 7.24 1.66648 7.24H4.63048V0.969998C4.63048 0.691332 4.71915 0.463332 4.89648 0.286C5.09915 0.108666 5.32715 0.0199986 5.58048 0.0199986H9.30448C9.58315 0.0199986 9.81115 0.108666 9.98848 0.286C10.1658 0.463332 10.2545 0.691332 10.2545 0.969998V7.24H15.0045C15.2578 7.24 15.4732 7.32867 15.6505 7.506C15.8278 7.68333 15.9165 7.91133 15.9165 8.19V10.774C15.9165 11.0527 15.8278 11.2807 15.6505 11.458C15.4732 11.6353 15.2578 11.724 15.0045 11.724H10.2545V19.248C10.2545 20.2107 10.4192 20.9707 10.7485 21.528C11.1032 22.06 11.7112 22.326 12.5725 22.326H15.3465C15.5998 22.326 15.8152 22.4147 15.9925 22.592C16.1698 22.7693 16.2585 22.9847 16.2585 23.238V26.05C16.2585 26.3287 16.1698 26.5567 15.9925 26.734C15.8152 26.9113 15.5998 27 15.3465 27H12.0405ZM28.3897 27.38C25.4764 27.38 23.1584 26.5693 21.4357 24.948C19.7384 23.3267 18.839 20.9707 18.7377 17.88C18.7377 17.6773 18.7377 17.4113 18.7377 17.082C18.7377 16.7273 18.7377 16.4487 18.7377 16.246C18.839 14.2953 19.2824 12.6233 20.0677 11.23C20.853 9.81133 21.955 8.73467 23.3737 8C24.7924 7.24 26.4517 6.86 28.3517 6.86C30.4797 6.86 32.253 7.30333 33.6717 8.19C35.1157 9.05133 36.1924 10.242 36.9017 11.762C37.6364 13.2567 38.0037 14.9793 38.0037 16.93V17.804C38.0037 18.0573 37.9024 18.2727 37.6997 18.45C37.5224 18.6273 37.307 18.716 37.0537 18.716H24.6277C24.6277 18.7413 24.6277 18.792 24.6277 18.868C24.6277 18.9187 24.6277 18.9693 24.6277 19.02C24.653 19.8307 24.805 20.578 25.0837 21.262C25.3877 21.9207 25.8057 22.4527 26.3377 22.858C26.895 23.2633 27.5537 23.466 28.3137 23.466C28.947 23.466 29.4664 23.3773 29.8717 23.2C30.277 23.0227 30.6064 22.8073 30.8597 22.554C31.1384 22.3007 31.341 22.0853 31.4677 21.908C31.6957 21.6547 31.873 21.5027 31.9997 21.452C32.1517 21.376 32.3797 21.338 32.6837 21.338H36.6357C36.889 21.338 37.0917 21.414 37.2437 21.566C37.421 21.6927 37.497 21.8827 37.4717 22.136C37.4464 22.5413 37.231 23.048 36.8257 23.656C36.4457 24.2387 35.8757 24.8213 35.1157 25.404C34.3557 25.9613 33.4057 26.43 32.2657 26.81C31.151 27.19 29.859 27.38 28.3897 27.38ZM24.6277 15.258H32.0757V15.182C32.0757 14.27 31.9237 13.4847 31.6197 12.826C31.341 12.142 30.923 11.61 30.3657 11.23C29.8084 10.85 29.137 10.66 28.3517 10.66C27.5664 10.66 26.895 10.85 26.3377 11.23C25.7804 11.61 25.3497 12.142 25.0457 12.826C24.767 13.4847 24.6277 14.27 24.6277 15.182V15.258ZM47.6162 27.38C46.2735 27.38 45.0702 27.1267 44.0062 26.62C42.9422 26.088 42.0935 25.3787 41.4602 24.492C40.8269 23.6053 40.5102 22.6173 40.5102 21.528C40.5102 19.7293 41.2322 18.3107 42.6762 17.272C44.1455 16.2333 46.0709 15.524 48.4522 15.144L53.4302 14.422V13.738C53.4302 12.75 53.2022 11.99 52.7462 11.458C52.2902 10.926 51.4922 10.66 50.3522 10.66C49.5162 10.66 48.8449 10.8247 48.3382 11.154C47.8315 11.4833 47.4389 11.914 47.1602 12.446C46.9575 12.7753 46.6662 12.94 46.2862 12.94H42.6762C42.3975 12.94 42.1822 12.864 42.0302 12.712C41.8782 12.5347 41.8149 12.332 41.8402 12.104C41.8402 11.6733 42.0049 11.1667 42.3342 10.584C42.6635 10.0013 43.1702 9.43133 43.8542 8.874C44.5382 8.29133 45.4122 7.81 46.4762 7.43C47.5402 7.05 48.8449 6.86 50.3902 6.86C51.9862 6.86 53.3542 7.05 54.4942 7.43C55.6342 7.81 56.5462 8.342 57.2302 9.026C57.9142 9.71 58.4209 10.508 58.7502 11.42C59.0795 12.3067 59.2442 13.2693 59.2442 14.308V26.05C59.2442 26.3287 59.1555 26.5567 58.9782 26.734C58.8009 26.9113 58.5729 27 58.2942 27H54.5702C54.3169 27 54.1015 26.9113 53.9242 26.734C53.7469 26.5567 53.6582 26.3287 53.6582 26.05V24.644C53.3289 25.1253 52.8855 25.5813 52.3282 26.012C51.7709 26.4173 51.0995 26.7467 50.3142 27C49.5542 27.2533 48.6549 27.38 47.6162 27.38ZM49.1362 23.428C49.9722 23.428 50.7195 23.2507 51.3782 22.896C52.0369 22.5413 52.5562 21.9967 52.9362 21.262C53.3162 20.5273 53.5062 19.6027 53.5062 18.488V17.842L49.9722 18.412C48.6042 18.64 47.6035 18.982 46.9702 19.438C46.3369 19.894 46.0202 20.4513 46.0202 21.11C46.0202 21.5913 46.1595 22.0093 46.4382 22.364C46.7422 22.7187 47.1349 22.9847 47.6162 23.162C48.0975 23.3393 48.6042 23.428 49.1362 23.428ZM64.7572 27C64.5038 27 64.2885 26.9113 64.1112 26.734C63.9338 26.5567 63.8452 26.3287 63.8452 26.05V8.19C63.8452 7.91133 63.9338 7.68333 64.1112 7.506C64.2885 7.32867 64.5038 7.24 64.7572 7.24H68.2912C68.5445 7.24 68.7598 7.32867 68.9372 7.506C69.1398 7.68333 69.2412 7.91133 69.2412 8.19V9.482C69.7478 8.77267 70.4445 8.16467 71.3312 7.658C72.2432 7.15133 73.3198 6.88533 74.5612 6.86C77.4998 6.80933 79.5138 7.924 80.6032 10.204C81.1858 9.216 82.0218 8.418 83.1112 7.81C84.2258 7.17667 85.4418 6.86 86.7592 6.86C88.0765 6.86 89.2672 7.164 90.3312 7.772C91.3952 8.35467 92.2312 9.26667 92.8392 10.508C93.4725 11.724 93.7892 13.2947 93.7892 15.22V26.05C93.7892 26.3287 93.7005 26.5567 93.5232 26.734C93.3458 26.9113 93.1305 27 92.8772 27H89.1152C88.8618 27 88.6465 26.9113 88.4692 26.734C88.2918 26.5567 88.2032 26.3287 88.2032 26.05V15.524C88.2032 14.4853 88.0512 13.6747 87.7472 13.092C87.4432 12.484 87.0378 12.0533 86.5312 11.8C86.0498 11.5467 85.5052 11.42 84.8972 11.42C84.3652 11.42 83.8458 11.5467 83.3392 11.8C82.8578 12.0533 82.4525 12.484 82.1232 13.092C81.8192 13.6747 81.6672 14.4853 81.6672 15.524V26.05C81.6672 26.3287 81.5785 26.5567 81.4012 26.734C81.2238 26.9113 80.9958 27 80.7172 27H76.9932C76.7145 27 76.4865 26.9113 76.3092 26.734C76.1318 26.5567 76.0432 26.3287 76.0432 26.05V15.524C76.0432 14.4853 75.8912 13.6747 75.5872 13.092C75.2832 12.484 74.8778 12.0533 74.3712 11.8C73.8898 11.5467 73.3578 11.42 72.7752 11.42C72.2432 11.42 71.7238 11.5593 71.2172 11.838C70.7105 12.0913 70.2925 12.5093 69.9632 13.092C69.6592 13.6747 69.5072 14.4727 69.5072 15.486V26.05C69.5072 26.3287 69.4185 26.5567 69.2412 26.734C69.0638 26.9113 68.8485 27 68.5952 27H64.7572ZM131.493 27.38C129.922 27.38 128.567 27.2027 127.427 26.848C126.312 26.468 125.4 26.012 124.691 25.48C124.007 24.948 123.487 24.416 123.133 23.884C122.803 23.3267 122.626 22.858 122.601 22.478C122.575 22.1993 122.664 21.9713 122.867 21.794C123.069 21.6167 123.272 21.528 123.475 21.528H127.161C127.237 21.528 127.313 21.5407 127.389 21.566C127.465 21.5913 127.541 21.6547 127.617 21.756C127.946 21.984 128.288 22.25 128.643 22.554C128.997 22.8327 129.403 23.0733 129.859 23.276C130.34 23.4787 130.935 23.58 131.645 23.58C132.481 23.58 133.19 23.4153 133.773 23.086C134.355 22.7313 134.647 22.2373 134.647 21.604C134.647 21.148 134.507 20.768 134.229 20.464C133.975 20.16 133.481 19.8813 132.747 19.628C132.012 19.3747 130.923 19.096 129.479 18.792C128.111 18.488 126.945 18.0827 125.983 17.576C125.02 17.0693 124.298 16.436 123.817 15.676C123.335 14.8907 123.095 13.9533 123.095 12.864C123.095 11.876 123.399 10.926 124.007 10.014C124.64 9.102 125.565 8.35467 126.781 7.772C127.997 7.164 129.517 6.86 131.341 6.86C132.734 6.86 133.95 7.03733 134.989 7.392C136.053 7.72133 136.939 8.152 137.649 8.684C138.358 9.19067 138.89 9.72267 139.245 10.28C139.625 10.812 139.827 11.2807 139.853 11.686C139.878 11.9393 139.802 12.1547 139.625 12.332C139.447 12.5093 139.245 12.598 139.017 12.598H135.635C135.508 12.598 135.394 12.5853 135.293 12.56C135.191 12.5093 135.103 12.446 135.027 12.37C134.723 12.1673 134.406 11.9393 134.077 11.686C133.773 11.4073 133.405 11.1667 132.975 10.964C132.544 10.7613 131.987 10.66 131.303 10.66C130.467 10.66 129.821 10.85 129.365 11.23C128.934 11.5847 128.719 12.0407 128.719 12.598C128.719 12.9527 128.833 13.282 129.061 13.586C129.289 13.89 129.757 14.1687 130.467 14.422C131.176 14.6753 132.253 14.9413 133.697 15.22C135.419 15.524 136.787 15.98 137.801 16.588C138.814 17.196 139.536 17.9053 139.967 18.716C140.423 19.5013 140.651 20.35 140.651 21.262C140.651 22.4527 140.296 23.5167 139.587 24.454C138.877 25.366 137.839 26.088 136.471 26.62C135.128 27.1267 133.469 27.38 131.493 27.38Z"
         fill="white"
       />
+      <path
+        d="M108.654 27.38C106.881 27.38 105.31 27.1773 103.942 26.772C102.599 26.3413 101.472 25.7587 100.56 25.024C99.648 24.264 98.964 23.39 98.508 22.402C98.052 21.3887 97.824 20.2867 97.824 19.096C97.824 17.652 98.1787 16.398 98.888 15.334C99.5973 14.27 100.497 13.4467 101.586 12.864C100.699 12.2813 100.003 11.5467 99.496 10.66C99.0147 9.748 98.774 8.69667 98.774 7.506C98.774 6.062 99.1413 4.78267 99.876 3.668C100.611 2.55333 101.7 1.66667 103.144 1.008C104.613 0.349332 106.45 0.0199986 108.654 0.0199986C110.833 0.0199986 112.644 0.349332 114.088 1.008C115.532 1.64133 116.621 2.51533 117.356 3.63C118.091 4.74467 118.458 6.024 118.458 7.468C118.458 8.65867 118.217 9.71 117.736 10.622C117.255 11.534 116.571 12.2813 115.684 12.864C116.849 13.4213 117.774 14.2447 118.458 15.334C119.142 16.4233 119.484 17.69 119.484 19.134C119.484 20.7047 119.079 22.1107 118.268 23.352C117.457 24.5933 116.241 25.5813 114.62 26.316C112.999 27.0253 111.01 27.38 108.654 27.38ZM108.654 23.01C109.541 23.01 110.351 22.858 111.086 22.554C111.821 22.2247 112.391 21.7687 112.796 21.186C113.227 20.6033 113.442 19.9193 113.442 19.134C113.442 18.3233 113.227 17.6393 112.796 17.082C112.391 16.4993 111.821 16.056 111.086 15.752C110.351 15.4227 109.541 15.258 108.654 15.258C107.742 15.258 106.919 15.4227 106.184 15.752C105.475 16.056 104.905 16.4993 104.474 17.082C104.043 17.6393 103.828 18.3233 103.828 19.134C103.828 19.9193 104.043 20.6033 104.474 21.186C104.905 21.7687 105.475 22.2247 106.184 22.554C106.919 22.858 107.742 23.01 108.654 23.01ZM108.654 11.116C109.439 11.0907 110.149 10.9387 110.782 10.66C111.415 10.3813 111.922 10.0013 112.302 9.52C112.682 9.01333 112.872 8.43067 112.872 7.772C112.872 7.088 112.682 6.50533 112.302 6.024C111.947 5.51733 111.453 5.12467 110.82 4.846C110.187 4.56733 109.465 4.428 108.654 4.428C107.843 4.428 107.109 4.56733 106.45 4.846C105.817 5.12467 105.323 5.51733 104.968 6.024C104.613 6.50533 104.436 7.088 104.436 7.772C104.436 8.456 104.613 9.05133 104.968 9.558C105.323 10.0393 105.817 10.4193 106.45 10.698C107.109 10.9767 107.843 11.116 108.654 11.116Z"
+        fill="#5BD424"
+      />
     </svg>
   )
 }
diff --git a/client/src/assets/SearchPanel/ArrowDown.js b/client/src/assets/SearchPanel/ArrowDown.js
new file mode 100644
index 000000000..a8ca8cfa7
--- /dev/null
+++ b/client/src/assets/SearchPanel/ArrowDown.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const ArrowDown = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.30806 7.05806C3.55214 6.81398 3.94786 6.81398 4.19194 7.05806L10 12.8661L15.8081 7.05806C16.0521 6.81398 16.4479 6.81398 16.6919 7.05806C16.936 7.30214 16.936 7.69786 16.6919 7.94194L10.4419 14.1919C10.1979 14.436 9.80214 14.436 9.55806 14.1919L3.30806 7.94194C3.06398 7.69786 3.06398 7.30214 3.30806 7.05806Z"
+        fill="#5BD424"
+      />
+    </svg>
+  )
+}
+
+export default ArrowDown
diff --git a/client/src/assets/SearchPanel/Checkbox.svg b/client/src/assets/SearchPanel/Checkbox.svg
new file mode 100644
index 000000000..bf393525e
--- /dev/null
+++ b/client/src/assets/SearchPanel/Checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3334 0.5L4.00002 7.83333L0.666687 4.5" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/client/src/assets/Shared/Close.js b/client/src/assets/Shared/Close.js
index 49b8a10fa..2fb027137 100644
--- a/client/src/assets/Shared/Close.js
+++ b/client/src/assets/Shared/Close.js
@@ -1,13 +1,12 @@
 function Close() {
   return (
-    <svg width="14" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M7.80302 8.86365C8.09592 9.15655 8.57079 9.15655 8.86368 8.86365C9.15658 8.57076 9.15658 8.09589 8.86368 7.80299L7.80302 8.86365ZM2.19702 1.13633C1.90412 0.843433 1.42925 0.843433 1.13636 1.13633C0.843464 1.42922 0.843464 1.90409 1.13636 2.19699L2.19702 1.13633ZM8.86368 7.80299L2.19702 1.13633L1.13636 2.19699L7.80302 8.86365L8.86368 7.80299Z"
-        fill="#72EB3A"
-      />
-      <path
-        d="M1.13636 7.80299C0.843464 8.09589 0.843464 8.57076 1.13636 8.86365C1.42925 9.15655 1.90412 9.15655 2.19702 8.86365L1.13636 7.80299ZM8.86368 2.19699C9.15658 1.90409 9.15658 1.42922 8.86368 1.13633C8.57079 0.843433 8.09592 0.843433 7.80302 1.13633L8.86368 2.19699ZM2.19702 8.86365L8.86368 2.19699L7.80302 1.13633L1.13636 7.80299L2.19702 8.86365Z"
-        fill="#72EB3A"
+        d="M12.625 1.375L1.375 12.625M12.625 12.625L1.375 1.375"
+        stroke="white"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )
diff --git a/client/src/assets/Shared/Crowns/SCrownRight.js b/client/src/assets/Shared/Crowns/SCrownRight.js
new file mode 100644
index 000000000..3513ae27f
--- /dev/null
+++ b/client/src/assets/Shared/Crowns/SCrownRight.js
@@ -0,0 +1,32 @@
+function SCrownRight() {
+  return (
+    <svg
+      fill="#ffffff"
+      height="241px"
+      width="241px"
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-55 -55 330.00 330.00"
+      xmlSpace="preserve"
+      stroke="#ffffff"
+      strokeWidth="0.0022"
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0">
+        <path
+          transform="translate(-55, -55), scale(20.625)"
+          fill="#46A11B"
+          d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33z"
+          strokeWidth="0"
+        ></path>
+      </g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        {' '}
+        <path d="M220,98.865c0-12.728-10.355-23.083-23.083-23.083s-23.083,10.355-23.083,23.083c0,5.79,2.148,11.084,5.681,15.14 l-23.862,21.89L125.22,73.002l17.787-20.892l-32.882-38.623L77.244,52.111l16.995,19.962l-30.216,63.464l-23.527-21.544 c3.528-4.055,5.671-9.344,5.671-15.128c0-12.728-10.355-23.083-23.083-23.083C10.355,75.782,0,86.137,0,98.865 c0,11.794,8.895,21.545,20.328,22.913l7.073,84.735H192.6l7.073-84.735C211.105,120.41,220,110.659,220,98.865z"></path>{' '}
+      </g>
+    </svg>
+  )
+}
+
+export default SCrownRight
diff --git a/client/src/assets/Shared/Message.js b/client/src/assets/Shared/Message.js
new file mode 100644
index 000000000..7eb02e258
--- /dev/null
+++ b/client/src/assets/Shared/Message.js
@@ -0,0 +1,26 @@
+function Message() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.39321 1.60452C6.83336 1.50677 5.29147 1.98174 4.05699 2.94026C2.82252 3.89878 1.98036 5.27493 1.68863 6.81037C1.39689 8.34581 1.67563 9.93494 2.47253 11.2794C2.55414 11.4171 2.57565 11.5822 2.53205 11.7362L1.84814 14.1518L4.26367 13.4679C4.41767 13.4243 4.58281 13.4458 4.72049 13.5274C6.06497 14.3243 7.6541 14.603 9.18954 14.3113C10.725 14.0195 12.1011 13.1774 13.0597 11.9429C14.0182 10.7084 14.4931 9.16655 14.3954 7.6067C14.2976 6.04685 13.6339 4.57632 12.5287 3.47118C11.4236 2.36603 9.95306 1.70228 8.39321 1.60452ZM3.34074 2.0178C4.79992 0.884802 6.62248 0.323381 8.46626 0.43893C10.31 0.55448 12.0482 1.33905 13.3546 2.64536C14.6609 3.95167 15.4454 5.68987 15.561 7.53366C15.6765 9.37744 15.1151 11.2 13.9821 12.6592C12.8491 14.1184 11.2225 15.1138 9.40754 15.4586C7.67618 15.7876 5.88705 15.5029 4.34632 14.6582L2.16036 15.2772C1.96139 15.3348 1.75062 15.3381 1.54991 15.2868C1.3482 15.2352 1.16409 15.1303 1.01687 14.983C0.869646 14.8358 0.764741 14.6517 0.713145 14.45C0.661793 14.2493 0.665129 14.0384 0.722783 13.8394L1.34166 11.6536C0.497005 10.1129 0.212308 8.32374 0.541272 6.59237C0.886113 4.77744 1.88156 3.15079 3.34074 2.0178Z"
+        fill="white"
+      />
+      <path
+        d="M7.9994 8.87641C8.48316 8.87641 8.87531 8.48425 8.87531 8.0005C8.87531 7.51675 8.48316 7.12459 7.9994 7.12459C7.51565 7.12459 7.12349 7.51675 7.12349 8.0005C7.12349 8.48425 7.51565 8.87641 7.9994 8.87641Z"
+        fill="white"
+      />
+      <path
+        d="M4.49574 8.87641C4.97949 8.87641 5.37165 8.48425 5.37165 8.0005C5.37165 7.51675 4.97949 7.12459 4.49574 7.12459C4.01199 7.12459 3.61983 7.51675 3.61983 8.0005C3.61983 8.48425 4.01199 8.87641 4.49574 8.87641Z"
+        fill="white"
+      />
+      <path
+        d="M11.5031 8.87641C11.9868 8.87641 12.379 8.48425 12.379 8.0005C12.379 7.51675 11.9868 7.12459 11.5031 7.12459C11.0193 7.12459 10.6272 7.51675 10.6272 8.0005C10.6272 8.48425 11.0193 8.87641 11.5031 8.87641Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
+export default Message
diff --git a/client/src/assets/Sidebar/NotificationClose.js b/client/src/assets/Sidebar/NotificationClose.js
new file mode 100644
index 000000000..9bac72c51
--- /dev/null
+++ b/client/src/assets/Sidebar/NotificationClose.js
@@ -0,0 +1,15 @@
+const NotificationClose = () => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.75 1.25L1.25 14.75M14.75 14.75L1.25 1.25"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default NotificationClose
diff --git a/client/src/assets/Team/ArrowRight.jsx b/client/src/assets/Team/ArrowRight.jsx
new file mode 100644
index 000000000..da4225fbc
--- /dev/null
+++ b/client/src/assets/Team/ArrowRight.jsx
@@ -0,0 +1,18 @@
+export default function ArrowRight() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.541584 6.99984C0.541584 6.65466 0.821406 6.37484 1.16658 6.37484H12.8333C13.1784 6.37484 13.4583 6.65466 13.4583 6.99984C13.4583 7.34502 13.1784 7.62484 12.8333 7.62484H1.16658C0.821406 7.62484 0.541584 7.34502 0.541584 6.99984Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.55798 0.724562C6.80205 0.480484 7.19778 0.480484 7.44186 0.724562L13.2752 6.5579C13.5193 6.80197 13.5193 7.1977 13.2752 7.44178L7.44186 13.2751C7.19778 13.5192 6.80205 13.5192 6.55798 13.2751C6.3139 13.031 6.3139 12.6353 6.55798 12.3912L11.9494 6.99984L6.55798 1.60845C6.3139 1.36437 6.3139 0.96864 6.55798 0.724562Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/Cake.jsx b/client/src/assets/Team/Cake.jsx
new file mode 100644
index 000000000..8a1380a1c
--- /dev/null
+++ b/client/src/assets/Team/Cake.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+const Cake = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 8.25V6"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 6C16.3312 4.5 12 0.75 12 0.75C12 0.75 7.5 4.5 12 6Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.1875 11.8125C15.1875 12.6579 14.8517 13.4686 14.2539 14.0664C13.6561 14.6642 12.8454 15 12 15C11.1546 15 10.3439 14.6642 9.7461 14.0664C9.14832 13.4686 8.8125 12.6579 8.8125 11.8125"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.81252 11.8125C8.8127 12.6466 8.4859 13.4476 7.90224 14.0435C7.31859 14.6395 6.5246 14.9828 5.69064 15C3.90002 15.0375 2.43752 13.5375 2.43752 11.7469V10.5C2.43628 10.2042 2.49363 9.91106 2.60626 9.63752C2.7189 9.36397 2.88458 9.11544 3.09376 8.90626C3.30294 8.69708 3.55147 8.5314 3.82502 8.41876C4.09856 8.30613 4.3917 8.24878 4.68752 8.25002H19.3125C19.6083 8.24878 19.9015 8.30613 20.175 8.41876C20.4486 8.5314 20.6971 8.69708 20.9063 8.90626C21.1155 9.11544 21.2811 9.36397 21.3938 9.63752C21.5064 9.91106 21.5638 10.2042 21.5625 10.5V11.7469C21.5625 13.5375 20.1 15.0375 18.3094 15C17.4754 14.9828 16.6814 14.6395 16.0978 14.0435C15.5141 13.4476 15.1873 12.6466 15.1875 11.8125"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.25 14.3721V19.5002C20.25 19.6991 20.171 19.8899 20.0303 20.0305C19.8897 20.1712 19.6989 20.2502 19.5 20.2502H4.5C4.30109 20.2502 4.11032 20.1712 3.96967 20.0305C3.82902 19.8899 3.75 19.6991 3.75 19.5002V14.3721"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Cake
diff --git a/client/src/assets/Team/CaretDown.jsx b/client/src/assets/Team/CaretDown.jsx
new file mode 100644
index 000000000..b885247a1
--- /dev/null
+++ b/client/src/assets/Team/CaretDown.jsx
@@ -0,0 +1,13 @@
+export default function CaretDown() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.25 7.5L10 13.75L3.75 7.5"
+        stroke="#5BD424"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/CaretUp.jsx b/client/src/assets/Team/CaretUp.jsx
new file mode 100644
index 000000000..769f0afc6
--- /dev/null
+++ b/client/src/assets/Team/CaretUp.jsx
@@ -0,0 +1,12 @@
+export default function CaretUp() {
+  return (
+    <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.55806 6.30806C9.80214 6.06398 10.1979 6.06398 10.4419 6.30806L16.6919 12.5581C16.936 12.8021 16.936 13.1979 16.6919 13.4419C16.4479 13.686 16.0521 13.686 15.8081 13.4419L10 7.63388L4.19194 13.4419C3.94786 13.686 3.55214 13.686 3.30806 13.4419C3.06398 13.1979 3.06398 12.8021 3.30806 12.5581L9.55806 6.30806Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/Chat.jsx b/client/src/assets/Team/Chat.jsx
new file mode 100644
index 000000000..d55feb85a
--- /dev/null
+++ b/client/src/assets/Team/Chat.jsx
@@ -0,0 +1,24 @@
+export default function Chat() {
+  return (
+    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.89321 1.60477C7.33336 1.50701 5.79147 1.98198 4.55699 2.9405C3.32252 3.89902 2.48036 5.27517 2.18863 6.81061C1.89689 8.34605 2.17563 9.93518 2.97253 11.2797C3.05414 11.4173 3.07565 11.5825 3.03205 11.7365L2.34814 14.152L4.76367 13.4681C4.91767 13.4245 5.08281 13.446 5.22049 13.5276C6.56497 14.3245 8.1541 14.6033 9.68954 14.3115C11.225 14.0198 12.6011 13.1776 13.5597 11.9432C14.5182 10.7087 14.9931 9.1668 14.8954 7.60695C14.7976 6.0471 14.1339 4.57657 13.0287 3.47142C11.9236 2.36628 10.4531 1.70252 8.89321 1.60477ZM3.84074 2.01804C5.29992 0.885046 7.12248 0.323625 8.96626 0.439175C10.81 0.554724 12.5482 1.3393 13.8546 2.64561C15.1609 3.95191 15.9454 5.69012 16.061 7.5339C16.1765 9.37768 15.6151 11.2002 14.4821 12.6594C13.3491 14.1186 11.7225 15.114 9.90754 15.4589C8.17618 15.7878 6.38705 15.5032 4.84632 14.6585L2.66036 15.2774C2.46139 15.335 2.25062 15.3384 2.04991 15.287C1.8482 15.2354 1.66409 15.1305 1.51687 14.9833C1.36965 14.8361 1.26474 14.652 1.21315 14.4502C1.16179 14.2495 1.16513 14.0387 1.22278 13.8397L1.84166 11.6538C0.997005 10.1131 0.712308 8.32398 1.04127 6.59261C1.38611 4.77769 2.38156 3.15104 3.84074 2.01804Z"
+        fill="white"
+      />
+      <path
+        d="M8.4994 8.87666C8.98316 8.87666 9.37531 8.4845 9.37531 8.00075C9.37531 7.51699 8.98316 7.12484 8.4994 7.12484C8.01565 7.12484 7.62349 7.51699 7.62349 8.00075C7.62349 8.4845 8.01565 8.87666 8.4994 8.87666Z"
+        fill="white"
+      />
+      <path
+        d="M4.99574 8.87666C5.47949 8.87666 5.87165 8.4845 5.87165 8.00075C5.87165 7.51699 5.47949 7.12484 4.99574 7.12484C4.51199 7.12484 4.11983 7.51699 4.11983 8.00075C4.11983 8.4845 4.51199 8.87666 4.99574 8.87666Z"
+        fill="white"
+      />
+      <path
+        d="M12.0031 8.87666C12.4868 8.87666 12.879 8.4845 12.879 8.00075C12.879 7.51699 12.4868 7.12484 12.0031 7.12484C11.5193 7.12484 11.1272 7.51699 11.1272 8.00075C11.1272 8.4845 11.5193 8.87666 12.0031 8.87666Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/CheckCircle.jsx b/client/src/assets/Team/CheckCircle.jsx
new file mode 100644
index 000000000..9445de108
--- /dev/null
+++ b/client/src/assets/Team/CheckCircle.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export function CheckCircle() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_702_1861)">
+        <path
+          d="M7.85721 0.714355C6.44449 0.714355 5.06349 1.13328 3.88886 1.91814C2.71422 2.70301 1.7987 3.81857 1.25808 5.12376C0.71745 6.42894 0.575998 7.86513 0.851607 9.25071C1.12722 10.6363 1.80751 11.909 2.80645 12.908C3.8054 13.9069 5.07813 14.5872 6.46371 14.8628C7.84929 15.1384 9.28548 14.997 10.5907 14.4563C11.8959 13.9157 13.0114 13.0002 13.7963 11.8256C14.5811 10.6509 15.0001 9.26993 15.0001 7.85721C14.9964 5.96392 14.2427 4.14922 12.904 2.81046C11.5652 1.4717 9.7505 0.717986 7.85721 0.714355ZM11.2569 6.60721L7.23221 10.4534C7.12816 10.5512 6.99045 10.6053 6.8476 10.6045C6.77778 10.6055 6.70845 10.5926 6.64361 10.5667C6.57878 10.5408 6.51972 10.5022 6.46985 10.4534L4.45749 8.53029C4.40167 8.48159 4.35628 8.42211 4.32404 8.35542C4.2918 8.28874 4.27337 8.21622 4.26987 8.14223C4.26637 8.06824 4.27787 7.9943 4.30367 7.92487C4.32947 7.85544 4.36904 7.79194 4.42001 7.73819C4.47098 7.68444 4.53229 7.64155 4.60026 7.6121C4.66823 7.58265 4.74145 7.56725 4.81552 7.56682C4.88959 7.56639 4.96298 7.58094 5.03129 7.6096C5.09959 7.63826 5.16139 7.68043 5.21298 7.73358L6.8476 9.29265L10.5014 5.81051C10.6083 5.7173 10.747 5.669 10.8886 5.6757C11.0303 5.6824 11.1638 5.74358 11.2614 5.84646C11.3589 5.94934 11.4129 6.08595 11.4121 6.22772C11.4113 6.3695 11.3557 6.50547 11.2569 6.60721Z"
+          fill="#5BD424"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_702_1861">
+          <rect
+            width="14.2857"
+            height="14.2857"
+            fill="white"
+            transform="translate(0.714355 0.714355)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/Crown.jsx b/client/src/assets/Team/Crown.jsx
new file mode 100644
index 000000000..c4680572f
--- /dev/null
+++ b/client/src/assets/Team/Crown.jsx
@@ -0,0 +1,34 @@
+const Crown = () => {
+  return (
+    <svg
+      width="60"
+      height="60"
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <rect
+        x="26.7136"
+        y="0.855957"
+        width="42"
+        height="42"
+        transform="rotate(38 26.7136 0.855957)"
+        fill="url(#pattern0)"
+      />
+      <defs>
+        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use xlinkHref="#image0_462_3865" transform="scale(0.00625)" />
+        </pattern>
+        <image
+          id="image0_462_3865"
+          width="160"
+          height="160"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  )
+}
+
+export default Crown
diff --git a/client/src/assets/Team/PencilSimple.jsx b/client/src/assets/Team/PencilSimple.jsx
new file mode 100644
index 000000000..842af0c2c
--- /dev/null
+++ b/client/src/assets/Team/PencilSimple.jsx
@@ -0,0 +1,18 @@
+export function PencilSimple() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.6422 2.23078C12.7951 2.16676 12.9592 2.13379 13.125 2.13379C13.2908 2.13379 13.4549 2.16676 13.6078 2.23078C13.7598 2.29445 13.8978 2.38756 14.0137 2.50475L17.4953 5.9863C17.6124 6.1022 17.7055 6.24013 17.7692 6.39216C17.8332 6.54506 17.8661 6.70917 17.8661 6.87493C17.8661 7.0407 17.8332 7.2048 17.7692 7.3577C17.7055 7.50973 17.6124 7.64766 17.4953 7.76356L8.12163 17.1372L8.12053 17.1383C8.00475 17.2535 7.86738 17.3447 7.71628 17.4068C7.56558 17.4687 7.40418 17.5003 7.24127 17.4999C7.24085 17.4999 7.24042 17.4999 7.24 17.4999L7.24219 16.875L7.24127 17.4999H3.75C3.41848 17.4999 3.10054 17.3682 2.86612 17.1338C2.6317 16.8994 2.5 16.5815 2.5 16.2499V12.7587C2.5 12.7591 2.5 12.7595 2.5 12.7599L3.125 12.7577L2.5 12.7587M12.6422 2.23078C12.4902 2.29443 12.3523 2.38751 12.2364 2.50466L12.6422 2.23078ZM3.75 12.7588V16.2499H7.24112L16.6161 6.87492L16.6127 6.87157L13.125 3.3838L13.1216 3.3872L3.75 12.7588Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.1831 4.55806C10.4271 4.31398 10.8229 4.31398 11.0669 4.55806L15.4419 8.93306C15.686 9.17714 15.686 9.57286 15.4419 9.81694C15.1979 10.061 14.8021 10.061 14.5581 9.81694L10.1831 5.44194C9.93898 5.19786 9.93898 4.80214 10.1831 4.55806Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/Person.jsx b/client/src/assets/Team/Person.jsx
new file mode 100644
index 000000000..1c73cab60
--- /dev/null
+++ b/client/src/assets/Team/Person.jsx
@@ -0,0 +1,20 @@
+export default function Person() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.6667 17.5V15.8333C16.6667 14.9493 16.3155 14.1014 15.6904 13.4763C15.0653 12.8512 14.2174 12.5 13.3334 12.5H6.66671C5.78265 12.5 4.93481 12.8512 4.30968 13.4763C3.68456 14.1014 3.33337 14.9493 3.33337 15.8333V17.5"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.99996 9.16667C11.8409 9.16667 13.3333 7.67428 13.3333 5.83333C13.3333 3.99238 11.8409 2.5 9.99996 2.5C8.15901 2.5 6.66663 3.99238 6.66663 5.83333C6.66663 7.67428 8.15901 9.16667 9.99996 9.16667Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/SelectedIcon.jsx b/client/src/assets/Team/SelectedIcon.jsx
new file mode 100644
index 000000000..acf4f4f37
--- /dev/null
+++ b/client/src/assets/Team/SelectedIcon.jsx
@@ -0,0 +1,10 @@
+export function SelectedIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9959 5.87952 15.1518 3.84705 13.6524 2.34764C12.153 0.848226 10.1205 0.00406613 8 0ZM11.8077 6.6L7.3 10.9077C7.18347 11.0173 7.02922 11.0779 6.86923 11.0769C6.79103 11.078 6.71338 11.0637 6.64077 11.0346C6.56815 11.0056 6.50201 10.9624 6.44616 10.9077L4.19231 8.75384C4.1298 8.6993 4.07896 8.63269 4.04285 8.558C4.00673 8.48331 3.9861 8.40209 3.98218 8.31922C3.97826 8.23635 3.99113 8.15354 4.02003 8.07578C4.04893 7.99801 4.09325 7.92689 4.15034 7.86669C4.20742 7.8065 4.27609 7.75846 4.35221 7.72548C4.42833 7.69249 4.51034 7.67524 4.5933 7.67476C4.67626 7.67428 4.75846 7.69058 4.83496 7.72267C4.91146 7.75477 4.98068 7.802 5.03846 7.86154L6.86923 9.60769L10.9615 5.70769C11.0812 5.6033 11.2366 5.5492 11.3952 5.5567C11.5538 5.56421 11.7034 5.63273 11.8126 5.74796C11.9219 5.86318 11.9824 6.01618 11.9815 6.17497C11.9806 6.33376 11.9183 6.48605 11.8077 6.6Z"
+        fill="#5BD424"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/ThinClose.jsx b/client/src/assets/Team/ThinClose.jsx
new file mode 100644
index 000000000..0849c5f11
--- /dev/null
+++ b/client/src/assets/Team/ThinClose.jsx
@@ -0,0 +1,8 @@
+export function ThinClose() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12.5 3.5L3.5 12.5" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M12.5 12.5L3.5 3.5" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/UploadSymbol.jsx b/client/src/assets/Team/UploadSymbol.jsx
new file mode 100644
index 000000000..d1b0dccf4
--- /dev/null
+++ b/client/src/assets/Team/UploadSymbol.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export function UploadSymbol() {
+  return (
+    <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4697 3.71967C11.7626 3.42678 12.2374 3.42678 12.5303 3.71967L16.4678 7.65717C16.7607 7.95006 16.7607 8.42494 16.4678 8.71783C16.1749 9.01072 15.7001 9.01072 15.4072 8.71783L12 5.31066L8.59283 8.71783C8.29994 9.01072 7.82506 9.01072 7.53217 8.71783C7.23928 8.42494 7.23928 7.95006 7.53217 7.65717L11.4697 3.71967Z"
+        fill="#5BD424"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3.5C12.4142 3.5 12.75 3.83579 12.75 4.25V14.75C12.75 15.1642 12.4142 15.5 12 15.5C11.5858 15.5 11.25 15.1642 11.25 14.75V4.25C11.25 3.83579 11.5858 3.5 12 3.5Z"
+        fill="#5BD424"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V20H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20C21 20.3978 20.842 20.7794 20.5607 21.0607C20.2794 21.342 19.8978 21.5 19.5 21.5H4.5C4.10218 21.5 3.72065 21.342 3.43934 21.0607C3.15804 20.7794 3 20.3978 3 20V14.75C3 14.3358 3.33579 14 3.75 14Z"
+        fill="#5BD424"
+      />
+    </svg>
+  )
+}
diff --git a/client/src/assets/Team/UserPlus.jsx b/client/src/assets/Team/UserPlus.jsx
new file mode 100644
index 000000000..a602b1a6c
--- /dev/null
+++ b/client/src/assets/Team/UserPlus.jsx
@@ -0,0 +1,36 @@
+const UserPlus = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.3334 17.5V15.8333C13.3334 14.9493 12.9822 14.1014 12.3571 13.4763C11.7319 12.8512 10.8841 12.5 10 12.5H4.16671C3.28265 12.5 2.43481 12.8512 1.80968 13.4763C1.18456 14.1014 0.833374 14.9493 0.833374 15.8333V17.5"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.08333 9.16667C8.92428 9.16667 10.4167 7.67428 10.4167 5.83333C10.4167 3.99238 8.92428 2.5 7.08333 2.5C5.24238 2.5 3.75 3.99238 3.75 5.83333C3.75 7.67428 5.24238 9.16667 7.08333 9.16667Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6666 6.6665V11.6665"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.1666 9.1665H14.1666"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default UserPlus
diff --git a/client/src/assets/Team/Users.jsx b/client/src/assets/Team/Users.jsx
new file mode 100644
index 000000000..a90090c06
--- /dev/null
+++ b/client/src/assets/Team/Users.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const Users = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Users
diff --git a/client/src/components/CreateTeam/CreateTeam.js b/client/src/components/CreateTeam/CreateTeam.js
index b8246e12d..3a888f75a 100644
--- a/client/src/components/CreateTeam/CreateTeam.js
+++ b/client/src/components/CreateTeam/CreateTeam.js
@@ -1,14 +1,17 @@
 // * Modules
-import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 
 // API
 import { useCheckAuth } from '../../api/hooks/auth/useCheckAuth'
+import { useUpdateAvatar } from '../../api/hooks/auth/useUpdateAvatar'
 import { useCreateTeam } from '../../api/hooks/team/useCreateTeam'
 import { defaultTeamAvatars } from '../../constants/teamFormData'
 // * Assets
 import { createTeamValidation } from '../../schemas'
 import Loader from '../../shared/components/Loader/Loader'
 import { errorToaster } from '../../shared/components/Toasters/Error.toaster'
+import { setIsFinishRegistrationStarted, setStep } from '../../store/reducers/RegistrationAuth'
 import { transformToCreateTeamDto } from '../../utils/transformToCreateTeamDto'
 import MultiStepRegistration from '../RegistrationPipeline/components/MultiStepRegistration/MultiStepRegistration'
 import AvatarForm from '../RegistrationPipeline/components/RegistrationForms/AvatarForm/AvatarForm'
@@ -16,14 +19,21 @@ import InfoForm from '../RegistrationPipeline/components/RegistrationForms/InfoF
 import InviteMembersForm from '../RegistrationPipeline/components/RegistrationForms/InviteMembersForm/InviteMembersForm'
 
 function CreateTeam() {
-  const [teamAvatar, setTeamAvatar] = useState(null)
+  const { mutate: updateAvatar, isLoading: isAvatarUpdating } = useUpdateAvatar('teams')
+
   const {
     mutate: createTeam,
     isLoading: isCreatingTeam,
     isError: isCreatingTeamError,
     error,
-  } = useCreateTeam(teamAvatar)
+  } = useCreateTeam()
+
   const { data: user, isLoading: isUserLoading } = useCheckAuth()
+
+  const dispatch = useDispatch()
+
+  const navigate = useNavigate()
+
   const userId = user?._id
   const steps = [
     { component: <InfoForm />, name: 'Create team', isOptional: false },
@@ -54,7 +64,7 @@ function CreateTeam() {
     file: null,
   }
 
-  const submitForm = async (formData) => {
+  const submitForm = (formData) => {
     let membersModified = transformToCreateTeamDto(formData.members)
 
     const teamData = {
@@ -67,9 +77,22 @@ function CreateTeam() {
       members: membersModified.members,
     }
 
-    setTeamAvatar(formData.file)
-
-    createTeam(teamData)
+    createTeam(teamData, {
+      onSuccess: (data) => {
+        if (formData.file) {
+          updateAvatar(
+            { teamID: data._id, image: formData.file.split(',')[1] },
+            {
+              onSuccess: (updatedTeam) => {
+                dispatch(setIsFinishRegistrationStarted(false))
+                dispatch(setStep(1))
+                navigate(`/team/${updatedTeam.data._id}`)
+              },
+            },
+          )
+        }
+      },
+    })
   }
 
   if (isCreatingTeamError && !isCreatingTeam) {
@@ -78,7 +101,7 @@ function CreateTeam() {
 
   return (
     <>
-      {(isUserLoading || isCreatingTeam) && <Loader />}
+      {(isUserLoading || isCreatingTeam || isAvatarUpdating) && <Loader />}
       <MultiStepRegistration
         steps={steps}
         validationSchema={createTeamValidation}
diff --git a/client/src/components/FilterSelect/FilterSelect.js b/client/src/components/FilterSelect/FilterSelect.js
new file mode 100644
index 000000000..158d9dc89
--- /dev/null
+++ b/client/src/components/FilterSelect/FilterSelect.js
@@ -0,0 +1,49 @@
+import { useRef, useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ArrowDown from '../../assets/SearchPanel/ArrowDown'
+import { useOutsideClick } from '../../hooks/useOutsideClick'
+
+import { FilterSelectBox, FilterSelectBtn, OptionItem, OptionsList } from './FilterSelect.styles'
+
+const FilterSelect = ({ sliceName, currFilterIndex, setCurrFilterIndex }) => {
+  const filtersArr = useSelector((state) => state[sliceName])
+
+  const currFilter = filtersArr[currFilterIndex]
+
+  const [selectActive, setSelectActive] = useState(false)
+  const selectRef = useRef(null)
+
+  useOutsideClick(selectRef, () => setSelectActive(false))
+
+  const onChangeFilter = (index) => {
+    setCurrFilterIndex(index)
+    setSelectActive(false)
+  }
+
+  return (
+    <FilterSelectBox isActive={selectActive} ref={selectRef}>
+      <FilterSelectBtn active={selectActive} onClick={() => setSelectActive((prev) => !prev)}>
+        <p>{currFilter.text}</p>
+        <ArrowDown />
+      </FilterSelectBtn>
+      {selectActive && (
+        <OptionsList>
+          {filtersArr.map((item, i) => {
+            return (
+              <OptionItem
+                isActive={currFilter.name === item.name}
+                onClick={() => onChangeFilter(i)}
+                key={item.name}
+              >
+                {item.text}
+              </OptionItem>
+            )
+          })}
+        </OptionsList>
+      )}
+    </FilterSelectBox>
+  )
+}
+
+export default FilterSelect
diff --git a/client/src/components/FilterSelect/FilterSelect.styles.js b/client/src/components/FilterSelect/FilterSelect.styles.js
new file mode 100644
index 000000000..c9b762751
--- /dev/null
+++ b/client/src/components/FilterSelect/FilterSelect.styles.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+
+export const FilterSelectBox = styled.div`
+  position: relative;
+  background-color: ${(props) => (props.isActive ? '#2f3239' : 'transparent')};
+  border-radius: ${(props) => (props.isActive ? '10px 0px 0px 10px' : '0')};
+`
+
+export const FilterSelectBtn = styled.div`
+  cursor: pointer;
+  padding: 8px 11px;
+  width: 170px;
+  border-right: 1px solid #46a11b;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  p {
+    font-family: 'NoirPro-Regular';
+    font-size: 16px;
+    line-height: 140%;
+    color: #fff;
+  }
+  svg {
+    transition: transform 0.2s;
+    transform: rotate(${(props) => (props.active ? '180deg' : '0deg')});
+  }
+`
+
+export const OptionsList = styled.ul`
+  padding: 8px 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  z-index: 250;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  list-style: none;
+  background-color: #2f3239;
+  box-shadow: 0px 4px 24px rgba(17, 20, 27, 0.25);
+  border-radius: 5px;
+  width: 170px;
+`
+
+export const OptionItem = styled.li`
+  cursor: pointer;
+  padding: 4px 8px 4px 16px;
+  background-color: ${(props) => (props.isActive ? '#46A11B' : 'transparent')};
+  &:hover {
+    background-color: ${(props) => (props.isActive ? '#46A11B' : '#27431f')};
+  }
+`
diff --git a/client/src/components/Forms/NoTeamForm/NoTeamForm.js b/client/src/components/Forms/NoTeamForm/NoTeamForm.js
deleted file mode 100644
index b012c2aaa..000000000
--- a/client/src/components/Forms/NoTeamForm/NoTeamForm.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// * Modules
-import { useDispatch } from 'react-redux'
-import { Navigate, useNavigate } from 'react-router-dom'
-
-// * Assets
-import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
-import ROUTES from '../../../constants/routes'
-import CustomButton from '../../../shared/components/CustomButton/CustomButton'
-import { startRegistration } from '../../../store/reducers/RegistrationAuth'
-
-// * Styles
-import { ButtonContainer, Card, CardContainer, Text, TextContainer } from './NoTeamForm.styles'
-
-function NoTeamForm() {
-  const navigate = useNavigate()
-  const dispatch = useDispatch()
-  const { data: user } = useCheckAuth()
-
-  const handleCreate = () => {
-    if (!user?.isRegistered) {
-      navigate(ROUTES.login)
-    } else {
-      dispatch(startRegistration())
-      navigate('/teams/create', { replace: true })
-    }
-  }
-
-  const handleJoin = () => {
-    if (!user?.isRegistered) {
-      navigate(ROUTES.login)
-    } else {
-      navigate('/teams', { replace: true })
-    }
-  }
-
-  if (user?.userTeam) {
-    return <Navigate to={`/team/${user.team._id}`} />
-  }
-
-  return (
-    <CardContainer>
-      <Card>
-        <TextContainer>
-          <Text>You don't have a team yet!</Text>
-          <Text>Let's create it...</Text>
-        </TextContainer>
-        <ButtonContainer>
-          <CustomButton onClick={handleCreate}>Create team</CustomButton>
-          <CustomButton onClick={handleJoin}>Join existing</CustomButton>
-        </ButtonContainer>
-      </Card>
-    </CardContainer>
-  )
-}
-
-export default NoTeamForm
diff --git a/client/src/components/Forms/NoTeamForm/NoTeamForm.styles.js b/client/src/components/Forms/NoTeamForm/NoTeamForm.styles.js
deleted file mode 100644
index 7f709aad4..000000000
--- a/client/src/components/Forms/NoTeamForm/NoTeamForm.styles.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import styled from 'styled-components'
-
-import { BLACK, GREEN, WHITE } from '../../../constants/colors'
-
-export const Container = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  background: ${BLACK.background};
-`
-
-export const CardContainer = styled.div`
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-export const Card = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 570px;
-  height: 370px;
-  background: #1a1c22;
-  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
-  border-radius: 15px;
-  margin: 215px 355px 215px 355px;
-`
-
-export const TextContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: left;
-`
-
-export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '500'};
-  font-size: ${(props) => props.fontSize || '24px'};
-  margin: ${(props) => props.margin || '0 0 0 0'};
-  color: ${(props) => props.color || WHITE.main};
-`
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 50px 25px 0 0px;
-  gap: 30px;
-`
diff --git a/client/src/components/Forms/Page404Form/Page404Form.js b/client/src/components/Forms/Page404Form/Page404Form.js
index 06bc458f0..35e7d729a 100644
--- a/client/src/components/Forms/Page404Form/Page404Form.js
+++ b/client/src/components/Forms/Page404Form/Page404Form.js
@@ -14,11 +14,11 @@ import {
   Text,
 } from './Page404Form.styles'
 
-const Page404Form = () => {
+const Page404Form = ({ paddingLeft = '0', findText = `Couldn't find the requested page.` }) => {
   const navigate = useNavigate()
 
   return (
-    <Container>
+    <Container paddingLeft={paddingLeft}>
       <InfoContainer>
         <LeftContainer>
           <Text fontWeight="600" fontSize="7rem" textAlign="left">
@@ -26,7 +26,7 @@ const Page404Form = () => {
           </Text>
           <Text>Oops... it looks like you're lost.</Text>
           <Text fontWeight="400" fontSize="1rem">
-            Couldn't find the requested page.
+            {findText}
           </Text>
           <Button onClick={() => navigate('/', { replace: true })}>Return Home</Button>
         </LeftContainer>
diff --git a/client/src/components/Forms/Page404Form/Page404Form.styles.js b/client/src/components/Forms/Page404Form/Page404Form.styles.js
index 93d1e4204..49a800838 100644
--- a/client/src/components/Forms/Page404Form/Page404Form.styles.js
+++ b/client/src/components/Forms/Page404Form/Page404Form.styles.js
@@ -7,6 +7,7 @@ export const Container = styled.div`
   background: #26292b;
   align-items: center;
   justify-content: center;
+  padding-left: ${(props) => props.paddingLeft || '0'};
 `
 export const InfoContainer = styled.div`
   display: flex;
diff --git a/client/src/components/Forms/TeamForm/TeamForm.js b/client/src/components/Forms/TeamForm/TeamForm.js
deleted file mode 100644
index e9364ba56..000000000
--- a/client/src/components/Forms/TeamForm/TeamForm.js
+++ /dev/null
@@ -1,162 +0,0 @@
-// * Modules
-import React, { useState } from 'react'
-// * Redux
-import { Navigate } from 'react-router-dom'
-import Box from '@mui/material/Box'
-import Modal from '@mui/material/Modal'
-
-// * API
-import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
-import { useDelete } from '../../../api/hooks/team/useDelete'
-import { useGetTeamData } from '../../../api/hooks/team/useGetTeamData'
-import { useInviteUser } from '../../../api/hooks/team/useInviteUser'
-import { useTeamMembership } from '../../../api/hooks/team/useTeamMembership'
-import Add from '../../../assets/TeamPage/Add'
-import Delete from '../../../assets/TeamPage/Delete'
-import { LOCAL_PATH } from '../../../http'
-import Loader from '../../../shared/components/Loader/Loader'
-
-// * Styles
-import {
-  ActionButton,
-  ButtonCardContent,
-  Card,
-  CardContainer,
-  CircleContainer,
-  Container,
-  CreateButton,
-  Input,
-  LeftContainer,
-  MainCardContent,
-  RightContainer,
-  style,
-  TeamImgBorder,
-  Text,
-  UserCard,
-  UserImg,
-  UserInfo,
-} from './TeamForm.styles'
-import tempImg from './zxc1.jpg'
-
-function TeamForm() {
-  const [open, setOpen] = useState(false)
-  const [inviteActive, setInviteActive] = useState(false)
-  const [email, setEmail] = useState('')
-  const { data: user, isFetching: isUserDataLoading } = useCheckAuth()
-  const teamId = user?.team?._id
-  const userId = user?._id
-  const { data: team, isLoading: isUserTeamLoading } = useGetTeamData(teamId)
-  const { mutate: deleteTeam, isLoading: isDeleting } = useDelete()
-  const { mutate: leaveTeam } = useTeamMembership('leave')
-  const { mutate: inviteUser, isLoading: isInviting } = useInviteUser(handleClose)
-
-  const createDate = new Date(team?.createdAt)
-    .toLocaleDateString({}, { timeZone: 'UTC', month: 'long', day: '2-digit', year: 'numeric' })
-    .replace(',', '')
-  const handleOpenInvite = () => {
-    setOpen(true)
-    setInviteActive(true)
-  }
-
-  const handleOpenDelete = () => setOpen(true)
-  const handleDelete = () => deleteTeam(team?._id)
-
-  function handleClose() {
-    setOpen(false)
-    setInviteActive(false)
-  }
-
-  const handleInvite = async () => {
-    const result = inviteUser({ email, userId, teamId })
-  }
-
-  const handleLeave = () => leaveTeam({ userId, teamId })
-
-  if (isUserTeamLoading || isDeleting || isUserDataLoading || isInviting) {
-    return <Loader />
-  }
-  if (!team) {
-    return <Navigate to={'/team'} />
-  }
-
-  return (
-    <Container>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          {inviteActive ? (
-            <>
-              <Text margin="0">Send invite to your team!</Text>
-              <Input
-                placeholder="Email"
-                onChange={(e) => setEmail(e.target.value)}
-                value={email}
-              ></Input>
-              <CreateButton onClick={handleInvite}>Send</CreateButton>
-            </>
-          ) : (
-            <>
-              <Text margin="0">Do you want to delete this team?</Text>
-              <CreateButton onClick={handleDelete}>Yes</CreateButton>
-            </>
-          )}
-        </Box>
-      </Modal>
-      <CardContainer>
-        <Card>
-          <MainCardContent>
-            <LeftContainer>
-              {/* TODO: find team members in useEffect. */}
-              {team.members.map((member) => (
-                <UserCard key={member._id}>
-                  <UserImg
-                    src={
-                      member?.image
-                        ? member.image
-                        : 'https://i.pinimg.com/474x/41/26/bd/4126bd6b08769ed2c52367fa813c721e.jpg'
-                    }
-                  />
-                  <UserInfo>
-                    <Text fontSize="14px" fontWeight="100">
-                      {member.username}
-                    </Text>
-                    <Text fontSize="14px" alignment="start">
-                      {member.concentration}
-                    </Text>
-                  </UserInfo>
-                </UserCard>
-              ))}
-            </LeftContainer>
-            <RightContainer>
-              <CircleContainer>
-                <Text>{team.name}</Text>
-              </CircleContainer>
-              <TeamImgBorder src={team?.image ? team.image : tempImg} />
-              <Text fontSize="16px" fontWeight="400">
-                Creation date: {createDate}
-              </Text>
-              <CreateButton>Edit</CreateButton>
-            </RightContainer>
-          </MainCardContent>
-          <ButtonCardContent>
-            <ActionButton onClick={handleOpenInvite}>
-              <Add />
-            </ActionButton>
-            <ActionButton onClick={handleOpenDelete}>
-              <Delete />
-            </ActionButton>
-            <ActionButton style={{ color: 'red' }} onClick={handleLeave}>
-              Leave
-            </ActionButton>
-          </ButtonCardContent>
-        </Card>
-      </CardContainer>
-    </Container>
-  )
-}
-
-export default TeamForm
diff --git a/client/src/components/Forms/TeamForm/TeamForm.styles.js b/client/src/components/Forms/TeamForm/TeamForm.styles.js
deleted file mode 100644
index a85fb6c96..000000000
--- a/client/src/components/Forms/TeamForm/TeamForm.styles.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import styled from 'styled-components'
-
-import { BLACK, GREEN, WHITE } from '../../../constants/colors'
-
-export const Container = styled.div`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  background: ${BLACK.background};
-`
-
-export const CardContainer = styled.div`
-  min-height: 100vh;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-export const Card = styled.div`
-  width: 980px;
-  height: 600px;
-  background: #1a1c22;
-  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
-  border-radius: 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 30px;
-`
-
-export const MainCardContent = styled.div`
-  display: flex;
-  width: 100%;
-  gap: 30px;
-  justify-content: center;
-  align-items: center;
-`
-
-export const ButtonCardContent = styled.div`
-  width: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 30px;
-`
-
-export const LeftContainer = styled.div`
-  width: 50%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  row-gap: 40px;
-  align-items: start;
-`
-
-export const UserCard = styled.div`
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-  align-items: center;
-`
-
-export const UserImg = styled.img`
-  width: 82px;
-  height: 82px;
-  border-radius: 50%;
-`
-
-export const UserInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: start;
-`
-
-export const RightContainer = styled.div`
-  height: 453px;
-  width: 366px;
-  display: flex;
-  border-radius: 15px;
-  justify-content: space-evenly;
-  align-items: center;
-  flex-direction: column;
-  background: #26292b;
-`
-
-export const CircleContainer = styled.div`
-  width: 181px;
-  height: 38px;
-  justify-content: center;
-  justify-items: center;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  border-radius: 13px;
-  border: 1px solid #a1a1a1;
-`
-
-export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '500'};
-  font-size: ${(props) => props.fontSize || '18px'};
-  color: ${(props) => props.color || WHITE.main};
-  text-align: ${(props) => props.alignment || 'center'};
-  margin: ${(props) => props.margin || '0'};
-`
-
-export const TeamImgBorder = styled.img`
-  width: 253px;
-  height: 253px;
-  border-radius: 50%;
-`
-
-export const CreateButton = styled.button`
-  width: 146px;
-  height: 44px;
-  background: rgba(93, 157, 11, 0.5);
-  border-radius: 10px;
-  font-size: 16px;
-  font-weight: 500;
-  color: white;
-  border: none;
-  outline: none;
-  cursor: pointer;
-`
-
-export const ActionButton = styled.button`
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background: #25282a;
-  outline: none;
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`
-
-export const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: '#26292B',
-  borderRadius: '15px',
-  boxShadow: 14,
-  p: 4,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexDirection: 'column',
-  gap: '25px',
-}
-
-export const Input = styled.input`
-  outline: 0;
-  border-width: 0 0 1.5px;
-  border-color: ${(props) => props.borderColor || 'rgba(93, 157, 11, 0.5)'};
-  background: inherit;
-  height: ${(props) => props.height || '40px'};
-  font-size: 18px;
-  margin: ${(props) => props.margin || '0'};
-  color: ${WHITE.main};
-
-  &:focus {
-    border-color: ${WHITE.main};
-  }
-`
diff --git a/client/src/components/Forms/TeamForm/zxc1.jpg b/client/src/components/Forms/TeamForm/zxc1.jpg
deleted file mode 100644
index 06739f6dd..000000000
Binary files a/client/src/components/Forms/TeamForm/zxc1.jpg and /dev/null differ
diff --git a/client/src/components/Forms/TeamsList/TeamsList.js b/client/src/components/Forms/TeamsList/TeamsList.js
deleted file mode 100644
index 9d3e56fc0..000000000
--- a/client/src/components/Forms/TeamsList/TeamsList.js
+++ /dev/null
@@ -1,132 +0,0 @@
-// * Modules
-import { useEffect, useState } from 'react'
-import { Toaster } from 'react-hot-toast'
-// * Redux
-import { useDispatch } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import Box from '@mui/material/Box'
-import Modal from '@mui/material/Modal'
-
-// * API
-import teamsAPI from '../../../api/endpoints/team'
-import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
-import { useTeamMembership } from '../../../api/hooks/team/useTeamMembership'
-
-// * Styles
-import {
-  Card,
-  CardContainer,
-  ColumnNames,
-  Container,
-  style,
-  TeamButton,
-  TeamData,
-  TeamImage,
-  Text,
-} from './TeamsList.styles'
-
-function TeamsList() {
-  const navigate = useNavigate()
-
-  const { data: user } = useCheckAuth()
-
-  const [teams, setTeams] = useState([])
-  const [open, setOpen] = useState(false)
-  const [selectedTeam, setSelectedTeam] = useState({})
-  const { mutateAsync: joinUser } = useTeamMembership('join')
-  const userId = user?._id
-
-  useEffect(() => {
-    const makeRequest = async () => {
-      const teams = await teamsAPI.getAllTeams()
-
-      setTeams(teams.data)
-    }
-
-    makeRequest()
-  }, [])
-
-  const handleClickOpen = (team) => {
-    setSelectedTeam(team)
-    setOpen(true)
-  }
-
-  const handleClose = () => {
-    setOpen(false)
-  }
-
-  const handleJoin = async (teamId) => {
-    const result = await joinUser({ userId, teamId })
-
-    if (result) {
-      handleClose()
-      navigate(`/team/${teamId}`)
-    } else {
-      console.log('here')
-    }
-  }
-
-  return (
-    <>
-      <Container>
-        <Modal
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-        >
-          <Box sx={style}>
-            <Text textAlign="center">Are you sure you want to join {selectedTeam.name}?</Text>
-            <TeamButton
-              width="140px"
-              height="60px"
-              fontSize="20px"
-              fontWeight="600"
-              onClick={() => handleJoin(selectedTeam._id)}
-            >
-              Join
-            </TeamButton>
-            <TeamButton
-              onClick={handleClose}
-              width="140px"
-              height="60px"
-              fontSize="20px"
-              fontWeight="600"
-            >
-              Cancel
-            </TeamButton>
-          </Box>
-        </Modal>
-        <CardContainer>
-          <Card>
-            <ColumnNames>
-              <Text fontSize="16px" color="#5D9D0B">
-                Photo
-              </Text>
-              <Text fontSize="16px" color="#5D9D0B">
-                Name
-              </Text>
-              <Text fontSize="16px" color="#5D9D0B">
-                People
-              </Text>
-            </ColumnNames>
-            {teams?.data?.map((team, i) => (
-              <TeamData margin="60px" key={i}>
-                <TeamImage src="https://pbs.twimg.com/profile_images/1406293979323371528/TJ7BseVI_400x400.jpg" />
-                <Text fontSize="18px" color="white">
-                  {team.name}
-                </Text>
-                <Text fontSize="18px" color="white">
-                  {team.members.length}/8
-                </Text>
-                <TeamButton onClick={() => handleClickOpen(team)}>Join</TeamButton>
-              </TeamData>
-            ))}
-          </Card>
-        </CardContainer>
-      </Container>
-    </>
-  )
-}
-
-export default TeamsList
diff --git a/client/src/components/Forms/TeamsList/TeamsList.styles.js b/client/src/components/Forms/TeamsList/TeamsList.styles.js
deleted file mode 100644
index eac37d7a2..000000000
--- a/client/src/components/Forms/TeamsList/TeamsList.styles.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import styled from 'styled-components'
-
-import { BLACK, WHITE } from '../../../constants/colors'
-
-export const Container = styled.div`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  background: ${BLACK.background};
-`
-
-export const CardContainer = styled.div`
-  min-height: 100vh;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-export const Card = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-  width: 774px;
-  background: #1a1c22;
-  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
-  border-radius: 15px;
-  padding: 25px 40px;
-`
-
-export const ColumnNames = styled.div`
-  display: flex;
-  width: 500px;
-  justify-content: space-between;
-  align-items: start;
-`
-
-export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '500'};
-  font-size: ${(props) => props.fontSize || '24px'};
-  margin: ${(props) => props.margin || '0 0 0 0'};
-  color: ${(props) => props.color || WHITE.main};
-  text-align: ${(props) => props.textAlign || 'none'};
-`
-
-export const TeamData = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: ${(props) => props.margin || '0'};
-`
-
-export const TeamImage = styled.img`
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-`
-
-export const TeamButton = styled.button`
-  width: ${(props) => props.width || '80px'};
-  height: ${(props) => props.height || '45px'};
-  border: none;
-  outline: none;
-  background: #5d9d0b;
-  box-shadow: 0px 4px 25px rgba(93, 157, 11, 0.25);
-  border-radius: 8px;
-  font-weight: ${(props) => props.fontWeight || '400'};
-  font-size: ${(props) => props.fontSize || '16px'};
-  color: white;
-  cursor: pointer;
-`
-
-export const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: '#26292B',
-  borderRadius: '15px',
-  boxShadow: 14,
-  p: 4,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexDirection: 'column',
-  gap: '25px',
-}
diff --git a/client/src/components/ModalSearch/ModalSearch.js b/client/src/components/ModalSearch/ModalSearch.js
new file mode 100644
index 000000000..e7fbbfabd
--- /dev/null
+++ b/client/src/components/ModalSearch/ModalSearch.js
@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import countryList from 'react-select-country-list'
+
+import Cross from '../../assets/Sidebar/Cross'
+import FlexWrapper from '../../shared/components/FlexWrapper/FlexWrapper'
+import IconWrapper from '../../shared/components/IconWrapper/IconWrapper'
+import Tag from '../../shared/components/Tag/Tag'
+import Search from '../Search/Search'
+import TagsList from '../TagsList/TagsList'
+
+import {
+  ModalButton,
+  ModalSearchContainer,
+  ModalSearchItem,
+  ModalSearchList,
+  ModalSearchTitle,
+  ModalWrapper,
+  StyledModalSearch,
+} from './ModalSearch.style'
+
+const ModalSearch = ({
+  openModal,
+  setOpenModal,
+  sliceName,
+  currFilterIndex,
+  setCurrFilterIndex,
+  setFilterValueAction,
+}) => {
+  const [filterOpened, setFilterOpened] = useState(false)
+
+  const dispatch = useDispatch()
+  const filtersArr = useSelector((state) => state[sliceName])
+  const setFilterValue = (index, value) => dispatch(setFilterValueAction({ index, value }))
+
+  const currFilter = filtersArr[currFilterIndex]
+
+  const onOpenFilterSettings = (index) => {
+    setCurrFilterIndex(index)
+    setFilterOpened(true)
+  }
+
+  const leftButtonHandler = () => {
+    if (!filterOpened) {
+      filtersArr.forEach((filter, index) => {
+        if (filter.type === 'text') {
+          setFilterValue(index, '')
+        }
+        if (filter.type === 'checks') {
+          setFilterValue(index, [])
+        }
+        if (filter.type === 'range') {
+          setFilterValue(index, null)
+        }
+      })
+    } else {
+      if (currFilter.type === 'text') {
+        setFilterValue(currFilterIndex, '')
+      }
+      if (currFilter.type === 'checks') {
+        setFilterValue(currFilterIndex, [])
+      }
+      if (currFilter.type === 'range') {
+        setFilterValue(currFilterIndex, null)
+      }
+    }
+  }
+
+  const rightButtonHandler = () => {
+    if (!filterOpened) {
+      setOpenModal(false)
+    } else {
+      setFilterOpened(false)
+    }
+  }
+
+  const renderTag = (filter) => {
+    switch (filter.type) {
+      case 'text':
+        if (filter.value.length) {
+          return <Tag>@{filter.value}</Tag>
+        }
+        break
+      case 'checks':
+        if (filter.value.length) {
+          return (
+            <Tag>
+              {filter.value.length} {filter.name}
+            </Tag>
+          )
+        }
+        break
+      case 'range':
+        if (filter.value) {
+          return (
+            <Tag>
+              {filter.value[0]} {filter.value[1]}
+            </Tag>
+          )
+        }
+        break
+    }
+  }
+
+  return (
+    <ModalWrapper open={openModal} anchor="right" transitionDuration={400}>
+      <StyledModalSearch>
+        <ModalSearchContainer direction="column" gap="24px">
+          {!filterOpened ? (
+            <>
+              <FlexWrapper justify="space-between">
+                <ModalSearchTitle>Filters</ModalSearchTitle>
+                <IconWrapper
+                  onClick={() => setOpenModal(false)}
+                  width="24px"
+                  height="24px"
+                  cursor="pointer"
+                >
+                  <Cross />
+                </IconWrapper>
+              </FlexWrapper>
+              <ModalSearchList>
+                {filtersArr.map((filter, index) => (
+                  <ModalSearchItem key={filter.name} onClick={() => onOpenFilterSettings(index)}>
+                    <FlexWrapper align="center" gap="8px">
+                      <p>{filter.text}</p>
+                      {renderTag(filter)}
+                    </FlexWrapper>
+                  </ModalSearchItem>
+                ))}
+              </ModalSearchList>
+            </>
+          ) : (
+            <>
+              <FlexWrapper justify="space-between">
+                <ModalSearchTitle>{currFilter.text}</ModalSearchTitle>
+                <IconWrapper
+                  onClick={() => setOpenModal(false)}
+                  width="24px"
+                  height="24px"
+                  cursor="pointer"
+                >
+                  <Cross />
+                </IconWrapper>
+              </FlexWrapper>
+              <Search
+                sliceName={sliceName}
+                currFilterIndex={currFilterIndex}
+                setFilterValueAction={setFilterValueAction}
+              />
+              <TagsList
+                currFilter={currFilter}
+                currFilterIndex={currFilterIndex}
+                sliceName={sliceName}
+                setFilterValueAction={setFilterValueAction}
+              />
+            </>
+          )}
+          <FlexWrapper margin="auto 0 0 0" gap="8px">
+            <ModalButton outlined onClick={leftButtonHandler}>
+              Clear
+            </ModalButton>
+            <ModalButton onClick={rightButtonHandler}>
+              {filterOpened ? 'Save' : 'Search'}
+            </ModalButton>
+          </FlexWrapper>
+        </ModalSearchContainer>
+      </StyledModalSearch>
+    </ModalWrapper>
+  )
+}
+
+export default ModalSearch
diff --git a/client/src/components/ModalSearch/ModalSearch.style.js b/client/src/components/ModalSearch/ModalSearch.style.js
new file mode 100644
index 000000000..04a83a2c8
--- /dev/null
+++ b/client/src/components/ModalSearch/ModalSearch.style.js
@@ -0,0 +1,63 @@
+import { Drawer } from '@mui/material'
+import styled from 'styled-components'
+
+import FlexWrapper from '../../shared/components/FlexWrapper/FlexWrapper'
+
+export const ModalWrapper = styled(Drawer)``
+
+export const StyledModalSearch = styled.div`
+  padding: 24px 24px 0;
+  background-color: #26292b;
+  width: 100dvw;
+  height: 100dvh;
+`
+
+export const ModalSearchContainer = styled(FlexWrapper)`
+  /* max-width: 312px; */
+  height: 100%;
+  margin: 0 auto;
+  padding: 6px 0 24px;
+`
+
+export const ModalSearchTitle = styled.h2`
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 120%;
+  color: #5bd424;
+`
+
+export const ModalSearchList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const ModalSearchItem = styled.li`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+
+  p {
+    font-family: 'Rubik';
+    line-height: 140%;
+    color: #fff;
+  }
+`
+
+export const ModalButton = styled.button`
+  cursor: pointer;
+  border: none;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 38px;
+  background: ${(props) => (props.outlined ? 'none' : '#46a11b')};
+  border: 1px solid #46a11b;
+  border-radius: 10px;
+`
diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index f5c9281ee..ac380d859 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -1,5 +1,5 @@
 // * Modules
-import React, { memo, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 
@@ -12,6 +12,7 @@ import Exit from '../../assets/Sidebar/Exit'
 import ShortLogo from '../../assets/Sidebar/ShortLogo'
 import Team from '../../assets/Sidebar/Team'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
+import IconWrapper from '../../shared/components/IconWrapper/IconWrapper'
 import Loader from '../../shared/components/Loader/Loader'
 
 // * Data
@@ -20,7 +21,7 @@ import NotificationsContent from './NotificationsContent/NotificationsContent'
 import Profile from './Profile/Profile'
 import { NavBarData } from './NavBar.data'
 import {
-  IconWrapper,
+  MobileNavBarIconWrapper,
   NavBarClose,
   NavBarCopyright,
   NavBarLogo,
@@ -38,6 +39,7 @@ const NavBar = () => {
 
   const { isAuth } = useSelector((state) => state.userReducer)
   const { data: user, isFetching: isUserDataLoading } = useCheckAuth()
+
   const [userNotifications, setUserNotifications] = useState(user?.notifications || [])
 
   const newNavData = [
@@ -111,6 +113,14 @@ const NavBar = () => {
 
   return (
     <>
+      {/* This will appear for screen width <= 768px */}
+      <MobileNavBarIconWrapper onClick={showSidebar} active={sidebar}>
+        <NavBarClose active={sidebar}>
+          <Close />
+        </NavBarClose>
+      </MobileNavBarIconWrapper>
+
+      {/* This will appear for screen width > 768px */}
       <NavWrapper active={sidebar}>
         <NavMenu ref={navMenuRef} onClick={(e) => e.stopPropagation()} active={sidebar} left="0">
           <NavBarToggle>
@@ -150,14 +160,14 @@ const NavBar = () => {
                 onClick={() => navigate('/auth/registration')}
                 color="white"
               >
-                <IconWrapper width="24px" height="24px">
+                <IconWrapper width="24px" height="24px" cursor="pointer">
                   <Exit />
                 </IconWrapper>
                 <p>Login</p>
               </NavInteractBtn>
             ) : (
               <NavInteractBtn active={sidebar} onClick={handleUseLogout}>
-                <IconWrapper width="24px" height="24px">
+                <IconWrapper width="24px" height="24px" cursor="pointer">
                   <Exit />
                 </IconWrapper>
                 <p>Logout</p>
@@ -173,4 +183,4 @@ const NavBar = () => {
   )
 }
 
-export default memo(NavBar)
+export default NavBar
diff --git a/client/src/components/NavBar/NavBar.styles.js b/client/src/components/NavBar/NavBar.styles.js
index e85783545..69c5292d5 100644
--- a/client/src/components/NavBar/NavBar.styles.js
+++ b/client/src/components/NavBar/NavBar.styles.js
@@ -1,17 +1,6 @@
 // * Modules
-import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
-export const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  & svg {
-    width: ${(props) => props.width || 'auto'};
-    height: ${(props) => props.height || 'auto'};
-  }
-`
-
 export const NavIconContainer = styled.div`
   margin-right: 25px;
   cursor: pointer;
@@ -20,7 +9,7 @@ export const NavIconContainer = styled.div`
 export const NavWrapper = styled.div`
   pointer-events: ${(props) => (props.active ? 'all' : 'none')};
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
   background: rgba(${(props) => (props.active ? '0, 0, 0, 0.25' : '0, 0, 0, 0')});
   backdrop-filter: ${(props) => (props.active ? 'blur(5px)' : 'none')};
   -webkit-backdrop-filter: ${(props) => (props.active ? 'blur(5px)' : 'none')};
@@ -28,10 +17,14 @@ export const NavWrapper = styled.div`
   top: 0;
   left: 0;
   z-index: 999;
+
+  @media screen and (max-width: 768px) {
+    /* width: ${(props) => (props.active ? '100vw' : '270px')}; */
+    pointer-events: ${(props) => (props.active ? 'all' : 'none')};
+  }
 `
 
 export const NavMenu = styled.nav`
-  --menu-animation-time: 0.2s;
   pointer-events: all;
   width: 100%;
   height: 100%;
@@ -41,9 +34,19 @@ export const NavMenu = styled.nav`
   align-items: center;
   background: ${(props) =>
     props.active ? 'linear-gradient(90.45deg, #1a1c22 62.8%, #2f3239 209.77%)' : '#1A1C22'};
-  transition: all var(--menu-animation-time) ease;
+  transition: max-width 0.4s ease-in-out, left 0.4s ease-in-out;
+  -webkit-transition: max-width 0.4s ease-in-out, left 0.4s ease-in-out;
   padding: 0 16px;
   padding-top: 48px;
+
+  @media screen and (max-width: 768px) {
+    position: absolute;
+    max-width: none;
+    left: ${(props) => (props.active ? '0' : '-270px')};
+    top: 0;
+    width: 270px;
+    pointer-events: ${(props) => (props.active ? 'all' : 'none')};
+  }
 `
 
 export const NavBarToggle = styled.div`
@@ -65,6 +68,10 @@ export const NavBarClose = styled.div`
   cursor: pointer;
   transform: rotateY(${(props) => (props.active ? '0deg' : '180deg')});
   padding: 0 12px;
+
+  @media screen and (max-width: 768px) {
+    padding: 0 20px;
+  }
 `
 
 export const NavItems = styled.ul`
@@ -129,3 +136,19 @@ export const NavBarCopyright = styled.h3`
   overflow: hidden;
   white-space: nowrap;
 `
+
+export const MobileNavBarIconWrapper = styled.div`
+  position: absolute;
+  top: 47px;
+  left: 41px;
+  display: none;
+  cursor: pointer;
+  z-index: 999;
+
+  @media screen and (max-width: 768px) {
+    display: ${(props) => (props.active ? 'none' : 'block')};
+    pointer-events: ${(props) => (!props.active ? 'all' : 'none')};
+    top: 32px;
+    left: 0;
+  }
+`
diff --git a/client/src/components/NavBar/NotificationsContent/NotificationsContent.js b/client/src/components/NavBar/NotificationsContent/NotificationsContent.js
index 540606921..991d15c5f 100644
--- a/client/src/components/NavBar/NotificationsContent/NotificationsContent.js
+++ b/client/src/components/NavBar/NotificationsContent/NotificationsContent.js
@@ -2,7 +2,8 @@
 import { memo, useEffect } from 'react'
 
 import Notification from '../../../assets/Sidebar/Notification'
-import { IconWrapper, NavInteractBtn } from '../NavBar.styles'
+import IconWrapper from '../../../shared/components/IconWrapper/IconWrapper'
+import { NavInteractBtn } from '../NavBar.styles'
 import NotificationsModal from '../NotificationsModal/NotificationsModal'
 
 // this component styles
@@ -23,14 +24,14 @@ const NotificationsContent = ({
         onClick={() => setNotificationModal((prev) => !prev)}
         active={sidebar}
       >
-        <IconWrapper width="24px" height="24px">
+        <IconWrapper width="24px" height="24px" cursor="pointer">
           <Notification />
         </IconWrapper>
         <p>Notifications</p>
         {!!unreadMessages.length && !notificationModal && (
           <>
             <NotificationsCount
-              active={!sidebar}
+              pointerEvents={!sidebar}
               top="6px"
               left="28px"
               animate={{ scale: [1, 1.5, 1] }}
diff --git a/client/src/components/NavBar/NotificationsContent/NotificationsContent.styles.js b/client/src/components/NavBar/NotificationsContent/NotificationsContent.styles.js
index 909151945..a6770b92a 100644
--- a/client/src/components/NavBar/NotificationsContent/NotificationsContent.styles.js
+++ b/client/src/components/NavBar/NotificationsContent/NotificationsContent.styles.js
@@ -1,17 +1,13 @@
 import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
-import { IconWrapper } from '../NavBar.styles'
-
 export const StyledNotificationsContent = styled.div`
   position: relative;
 `
 
 export const NotificationsCount = styled(motion.div)`
   position: absolute;
-  /* transition: opacity var(--menu-animation-time); */
-  ${'' /* opacity: ${(props) => (props.active ? 1 : 0)}; */}
-  pointer-events: ${(props) => (props.active ? 'all' : 'none')};
+  pointer-events: ${(props) => (props.pointerEvents ? 'all' : 'none')};
   top: ${(props) => props.top || 'auto'};
   right: ${(props) => props.right || 'auto'};
   left: ${(props) => props.left || 'auto'};
diff --git a/client/src/components/NavBar/NotificationsItem/NotificationsItem.js b/client/src/components/NavBar/NotificationsItem/NotificationsItem.js
index 2e52d17c0..8daea4ece 100644
--- a/client/src/components/NavBar/NotificationsItem/NotificationsItem.js
+++ b/client/src/components/NavBar/NotificationsItem/NotificationsItem.js
@@ -3,9 +3,9 @@ import { useGetTeamData } from '../../../api/hooks/team/useGetTeamData'
 import LightningIcon from '../../../assets/Sidebar/LightningIcon'
 import WarningIcon from '../../../assets/Sidebar/WarningIcon'
 import { LOCAL_PATH } from '../../../http'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
 import Loader from '../../../shared/components/Loader/Loader'
 import { getPastTime } from '../../../utils/getPastTime'
-import FlexWrapper from '../FlexWrapper/FlexWrapper'
 
 import {
   MessageButton,
diff --git a/client/src/components/NavBar/NotificationsModal/NotificationsModal.js b/client/src/components/NavBar/NotificationsModal/NotificationsModal.js
index 06e5c683e..56d075b05 100644
--- a/client/src/components/NavBar/NotificationsModal/NotificationsModal.js
+++ b/client/src/components/NavBar/NotificationsModal/NotificationsModal.js
@@ -1,23 +1,29 @@
-import { useRef, useState } from 'react'
+import { Fragment, useRef, useState } from 'react'
 
 import { useReadMessages } from '../../../api/hooks/sidebar/useReadMessages'
 import Checks from '../../../assets/Sidebar/Checks'
-import Cross from '../../../assets/Sidebar/Cross'
+import NotificationClose from '../../../assets/Sidebar/NotificationClose'
+import { useGetScreenWidth } from '../../../hooks/useGetScreenWidth'
 import { useOutsideClick } from '../../../hooks/useOutsideClick'
-import { IconWrapper } from '../NavBar.styles'
+import IconWrapper from '../../../shared/components/IconWrapper/IconWrapper'
 import NotificationsList from '../NotificationsList/NotificationsList'
 
 import {
   CrossBtn,
   MarkAllBtn,
+  MarkAllBtnMobile,
+  MobileNotificationsModal,
+  MobileWrapper,
   NotificationsHeader,
   StyledNotificationsModal,
+  Text,
 } from './NotificationsModal.styles'
 
 const NotificationsModal = ({ userNotifications, notificationModal, setNotificationModal }) => {
   const [unreadIds, setUnreadIds] = useState(new Set())
   const notificationModalRef = useRef(null)
   const { mutateAsync: readMessages } = useReadMessages()
+  const width = useGetScreenWidth()
 
   useOutsideClick(notificationModalRef, closeNotificationsModal)
 
@@ -63,33 +69,70 @@ const NotificationsModal = ({ userNotifications, notificationModal, setNotificat
   }
 
   return (
-    <StyledNotificationsModal
-      ref={notificationModalRef}
-      active={notificationModal.toString()}
-      onClick={(e) => e.stopPropagation()}
-      animate={notificationModal ? 'open' : 'closed'}
-      variants={variants}
-      initial={false}
-    >
-      <NotificationsHeader>
-        <MarkAllBtn onClick={markAllAsRead}>
-          <IconWrapper width="20px" height="20px">
-            <Checks />
-          </IconWrapper>
-          <p>Mark all as read</p>
-        </MarkAllBtn>
-        <CrossBtn width="20px" height="20px" onClick={closeNotificationsModal}>
-          <Cross />
-        </CrossBtn>
-      </NotificationsHeader>
-      {notificationModal && (
-        <NotificationsList
-          userNotifications={userNotifications}
-          closeNotificationsModal={closeNotificationsModal}
-          setUnreadIds={setUnreadIds}
-        />
+    <>
+      {width > 670 && (
+        <StyledNotificationsModal
+          ref={notificationModalRef}
+          active={notificationModal.toString()}
+          onClick={(e) => e.stopPropagation()}
+          animate={notificationModal ? 'open' : 'closed'}
+          variants={variants}
+          initial={false}
+        >
+          <NotificationsHeader>
+            <MarkAllBtn onClick={markAllAsRead}>
+              <IconWrapper width="20px" height="20px">
+                <Checks />
+              </IconWrapper>
+              <p>Mark all as read</p>
+            </MarkAllBtn>
+            <CrossBtn width="20px" height="20px" onClick={closeNotificationsModal}>
+              <NotificationClose />
+            </CrossBtn>
+          </NotificationsHeader>
+          {notificationModal && (
+            <NotificationsList
+              userNotifications={userNotifications}
+              closeNotificationsModal={closeNotificationsModal}
+              setUnreadIds={setUnreadIds}
+            />
+          )}
+        </StyledNotificationsModal>
       )}
-    </StyledNotificationsModal>
+      {width <= 670 && (
+        <MobileNotificationsModal
+          anchor="bottom"
+          open={notificationModal}
+          onClose={() => setNotificationModal(false)}
+          transitionDuration={400}
+        >
+          <MobileWrapper>
+            <div>
+              <NotificationsHeader>
+                <Text>Notifications</Text>
+                <CrossBtn width="14px" height="14px" onClick={closeNotificationsModal}>
+                  <NotificationClose />
+                </CrossBtn>
+              </NotificationsHeader>
+              {notificationModal && (
+                <NotificationsList
+                  userNotifications={userNotifications}
+                  closeNotificationsModal={closeNotificationsModal}
+                  setUnreadIds={setUnreadIds}
+                />
+              )}
+            </div>
+
+            <MarkAllBtnMobile onClick={markAllAsRead}>
+              <IconWrapper width="20px" height="20px">
+                <Checks />
+              </IconWrapper>
+              <p>Mark all as read</p>
+            </MarkAllBtnMobile>
+          </MobileWrapper>
+        </MobileNotificationsModal>
+      )}
+    </>
   )
 }
 
diff --git a/client/src/components/NavBar/NotificationsModal/NotificationsModal.styles.js b/client/src/components/NavBar/NotificationsModal/NotificationsModal.styles.js
index 22ad1b8dd..4c9b4f318 100644
--- a/client/src/components/NavBar/NotificationsModal/NotificationsModal.styles.js
+++ b/client/src/components/NavBar/NotificationsModal/NotificationsModal.styles.js
@@ -1,7 +1,8 @@
+import { Box, Drawer } from '@mui/material'
 import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
-import { IconWrapper } from '../NavBar.styles'
+import IconWrapper from '../../../shared/components/IconWrapper/IconWrapper'
 
 export const StyledNotificationsModal = styled(motion.div)`
   pointer-events: ${(props) => (props.active ? 'all' : 'none')};
@@ -21,10 +22,14 @@ export const NotificationsHeader = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 16px;
+
+  @media screen and (max-width: 670px) {
+    padding: 24px;
+  }
 `
 
 export const CrossBtn = styled(IconWrapper)`
-  padding: 5px;
+  /* padding: 5px; */
   cursor: pointer;
   &:hover {
     path {
@@ -51,3 +56,76 @@ export const MarkAllBtn = styled.div`
     }
   }
 `
+
+export const MobileNotificationsModal = styled(Drawer)`
+  display: none;
+
+  & .MuiDrawer-paper {
+    background: #26292b;
+    overflow: hidden;
+  }
+
+  @media screen and (min-width: 0px) and (max-width: 670px) {
+    display: block;
+  }
+`
+
+export const MobileWrapper = styled(Box)`
+  width: 100%;
+  min-height: 100dvh;
+  background: #26292b;
+  /* padding: 24px 29px; */
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  overflow: scroll;
+
+  ::-webkit-scrollbar {
+    /* WebKit */
+    transition: all 0.2s;
+    width: 0;
+    height: 0;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #000000;
+  }
+`
+
+export const Text = styled.h3`
+  font-weight: 500;
+  font-size: 24px;
+  color: #5bd424;
+  margin: 0;
+  text-align: ${(props) => props.textAlign || 'none'};
+`
+
+export const MarkAllBtnMobile = styled.button`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  background: none;
+  outline: none;
+  border: 2px solid #46a11b;
+  border-radius: 10px;
+  padding: 10px 16px;
+  margin: 16px 24px 24px 24px;
+  p {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  &:hover {
+    path {
+      stroke: #5bd424;
+    }
+    p {
+      color: #5bd424;
+    }
+  }
+`
diff --git a/client/src/components/Profile/components/ProfileDetails/ProfileDetails.jsx b/client/src/components/Profile/components/ProfileDetails/ProfileDetails.jsx
index 4fc6790bf..0f3403ddf 100644
--- a/client/src/components/Profile/components/ProfileDetails/ProfileDetails.jsx
+++ b/client/src/components/Profile/components/ProfileDetails/ProfileDetails.jsx
@@ -44,13 +44,10 @@ import {
 
 const ProfileDetails = () => {
   const { data: user, isFetching: isUserDataLoading } = useCheckAuth()
-  const teamId = user?.team?._id
-
-  const { data: team, isLoading: isUserTeamLoading } = useGetTeamData(teamId)
 
   const navigate = useNavigate()
 
-  if (isUserDataLoading || isUserTeamLoading) {
+  if (isUserDataLoading) {
     return <Loader />
   }
 
@@ -165,7 +162,7 @@ const ProfileDetails = () => {
           <BannerLine />
           <RightCardData justify="center">
             <Text margin="0" fontSize="16px" fontWeight="600" color="rgba(255, 255, 255, 0.7)">
-              {team ? team.name : "That's where your team will come in"}
+              {user.team ? user?.team.name : "That's where your team will come in"}
             </Text>
           </RightCardData>
         </RightCard>
diff --git a/client/src/components/Profile/components/ProfileForm/index.jsx b/client/src/components/Profile/components/ProfileForm/index.jsx
index ce5058147..deeb9f783 100644
--- a/client/src/components/Profile/components/ProfileForm/index.jsx
+++ b/client/src/components/Profile/components/ProfileForm/index.jsx
@@ -26,9 +26,9 @@ import { usePrompt } from '../../../../hooks/usePrompt'
 import { LOCAL_PATH } from '../../../../http'
 import { editProfileValidation } from '../../../../schemas'
 import CustomButton from '../../../../shared/components/CustomButton/CustomButton'
-import CustomInput from '../../../../shared/components/CustomInput/CustomInput'
-import CustomSelect from '../../../../shared/components/CustomSelect/CustomSelect'
-import CustomTextArea from '../../../../shared/components/CustomTextArea/CustomTextArea'
+import CustomInput from '../../../../shared/components/Formik/CustomInput/CustomInput'
+import CustomSelect from '../../../../shared/components/Formik/CustomSelect/CustomSelect'
+import CustomTextArea from '../../../../shared/components/Formik/CustomTextArea/CustomTextArea'
 import Loader from '../../../../shared/components/Loader/Loader'
 import { Button } from '../../../../shared/styles/Button.styles'
 import { ErrorMessage } from '../../../../shared/styles/Tpography.styles'
diff --git a/client/src/components/RegistrationPipeline/components/MultiStepRegistration/MultiStepRegistration.jsx b/client/src/components/RegistrationPipeline/components/MultiStepRegistration/MultiStepRegistration.jsx
index ef3e12a12..19f27386a 100644
--- a/client/src/components/RegistrationPipeline/components/MultiStepRegistration/MultiStepRegistration.jsx
+++ b/client/src/components/RegistrationPipeline/components/MultiStepRegistration/MultiStepRegistration.jsx
@@ -28,8 +28,7 @@ const MultiStepRegistration = ({
     submitForm(values, userData)
   }
 
-  console.log(step)
-  if (isFetching) {
+  if (isFetching || isFinishingRegistration) {
     return <Loader />
   }
 
@@ -42,7 +41,6 @@ const MultiStepRegistration = ({
       {() => {
         return (
           <Form>
-            {isFinishingRegistration && <Loader />}
             <Container>
               <Stepper steps={steps} step={step} isOptionalStep={isOptionalStep} />
               <RegistrationContainer>
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/TeamInfoForm/TeamInfoForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/TeamInfoForm/TeamInfoForm.jsx
index 1aaf7eda5..3dc5c6f0e 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/TeamInfoForm/TeamInfoForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/TeamInfoForm/TeamInfoForm.jsx
@@ -4,13 +4,13 @@ import countryList from 'react-select-country-list'
 import { useGetByTag } from '../../../../../../api/hooks/team/useGetByTag'
 import { useDebounce } from '../../../../../../api/hooks/temeights/useDebounce'
 import { teamTypes } from '../../../../../../constants/teamFormData'
-import CustomInput from '../../../../../../shared/components/CustomInput/CustomInput'
+import CustomInput from '../../../../../../shared/components/Formik/CustomInput/CustomInput'
 import {
   GroupContainer,
   SectionContainer,
-} from '../../../../../../shared/components/CustomInput/CustomInput.styles'
-import CustomSelect from '../../../../../../shared/components/CustomSelect/CustomSelect'
-import CustomTextArea from '../../../../../../shared/components/CustomTextArea/CustomTextArea'
+} from '../../../../../../shared/components/Formik/CustomInput/CustomInput.styles'
+import CustomSelect from '../../../../../../shared/components/Formik/CustomSelect/CustomSelect'
+import CustomTextArea from '../../../../../../shared/components/Formik/CustomTextArea/CustomTextArea'
 import { InputsContainer } from '../InfoForm.styles'
 
 const TeamInfoForm = () => {
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/UserInfoForm/UserInfoForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/UserInfoForm/UserInfoForm.jsx
index f43e4216f..3943f101c 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/UserInfoForm/UserInfoForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/InfoForm/UserInfoForm/UserInfoForm.jsx
@@ -3,13 +3,13 @@ import countryList from 'react-select-country-list'
 
 import { useValidateUsername } from '../../../../../../api/hooks/auth/useValidateUsername'
 import { useDebounce } from '../../../../../../api/hooks/temeights/useDebounce'
-import CustomInput from '../../../../../../shared/components/CustomInput/CustomInput'
+import CustomInput from '../../../../../../shared/components/Formik/CustomInput/CustomInput'
 import {
   GroupContainer,
   SectionContainer,
-} from '../../../../../../shared/components/CustomInput/CustomInput.styles'
-import CustomSelect from '../../../../../../shared/components/CustomSelect/CustomSelect'
-import CustomTextArea from '../../../../../../shared/components/CustomTextArea/CustomTextArea'
+} from '../../../../../../shared/components/Formik/CustomInput/CustomInput.styles'
+import CustomSelect from '../../../../../../shared/components/Formik/CustomSelect/CustomSelect'
+import CustomTextArea from '../../../../../../shared/components/Formik/CustomTextArea/CustomTextArea'
 import { InputsContainer } from '../InfoForm.styles'
 
 const UserInfoForm = () => {
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserConcentrationForm/UserConcentrationForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserConcentrationForm/UserConcentrationForm.jsx
index 24c67e450..97d1c9edd 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserConcentrationForm/UserConcentrationForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserConcentrationForm/UserConcentrationForm.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { userConcentrations } from '../../../../../constants/finishRegistrationData'
-import SelectValue from '../../../../../shared/components/CustomSelect/components/SelectValue'
-import CustomSelect from '../../../../../shared/components/CustomSelect/CustomSelect'
+import SelectValue from '../../../../../shared/components/Formik/CustomSelect/components/SelectValue'
+import CustomSelect from '../../../../../shared/components/Formik/CustomSelect/CustomSelect'
 import { ContentContainer } from '../../MultiStepRegistration/MultiStepRegistration.styles'
 
 const UserConcentrationForm = () => {
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserEducationForm/UserEducationForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserEducationForm/UserEducationForm.jsx
index 7910e368f..d62dea930 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserEducationForm/UserEducationForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserEducationForm/UserEducationForm.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useFormikContext } from 'formik'
 
-import CustomInput from '../../../../../shared/components/CustomInput/CustomInput'
+import CustomInput from '../../../../../shared/components/Formik/CustomInput/CustomInput'
 import CheckboxWithLabel from '../../CheckboxWithLabel/CheckboxWithLabel'
 import { ContentContainer } from '../../MultiStepRegistration/MultiStepRegistration.styles'
 
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserExperienceForm/UserExperienceForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserExperienceForm/UserExperienceForm.jsx
index 1816c04ed..9f97a305a 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserExperienceForm/UserExperienceForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserExperienceForm/UserExperienceForm.jsx
@@ -4,7 +4,7 @@ import {
   userExperienceOptions,
   userLeaderOptions,
 } from '../../../../../constants/finishRegistrationData'
-import CustomRadioButtonsGroup from '../../../../../shared/components/CustomRadioButtonsGroup/CustomRadioButtonsGroup'
+import CustomRadioButtonsGroup from '../../../../../shared/components/Formik/CustomRadioButtonsGroup/CustomRadioButtonsGroup'
 import { ContentContainer } from '../../MultiStepRegistration/MultiStepRegistration.styles'
 
 import { NoteContainer, NoteText, QuestionSection, QuestionText } from './UserExperienceForm.styles'
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserJobForm/UserJobForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserJobForm/UserJobForm.jsx
index 0c94f0082..f857ef998 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserJobForm/UserJobForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserJobForm/UserJobForm.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useFormikContext } from 'formik'
 
-import CustomInput from '../../../../../shared/components/CustomInput/CustomInput'
+import CustomInput from '../../../../../shared/components/Formik/CustomInput/CustomInput'
 import CheckboxWithLabel from '../../CheckboxWithLabel/CheckboxWithLabel'
 import { ContentContainer } from '../../MultiStepRegistration/MultiStepRegistration.styles'
 import { GroupItems, InputWrapper } from '../UserEducationForm/UserEducationForm.styles'
diff --git a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserLinksForm/UserLinksForm.jsx b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserLinksForm/UserLinksForm.jsx
index 676200a60..0fb370e84 100644
--- a/client/src/components/RegistrationPipeline/components/RegistrationForms/UserLinksForm/UserLinksForm.jsx
+++ b/client/src/components/RegistrationPipeline/components/RegistrationForms/UserLinksForm/UserLinksForm.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { userLinks } from '../../../../../constants/finishRegistrationData'
-import CustomInput from '../../../../../shared/components/CustomInput/CustomInput'
-import { InputWithIConWrapper } from '../../../../../shared/components/CustomInput/CustomInput.styles'
+import CustomInput from '../../../../../shared/components/Formik/CustomInput/CustomInput'
+import { InputWithIConWrapper } from '../../../../../shared/components/Formik/CustomInput/CustomInput.styles'
 import { ContentContainer } from '../../MultiStepRegistration/MultiStepRegistration.styles'
 
 const UserLinksForm = () => {
diff --git a/client/src/components/Search/Search.js b/client/src/components/Search/Search.js
new file mode 100644
index 000000000..6d02b0cc6
--- /dev/null
+++ b/client/src/components/Search/Search.js
@@ -0,0 +1,96 @@
+import { useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import countryList from 'react-select-country-list'
+
+import concentrationOptions from '../../constants/concentrations'
+import frameworkOptions from '../../constants/frameworks'
+import { programmingLanguageOptions } from '../../constants/programmingLanguages'
+
+import SearchByChecks from './SearchByChecks/SearchByChecks'
+import SearchByRange from './SearchByRange/SearchByRange'
+import SearchByText from './SearchByText/SearchByText'
+
+const Search = ({ sliceName, setFilterValueAction, currFilterIndex }) => {
+  const dispatch = useDispatch()
+  const filtersArr = useSelector((state) => state[sliceName])
+  const setFilterValue = (index, value) => dispatch(setFilterValueAction({ index, value }))
+
+  const currFilter = filtersArr[currFilterIndex]
+
+  const countries = useMemo(() => countryList().getData(), [])
+
+  switch (currFilter.type) {
+    case 'text':
+      return (
+        <SearchByText
+          placeholder={`Search by ${currFilter.name}`}
+          currFilter={currFilter}
+          currFilterIndex={currFilterIndex}
+          setFilterValue={setFilterValue}
+        />
+      )
+    case 'checks':
+      // Since the countries are not taken from the state, we put a condition here
+      if (currFilter.name === 'countries') {
+        return (
+          <SearchByChecks
+            currFilter={currFilter}
+            currFilterIndex={currFilterIndex}
+            setFilterValue={setFilterValue}
+            items={countries}
+          />
+        )
+      }
+      if (currFilter.name === 'languages') {
+        return (
+          <SearchByChecks
+            currFilter={currFilter}
+            currFilterIndex={currFilterIndex}
+            setFilterValue={setFilterValue}
+            items={programmingLanguageOptions}
+          />
+        )
+      }
+      if (currFilter.name === 'frameworks') {
+        return (
+          <SearchByChecks
+            currFilter={currFilter}
+            currFilterIndex={currFilterIndex}
+            setFilterValue={setFilterValue}
+            items={frameworkOptions}
+          />
+        )
+      }
+      if (currFilter.name === 'concentrations') {
+        return (
+          <SearchByChecks
+            currFilter={currFilter}
+            currFilterIndex={currFilterIndex}
+            setFilterValue={setFilterValue}
+            items={concentrationOptions}
+          />
+        )
+      } else {
+        return (
+          <SearchByChecks
+            currFilter={currFilter}
+            currFilterIndex={currFilterIndex}
+            setFilterValue={setFilterValue}
+            items={currFilter.value}
+          />
+        )
+      }
+    case 'range':
+      return (
+        <SearchByRange
+          currFilter={currFilter}
+          currFilterIndex={currFilterIndex}
+          setFilterValue={setFilterValue}
+        />
+      )
+    default:
+      return <p>Filter is not defined</p>
+  }
+}
+
+export default Search
diff --git a/client/src/components/Search/Search.styles.js b/client/src/components/Search/Search.styles.js
new file mode 100644
index 000000000..f55f40db2
--- /dev/null
+++ b/client/src/components/Search/Search.styles.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const SearchBox = styled.div`
+  position: relative;
+  display: flex;
+  padding: ${(props) => props.padding || '0'};
+  gap: ${(props) => props.gap || '0'};
+  height: 40px;
+  width: 100%;
+  align-items: center;
+  border-radius: 10px;
+  border: 1px solid #46a11b;
+  &:hover {
+    background-color: #2f3239;
+  }
+`
+
+export const SearchInput = styled.input`
+  display: block;
+  font-size: 16px;
+  /* line-height: 40px; */
+  color: #fff;
+  caret-color: #5bd424;
+  width: calc(100% - 28px);
+  outline: none;
+  border: none;
+  background: none;
+`
diff --git a/client/src/components/Search/SearchByChecks/ChecksItem.js b/client/src/components/Search/SearchByChecks/ChecksItem.js
new file mode 100644
index 000000000..12ce9d3e4
--- /dev/null
+++ b/client/src/components/Search/SearchByChecks/ChecksItem.js
@@ -0,0 +1,24 @@
+import { StyledChecksItem } from './SearchByChecks.styles'
+
+const ChecksItem = ({ currFilter, currFilterIndex, setFilterValue, item }) => {
+  const isActive = !!currFilter.value.find((el) => el.value === item.value)
+
+  const onChangeValue = () => {
+    if (isActive) {
+      const newArr = currFilter.value.filter((el) => el.value !== item.value)
+
+      setFilterValue(currFilterIndex, newArr)
+    } else {
+      setFilterValue(currFilterIndex, [...currFilter.value, item])
+    }
+  }
+
+  return (
+    <StyledChecksItem onClick={onChangeValue}>
+      <input type="checkbox" checked={isActive} onChange={() => {}} />
+      <p>{item.label}</p>
+    </StyledChecksItem>
+  )
+}
+
+export default ChecksItem
diff --git a/client/src/components/Search/SearchByChecks/SearchByChecks.js b/client/src/components/Search/SearchByChecks/SearchByChecks.js
new file mode 100644
index 000000000..220be691d
--- /dev/null
+++ b/client/src/components/Search/SearchByChecks/SearchByChecks.js
@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react'
+
+import SearchIcon from '../../../assets/Shared/SearchIcon'
+import { useOutsideClick } from '../../../hooks/useOutsideClick'
+import IconWrapper from '../../../shared/components/IconWrapper/IconWrapper'
+import { SearchBox, SearchInput } from '../Search.styles'
+
+import ChecksItem from './ChecksItem'
+import { CheckListText, CheckListWrapper, StyledChecksList } from './SearchByChecks.styles'
+
+const SearchByChecks = ({ currFilter, currFilterIndex, setFilterValue, items }) => {
+  const [value, setValue] = useState('')
+  const [listActive, setListActive] = useState(false)
+  const listRef = useRef(null)
+
+  const filteredItems = value.length
+    ? items.filter(({ label }) => label.toLowerCase().includes(value.toLowerCase()))
+    : items
+
+  useOutsideClick(listRef, () => setListActive(false))
+
+  useEffect(() => {
+    setValue('')
+  }, [currFilterIndex])
+
+  const renderList = () => {
+    return filteredItems.length ? (
+      filteredItems.map((item) => (
+        <ChecksItem
+          key={item.value}
+          currFilter={currFilter}
+          currFilterIndex={currFilterIndex}
+          setFilterValue={setFilterValue}
+          item={item}
+          label={item.label}
+          value={item.value}
+        />
+      ))
+    ) : (
+      <CheckListText>{currFilter.name} were not found</CheckListText>
+    )
+  }
+
+  const calcCols = () => {
+    if (filteredItems.length > 16 && filteredItems.length <= 32) {
+      return '1fr 1fr'
+    } else if (filteredItems.length > 32) {
+      return '1fr 1fr 1fr'
+    } else {
+      return 'none'
+    }
+  }
+
+  return (
+    <SearchBox hover gap="8px" padding="0 11px">
+      <SearchInput
+        onFocus={() => setListActive(true)}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={`Search or select ${currFilter.name}`}
+      />
+      <IconWrapper width="20px" height="20px">
+        <SearchIcon />
+      </IconWrapper>
+      {listActive && (
+        <CheckListWrapper ref={listRef}>
+          <StyledChecksList columns={calcCols()}>{renderList()}</StyledChecksList>
+        </CheckListWrapper>
+      )}
+    </SearchBox>
+  )
+}
+
+export default SearchByChecks
diff --git a/client/src/components/Search/SearchByChecks/SearchByChecks.styles.js b/client/src/components/Search/SearchByChecks/SearchByChecks.styles.js
new file mode 100644
index 000000000..c93b8fc95
--- /dev/null
+++ b/client/src/components/Search/SearchByChecks/SearchByChecks.styles.js
@@ -0,0 +1,88 @@
+import styled from 'styled-components'
+
+import checkboxImg from '../../../assets/SearchPanel/Checkbox.svg'
+
+export const CheckListWrapper = styled.div`
+  z-index: 250;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: calc(100% + 8px);
+  padding: 12px 0;
+  background: #2f3239;
+  box-shadow: 0px 4px 24px rgba(17, 20, 27, 0.25);
+  border-radius: 5px;
+`
+
+export const StyledChecksList = styled.ul`
+  max-height: 190px;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: ${({ columns }) => columns || 'none'};
+
+  @media screen and (max-width: 900px) {
+    grid-template-columns: repeat(1, 1fr);
+    width: 100%;
+  }
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #46a11b;
+    border-radius: 10px;
+    width: 5px;
+    height: 20px;
+  }
+  &::-webkit-scrollbar-track {
+    display: none;
+  }
+`
+
+export const StyledChecksItem = styled.li`
+  cursor: pointer;
+  color: #fff;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 8px 4px 16px;
+  background: #2f3239;
+  p {
+    margin-left: 16px;
+    font-family: 'NoirPro-Light';
+    line-height: 120%;
+  }
+  input {
+    cursor: pointer;
+    position: relative;
+    width: 0;
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      width: 16px;
+      height: 16px;
+      border: 0.8px solid #fff;
+      border-radius: 3.2px;
+    }
+    &:checked {
+      &::before {
+        background: url(${checkboxImg}) center center no-repeat;
+        background-color: #46a11b;
+        border: none;
+      }
+    }
+  }
+  &:hover {
+    background: #27431f;
+    input {
+      &::before {
+        border-color: #46a11b;
+      }
+    }
+  }
+`
+
+export const CheckListText = styled.p`
+  margin-left: 16px;
+`
diff --git a/client/src/components/Search/SearchByRange/SearchByRange.js b/client/src/components/Search/SearchByRange/SearchByRange.js
new file mode 100644
index 000000000..50187dd92
--- /dev/null
+++ b/client/src/components/Search/SearchByRange/SearchByRange.js
@@ -0,0 +1,40 @@
+import { SearchBox } from '../Search.styles'
+
+import { RangeItem, RangeList, StyledRange } from './SearchByRange.styles'
+
+const SearchByRange = ({ currFilter, currFilterIndex, setFilterValue }) => {
+  const rangeItems = []
+
+  for (let i = 1; i <= currFilter.max; i++) {
+    rangeItems.push(<RangeItem key={i}>{i}</RangeItem>)
+  }
+
+  const handleChange = (value) => {
+    if (!currFilter.value || currFilter.value[0] !== value[0] || currFilter.value[1] !== value[1]) {
+      console.log(1)
+      setFilterValue(currFilterIndex, value)
+    }
+  }
+
+  return (
+    <SearchBox gap="24px" padding="8px 30px">
+      <StyledRange
+        getAriaLabel={() => `${currFilter.name} range`}
+        value={!currFilter.value ? [currFilter.min, currFilter.max] : currFilter.value}
+        sx={{
+          padding: 0,
+          width: 'calc(100% - 46px)',
+          height: '100%',
+        }}
+        onChange={(e, newValue) => handleChange(newValue)}
+        min={currFilter.min}
+        max={currFilter.max}
+        // getAriaValueText={valuetext}
+        disableSwap
+      />
+      <RangeList>{rangeItems}</RangeList>
+    </SearchBox>
+  )
+}
+
+export default SearchByRange
diff --git a/client/src/components/Search/SearchByRange/SearchByRange.styles.js b/client/src/components/Search/SearchByRange/SearchByRange.styles.js
new file mode 100644
index 000000000..0830b33a6
--- /dev/null
+++ b/client/src/components/Search/SearchByRange/SearchByRange.styles.js
@@ -0,0 +1,55 @@
+import Slider from '@mui/material/Slider'
+import styled from 'styled-components'
+
+export const RangeList = styled.ul`
+  position: absolute;
+  left: 32px;
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`
+
+export const RangeItem = styled.li`
+  cursor: pointer;
+  width: 46px;
+  height: 24px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background-color: #27431f;
+  }
+`
+
+export const StyledRange = styled(Slider)`
+  margin: 0 auto;
+  height: 100%;
+  .MuiSlider-thumb {
+    border-radius: 5px;
+    width: 46px;
+    height: 24px;
+    background: #328d0a;
+  }
+
+  .MuiSlider-rail {
+    background-color: transparent;
+  }
+
+  .MuiSlider-track {
+    background-color: #27431f;
+    border: none;
+    height: 24px;
+  }
+
+  .MuiSlider-thumb {
+    &:focus,
+    &:hover,
+    &.Mui-active,
+    &.Mui-focusVisible {
+      box-shadow: none;
+    }
+  }
+`
diff --git a/client/src/components/Search/SearchByText/SearchByText.js b/client/src/components/Search/SearchByText/SearchByText.js
new file mode 100644
index 000000000..f7f399631
--- /dev/null
+++ b/client/src/components/Search/SearchByText/SearchByText.js
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+import SearchIcon from '../../../assets/Shared/SearchIcon'
+import IconWrapper from '../../../shared/components/IconWrapper/IconWrapper'
+import { SearchBox, SearchInput } from '../Search.styles'
+
+const SearchByText = ({ placeholder, currFilter, currFilterIndex, setFilterValue }) => {
+  const [timer, setTimer] = useState(null)
+  const [value, setValue] = useState(currFilter.value)
+
+  useEffect(() => {
+    clearTimeout(timer)
+    setValue(currFilter.value)
+  }, [currFilter])
+
+  useEffect(() => {
+    clearTimeout(timer)
+    setTimer(setTimeout(() => setFilterValue(currFilterIndex, value), 1000))
+
+    return () => clearTimeout(timer)
+  }, [value])
+
+  return (
+    <SearchBox hover gap="8px" padding="0 11px">
+      <SearchInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={placeholder}
+      />
+      <IconWrapper width="20px" height="20px">
+        <SearchIcon />
+      </IconWrapper>
+    </SearchBox>
+  )
+}
+
+export default SearchByText
diff --git a/client/src/components/TagsList/ChecksTag/ChecksTag.js b/client/src/components/TagsList/ChecksTag/ChecksTag.js
new file mode 100644
index 000000000..89728c962
--- /dev/null
+++ b/client/src/components/TagsList/ChecksTag/ChecksTag.js
@@ -0,0 +1,57 @@
+import { useRef, useState } from 'react'
+
+import Close from '../../../assets/Shared/Close'
+import { useOutsideClick } from '../../../hooks/useOutsideClick'
+import { ClearButton, CrossWrapper, TagItem, TagSubItem } from '../TagsList.styles'
+
+const ChecksTag = ({ value, filterName, filterIndex, setFilterValue }) => {
+  const [listIsOpened, setListIsOpened] = useState(false)
+  const itemsListRef = useRef(null)
+
+  useOutsideClick(itemsListRef, () => setListIsOpened(false))
+
+  const onRemoveItem = (itemValue) => {
+    setFilterValue(
+      filterIndex,
+      value.filter((item) => item.value !== itemValue),
+    )
+  }
+
+  return (
+    <>
+      <TagItem>
+        <TagSubItem onClick={() => onRemoveItem(value[0].value)}>
+          <p>{value[0].label}</p>
+          <CrossWrapper>
+            <Close />
+          </CrossWrapper>
+        </TagSubItem>
+      </TagItem>
+      {value.length > 1 && (
+        <TagItem ref={itemsListRef} onClick={() => setListIsOpened(true)}>
+          {listIsOpened ? (
+            <>
+              {value.slice(1).map((item, index) => (
+                <TagSubItem key={item.value} onClick={() => onRemoveItem(value[index + 1].value)}>
+                  <p>{item.label}</p>
+                  <CrossWrapper>
+                    <Close />
+                  </CrossWrapper>
+                </TagSubItem>
+              ))}
+              <ClearButton onClick={() => setFilterValue(filterIndex, [])}>Clear all</ClearButton>
+            </>
+          ) : (
+            <TagSubItem>
+              <p>
+                +{value.length - 1} {filterName}
+              </p>
+            </TagSubItem>
+          )}
+        </TagItem>
+      )}
+    </>
+  )
+}
+
+export default ChecksTag
diff --git a/client/src/components/TagsList/RangeTag/RangeTag.js b/client/src/components/TagsList/RangeTag/RangeTag.js
new file mode 100644
index 000000000..f6fa0dcc8
--- /dev/null
+++ b/client/src/components/TagsList/RangeTag/RangeTag.js
@@ -0,0 +1,17 @@
+import Close from '../../../assets/Shared/Close'
+import { CrossWrapper, TagItem, TagSubItem } from '../TagsList.styles'
+
+const RangeTag = ({ value, filterIndex, setFilterValue }) => {
+  return (
+    <TagItem>
+      <TagSubItem onClick={() => setFilterValue(filterIndex, null)}>
+        <p>{value[0] !== value[1] ? `${value[0]}-${value[1]}` : value[0]}</p>
+        <CrossWrapper>
+          <Close />
+        </CrossWrapper>
+      </TagSubItem>
+    </TagItem>
+  )
+}
+
+export default RangeTag
diff --git a/client/src/components/TagsList/TagsList.js b/client/src/components/TagsList/TagsList.js
new file mode 100644
index 000000000..c187bca18
--- /dev/null
+++ b/client/src/components/TagsList/TagsList.js
@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import ChecksTag from './ChecksTag/ChecksTag'
+import RangeTag from './RangeTag/RangeTag'
+import TextTag from './TextTag/TextTag'
+import { StyledTagsList } from './TagsList.styles'
+
+const TagsList = ({ sliceName, setFilterValueAction, currFilter, currFilterIndex }) => {
+  const dispatch = useDispatch()
+  const filtersArr = useSelector((state) => state[sliceName])
+  const setFilterValue = (index, value) => dispatch(setFilterValueAction({ index, value }))
+
+  const renderList = () => {
+    if (currFilter && typeof currFilterIndex !== 'undefined') {
+      switch (currFilter.type) {
+        case 'text':
+          return currFilter.value.length ? (
+            <TextTag
+              value={currFilter.value}
+              filterIndex={currFilterIndex}
+              setFilterValue={setFilterValue}
+            />
+          ) : null
+        case 'checks':
+          return currFilter.value.length ? (
+            <ChecksTag
+              value={currFilter.value}
+              filterName={currFilter.name}
+              filterIndex={currFilterIndex}
+              setFilterValue={setFilterValue}
+            />
+          ) : null
+        case 'range':
+          return currFilter.value ? (
+            <RangeTag
+              value={currFilter.value}
+              filterIndex={currFilterIndex}
+              setFilterValue={setFilterValue}
+            />
+          ) : null
+        default:
+          return <div>Filter undefined</div>
+      }
+    } else {
+      return filtersArr.map((item, index) => {
+        switch (item.type) {
+          case 'text':
+            return item.value.length ? (
+              <TextTag
+                key={item.name}
+                value={item.value}
+                filterIndex={index}
+                setFilterValue={setFilterValue}
+              />
+            ) : null
+          case 'checks':
+            return item.value.length ? (
+              <ChecksTag
+                key={item.name}
+                value={item.value}
+                filterName={item.name}
+                filterIndex={index}
+                setFilterValue={setFilterValue}
+              />
+            ) : null
+          case 'range':
+            return item.value ? (
+              <RangeTag
+                key={item.name}
+                value={item.value}
+                filterIndex={index}
+                setFilterValue={setFilterValue}
+              />
+            ) : null
+          default:
+            return <div>Filters undefined</div>
+        }
+      })
+    }
+  }
+
+  return <StyledTagsList>{renderList()}</StyledTagsList>
+}
+
+export default TagsList
diff --git a/client/src/components/TagsList/TagsList.styles.js b/client/src/components/TagsList/TagsList.styles.js
new file mode 100644
index 000000000..a6c720373
--- /dev/null
+++ b/client/src/components/TagsList/TagsList.styles.js
@@ -0,0 +1,64 @@
+import styled from 'styled-components'
+
+export const StyledTagsList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 40px;
+`
+
+export const TagItem = styled.li`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+  color: #c1c1c4;
+  background: #2f3239;
+  border-radius: 5px;
+`
+
+export const TagSubItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 8px;
+
+  path {
+    transition: stroke 0.2s;
+  }
+
+  &:hover {
+    path {
+      stroke: #d42422;
+    }
+  }
+`
+
+export const ClearButton = styled.div`
+  padding: 5px 0;
+  text-align: center;
+  font-family: 'Rubik';
+  font-size: 16px;
+  line-height: 140%;
+  color: #cd3633;
+`
+
+export const CrossWrapper = styled.div`
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  path {
+    fill: #c1c1c4;
+  }
+`
diff --git a/client/src/components/TagsList/TextTag/TextTag.js b/client/src/components/TagsList/TextTag/TextTag.js
new file mode 100644
index 000000000..d7bb82b4f
--- /dev/null
+++ b/client/src/components/TagsList/TextTag/TextTag.js
@@ -0,0 +1,17 @@
+import Close from '../../../assets/Shared/Close'
+import { CrossWrapper, TagItem, TagSubItem } from '../TagsList.styles'
+
+const TextTag = ({ value, filterIndex, setFilterValue }) => {
+  return (
+    <TagItem>
+      <TagSubItem onClick={() => setFilterValue(filterIndex, '')}>
+        <p>{value.length <= 20 ? value : `${value.slice(0, 20)}...`}</p>
+        <CrossWrapper>
+          <Close />
+        </CrossWrapper>
+      </TagSubItem>
+    </TagItem>
+  )
+}
+
+export default TextTag
diff --git a/client/src/components/Team/About/About.jsx b/client/src/components/Team/About/About.jsx
new file mode 100644
index 000000000..dd43f2c77
--- /dev/null
+++ b/client/src/components/Team/About/About.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { Form } from 'formik'
+
+import CustomInput from '../../../shared/components/Formik/CustomInput/CustomInput'
+import CustomTextArea from '../../../shared/components/Formik/CustomTextArea/CustomTextArea'
+import Loader from '../../../shared/components/Loader/Loader'
+
+import CountrySelect from './Selects/CountrySelect'
+import TypeSelect from './Selects/TypeSelect'
+import {
+  EditTeam,
+  FormContainer,
+  LabelFieldContainer,
+  LabelTextFieldContainer,
+  LeaderActionsBox,
+  LeaveTeam,
+} from './About.styles'
+import RegularAbout from './RegularAbout'
+
+const About = ({ team, isEditing, setIsEditing, handleOpenDelete }) => {
+  if (isEditing) {
+    return (
+      <Form>
+        <FormContainer>
+          <LabelFieldContainer>
+            <label htmlFor="name">Name</label>
+            <CustomInput id="name" name="name" height="34px" />
+          </LabelFieldContainer>
+          <LabelFieldContainer>
+            <label htmlFor="tag">Tag</label>
+            <CustomInput id="tag" name="tag" height="34px" />
+          </LabelFieldContainer>
+          <LabelFieldContainer>
+            <label htmlFor="country">Country</label>
+            <CountrySelect team={team} />
+          </LabelFieldContainer>
+          <LabelFieldContainer>
+            <label htmlFor="type">type</label>
+            <TypeSelect team={team} />
+          </LabelFieldContainer>
+
+          <LabelTextFieldContainer
+            style={{
+              marginTop: '8px',
+            }}
+          >
+            <label htmlFor="desc">Description</label>
+            <CustomTextArea
+              style={{
+                background: `transparent`,
+                width: `100%`,
+                borderRadius: `5px`,
+                maxHeight: '113px',
+                resize: 'none',
+                color: '#FFFFFF',
+                marginTop: '0px',
+              }}
+              name="description"
+              placeholder="Describe your team..."
+              maxLength={200}
+            />
+          </LabelTextFieldContainer>
+        </FormContainer>
+      </Form>
+    )
+  }
+
+  return <RegularAbout team={team} />
+}
+
+export default About
diff --git a/client/src/components/Team/About/About.styles.js b/client/src/components/Team/About/About.styles.js
new file mode 100644
index 000000000..39203670b
--- /dev/null
+++ b/client/src/components/Team/About/About.styles.js
@@ -0,0 +1,119 @@
+import styled from 'styled-components'
+
+import { B2fs, B2fw, B2lh, B3fs, B3fw, B3lh } from '../../../constants/fonts'
+
+export const FormContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto 2fr;
+  row-gap: 16px;
+  column-gap: 36px;
+  input {
+    font-size: ${B2fs};
+    line-height: ${B2lh};
+    font-weight: ${B2fw};
+  }
+  input:focus {
+    outline: none;
+  }
+`
+
+export const LabelFieldContainer = styled.div`
+  align-items: start;
+  font-size: 14px;
+  color: #86878b;
+  label {
+    font-size: ${B3fs};
+    line-height: ${B3lh};
+    font-weight: ${B3fw};
+  }
+`
+export const LabelTextFieldContainer = styled.div`
+  label {
+    font-size: ${B3fs};
+    line-height: ${B3lh};
+    font-weight: ${B3fw};
+  }
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: 2px;
+  color: #86878b;
+  grid-column: span 2;
+  textarea {
+    font-size: ${B3fs};
+    line-height: ${B3lh};
+    font-weight: ${B3fw};
+  }
+`
+
+export const LeaderActionsBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  button {
+    width: 107px;
+  }
+  position: absolute;
+  bottom: 6%;
+  right: -48.5%;
+  opacity: ${(props) => (props.opacity ? '1' : '0')};
+  z-index: ${(props) => (props.opacity ? '9999' : '0')};
+  pointer-events: ${(props) => (props.opacity ? 'auto' : 'none')};
+`
+
+export const LeaveTeam = styled.button`
+  width: 100%;
+  height: ${(props) => props.height || '44px'};
+  background: transparent;
+  border: 2px solid #a5211f;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  outline: none;
+  margin-top: ${(props) => props.marginTop || '34px'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0px 2px 25px #a5211f60;
+  }
+`
+export const EditTeam = styled.button`
+  width: ${(props) => props.width || ''};
+  margin-top: ${(props) => props.marginTop || '0'};
+  background-color: #46a11b;
+  padding: 10px 16px 8px;
+  border-radius: 10px;
+  color: #fff;
+  font-size: ${B2fs};
+  font-weight: ${B2fw};
+  line-height: ${B2lh};
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  box-shadow: 0px 4px 25px rgba(93, 157, 11, 0.25);
+  &:hover {
+    transform: translateY(-1.25px);
+    box-shadow: 0px 5px 31.25px rgba(93, 157, 11, 0.3125);
+  }
+`
+
+export const nameStyles = (backgroundColor) => {
+  return {
+    color: '#FFF',
+    backgroundColor: `${backgroundColor[0]}`,
+    border: 'none',
+    padding: '8px 4px',
+    borderBottom: '1px solid #86878B',
+    width: `98%`,
+    transition: 'all .2s',
+    height: '34px',
+  }
+}
diff --git a/client/src/components/Team/About/RegularAbout.jsx b/client/src/components/Team/About/RegularAbout.jsx
new file mode 100644
index 000000000..406451931
--- /dev/null
+++ b/client/src/components/Team/About/RegularAbout.jsx
@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { useGetScreenWidth } from '../../../hooks/useGetScreenWidth'
+
+import {
+  StatiscitcsWrapper,
+  Statistic,
+  StatisticsFlex,
+  TeamCardBody,
+  TeamCardBodyPoint,
+  TeamCardDesc,
+  TeamCardFigure,
+  TeamCardTop,
+  TeamCardTopInfo,
+} from './RegularAbout.styles'
+
+const RegularAbout = ({ team }) => {
+  const width = useGetScreenWidth()
+
+  return (
+    <TeamCardFigure>
+      <TeamCardTop>
+        <TeamCardTopInfo>
+          <h3>Name</h3>
+          <p>
+            {team.name.length > 10 && width >= 1024 ? team.name.slice(0, 10) + '...' : team.name}
+          </p>
+        </TeamCardTopInfo>
+        <TeamCardTopInfo>
+          <h3>Tag</h3>
+          <p>{team.tag.toUpperCase()}</p>
+        </TeamCardTopInfo>
+        <TeamCardTopInfo>
+          <h3>Type</h3>
+          <p>
+            {[team.type.slice(0, 1).toUpperCase(), team.type.slice(1, team.type.length)].join('')}
+          </p>
+        </TeamCardTopInfo>
+        <TeamCardTopInfo>
+          <h3>Country</h3>
+          <p>{team.country}</p>
+        </TeamCardTopInfo>
+      </TeamCardTop>
+      <TeamCardBody>
+        <TeamCardBodyPoint>
+          <h3>Description</h3>
+          <TeamCardDesc>
+            {team?.description ? team.description : `This team doesn't have any description yet.`}
+          </TeamCardDesc>
+        </TeamCardBodyPoint>
+        <StatiscitcsWrapper>
+          <h3>Statistics</h3>
+          <StatisticsFlex>
+            <Statistic>
+              <p>
+                Tournaments: <span>0</span>
+              </p>
+            </Statistic>
+            <Statistic>
+              <p>
+                Wins: <span>{team.wins}</span>
+              </p>
+            </Statistic>
+            <Statistic>
+              <p>
+                Points: <span>{team.points}</span>
+              </p>
+            </Statistic>
+          </StatisticsFlex>
+        </StatiscitcsWrapper>
+      </TeamCardBody>
+    </TeamCardFigure>
+  )
+}
+
+export default RegularAbout
diff --git a/client/src/components/Team/About/RegularAbout.styles.jsx b/client/src/components/Team/About/RegularAbout.styles.jsx
new file mode 100644
index 000000000..abd847a76
--- /dev/null
+++ b/client/src/components/Team/About/RegularAbout.styles.jsx
@@ -0,0 +1,114 @@
+import styled from 'styled-components'
+
+import { B2fs, B2fw, B2lh, B3fs, B3fw, B3lh } from '../../../constants/fonts'
+
+export const Statistic = styled.div`
+  p {
+    font-size: ${B2fs};
+    line-height: ${B2lh};
+    font-weight: ${B2fw};
+    margin: 0;
+    display: inline !important;
+  }
+  p span {
+    margin: 0;
+    color: #5bd424;
+    display: inline !important;
+  }
+`
+
+export const StatisticsFlex = styled.div`
+  display: flex;
+  gap: 48px;
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  @media screen and (max-width: 468px) {
+    flex-direction: column;
+    gap: 4px;
+    justify-content: start;
+  }
+`
+
+export const TeamCardBody = styled.div`
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  gap: 8px;
+  justify-content: space-between;
+  height: calc(100% - 94px);
+`
+
+export const TeamCardBodyPoint = styled.div`
+  h3 {
+    color: #86878b;
+    margin: 0;
+  }
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const TeamCardDesc = styled.p`
+  color: #fff;
+  line-height: 1.4;
+  margin: 0;
+`
+
+export const TeamCardFigure = styled.div`
+  background-color: transparent;
+  margin: 0;
+  height: calc(100% - 31px);
+  h3 {
+    font-size: ${B3fs};
+    line-height: ${B3lh};
+    font-weight: ${B3fw};
+  }
+  p {
+    margin: 0;
+    font-size: ${B2fs};
+    line-height: ${B2lh};
+    font-weight: ${B2fw};
+    color: #fff;
+  }
+`
+
+export const TeamCardTop = styled.div`
+  display: grid;
+  grid-template-columns: 140px 80px 100px 140px;
+
+  @media screen and (max-width: 1024px) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: start;
+    gap: 16px;
+  }
+`
+export const TeamCardTopInfo = styled.div`
+  h3 {
+    margin: 0;
+    margin-bottom: 8px;
+    color: #86878b;
+  }
+`
+
+export const StatiscitcsWrapper = styled.div`
+  h3 {
+    margin: 0;
+    color: #86878b;
+  }
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 24px;
+  }
+`
diff --git a/client/src/components/Team/About/Selects/CountrySelect.jsx b/client/src/components/Team/About/Selects/CountrySelect.jsx
new file mode 100644
index 000000000..502762706
--- /dev/null
+++ b/client/src/components/Team/About/Selects/CountrySelect.jsx
@@ -0,0 +1,45 @@
+import React, { memo, useMemo } from 'react'
+import countryList from 'react-select-country-list'
+
+import { B2fs, B2fw, B2lh } from '../../../../constants/fonts'
+import CustomSelect from '../../../../shared/components/Formik/CustomSelect/CustomSelect'
+import { PlaceholderText } from '../../../Teammates/components/SelectField/SelectField.styles'
+
+const CountrySelect = ({ team }) => {
+  const countriesOptions = useMemo(() => countryList().getData(), [])
+
+  return (
+    <CustomSelect
+      multiple={false}
+      label="Country"
+      name="country"
+      options={countriesOptions}
+      line={false}
+      hideLabelOnSelect={true}
+      renderValue={(selected) => {
+        if (selected?.length === 0) {
+          return (
+            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'start', fontWeight: '400' }}>
+              {team.country}
+            </PlaceholderText>
+          )
+        }
+
+        return selected
+      }}
+      styles={{
+        height: '38px',
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 0,
+        borderBottom: '1px solid #86878B',
+        width: '100%',
+        fontSize: B2fs,
+        fontWeight: B2fw,
+        lineHeight: B2lh,
+      }}
+    />
+  )
+}
+
+export default CountrySelect
diff --git a/client/src/components/Team/About/Selects/TypeSelect.jsx b/client/src/components/Team/About/Selects/TypeSelect.jsx
new file mode 100644
index 000000000..925f2331e
--- /dev/null
+++ b/client/src/components/Team/About/Selects/TypeSelect.jsx
@@ -0,0 +1,39 @@
+import React, { memo } from 'react'
+
+import typeOptions from '../../../../constants/types'
+import CustomSelect from '../../../../shared/components/Formik/CustomSelect/CustomSelect'
+import { PlaceholderText } from '../../../Teammates/components/SelectField/SelectField.styles'
+
+const TypeSelect = ({ team }) => {
+  return (
+    <CustomSelect
+      multiple={false}
+      label="type"
+      name="type"
+      options={typeOptions}
+      line={false}
+      hideLabelOnSelect={true}
+      renderValue={(selected) => {
+        if (selected.length === 0) {
+          return (
+            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'start', fontWeight: '400' }}>
+              {team.type}
+            </PlaceholderText>
+          )
+        }
+
+        return selected
+      }}
+      styles={{
+        height: '38px',
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 0,
+        borderBottom: '1px solid #86878B',
+        width: '100%',
+      }}
+    />
+  )
+}
+
+export default memo(TypeSelect)
diff --git a/client/src/components/Team/EditImage/EditImage.jsx b/client/src/components/Team/EditImage/EditImage.jsx
new file mode 100644
index 000000000..791bf9040
--- /dev/null
+++ b/client/src/components/Team/EditImage/EditImage.jsx
@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from 'react'
+import { Field, Form } from 'formik'
+
+import { CheckCircle } from '../../../assets/Team/CheckCircle'
+import { UploadSymbol } from '../../../assets/Team/UploadSymbol'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
+
+import {
+  DefaultImg,
+  DropFileArea,
+  FileButton,
+  ImageBox,
+  MyRadioGroup,
+  Text,
+} from './EditImage.styles'
+
+const EditImage = ({
+  selectedImage,
+  imgData,
+  picture,
+  setImgData,
+  setPicture,
+  changeSelectedImage,
+  defaultTeamImages,
+}) => {
+  const [errorMessage, updateErrorMessage] = useState('')
+
+  useEffect(() => {
+    if (errorMessage === '') {
+      return
+    }
+
+    const timer = () => {
+      updateErrorMessage('')
+    }
+
+    const timeout = setTimeout(timer, 2000)
+
+    return () => clearTimeout(timeout)
+  }, [errorMessage])
+
+  const selectedImgJSX =
+    imgData === null ? (
+      <>
+        <UploadSymbol />
+        <Text margin="12px 0 0 0 ">
+          {errorMessage.length > 0 ? errorMessage : 'Drop here or click to upload'}
+        </Text>
+      </>
+    ) : (
+      <div>
+        <Text>{picture === null ? '' : picture.name}</Text>
+      </div>
+    )
+
+  return (
+    <Form>
+      <FlexWrapper direction="column" gap="24px">
+        <FlexWrapper direction="column" gap="16px">
+          <Text>Select a default</Text>
+          <MyRadioGroup
+            name="default"
+            onClick={(e) => {
+              const pic = e.target.dataset.pic
+
+              if (pic === undefined) {
+                return
+              }
+              const nextPic = pic === selectedImage ? '' : pic
+
+              setPicture(null)
+              setImgData(null)
+              changeSelectedImage(nextPic)
+            }}
+          >
+            {defaultTeamImages.map((image, key) => (
+              <ImageBox key={key} myKey={String(key) === selectedImage}>
+                <DefaultImg
+                  data-pic={key}
+                  src={require(`../../../assets/Images/team/${image}.png`)}
+                />
+                <span>
+                  <CheckCircle />
+                </span>
+              </ImageBox>
+            ))}
+          </MyRadioGroup>
+        </FlexWrapper>
+      </FlexWrapper>
+
+      <FlexWrapper direction="column" gap="16px">
+        <Text>Or add your own</Text>
+        <DropFileArea
+          type="file"
+          id="image"
+          name="image"
+          onChange={(ev) => {
+            ev.preventDefault()
+            const file = ev.target.files[0]
+
+            const fileExtension = file.name.split('.').pop().toLowerCase()
+
+            // check file type
+            if (
+              !file.type.includes('jpeg') &&
+              !fileExtension.includes('png') &&
+              !fileExtension.includes('jpg')
+            ) {
+              updateErrorMessage('Only JPEG, JPG and PNG formats are accepted.')
+
+              return
+            }
+
+            if (file.size > 10000000) {
+              updateErrorMessage('Image too big')
+
+              return
+            }
+
+            setPicture(file)
+            const reader = new FileReader()
+
+            reader.addEventListener('load', () => {
+              changeSelectedImage('')
+              setImgData(reader.result)
+            })
+            reader.readAsDataURL(file)
+          }}
+        />
+        <FileButton
+          onClick={(ev) => {
+            ev.preventDefault()
+            document.querySelector('#image').click()
+          }}
+          onDrop={(ev) => {
+            ev.preventDefault()
+
+            if (ev.dataTransfer.items) {
+              // Use DataTransferItemList interface to access the file(s)
+              ;[...ev.dataTransfer.items].forEach((item, i) => {
+                // If dropped items aren't files, reject them
+                if (item.kind === 'file') {
+                  const file = item.getAsFile()
+
+                  const fileExtension = file.name.split('.').pop().toLowerCase()
+
+                  // check file type
+                  if (
+                    !file.type.includes('jpeg') &&
+                    !fileExtension.includes('png') &&
+                    !fileExtension.includes('jpg')
+                  ) {
+                    updateErrorMessage('Only JPEG, JPG and PNG formats are accepted.')
+
+                    return
+                  }
+
+                  setPicture(file)
+                  const reader = new FileReader()
+
+                  reader.readAsDataURL(file)
+                  reader.addEventListener('load', () => {
+                    changeSelectedImage('')
+                    setImgData(reader.result)
+                  })
+                }
+              })
+            } else {
+              // Use DataTransfer interface to access the file(s)
+              ;[...ev.dataTransfer.files].forEach((file, i) => {
+                // console.log(`… file[${i}].name = ${file.name}`)
+              })
+            }
+          }}
+          onDragOver={(e) => {
+            e.preventDefault()
+            document.querySelector('#image').click()
+          }}
+          dropzone="move"
+        >
+          {selectedImgJSX}
+        </FileButton>
+      </FlexWrapper>
+    </Form>
+  )
+}
+
+export default EditImage
diff --git a/client/src/components/Team/EditImage/EditImage.styles.js b/client/src/components/Team/EditImage/EditImage.styles.js
new file mode 100644
index 000000000..8fea1fc74
--- /dev/null
+++ b/client/src/components/Team/EditImage/EditImage.styles.js
@@ -0,0 +1,91 @@
+import styled from 'styled-components'
+
+export const MyRadioGroup = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 24px;
+
+  @media screen and (max-width: 660px) {
+    overflow-x: scroll;
+
+    ::-webkit-scrollbar {
+      /* WebKit */
+      transition: all 0.2s;
+      width: 5px;
+      height: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #5d9d0b;
+      border-radius: 10px;
+    }
+  }
+`
+
+export const FileButton = styled.div`
+  border: 2px dashed #86878b;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  cursor: pointer;
+  height: 184px;
+`
+
+export const ImageBox = styled.div`
+  position: relative;
+  opacity: ${(props) => (props.myKey ? '1' : '.50')};
+  transition: all 0.2s;
+  span {
+    display: block;
+    position: absolute;
+    svg {
+      width: 14.29px;
+      height: 14.29px;
+    }
+    // background-color: green;
+    right: 0%;
+    bottom: 0%;
+    opacity: ${(props) => (props.myKey ? '1' : '0')};
+  }
+`
+
+export const DefaultImg = styled.img`
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  border-radius: 50%;
+  &:after {
+    display: block;
+    content: '?';
+    width: 20px;
+    height: 20px;
+    background-color: green;
+    position: absolute;
+  }
+`
+
+export const Text = styled.h3`
+  font-weight: ${(props) => props.fontWeight || '400'};
+  font-size: ${(props) => props.fontSize || '16px'};
+  color: ${(props) => props.color || '#fff'};
+  margin: ${(props) => props.margin || '0'};
+  /* line-height: ${(props) => props.lineHeight || '1'}; */
+`
+
+export const DropFileArea = styled.input`
+  color: #fff;
+  border: none;
+  border-bottom: 1px solid #86878b;
+  transition: all 0.2s;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`
diff --git a/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.jsx b/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.jsx
new file mode 100644
index 000000000..797398ca8
--- /dev/null
+++ b/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.jsx
@@ -0,0 +1,65 @@
+import React from 'react'
+
+import UserPlus from '../../../assets/Team/UserPlus'
+import { UserPlusContainer } from '../TeamForm/TeamForm.styles'
+
+import {
+  DesktopButtonWrapper,
+  InviteButton,
+  Tab,
+  TabContainer,
+  TopContainer,
+} from './LargeCardSwitch.styles'
+
+const LargeCardSwitch = ({
+  isMembers,
+  about,
+  switchIsMembers,
+  handleOpenInvite,
+  role,
+  isEditing,
+  handleOpenTransferLeader,
+}) => {
+  return (
+    <TopContainer isMembers={isMembers}>
+      <TabContainer about={about}>
+        <Tab
+          onClick={() => {
+            switchIsMembers(true)
+          }}
+          isMembers={isMembers}
+        >
+          Members
+          <span></span>
+        </Tab>
+        <Tab
+          onClick={() => {
+            switchIsMembers(false)
+          }}
+          isMembers={!isMembers}
+        >
+          About
+          <span></span>
+        </Tab>
+      </TabContainer>
+      {isMembers && !isEditing && (role === 'leader' || role === 'member') && (
+        <DesktopButtonWrapper>
+          <InviteButton onClick={handleOpenInvite}>
+            <UserPlusContainer>
+              <UserPlus />
+            </UserPlusContainer>
+            Invite
+          </InviteButton>
+        </DesktopButtonWrapper>
+      )}
+
+      {isMembers && isEditing && role === 'leader' && (
+        <DesktopButtonWrapper>
+          <InviteButton onClick={handleOpenTransferLeader}>Change Leader</InviteButton>
+        </DesktopButtonWrapper>
+      )}
+    </TopContainer>
+  )
+}
+
+export default LargeCardSwitch
diff --git a/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.styles.jsx b/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.styles.jsx
new file mode 100644
index 000000000..51ba15a81
--- /dev/null
+++ b/client/src/components/Team/LargeCardSwitch/LargeCardSwitch.styles.jsx
@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+
+import { B2fs, B2fw, B2lh } from '../../../constants/fonts'
+
+export const DesktopButtonWrapper = styled.div`
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+`
+
+export const InviteButton = styled.button`
+  border: 1px solid #5bd424;
+  color: #fff;
+  background: transparent;
+  padding: 6px 16px 4px 16px;
+  cursor: pointer;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: ${B2fs};
+  line-height: ${B2lh};
+  font-weight: ${B2fw};
+  ${'' /* width: 101px; */}
+  height: 32px;
+  transition: all 0.2s;
+  &:hover {
+    svg path:nth-child(3),
+    svg path:nth-child(4) {
+      transform: translateY(-1px);
+      transition: all 0.2s;
+    }
+  }
+`
+
+export const Tab = styled.p`
+  color: ${(props) => (!props.isMembers ? '#fff' : '#5BD424')};
+  cursor: pointer;
+  transition: all 0.2s;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  margin-bottom: 8px;
+  font-size: 20px;
+  font-weight: 500;
+
+  span {
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    bottom: -20%;
+    left: 50%;
+    background-color: #5bd424;
+    transition: all 0.2s;
+    transform: translateX(-50%) ${(props) => (props.isMembers ? `scaleX(100%)` : `scaleX(0)`)};
+  }
+`
+export const TabContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  font-weight: ${B2fw};
+  line-height: ${B2lh};
+  font-size: ${B2fs};
+  justify-content: start;
+  position: relative;
+  top: 0%;
+  span {
+    width: 100%;
+    height: 1px;
+    color: #fff;
+  }
+`
+export const TopContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: ${(props) => (props.isMembers ? '32px' : '24px')};
+`
diff --git a/client/src/components/Team/Members/Members.jsx b/client/src/components/Team/Members/Members.jsx
new file mode 100644
index 000000000..428c39938
--- /dev/null
+++ b/client/src/components/Team/Members/Members.jsx
@@ -0,0 +1,155 @@
+import { useState } from 'react'
+
+import SCrownRight from '../../../assets/Shared/Crowns/SCrownRight'
+import Chat from '../../../assets/Team/Chat'
+import Person from '../../../assets/Team/Person'
+import UserPlus from '../../../assets/Team/UserPlus'
+import { B2fs, B2fw, B2lh, B3fs, B3fw, B3lh } from '../../../constants/fonts'
+import { useGetScreenWidth } from '../../../hooks/useGetScreenWidth'
+import { LOCAL_PATH } from '../../../http'
+import { getCountryFlag } from '../../../utils/getCountryFlag'
+import { TeamCardTopIcon } from '../Modal/TeamPreviewModal/TeamPreviewModal.styles'
+import { Text, UserPlusContainer } from '../TeamForm/TeamForm.styles'
+
+import {
+  ChatButton,
+  CloseContainer,
+  CrownContainer,
+  FlagContainer,
+  InviteButton,
+  MobileButtonWrapper,
+  ProfileButton,
+  SpaceBetween,
+  ThinCloseIcon,
+  UserCard,
+  UserGrid,
+  UserImg,
+  UserInfo,
+  UserLinks,
+} from './Members.styles'
+
+const Members = ({
+  chosenLeader,
+  team,
+  isEditing,
+  handleRemoveMembers,
+  handleOpenTransferLeader,
+  isMembers,
+  role,
+  handleOpenInvite,
+}) => {
+  const [hoveredCardId, setHoveredCardId] = useState(null)
+  const screenWidth = useGetScreenWidth()
+
+  const handleMouseEnter = (cardId) => {
+    setHoveredCardId(cardId)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredCardId(null)
+  }
+
+  return (
+    <>
+      <UserGrid>
+        {team?.members.map((member, i) => (
+          <UserCard
+            isTeamLeader={team.leader._id === member._id}
+            isEditing={isEditing}
+            key={i}
+            onMouseEnter={() => screenWidth > 1024 && handleMouseEnter(member._id)}
+            onMouseLeave={screenWidth > 1024 ? handleMouseLeave : undefined}
+          >
+            <UserImg src={member.image} />
+            {(chosenLeader.username === '' && team.leader._id === member._id) ||
+            chosenLeader.username === member.username ? (
+              <CrownContainer>
+                <SCrownRight />
+              </CrownContainer>
+            ) : (
+              <> </>
+            )}
+            {hoveredCardId === member._id && !isEditing ? (
+              <UserLinks>
+                <ChatButton onClick={() => console.log('TODO: add transition to chat')}>
+                  Chat
+                  <Chat />
+                </ChatButton>
+                <ProfileButton onClick={() => console.log('TODO: add transition to profile')}>
+                  <Person />
+                </ProfileButton>
+              </UserLinks>
+            ) : (
+              <UserInfo>
+                <SpaceBetween>
+                  <FlagContainer>
+                    <Text
+                      fontSize={`${B2fs}`}
+                      color="#FFF"
+                      lineHeight={`${B2lh}`}
+                      fontWeight={`${B2fw}`}
+                    >
+                      {member.username}
+                    </Text>
+                    {getCountryFlag(member.country) && (
+                      <TeamCardTopIcon
+                        src={getCountryFlag(member.country)}
+                        w={'25px'}
+                        h={'25px'}
+                        borderRadius={'none'}
+                      />
+                    )}
+                  </FlagContainer>
+
+                  {team.leader._id === member._id ? (
+                    <></>
+                  ) : (
+                    <CloseContainer
+                      isEditing={isEditing}
+                      color="#46A11B"
+                      onClick={() => {
+                        if (isEditing && team.leader._id !== member._id) {
+                          handleRemoveMembers(member._id)
+                        }
+                      }}
+                    >
+                      <ThinCloseIcon />
+                    </CloseContainer>
+                  )}
+                </SpaceBetween>
+                <Text
+                  fontSize={`${B3fs}`}
+                  color="#FFF"
+                  fontWeight={`${B3fw}`}
+                  lineHeight={`${B3lh}`}
+                  alignment="start"
+                >
+                  {member?.concentration?.length > 19 && screenWidth >= 1024
+                    ? member.concentration.slice(0, 16) + '...'
+                    : member.concentration}
+                </Text>
+              </UserInfo>
+            )}
+          </UserCard>
+        ))}
+        {isMembers && !isEditing && (role === 'leader' || role === 'member') && (
+          <MobileButtonWrapper>
+            <InviteButton onClick={handleOpenInvite}>
+              <UserPlusContainer>
+                <UserPlus />
+              </UserPlusContainer>
+              Invite
+            </InviteButton>
+          </MobileButtonWrapper>
+        )}
+        {isMembers && isEditing && role === 'leader' && (
+          <MobileButtonWrapper>
+            <InviteButton onClick={handleOpenTransferLeader}>Change Leader</InviteButton>
+          </MobileButtonWrapper>
+        )}
+      </UserGrid>
+    </>
+  )
+}
+
+export default Members
diff --git a/client/src/components/Team/Members/Members.styles.js b/client/src/components/Team/Members/Members.styles.js
new file mode 100644
index 000000000..9ffe81c24
--- /dev/null
+++ b/client/src/components/Team/Members/Members.styles.js
@@ -0,0 +1,198 @@
+import styled, { keyframes } from 'styled-components'
+
+import { ThinClose } from '../../../assets/Team/ThinClose'
+
+export const ThinCloseIcon = styled(ThinClose)``
+
+const _fadeIn = keyframes`
+  from {
+    display: none;
+    opacity: 0;
+  }
+  
+  to {
+    display: flex;
+    opacity: 1;
+  }
+`
+
+export const UserGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-content: start;
+  justify-items: start;
+  align-items: center;
+  align-content: center;
+  column-gap: 36px;
+  row-gap: 16px;
+
+  @media screen and (max-width: 1024px) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: start;
+  }
+`
+export const UserLinks = styled.div`
+  animation: ${_fadeIn} 0.2s ease-in;
+  width: 100%;
+  gap: 5px;
+  display: flex;
+`
+
+export const UserInfo = styled.div`
+  animation: ${_fadeIn} 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: start;
+  width: 100%;
+  gap: 4px;
+`
+
+export const UserCard = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  width: 235px;
+  height: 58px;
+  user-select: none;
+  padding: 4px;
+
+  &:hover {
+    background: ${(props) => (props.isEditing ? `#2f3239` : 'none')};
+  }
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+    height: 100%;
+    max-height: 80px;
+  }
+`
+
+export const ChatButton = styled.button`
+  /* Auto layout */
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 16px;
+  gap: 6px;
+
+  width: 125px;
+  height: 32px;
+
+  /* Green/Normal */
+
+  background: #46a11b;
+  border-radius: 10px;
+  border: none;
+  outline: none;
+
+  color: white;
+  font-size: 16px;
+  font-weight: 400;
+  cursor: pointer;
+`
+
+export const ProfileButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  gap: 6px;
+
+  width: 32px;
+  height: 32px;
+
+  /* Green/Normal */
+
+  border: 2px solid #46a11b;
+  border-radius: 10px;
+  background: inherit;
+  cursor: pointer;
+`
+
+export const UserImg = styled.img`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+`
+
+export const CrownContainer = styled.div`
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  transform: rotate(25deg) translate(70%, -150%);
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export const SpaceBetween = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`
+
+export const CloseContainer = styled.div`
+  cursor: pointer;
+  svg {
+    width: 20px;
+    height: 20px;
+    &:hover {
+      path {
+        stroke: ${(props) => (props.isEditing ? `#D42422` : 'none')};
+      }
+      cursor: pointer;
+    }
+  }
+  opacity: ${(props) => (props.isEditing ? '1' : '0')};
+  transition: all 0.2s ease-in-out;
+  right: 2%;
+  top: 5%;
+`
+
+export const FlagContainer = styled.div`
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+`
+
+export const MobileButtonWrapper = styled.div`
+  display: none;
+
+  @media screen and (max-width: 1024px) {
+    display: block;
+    width: 100%;
+  }
+`
+
+export const InviteButton = styled.button`
+  border: 1px solid #5bd424;
+  color: #fff;
+  background: transparent;
+  padding: 6px 16px 4px 16px;
+  cursor: pointer;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 16px;
+  font-weight: 400;
+  width: 100%;
+  height: 40px;
+  transition: all 0.2s;
+  &:hover {
+    svg path:nth-child(3),
+    svg path:nth-child(4) {
+      transform: translateY(-1px);
+      transition: all 0.2s;
+    }
+  }
+`
diff --git a/client/src/components/Team/Modal/LeaderOptions/LeaderOptions.jsx b/client/src/components/Team/Modal/LeaderOptions/LeaderOptions.jsx
new file mode 100644
index 000000000..2bf303310
--- /dev/null
+++ b/client/src/components/Team/Modal/LeaderOptions/LeaderOptions.jsx
@@ -0,0 +1,43 @@
+import { SelectedIcon } from '../../../../assets/Team/SelectedIcon'
+import { Text } from '../../TeamForm/TeamForm.styles'
+import {
+  ListBackdrop,
+  NoMembersCard,
+  UserAccordionCard,
+  UserAccordionImg,
+  UsernameIconContainer,
+} from '../TeamModal.styles'
+
+const LeaderOptions = ({ team, changeChosenLeader, chosenLeader }) => {
+  return (
+    <ListBackdrop>
+      {team?.members.length > 1 ? (
+        team?.members
+          .filter((member) => team.leader._id !== member._id)
+          .map((member, key) => {
+            return (
+              <UserAccordionCard
+                key={member._id}
+                id={member._id}
+                onClick={() => {
+                  changeChosenLeader({ username: member.username, id: member._id })
+                }}
+              >
+                <UserAccordionImg alt={member.username} src={member.image} />
+                <UsernameIconContainer>
+                  <p>{member.username}</p>
+                  {chosenLeader.username === member.username ? <SelectedIcon /> : <></>}
+                </UsernameIconContainer>
+              </UserAccordionCard>
+            )
+          })
+      ) : (
+        <NoMembersCard>
+          <Text>Invite more to transfer leader!</Text>
+        </NoMembersCard>
+      )}
+    </ListBackdrop>
+  )
+}
+
+export default LeaderOptions
diff --git a/client/src/components/Team/Modal/ModalTypes/ActionModal.jsx b/client/src/components/Team/Modal/ModalTypes/ActionModal.jsx
new file mode 100644
index 000000000..437e5aaa8
--- /dev/null
+++ b/client/src/components/Team/Modal/ModalTypes/ActionModal.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+import FlexWrapper from '../../../../shared/components/FlexWrapper/FlexWrapper'
+import { Text } from '../../TeamForm/TeamForm.styles'
+import { Button, Container } from '../TeamModal.styles'
+
+const ActionModal = ({
+  firstText,
+  secondText,
+  firstButton,
+  firstButtonHandler,
+  secondButton,
+  secondButtonHandler,
+}) => {
+  return (
+    <Container>
+      <FlexWrapper width="100%" justify="center" align="center" direction="column">
+        <Text fontWeight="600" fontSize="24px" margin="0" textAlign="center">
+          {firstText}
+        </Text>
+        <Text fontSize="16px" fontWeight="400" margin="0" textAlign="center">
+          {secondText}
+        </Text>
+      </FlexWrapper>
+      <FlexWrapper width="100%" justify="center" align="center" direction="column" gap="8px">
+        <Button onClick={firstButtonHandler} background="#46A11B" marginTop="0">
+          {firstButton}
+        </Button>
+        <Button border="2px solid #A5211F" marginTop="0" onClick={secondButtonHandler}>
+          {secondButton}
+        </Button>
+      </FlexWrapper>
+    </Container>
+  )
+}
+
+export default ActionModal
diff --git a/client/src/components/Team/Modal/ModalTypes/InfoModal.jsx b/client/src/components/Team/Modal/ModalTypes/InfoModal.jsx
new file mode 100644
index 000000000..0f01050d2
--- /dev/null
+++ b/client/src/components/Team/Modal/ModalTypes/InfoModal.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { B2fs, B2fw, B2lh, H3fs, H3fw, H3lh } from '../../../../constants/fonts'
+import FlexWrapper from '../../../../shared/components/FlexWrapper/FlexWrapper'
+import { EditTeam, Text } from '../../TeamForm/TeamForm.styles'
+import { Button, Container } from '../TeamModal.styles'
+
+const InfoModal = ({ firstText, secondText, firstButton, firstButtonHandler }) => {
+  return (
+    <Container>
+      <FlexWrapper width="100%" justify="center" align="center" direction="column" gap="8px">
+        <Text fontSize={`${H3fs}`} fontWeight={`${H3fw}`} margin="0" textAlign="center">
+          {firstText}
+        </Text>
+        <Text fontSize={`${B2fs}`} fontWeight={`${B2fw}`} margin="0" textAlign="center">
+          {secondText}
+        </Text>
+      </FlexWrapper>
+      <Button marginTop="0" width="100%" background="#46A11B" onClick={firstButtonHandler}>
+        {firstButton}
+      </Button>
+    </Container>
+  )
+}
+
+export default InfoModal
diff --git a/client/src/components/Team/Modal/ModalTypes/InteractiveModal.jsx b/client/src/components/Team/Modal/ModalTypes/InteractiveModal.jsx
new file mode 100644
index 000000000..dee00af60
--- /dev/null
+++ b/client/src/components/Team/Modal/ModalTypes/InteractiveModal.jsx
@@ -0,0 +1,21 @@
+import FlexWrapper from '../../../../shared/components/FlexWrapper/FlexWrapper'
+import { Text } from '../../TeamForm/TeamForm.styles'
+import { Container } from '../TeamModal.styles'
+
+const InteractiveModal = ({ interactiveText, interactiveComponent, interactiveButtons }) => {
+  return (
+    <Container justify="space-between">
+      <FlexWrapper direction="column" justify="center" align="center" gap="24px" width="100%">
+        <Text fontSize="24px" margin="0">
+          {interactiveText}
+        </Text>
+        <FlexWrapper width="100%" justify="center" align="center">
+          {interactiveComponent}
+        </FlexWrapper>
+      </FlexWrapper>
+      {interactiveButtons}
+    </Container>
+  )
+}
+
+export default InteractiveModal
diff --git a/client/src/components/Team/Modal/TeamModal.jsx b/client/src/components/Team/Modal/TeamModal.jsx
new file mode 100644
index 000000000..cd907de32
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamModal.jsx
@@ -0,0 +1,295 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Box, Modal } from '@mui/material'
+
+import Close from '../../../assets/Shared/Close'
+import UserPlus from '../../../assets/Team/UserPlus'
+import { useGetScreenWidth } from '../../../hooks/useGetScreenWidth'
+import AutocompleteInput from '../../../shared/components/AutocompleteInput/AutocompleteInput'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+import {
+  CloseContainerModal,
+  mobileFullScreenStyle,
+  mobileSemiFullScreenStyle,
+  style,
+  teamPreviewStyle,
+  Text,
+  UserPlusContainer,
+} from '../TeamForm/TeamForm.styles'
+
+import LeaderOptions from './LeaderOptions/LeaderOptions'
+import ActionModal from './ModalTypes/ActionModal'
+import InfoModal from './ModalTypes/InfoModal'
+import InteractiveModal from './ModalTypes/InteractiveModal'
+import TeamPreviewModal from './TeamPreviewModal/TeamPreviewModal'
+import TeamPreviewModalPhone from './TeamPreviewModalPhone/TeamPreviewModalPhone'
+import { MobileProfile } from './TeamPreviewModalPhone/TeamPreviewModalPhone.styles'
+import { Button } from './TeamModal.styles'
+
+const TeamModal = ({
+  modalActive,
+  chosenLeader,
+  handleClose,
+  handleInvite,
+  handleJoin,
+  handleLeaveAndJoin,
+  setEmail,
+  email,
+  team,
+  open,
+  leaveTeam,
+  user,
+  transferLeader,
+  setIsEditing,
+  removeFromTeam,
+  removeMemberActive,
+  deleteTeam,
+  setModalActive,
+  changeChosenLeader,
+}) => {
+  const [value, setValue] = useState(null)
+  const width = useGetScreenWidth()
+  const [boxStyle, setBoxStyle] = useState(style)
+  const [mobileBoxStyle, setMobileBoxStyle] = useState(mobileSemiFullScreenStyle)
+
+  useMemo(() => {
+    if (modalActive === 'JoinTeam') {
+      setBoxStyle(teamPreviewStyle)
+      setMobileBoxStyle(mobileFullScreenStyle)
+    } else {
+      setBoxStyle(style)
+      setMobileBoxStyle(mobileSemiFullScreenStyle)
+    }
+  }, [modalActive])
+
+  const handleSetValue = (value) => {
+    if (value) {
+      setValue(value)
+      setEmail(value.email)
+    }
+  }
+
+  const handleActions = () => {
+    if (modalActive === 'Leave') {
+      leaveTeam({
+        user_id: user?._id,
+        teamid: team?._id,
+      })
+    } else if (modalActive === 'RemoveMember') {
+      removeFromTeam({
+        user_id: removeMemberActive,
+        teamid: team?._id,
+      })
+    } else if (modalActive === 'Invite') {
+      handleInvite()
+    } else if (modalActive === 'Delete') {
+      deleteTeam(team?._id)
+    } else if (modalActive === 'TransferLeader') {
+      transferLeader({
+        leader_id: team.leader._id,
+        new_leader_id: chosenLeader.id,
+        teamid: team._id,
+      })
+
+      setIsEditing(false)
+    } else if (modalActive === 'SetNewLeader') {
+      if (chosenLeader.id) {
+        setModalActive('TransferLeader')
+
+        return
+      } else {
+        errorToaster('Select leader first!')
+
+        return
+      }
+    }
+    handleClose()
+    setModalActive('')
+  }
+
+  const handleModal = () => {
+    if (modalActive === 'Leave') {
+      return (
+        <ActionModal
+          firstText="Leave Team"
+          secondText="Are you sure you want to leave?"
+          firstButton="Leave"
+          firstButtonHandler={handleActions}
+          secondButton="Cancel"
+          secondButtonHandler={handleClose}
+        />
+      )
+    } else if (modalActive === 'RemoveMember') {
+      return (
+        <ActionModal
+          firstText="Remove Member"
+          secondText="Are you sure you want to remove member from team?"
+          firstButton="Remove"
+          firstButtonHandler={handleActions}
+          secondButton="Cancel"
+          secondButtonHandler={handleClose}
+        />
+      )
+    } else if (modalActive === 'Invite') {
+      return (
+        <InteractiveModal
+          interactiveText={'Send invite'}
+          interactiveComponent={
+            <AutocompleteInput
+              value={value}
+              setValue={handleSetValue}
+              width={width > 600 ? '306px' : '100%'}
+            />
+          }
+          interactiveButtons={
+            <Button color={email !== '' ? '1' : '.4'} onClick={handleActions} marginTop="0">
+              <UserPlusContainer>
+                <UserPlus />
+              </UserPlusContainer>
+              Invite
+            </Button>
+          }
+        />
+      )
+    } else if (modalActive === 'Delete') {
+      return team.members.length > 1 ? (
+        <InfoModal
+          firstText="You can't delete team"
+          secondText="Before deleting team, you must delete all members"
+          firstButton="Okay"
+          firstButtonHandler={handleClose}
+        />
+      ) : (
+        <ActionModal
+          firstText="Delete Team"
+          secondText="Are you sure you want to delete?"
+          firstButton="Delete"
+          firstButtonHandler={handleActions}
+          secondButton="Cancel"
+          secondButtonHandler={handleClose}
+        />
+      )
+    } else if (modalActive === 'TransferLeader') {
+      return (
+        <ActionModal
+          firstText="Transfer leadership"
+          secondText={`Are you sure you want to transfer leadership to ${chosenLeader.username}? You will lose management rights.`}
+          firstButton="Confirm"
+          firstButtonHandler={handleActions}
+          secondButton="Cancel"
+          secondButtonHandler={handleClose}
+        />
+      )
+    } else if (modalActive === 'SetNewLeader') {
+      return (
+        <InteractiveModal
+          interactiveText={'Select new leader'}
+          interactiveComponent={
+            <LeaderOptions
+              team={team}
+              chosenLeader={chosenLeader}
+              changeChosenLeader={changeChosenLeader}
+            />
+          }
+          interactiveButtons={
+            <FlexWrapper width="100%" direction="column">
+              {team?.members.length > 1 && (
+                <Button onClick={handleActions} background="#46A11B" marginTop="0">
+                  Save
+                </Button>
+              )}
+              <Button onClick={handleClose} border="2px solid #A5211F" marginTop="8px">
+                Cancel
+              </Button>
+            </FlexWrapper>
+          }
+        />
+      )
+    } else if (modalActive === 'AlreadyOnTeam') {
+      if (user?.team.leader === user._id) {
+        const isOnlyMember =
+          user?.team.members.length === 1 ? 'You must delete team' : 'You must transfer leadership'
+
+        return (
+          <InfoModal
+            firstText="You cannot join a team."
+            secondText={`${isOnlyMember} to join a new team.`}
+            firstButton="Okay"
+            firstButtonHandler={handleClose}
+          />
+        )
+      }
+
+      return (
+        <ActionModal
+          firstText="You're already on a team."
+          secondText="Do you want to leave the current team and join a new one?"
+          firstButton="Leave & Join"
+          firstButtonHandler={handleLeaveAndJoin}
+          secondButton="Cancel"
+          secondButtonHandler={handleClose}
+        />
+      )
+    } else if (modalActive === 'JoinTeam') {
+      return (
+        <>
+          {width > 600 && (
+            <>
+              <CloseContainerModal color={'#FFF'} onClick={handleClose}>
+                <Close />
+              </CloseContainerModal>
+              <TeamPreviewModal
+                user={user}
+                handleJoin={handleJoin}
+                team={team}
+                handleClose={handleClose}
+              />
+            </>
+          )}
+
+          {width <= 600 && (
+            <>
+              <TeamPreviewModalPhone
+                user={user}
+                handleClose={handleClose}
+                handleJoin={handleJoin}
+                team={team}
+              />
+            </>
+          )}
+        </>
+      )
+    }
+
+    return <></>
+  }
+
+  return (
+    <>
+      {width > 600 && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          sx={{ backdropFilter: 'blur(5px)' }}
+        >
+          <Box sx={boxStyle}>
+            <CloseContainerModal color={'#FFF'} onClick={handleClose}>
+              <Close />
+            </CloseContainerModal>
+            {handleModal()}
+          </Box>
+        </Modal>
+      )}
+
+      {width <= 600 && (
+        <MobileProfile anchor="bottom" open={open} onClose={handleClose}>
+          <Box sx={mobileBoxStyle}>{handleModal()}</Box>
+        </MobileProfile>
+      )}
+    </>
+  )
+}
+
+export default TeamModal
diff --git a/client/src/components/Team/Modal/TeamModal.styles.jsx b/client/src/components/Team/Modal/TeamModal.styles.jsx
new file mode 100644
index 000000000..3eb3ec119
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamModal.styles.jsx
@@ -0,0 +1,96 @@
+import styled from 'styled-components'
+
+import { B2fs, B2fw, B2lh } from '../../../constants/fonts'
+
+export const UsernameIconContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const Button = styled.button`
+  width: 100%;
+  height: 44px;
+  background: ${(props) => props.background || 'transparent'};
+  border: ${(props) => props.border || '2px solid #46a11b'};
+  border-radius: 15px;
+  font-size: 16px;
+  font-weight: 400;
+  color: white;
+  outline: none;
+  margin-top: ${(props) => props.marginTop || '24px'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  &:hover {
+    transform: translateY(-2px);
+  }
+`
+
+export const ListBackdrop = styled.div`
+  margin: 0;
+  padding: 8px 0;
+  width: 306px;
+  overflow-y: scroll;
+  transition: all 0.2s;
+  border-radius: 5px;
+  /* margin-top: 24px; */
+  display: flex;
+  flex-direction: column;
+  max-height: 102px;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: auto;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #5d9d0b;
+    border-radius: 10px;
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: ${(props) => props.justify || 'center'};
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 24px;
+`
+
+export const UserAccordionCard = styled.div`
+  display: flex;
+  font-size: ${B2fs};
+  font-weight: ${B2fw};
+  line-height: ${B2lh};
+  align-items: center;
+  gap: 8px;
+  &:hover {
+    background-color: #2f3239;
+    cursor: pointer;
+  }
+  height: 32px;
+  padding: 4px 8px 4px 16px;
+  color: white;
+`
+
+export const UserAccordionImg = styled.img`
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+`
+
+export const NoMembersCard = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
diff --git a/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.jsx b/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.jsx
new file mode 100644
index 000000000..497f346b1
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.jsx
@@ -0,0 +1,141 @@
+import { useNavigate } from 'react-router-dom'
+
+import unregisteredImg from '../../../../assets/Images/user/unregistered.png'
+import SCrownRight from '../../../../assets/Shared/Crowns/SCrownRight'
+import ArrowRight from '../../../../assets/Team/ArrowRight'
+import Crown from '../../../../assets/Team/Crown'
+import { LOCAL_PATH } from '../../../../http'
+import { getCountryFlag } from '../../../../utils/getCountryFlag'
+
+import {
+  ButtonsContainer,
+  ColumnContainer,
+  CrownContainer,
+  ImagesContainer,
+  JoinTeam,
+  ProfileButton,
+  Statistic,
+  StatisticsFlex,
+  TeamCardBodyPoint,
+  TeamCardDesc,
+  TeamCardMembers,
+  TeamCardPerson,
+  TeamCardPicture,
+  TeamCardTop,
+  TeamCardTopIcon,
+  TeamCardTopInfo,
+  TeamText,
+  TypeCountryFlagContainer,
+} from './TeamPreviewModal.styles'
+
+const TeamPreviewModal = ({ user, team, handleJoin }) => {
+  const members = team?.members
+
+  const teammates = members?.slice(1, members.length)
+
+  const countryFlag = getCountryFlag(team.country)
+
+  const navigate = useNavigate()
+
+  const getTeam = () => {
+    if (user?.team === undefined || user?.team._id !== team?._id) {
+      return 'Join'
+    }
+
+    const teamid = user?.team._id
+
+    if (team?._id === teamid) {
+      return 'Your'
+    }
+  }
+
+  const usersTeam = getTeam()
+
+  return (
+    <>
+      <TeamCardTop>
+        <TeamCardTopIcon src={team?.image} />
+        <TeamCardTopInfo>
+          <ColumnContainer>
+            <TeamText fontSize="20px" fontWeight="500">
+              {team?.name}
+            </TeamText>
+            <TypeCountryFlagContainer>
+              <TeamText color="#8F9094">
+                {team?.type.charAt(0).toUpperCase() + team?.type.slice(1)} Type, {team.country}
+              </TeamText>
+              {countryFlag && (
+                <TeamCardTopIcon src={countryFlag} w={'25px'} h={'25px'} borderRadius={'none'} />
+              )}
+            </TypeCountryFlagContainer>
+          </ColumnContainer>
+        </TeamCardTopInfo>
+      </TeamCardTop>
+
+      <TeamCardBodyPoint>
+        <StatisticsFlex>
+          <Statistic>
+            <p>
+              Tournaments: <span>0</span>
+            </p>
+          </Statistic>
+          <Statistic>
+            <p>
+              Wins: <span>{team?.wins}</span>
+            </p>
+          </Statistic>
+          <Statistic>
+            <p>
+              Points: <span>{team?.points}</span>
+            </p>
+          </Statistic>
+        </StatisticsFlex>
+      </TeamCardBodyPoint>
+      {team?.description && (
+        <TeamCardBodyPoint>
+          <TeamCardDesc>{team?.description}</TeamCardDesc>
+        </TeamCardBodyPoint>
+      )}
+      <ImagesContainer>
+        <div>
+          <TeamCardPerson>
+            <CrownContainer>
+              <SCrownRight />
+            </CrownContainer>
+            <TeamCardPicture src={team?.leader.image} />
+          </TeamCardPerson>
+        </div>
+        <div>
+          <TeamCardMembers>
+            {[...Array(7)].map((_, index) => {
+              if (index < teammates.length) {
+                return (
+                  <TeamCardPerson key={index}>
+                    <TeamCardPicture src={teammates[index].image} />
+                  </TeamCardPerson>
+                )
+              } else {
+                return (
+                  <TeamCardPerson key={index}>
+                    <TeamCardPicture src={unregisteredImg} />
+                  </TeamCardPerson>
+                )
+              }
+            })}
+          </TeamCardMembers>
+        </div>
+      </ImagesContainer>
+      <ButtonsContainer>
+        <JoinTeam disabled={usersTeam === 'Your'} onClick={handleJoin}>
+          {usersTeam} Team
+        </JoinTeam>
+        <ProfileButton onClick={() => navigate('/team/' + team?._id)}>
+          Profile
+          <ArrowRight />
+        </ProfileButton>
+      </ButtonsContainer>
+    </>
+  )
+}
+
+export default TeamPreviewModal
diff --git a/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.styles.js b/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.styles.js
new file mode 100644
index 000000000..8a3ddf275
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamPreviewModal/TeamPreviewModal.styles.js
@@ -0,0 +1,162 @@
+import styled from 'styled-components'
+
+import { WHITE } from '../../../../constants/colors'
+import { B2fs, B2fw, B2lh, B3fs, B3fw, B3lh } from '../../../../constants/fonts'
+
+export const ImagesContainer = styled.div`
+  display: flex;
+  gap: 36px;
+`
+
+export const TeamCardTop = styled.div`
+  display: flex;
+  gap: 32px;
+`
+export const TeamCardTopInfo = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const ColumnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: start;
+  align-items: start;
+`
+
+export const TeamText = styled.div`
+  font-weight: ${(props) => props.fontWeight || '400'};
+  font-size: ${(props) => props.fontSize || '16px'};
+  margin: ${(props) => props.margin || '0'};
+  color: ${(props) => props.color || WHITE.main};
+  text-align: ${(props) => props.alignment || 'center'};
+`
+
+export const TeamCardTopIcon = styled.img`
+  width: ${(props) => props.w || '75px'};
+  height: ${(props) => props.h || '75px'};
+  border-radius: ${(props) => props.borderRadius || '50%'}; ;
+`
+
+export const TypeCountryFlagContainer = styled.div`
+  display: flex;
+  gap: 5px;
+`
+
+export const TeamCardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  background-color: transparent;
+  margin-top: 16px;
+`
+
+export const TeamCardBodyPoint = styled.div`
+  background-color: transparent;
+  // margin-bottom: 8px;
+  div :not(div div) {
+    display: flex;
+    gap: 36px;
+  }
+  p {
+    max-height: 88px;
+    padding-right: 8px;
+  }
+`
+
+export const TeamCardDesc = styled.p`
+  font-size: 16px;
+  color: #fff;
+  line-height: 1.4;
+  margin: 0;
+`
+
+export const CrownContainer = styled.div`
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  transform: rotate(25deg) translate(90%, -100%);
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export const TeamCardPerson = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const TeamCardPicture = styled.img`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+`
+
+export const TeamCardMembers = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+export const StatisticsFlex = styled.div`
+  display: flex;
+  gap: 48px;
+`
+export const Statistic = styled.div`
+  p {
+    font-size: 16px;
+    color: #fff;
+    margin: 0;
+    display: inline !important;
+    font-weight: 400;
+  }
+  p span {
+    margin: 0;
+    color: #5bd424;
+    display: inline !important;
+  }
+`
+
+export const ButtonsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+`
+
+export const JoinTeam = styled.button`
+  background-color: #46a11b;
+  padding: 10px 16px 8px;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  opacity: ${(props) => (props.disabled ? '.5' : '1')};
+  pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
+  user-select: ${(props) => (props.disabled ? 'none' : 'auto')};
+  &:hover {
+    transform: translateY(-1.25px);
+  }
+`
+
+export const ProfileButton = styled.button`
+  background: none;
+  outline: none;
+  border: none;
+  font-size: 16px;
+  font-weight: 400;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  gap: 9px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s ease;
+  &:hover {
+    transform: translateX(1.25px);
+  }
+`
diff --git a/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.jsx b/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.jsx
new file mode 100644
index 000000000..cf60101cc
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.jsx
@@ -0,0 +1,136 @@
+import { useNavigate } from 'react-router-dom'
+
+import LongArrowLeft from '../../../../assets/Arrows/LongArrowLeft'
+import LongArrowRight from '../../../../assets/Arrows/LongArrowRight'
+import unregisteredImg from '../../../../assets/Images/user/unregistered.png'
+import SCrownRight from '../../../../assets/Shared/Crowns/SCrownRight'
+import FlexWrapper from '../../../../shared/components/FlexWrapper/FlexWrapper'
+// * Assets
+import { getCountryFlag } from '../../../../utils/getCountryFlag'
+
+import {
+  Button,
+  CrownContainer,
+  FlagIcon,
+  MobileWrapper,
+  NumberSpan,
+  TeamImg,
+  Text,
+  UserImg,
+} from './TeamPreviewModalPhone.styles'
+
+const TeamPreviewModalPhone = ({ user, team, handleClose, handleJoin }) => {
+  const members = team?.members
+
+  const teammates = members?.slice(1, members.length)
+
+  const navigate = useNavigate()
+
+  const getTeam = () => {
+    if (user?.team === undefined || user?.team._id !== team?._id) {
+      return 'Join'
+    }
+
+    const teamid = user?.team._id
+
+    if (team?._id === teamid) {
+      return 'Your'
+    }
+  }
+
+  const usersTeam = getTeam()
+
+  return (
+    <>
+      <FlexWrapper justify="space-between">
+        <Button width="63px" background="none" onClick={handleClose}>
+          <LongArrowLeft />
+          Back
+        </Button>
+        <Button width="73px" background="none" onClick={() => navigate('/team/' + team?._id)}>
+          Profile
+          <LongArrowRight />
+        </Button>
+      </FlexWrapper>
+      <FlexWrapper gap="24px" direction="column" margin="32px 0 0 0">
+        <FlexWrapper gap="32px" align="center">
+          <div>
+            <TeamImg src={team.image} alt={`${team?.name}'s image`} />
+          </div>
+          <FlexWrapper direction="column" maxHeight="70px">
+            <FlexWrapper gap="8px" alignItems="center" maxHeight="30px">
+              <Text fontSize="20px">{team?.name}</Text>
+              {getCountryFlag(team.country) && <FlagIcon src={getCountryFlag(team.country)} />}
+            </FlexWrapper>
+            <Text fontSize="14px" color="#8F9094" fontWeight="400">
+              {team?.type?.charAt(0).toUpperCase() + team?.type?.slice(1)} Type, {team.country}
+            </Text>
+          </FlexWrapper>
+        </FlexWrapper>
+        <FlexWrapper justify="space-between">
+          <Text fontSize="16px" color="#fff" fontWeight="400">
+            Tournaments: <NumberSpan>{team.tournaments || 0}</NumberSpan>
+          </Text>
+          <Text fontSize="16px" color="#fff" fontWeight="400">
+            Wins: <NumberSpan>{team.wins || 0}</NumberSpan>
+          </Text>
+          <Text fontSize="16px" color="#fff" fontWeight="400">
+            Points: <NumberSpan>{team.points || 0}</NumberSpan>
+          </Text>
+        </FlexWrapper>
+        <Button
+          width="100%"
+          background="#46A11B"
+          disabled={usersTeam === 'Your'}
+          onClick={handleJoin}
+        >
+          {usersTeam} Team
+        </Button>
+        {team?.description && (
+          <Text fontSize="16px" fontWeight="400" margin="8px 0 0 0">
+            {team.description}
+          </Text>
+        )}
+        <FlexWrapper direction="column" gap="20px" margin="0 0 24px 0">
+          <FlexWrapper position="relative" gap="12px">
+            <CrownContainer>
+              <SCrownRight />
+            </CrownContainer>
+            <UserImg src={team?.leader?.image} />
+            <FlexWrapper direction="column">
+              <FlexWrapper gap="8px" alignItems="baseline">
+                <Text fontSize="16px" color="#fff" fontWeight="400" margin="4px 0 0 0">
+                  {team?.leader?.username}
+                </Text>
+                {getCountryFlag(team.country) && <FlagIcon src={getCountryFlag(team.country)} />}
+              </FlexWrapper>
+              <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                {team?.leader?.concentration}
+              </Text>
+            </FlexWrapper>
+          </FlexWrapper>
+          {teammates?.map((teammate, index) => (
+            <FlexWrapper gap="12px" key={index}>
+              <UserImg src={teammate?.image} />
+              <FlexWrapper direction="column">
+                <FlexWrapper gap="8px" alignItems="baseline">
+                  <Text fontSize="16px" color="#fff" fontWeight="400" margin="4px 0 0 0">
+                    {teammate?.username}
+                  </Text>
+                  {getCountryFlag(teammate?.country) && (
+                    <FlagIcon src={getCountryFlag(teammate?.country)} />
+                  )}
+                </FlexWrapper>
+                <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                  {teammate?.concentration}
+                </Text>
+              </FlexWrapper>
+            </FlexWrapper>
+          ))}
+        </FlexWrapper>
+      </FlexWrapper>
+    </>
+  )
+}
+
+export default TeamPreviewModalPhone
diff --git a/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.styles.jsx b/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.styles.jsx
new file mode 100644
index 000000000..d7ffc3a4b
--- /dev/null
+++ b/client/src/components/Team/Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.styles.jsx
@@ -0,0 +1,122 @@
+import { Box, Drawer } from '@mui/material'
+import styled from 'styled-components'
+
+export const MobileProfile = styled(Drawer)`
+  display: none;
+
+  & .MuiDrawer-paper {
+    background: #26292b;
+
+    ::-webkit-scrollbar {
+      /* WebKit */
+      transition: all 0.2s;
+      width: 0;
+      height: 0;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #000000;
+    }
+  }
+
+  @media screen and (min-width: 0px) and (max-width: 600px) {
+    display: block;
+  }
+`
+
+export const MobileWrapper = styled(Box)`
+  width: 100%;
+  min-height: 100dvh;
+  background: #26292b;
+  padding: 24px 29px;
+`
+export const Button = styled.button`
+  outline: none;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  background: ${(props) => props.background || '#46a11b'};
+  height: 40px;
+  width: ${(props) => props.width || '100px'};
+  font-size: 16px;
+  font-weight: 400;
+  color: #fff;
+  border-radius: 10px;
+  border: ${(props) => props.border || 'none'};
+  cursor: pointer;
+  transition: all 0.2s;
+  opacity: ${(props) => (props.disabled ? '.5' : '1')};
+  pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
+  user-select: ${(props) => (props.disabled ? 'none' : 'auto')};
+`
+
+export const TeamImg = styled.img`
+  width: 70px;
+  height: 70px;
+  border-radius: 70px;
+`
+
+export const Text = styled.h3`
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '24px'};
+  color: ${(props) => props.color || '#fff'};
+  margin: ${(props) => props.margin || '0px'};
+  text-align: ${(props) => props.textAlign || 'none'};
+`
+
+export const FlagIcon = styled.img`
+  width: 30px;
+  height: 30px;
+`
+
+export const NumberSpan = styled.span`
+  font-weight: 400;
+  font-size: 16px;
+  color: #5bd424;
+  margin: ${(props) => props.margin || '0px'};
+  text-align: ${(props) => props.textAlign || 'none'};
+`
+
+export const UserImgWrapper = styled.div`
+  position: absolute;
+  left: ${(props) => props.left * 40 + 60 + 'px' || '70px'};
+  z-index: ${(props) => props.zindex || 1};
+
+  @media screen and (max-width: 400px) {
+    left: ${(props) => props.left * 30 + 50 + 'px' || '70px'};
+  }
+`
+
+export const UserImg = styled.img`
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+
+  @media screen and (max-width: 400px) {
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+  }
+`
+
+export const CrownContainer = styled.div`
+  position: absolute;
+  transform: rotate(25deg) translate(95%, -75%);
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  @media screen and (max-width: 400px) {
+    transform: rotate(25deg) translate(95%, -75%);
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+`
diff --git a/client/src/components/Team/NoTeam/NoTeam.jsx b/client/src/components/Team/NoTeam/NoTeam.jsx
new file mode 100644
index 000000000..10bb63c59
--- /dev/null
+++ b/client/src/components/Team/NoTeam/NoTeam.jsx
@@ -0,0 +1,65 @@
+// * Modules
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+
+// * Assets
+import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
+import ROUTES from '../../../constants/routes'
+import Loader from '../../../shared/components/Loader/Loader'
+import { startRegistration } from '../../../store/reducers/RegistrationAuth'
+// * Styles
+import { Container, Text } from '../TeamForm/TeamForm.styles'
+
+import { Center, TeamButton } from './NoTeam.styles'
+
+function NoTeamForm() {
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+  const { data: user, isLoading: isUserDataLoading } = useCheckAuth()
+
+  const handleCreate = () => {
+    if (!user?.isRegistered) {
+      navigate(ROUTES.login)
+    } else {
+      dispatch(startRegistration())
+      navigate('/teams/create', { replace: true })
+    }
+  }
+
+  const handleJoin = () => {
+    if (!user?.isRegistered) {
+      navigate(ROUTES.login)
+    } else {
+      navigate('/teams', { replace: true })
+    }
+  }
+
+  useEffect(() => {
+    if (user?.team) {
+      navigate(`/team/${user?.team._id}`)
+    }
+  }, [user])
+
+  return (
+    <Container>
+      {isUserDataLoading && <Loader />}
+      {!user?.team && (
+        <Center>
+          <Text fontWeight="500" fontSize="24px" margin="0 0 8px 0">
+            You don't have a team yet!
+          </Text>
+          <Text fontSize="16px" margin="0 0 8px 0" fontWeight="400">
+            You can create a new team or join an existing team.
+          </Text>
+          <TeamButton background="#46a11b" onClick={handleCreate}>
+            Create Team
+          </TeamButton>
+          <TeamButton onClick={handleJoin}>Join Team</TeamButton>
+        </Center>
+      )}
+    </Container>
+  )
+}
+
+export default NoTeamForm
diff --git a/client/src/components/Team/NoTeam/NoTeam.styles.jsx b/client/src/components/Team/NoTeam/NoTeam.styles.jsx
new file mode 100644
index 000000000..abf49c9d2
--- /dev/null
+++ b/client/src/components/Team/NoTeam/NoTeam.styles.jsx
@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+export const Center = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  a {
+    text-decoration: none;
+  }
+`
+
+export const TeamButton = styled.button`
+  width: 306px;
+  height: 44px;
+  background: ${(props) => props.background || 'transparent'};
+  border: ${(props) => props.border || '2px solid #46a11b'};
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  outline: none;
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+`
diff --git a/client/src/components/Team/TeamForm/ActionButtonsType.js b/client/src/components/Team/TeamForm/ActionButtonsType.js
new file mode 100644
index 000000000..9758a548a
--- /dev/null
+++ b/client/src/components/Team/TeamForm/ActionButtonsType.js
@@ -0,0 +1,85 @@
+import { useFormikContext } from 'formik'
+
+import { EditTeam, GenericButton, LeaderActionsBox } from './TeamForm.styles'
+
+const ActionButtonsType = ({
+  team,
+  isEditing,
+  setIsEditing,
+  editImage,
+  handleOpenDelete,
+  handleOpenLeave,
+  updateTeamsAvatar,
+  servedProfilePic,
+  picture,
+  selectedImage,
+  role,
+  handleJoin,
+  updateTeam,
+}) => {
+  let action = null
+  const { values } = useFormikContext()
+
+  switch (role) {
+    case 'leader':
+      action = (
+        <LeaderActionsBox>
+          <EditTeam
+            onClick={() => {
+              if (isEditing) {
+                const updateTeamObj = {
+                  teamid: team._id,
+                  country: values?.country,
+                  name: values?.name,
+                  description: values?.description,
+                  type: values?.type.toLowerCase(),
+                  tag: values?.tag,
+                }
+
+                updateTeam(updateTeamObj)
+
+                if (editImage && (picture || selectedImage !== '')) {
+                  updateTeamsAvatar({ teamID: team._id, image: servedProfilePic.split(',')[1] })
+                }
+              }
+              setIsEditing((prevState) => !prevState)
+            }}
+            type={isEditing ? 'submit' : 'text'}
+          >
+            {isEditing ? 'Save' : 'Edit'}
+          </EditTeam>
+          <GenericButton
+            height="40px"
+            onClick={() => {
+              if (isEditing) {
+                setIsEditing((prevState) => !prevState)
+              } else {
+                handleOpenDelete()
+              }
+            }}
+            marginTop="0"
+            type="text"
+          >
+            {isEditing ? 'Cancel' : 'Delete'}
+          </GenericButton>
+        </LeaderActionsBox>
+      )
+      break
+
+    case 'member':
+      action = <GenericButton onClick={handleOpenLeave}>Leave Team</GenericButton>
+      break
+
+    default:
+      action = (
+        <GenericButton onClick={handleJoin} border="none" boxShadow="none" background="#46A11B">
+          Join Team
+        </GenericButton>
+      )
+      break
+  }
+
+  return action
+}
+
+export default ActionButtonsType
diff --git a/client/src/components/Team/TeamForm/TeamForm.js b/client/src/components/Team/TeamForm/TeamForm.js
new file mode 100644
index 000000000..ba5301c49
--- /dev/null
+++ b/client/src/components/Team/TeamForm/TeamForm.js
@@ -0,0 +1,258 @@
+// * Modules
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Formik } from 'formik'
+
+// * API
+import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
+import { useUpdateAvatar } from '../../../api/hooks/auth/useUpdateAvatar'
+import { useDelete } from '../../../api/hooks/team/useDelete'
+import { useGetTeamData } from '../../../api/hooks/team/useGetTeamData'
+import { useInviteUser } from '../../../api/hooks/team/useInviteUser'
+import { useJoinTeam } from '../../../api/hooks/team/useJoinTeam'
+import { useLeave } from '../../../api/hooks/team/useLeaveTeam'
+import { useRemoveMember } from '../../../api/hooks/team/useRemoveMember'
+import { useTransferLeader } from '../../../api/hooks/team/useTransferLeader'
+import { useUpdateTeam } from '../../../api/hooks/team/useUpdateTeam'
+import ROUTES from '../../../constants/routes'
+import { editTeamValidation } from '../../../schemas'
+import Loader from '../../../shared/components/Loader/Loader'
+import { determineUserRoleInTeam } from '../../../utils/determineUserRoleInTeam'
+import { getServedProfilePic } from '../../../utils/getServedProfilepic'
+import Page404Form from '../../Forms/Page404Form/Page404Form'
+import TeamModal from '../Modal/TeamModal'
+import { TeamProfileLargeCard } from '../TeamProfileLargeCard/TeamProfileLargeCard'
+import TeamProfileMiniCard from '../TeamProfileMiniCard/TeamProfileMiniCard'
+import TeamTypeSwitch from '../TeamTypeSwitch/TeamTypeSwitch'
+
+import ActionButtonsType from './ActionButtonsType'
+import { Card, CardContainer, Container } from './TeamForm.styles'
+
+function TeamForm() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  let role = null
+
+  const [removeMemberActive, setRemoveMemberActive] = useState('')
+  const [modalActive, setModalActive] = useState('')
+
+  const [chosenLeader, changeChosenLeader] = useState({ username: '', id: '' })
+  const [open, setOpen] = useState(false)
+  const [email, setEmail] = useState('')
+  const [isEditing, setIsEditing] = useState(false)
+  const [editImage, setEditImage] = useState(false)
+  const { data: user, isFetching: isUserDataLoading } = useCheckAuth()
+
+  const teamId = id
+  const { data: team, isLoading: isUserTeamLoading, error } = useGetTeamData(teamId)
+
+  if (team && user) {
+    role = determineUserRoleInTeam(team, user)
+  }
+
+  const [isMembers, switchIsMembers] = useState(true)
+
+  const { mutate: deleteTeam, isLoading: isDeleting } = useDelete()
+  const { mutate: leaveTeam, isLoading: isLeaving } = useLeave()
+  const { mutate: removeFromTeam, isLoading: isRemoving } = useRemoveMember()
+  const { mutate: updateTeamsAvatar, isLoading: isUpdatingTeamsAvatar } = useUpdateAvatar('teams')
+  const { mutate: transferLeader, isLoading: isTransferring } = useTransferLeader()
+  const { mutate: inviteUser, isLoading: isInviting } = useInviteUser()
+  const { mutate: joinUser, isLoading: isJoining } = useJoinTeam()
+  const { mutate: updateTeam, isLoading: isUpdatingTeam } = useUpdateTeam()
+
+  useEffect(() => {
+    // maybe we need to turn off edits if we switch tabs
+    if (!isEditing) {
+      setEditImage(false)
+    }
+  }, [isEditing])
+
+  const [selectedImage, changeSelectedImage] = useState('')
+  const [picture, setPicture] = useState(null)
+  const [imgData, setImgData] = useState(null)
+
+  useEffect(() => {
+    setPicture(null)
+    setImgData(null)
+    changeSelectedImage('')
+  }, [isEditing])
+
+  const servedProfilePic = getServedProfilePic(selectedImage, picture, imgData)
+
+  // handleClose() function
+  const handleClose = () => {
+    setOpen(false)
+    setRemoveMemberActive('')
+    changeChosenLeader({ username: '', id: '' })
+    setModalActive('')
+  }
+
+  // handleInvite() function
+  const handleInvite = () => {
+    const details = { email: email, teamid: teamId, from_user_id: user?._id }
+
+    inviteUser(details)
+    setEmail('')
+  }
+
+  // handleJoin() function
+  const handleJoin = () => {
+    if (!user?.isRegistered) {
+      navigate(ROUTES.login)
+    } else {
+      joinUser({ user_id: user?._id, teamid: team?._id })
+    }
+  }
+
+  // handleOpenInvite() function
+  const handleOpenInvite = () => {
+    setOpen(true)
+    setModalActive('Invite')
+  }
+
+  const handleOpenTransferLeader = () => {
+    setOpen(true)
+    setModalActive('SetNewLeader')
+  }
+
+  // handleOpenDelete() function
+  const handleOpenDelete = () => {
+    setOpen(true)
+    setModalActive('Delete')
+  }
+
+  // handleOpenLeave() function
+  const handleOpenLeave = () => {
+    setOpen(true)
+    setModalActive('Leave')
+  }
+
+  // handleRemoveMembers() function
+  const handleRemoveMembers = (member) => {
+    setOpen(true)
+    setRemoveMemberActive(member)
+    setModalActive('RemoveMember')
+  }
+
+  if (
+    isUserTeamLoading ||
+    isDeleting ||
+    isLeaving ||
+    isRemoving ||
+    isTransferring ||
+    isUpdatingTeamsAvatar ||
+    isUpdatingTeam ||
+    isUserDataLoading ||
+    isInviting ||
+    isJoining
+  ) {
+    return <Loader />
+  }
+
+  if ((!isUserTeamLoading && !team) || error) {
+    return <Page404Form findText="Couldn't find the requested team." paddingLeft="88px" />
+  }
+
+  const actionType = (
+    <ActionButtonsType
+      team={team}
+      isEditing={isEditing}
+      setIsEditing={setIsEditing}
+      isMembers={isMembers}
+      editImage={editImage}
+      handleOpenDelete={handleOpenDelete}
+      handleOpenLeave={handleOpenLeave}
+      updateTeamsAvatar={updateTeamsAvatar}
+      servedProfilePic={servedProfilePic}
+      picture={picture}
+      selectedImage={selectedImage}
+      role={role}
+      handleJoin={handleJoin}
+      updateTeam={updateTeam}
+    />
+  )
+
+  return (
+    <Formik
+      initialValues={{
+        name: team?.name,
+        tag: team?.tag,
+        country: team?.country,
+        type: [team?.type?.slice(0, 1)?.toUpperCase(), team?.type.slice(1, team?.type.length)].join(
+          '',
+        ),
+        description: team?.description,
+        image: '',
+        default: '',
+      }}
+      validationSchema={editTeamValidation}
+    >
+      {() => {
+        return (
+          <>
+            <TeamTypeSwitch myTeam={role === 'leader' || role === 'member' ? 'team' : ''} />
+            <Container>
+              <TeamModal
+                modalActive={modalActive}
+                chosenLeader={chosenLeader}
+                handleClose={handleClose}
+                setEmail={setEmail}
+                email={email}
+                team={team}
+                open={open}
+                leaveTeam={leaveTeam}
+                user={user}
+                transferLeader={transferLeader}
+                setIsEditing={setIsEditing}
+                removeFromTeam={removeFromTeam}
+                removeMemberActive={removeMemberActive}
+                handleInvite={handleInvite}
+                deleteTeam={deleteTeam}
+                setModalActive={setModalActive}
+                changeChosenLeader={changeChosenLeader}
+              />
+              <CardContainer>
+                <Card>
+                  <TeamProfileLargeCard
+                    isMembers={isMembers}
+                    editImage={editImage}
+                    chosenLeader={chosenLeader}
+                    changeChosenLeader={changeChosenLeader}
+                    handleRemoveMembers={handleRemoveMembers}
+                    isEditing={isEditing}
+                    team={team}
+                    setIsEditing={setIsEditing}
+                    handleOpenDelete={handleOpenDelete}
+                    switchIsMembers={switchIsMembers}
+                    handleOpenInvite={handleOpenInvite}
+                    selectedImage={selectedImage}
+                    setImgData={setImgData}
+                    setPicture={setPicture}
+                    changeSelectedImage={changeSelectedImage}
+                    imgData={imgData}
+                    picture={picture}
+                    role={role}
+                    handleOpenTransferLeader={handleOpenTransferLeader}
+                  />
+                </Card>
+                <TeamProfileMiniCard
+                  team={team}
+                  picture={picture}
+                  selectedImage={selectedImage}
+                  isEditing={isEditing}
+                  setEditImage={setEditImage}
+                  actionType={actionType}
+                  editImage={editImage}
+                  servedProfilePic={servedProfilePic}
+                />
+              </CardContainer>
+            </Container>
+          </>
+        )
+      }}
+    </Formik>
+  )
+}
+
+export default TeamForm
diff --git a/client/src/components/Team/TeamForm/TeamForm.styles.js b/client/src/components/Team/TeamForm/TeamForm.styles.js
new file mode 100644
index 000000000..a6bc2c220
--- /dev/null
+++ b/client/src/components/Team/TeamForm/TeamForm.styles.js
@@ -0,0 +1,323 @@
+import styled from 'styled-components'
+
+import { BLACK, WHITE } from '../../../constants/colors'
+import { B2fs, B2fw, B2lh } from '../../../constants/fonts'
+
+export const Container = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  background: ${BLACK.background};
+  padding-left: 88px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 0;
+  }
+`
+
+export const CardContainer = styled.div`
+  min-height: 100dvh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+
+  @media screen and (max-width: 1024px) {
+    justify-content: start;
+    margin: 96px 0 24px 0;
+    flex-direction: column-reverse;
+    padding: 0 24px;
+    min-height: 0;
+  }
+`
+
+export const Card = styled.div`
+  width: 570px;
+  height: 400px;
+  background: #1a1c22;
+  border-radius: 15px;
+  gap: 30px;
+  padding: 24px 32px;
+
+  @media screen and (max-width: 1024px) {
+    max-width: 570px;
+    width: 100%;
+    position: static;
+    overflow-y: scroll;
+    height: 100%;
+    padding: 24px 24px;
+
+    ::-webkit-scrollbar {
+      /* WebKit */
+      transition: all 0.2s;
+      width: 5px;
+      /* height: auto; */
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #5d9d0b;
+      border-radius: 10px;
+    }
+  }
+`
+
+export const MainCardContent = styled.div`
+  height: auto;
+`
+
+export const ButtonCardContent = styled.div`
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+`
+
+export const UserAccordionUsername = styled.p``
+
+export const RightContainer = styled.div`
+  padding: 48px 24px 24px 24px;
+  height: 400px;
+  width: 270px;
+  border-radius: 15px;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  background: #26292b;
+  background: #1a1c22;
+  position: relative;
+  display: flex;
+`
+
+export const CircleContainer = styled.div`
+  width: 181px;
+  height: 38px;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  border-radius: 13px;
+  border: 1px solid #a1a1a1;
+`
+
+export const Text = styled.h3`
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '18px'};
+  color: ${(props) => props.color || WHITE.main};
+  margin: ${(props) => props.margin || '0'};
+  text-align: ${(props) => props.textAlign || 'left'};
+  /* line-height: ${(props) => props.lineHeight || '1'}; */
+`
+
+export const GenericButton = styled.button`
+  width: 100%;
+  height: ${(props) => props.height || '44px'};
+  background: ${(props) => props.background || 'transparent'};
+  border: ${(props) => props.border || ' 2px solid #a5211f'};
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  outline: none;
+  margin-top: ${(props) => props.marginTop || '24px'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  &:hover {
+    transform: translateY(-2px);
+  }
+`
+export const EditTeam = styled.button`
+  width: ${(props) => props.width || ''};
+  margin-top: ${(props) => props.marginTop || '0'};
+  background-color: #46a11b;
+  padding: 10px 16px 8px 16px;
+  font-size: ${B2fs};
+  font-weight: ${B2fw};
+  line-height: ${B2lh};
+  border-radius: 10px;
+  color: #fff;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  &:hover {
+    transform: translateY(-1.25px);
+  }
+`
+
+export const SpaceBetweenColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+`
+
+export const InputBox = styled.div`
+  display: flex;
+  border: 1px solid #86878b;
+  border-radius: 10px;
+  align-items: center;
+  gap: 14px;
+  margin-top: 32px;
+  padding: 9px 9px;
+  input {
+    font-size: ${B2fs};
+    line-height: ${B2lh};
+    font-weight: ${B2fw};
+    width: 100%;
+    height: 22px;
+    border: none;
+  }
+`
+
+export const SearchIconContainer = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: ${(props) => props.color || '#86878b'};
+  svg,
+  svg path,
+  svg circle {
+    stroke: ${(props) => props.color || '#86878b'};
+  }
+`
+
+export const CaretContainer = styled.div`
+  transition: all 0.2s;
+  cursor: pointer;
+  svg {
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    transition: all 0.2s;
+    transform: ${(props) => (props.selectLeader ? 'rotate(180deg)' : 'rotate(0)')};
+    path {
+      cursor: pointer;
+      stroke: #fff;
+    }
+  }
+  opacity: ${(props) => (props.isEditing ? '1' : '0')};
+  transition: all 0.2s ease-in-out;
+  right: 2%;
+  top: 5%;
+`
+
+export const CloseContainerModal = styled.div`
+  position: absolute;
+  cursor: pointer;
+  svg {
+    width: 14px;
+    height: 14px;
+    path {
+      stroke: ${(props) => props.color || '#46A11B'};
+    }
+  }
+  color: #fff;
+  opacity: 1;
+  transition: all 0.2s ease-in-out;
+  right: 3%;
+  top: 4%;
+
+  &:hover {
+    svg {
+      path {
+        stroke: #d42422;
+      }
+    }
+  }
+`
+
+export const Input = styled.input`
+  margin: 0;
+  outline: 0;
+  border-width: 0 0 1.5px;
+  border-color: ${(props) => props.borderColor || 'rgba(93, 157, 11, 0.5)'};
+  background: inherit;
+  height: ${(props) => props.height || '40px'};
+  font-size: 18px;
+  margin: ${(props) => props.margin || '0'};
+  color: ${WHITE.main};
+  &:focus {
+    border-color: ${WHITE.main};
+  }
+`
+
+export const UserPlusContainer = styled.div`
+  width: 20px;
+  height: 20px;
+`
+
+export const LeaderActionsBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  button {
+    width: 107px;
+    font-size: 16px;
+  }
+`
+
+export const FormikContainer = styled.div`
+  label {
+    font-size: ${B2fs};
+    line-height: ${B2lh};
+    font-weight: ${B2fw};
+  }
+`
+
+export const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '370px',
+  height: '350px',
+  bgcolor: '#1A1C22',
+  borderRadius: '15px',
+  boxShadow: 14,
+  padding: '32px 32px',
+  backdropFilter: 'blur(5px)',
+}
+
+export const teamPreviewStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '570px',
+  bgcolor: '#1A1C22',
+  borderRadius: '15px',
+  boxShadow: 14,
+  padding: '24px 32px',
+  display: 'flex',
+  alignItems: 'start',
+  flexDirection: 'column',
+  gap: '24px',
+}
+
+export const mobileFullScreenStyle = {
+  width: '100%',
+  minHeight: '100dvh',
+  background: '#26292b',
+  padding: '24px 29px',
+}
+
+export const mobileSemiFullScreenStyle = {
+  width: '100%',
+  background: '#1A1C22',
+  padding: '78px 27px',
+}
diff --git a/client/src/components/Team/TeamProfileLargeCard/TeamProfileLargeCard.jsx b/client/src/components/Team/TeamProfileLargeCard/TeamProfileLargeCard.jsx
new file mode 100644
index 000000000..7323f2654
--- /dev/null
+++ b/client/src/components/Team/TeamProfileLargeCard/TeamProfileLargeCard.jsx
@@ -0,0 +1,94 @@
+import { defaultTeamImages } from '../../../constants/images'
+import About from '../About/About'
+import EditImage from '../EditImage/EditImage'
+import LargeCardSwitch from '../LargeCardSwitch/LargeCardSwitch'
+import Members from '../Members/Members'
+
+export const TeamProfileLargeCard = ({
+  isMembers,
+  editImage,
+  chosenLeader,
+  changeChosenLeader,
+  handleRemoveMembers,
+  isEditing,
+  team,
+  setIsEditing,
+  handleOpenDelete,
+  switchIsMembers,
+  handleOpenInvite,
+  selectedImage,
+  setImgData,
+  setPicture,
+  changeSelectedImage,
+  imgData,
+  picture,
+  role,
+  handleOpenTransferLeader,
+}) => {
+  /**
+   * Based on isMembers value which defines if we should display Members or About
+   * we render specific component
+   */
+  const input = isMembers ? (
+    <Members
+      chosenLeader={chosenLeader}
+      changeChosenLeader={changeChosenLeader}
+      handleRemoveMembers={handleRemoveMembers}
+      isEditing={isEditing}
+      team={team}
+      isMembers={isMembers}
+      role={role}
+      handleOpenInvite={handleOpenInvite}
+      handleOpenTransferLeader={handleOpenTransferLeader}
+    />
+  ) : (
+    <About
+      isEditing={isEditing}
+      setIsEditing={setIsEditing}
+      handleOpenDelete={handleOpenDelete}
+      team={team}
+    />
+  )
+
+  return (
+    /**
+     * Here, based on editImage variable, which becomes active when user clicks on Pencil icon near the team avatar,
+     * we render specific components, e.g. we render TopBar and Members/About or EditImage component
+     */
+    <>
+      {!editImage && (
+        <>
+          <LargeCardSwitch
+            isMembers={isMembers}
+            about={
+              <About
+                isEditing={isEditing}
+                setIsEditing={setIsEditing}
+                handleOpenDelete={handleOpenDelete}
+                team={team}
+              />
+            }
+            switchIsMembers={switchIsMembers}
+            handleOpenInvite={handleOpenInvite}
+            role={role}
+            isEditing={isEditing}
+            handleOpenTransferLeader={handleOpenTransferLeader}
+          />
+          {input}
+        </>
+      )}
+
+      {editImage && (
+        <EditImage
+          selectedImage={selectedImage}
+          setImgData={setImgData}
+          setPicture={setPicture}
+          changeSelectedImage={changeSelectedImage}
+          defaultTeamImages={defaultTeamImages}
+          imgData={imgData}
+          picture={picture}
+        />
+      )}
+    </>
+  )
+}
diff --git a/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.jsx b/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.jsx
new file mode 100644
index 000000000..2c2bed5b6
--- /dev/null
+++ b/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.jsx
@@ -0,0 +1,91 @@
+import Cake from '../../../assets/Team/Cake'
+import Crown from '../../../assets/Team/Crown'
+import { PencilSimple } from '../../../assets/Team/PencilSimple'
+import Users from '../../../assets/Team/Users'
+import { B2fs, B2fw, B2lh, H4fs, H4fw, H4lh } from '../../../constants/fonts'
+import { LOCAL_PATH } from '../../../http'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
+import { Text } from '../TeamForm/TeamForm.styles'
+
+import {
+  CakeBox,
+  EditImageButton,
+  RightContainer,
+  SVGAndText,
+  TeamImgBorder,
+  TeamInformationContainer,
+} from './TeamProfileMiniCard.styles'
+
+const TeamProfileMiniCard = ({
+  team,
+  picture,
+  selectedImage,
+  isEditing,
+  setEditImage,
+  actionType,
+  servedProfilePic,
+  editImage,
+}) => {
+  return (
+    <>
+      <RightContainer>
+        <TeamInformationContainer>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div style={{ position: 'relative', width: '100px', height: '124px' }}>
+              <TeamImgBorder
+                alt={team?.username}
+                src={picture !== null || selectedImage !== '' ? servedProfilePic : team?.image} // not currently
+              />
+              {isEditing ? (
+                <EditImageButton
+                  editImage={editImage}
+                  onClick={() => {
+                    setEditImage((prevState) => !prevState)
+                  }}
+                >
+                  <PencilSimple />
+                </EditImageButton>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+          <Text
+            margin="0 0 16px 0"
+            fontSize={`${H4fs}`}
+            lineHeight={`${H4lh}`}
+            fontWeight={`${H4fw}`}
+          >
+            {team?.name}
+          </Text>
+          <FlexWrapper direction="column" gap="8px" align="start" justify="start">
+            <SVGAndText margin="0 0 8px 0">
+              <CakeBox>
+                <Cake />
+              </CakeBox>
+              <Text
+                margin="0 0 0 0"
+                fontSize={`${B2fs}`}
+                lineHeight={`${B2lh}`}
+                fontWeight={`${B2fw}`}
+              >
+                {team?.createdAt.split('T')[0]}
+              </Text>
+            </SVGAndText>
+            <SVGAndText>
+              <CakeBox>
+                <Users />
+              </CakeBox>
+              <Text fontSize={`${B2fs}`} lineHeight={`${B2lh}`} fontWeight={`${B2fw}`}>
+                {team?.members.length}/8 members
+              </Text>
+            </SVGAndText>
+          </FlexWrapper>
+        </TeamInformationContainer>
+        {actionType}
+      </RightContainer>
+    </>
+  )
+}
+
+export default TeamProfileMiniCard
diff --git a/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.styles.jsx b/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.styles.jsx
new file mode 100644
index 000000000..2939f8912
--- /dev/null
+++ b/client/src/components/Team/TeamProfileMiniCard/TeamProfileMiniCard.styles.jsx
@@ -0,0 +1,69 @@
+import styled from 'styled-components'
+
+export const CakeBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+export const RightContainer = styled.div`
+  padding: 48px 24px 24px 24px;
+  height: 400px;
+  width: 270px;
+  border-radius: 15px;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  background: #26292b;
+  background: #1a1c22;
+  position: relative;
+  display: flex;
+
+  @media screen and (max-width: 1024px) {
+    max-width: 570px;
+    width: 100%;
+  }
+`
+
+export const SVGAndText = styled.div`
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  margin: ${(props) => props.margin || '0'};
+`
+
+export const EditImageButton = styled.button`
+  position: absolute;
+  right: -5%;
+  bottom: 19%;
+  cursor: pointer;
+  background: #46a11b;
+  border-radius: 50%;
+  border: none;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s;
+  opacity: ${(props) => (props.editImage ? '0' : '1')};
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`
+
+export const TeamImgBorder = styled.img`
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 24px;
+`
+
+export const TeamInformationContainer = styled.div`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`
diff --git a/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.jsx b/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.jsx
new file mode 100644
index 000000000..3f3fbfd41
--- /dev/null
+++ b/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.jsx
@@ -0,0 +1,47 @@
+import { useNavigate } from 'react-router-dom'
+
+import TeameightsLogo from '../../../assets/Platform/TeameightsLogo'
+import { H4fs, H4fw, H4lh } from '../../../constants/fonts.js'
+
+import { GridContainer, LogoContainer, SelectType, Text, Textbox } from './TeamTypeSwitch.styles.js'
+
+const TeamTypeSwitch = ({ myTeam }) => {
+  const navigate = useNavigate()
+
+  return (
+    <GridContainer>
+      <SelectType>
+        <Textbox>
+          <Text
+            isMyTeam={myTeam === 'team'}
+            onClick={() => {
+              navigate('/team')
+            }}
+            fontSize={`${H4fs}`}
+            fontWeight={`${H4fw}`}
+            lineHeight={`${H4lh}`}
+          >
+            My Team
+            <span></span>
+          </Text>
+        </Textbox>
+        <Textbox>
+          <Text
+            onClick={() => {
+              navigate('/teams')
+            }}
+            fontSize={`${H4fs}`}
+            fontWeight={`${H4fw}`}
+            lineHeight={`${H4lh}`}
+            isMyTeam={myTeam === 'teams'}
+          >
+            All Teams
+            <span></span>
+          </Text>
+        </Textbox>
+      </SelectType>
+    </GridContainer>
+  )
+}
+
+export default TeamTypeSwitch
diff --git a/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.styles.js b/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.styles.js
new file mode 100644
index 000000000..f1e10bcda
--- /dev/null
+++ b/client/src/components/Team/TeamTypeSwitch/TeamTypeSwitch.styles.js
@@ -0,0 +1,65 @@
+import styled, { createGlobalStyle } from 'styled-components'
+
+import { BLACK } from '../../../constants/colors'
+
+export const GridContainer = styled.div`
+  display: flex;
+  /* grid-template-columns: repeat(3, 1fr); */
+  font-size: 20px;
+  max-height: 38px;
+  width: 100%;
+  margin-top: 49px;
+  align-items: center;
+  justify-content: end;
+  position: absolute;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 32px;
+  }
+
+  @media screen and (max-width: 768px) {
+    justify-content: center;
+  }
+`
+
+export const Textbox = styled.div`
+  cursor: pointer;
+`
+
+export const SelectType = styled.div`
+  grid-column: 3; /* Place the element in the second column */
+  justify-self: end; /* Align the element to the end of its column (right corner) */
+  margin-right: 30px;
+  display: flex;
+  gap: 16px;
+
+  @media screen and (max-width: 768px) {
+    margin-right: 0;
+  }
+`
+
+export const LogoContainer = styled.div`
+  grid-column: 2; /* Place the element in the first column */
+  justify-self: center; /* Center the element within its column */
+  align-self: center;
+`
+
+export const Text = styled.p`
+  transition: all 0.2s;
+  position: relative;
+  display: inline-block;
+  color: ${(props) => (props.isMyTeam ? '#5bd424' : `white`)};
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '18px'};
+  line-height: ${(props) => props.lineHeight || '1'};
+  span {
+    width: 100%;
+    height: 1px;
+    position: absolute;
+    bottom: -10%;
+    left: 50%;
+    background-color: #5bd424;
+    transition: all 0.2s;
+    transform: translateX(-50%) ${(props) => (props.isMyTeam ? `scaleX(100%)` : `scaleX(0)`)};
+  }
+`
diff --git a/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataDesktop.jsx b/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataDesktop.jsx
new file mode 100644
index 000000000..35931a7c1
--- /dev/null
+++ b/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataDesktop.jsx
@@ -0,0 +1,23 @@
+import { forwardRef } from 'react'
+
+import { TeamButton, TeamDataDesktop, TeamImage, Text } from '../../TeamsList.styles'
+
+const Desktop = forwardRef(({ team, i, handleClickOpen }, ref) => {
+  return (
+    <TeamDataDesktop ref={ref}>
+      <TeamImage src={team?.image} />
+      <Text fontSize="16px" fontWeight="400" color="white">
+        {team.name}
+      </Text>
+      <Text fontSize="16px" fontWeight="400" color="white">
+        {team.tag}
+      </Text>
+      <Text fontSize="16px" fontWeight="400" color="white">
+        {team.members.length}/8
+      </Text>
+      <TeamButton onClick={() => handleClickOpen(team)}>Show</TeamButton>
+    </TeamDataDesktop>
+  )
+})
+
+export default Desktop
diff --git a/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataMobile.jsx b/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataMobile.jsx
new file mode 100644
index 000000000..565a56d84
--- /dev/null
+++ b/client/src/components/Team/TeamsList/Teams/TeamData/TeamDataMobile.jsx
@@ -0,0 +1,29 @@
+import { forwardRef } from 'react'
+
+import FlexWrapper from '../../../../../shared/components/FlexWrapper/FlexWrapper'
+import { TeamDataMobile, TeamImage, Text } from '../../TeamsList.styles'
+
+const Mobile = forwardRef(({ team, i, handleClickOpen }, ref) => {
+  return (
+    <TeamDataMobile onClick={() => handleClickOpen(team)} ref={ref}>
+      <FlexWrapper gap="12px" justify="center" align="center">
+        <TeamImage src={team?.image} width="50px" height="50px" />
+        <FlexWrapper direction="column">
+          <Text fontSize="16px" fontWeight="400" color="white">
+            {team.name}
+          </Text>
+          <Text fontSize="14px" fontWeight="400" color="#5BD424">
+            {team.tag}
+          </Text>
+        </FlexWrapper>
+      </FlexWrapper>
+      <FlexWrapper direction="column" align="end" justify="end">
+        <Text fontSize="14px" fontWeight="400" color="white">
+          {team.members.length}/8
+        </Text>
+      </FlexWrapper>
+    </TeamDataMobile>
+  )
+})
+
+export default Mobile
diff --git a/client/src/components/Team/TeamsList/Teams/Teams.jsx b/client/src/components/Team/TeamsList/Teams/Teams.jsx
new file mode 100644
index 000000000..21705779f
--- /dev/null
+++ b/client/src/components/Team/TeamsList/Teams/Teams.jsx
@@ -0,0 +1,99 @@
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+
+import { useLoadTeams } from '../../../../api/hooks/team/useLoadTeams'
+import CardSkeleton from '../../../../shared/components/CardSkeleton/CardSkeleton'
+import { TeamsListBox, TeamsWrapper } from '../TeamsList.styles'
+
+import Desktop from './TeamData/TeamDataDesktop'
+import Mobile from './TeamData/TeamDataMobile'
+
+const Teams = ({ handleClickOpen, setIsNotFound, isLoadingUserData, width }) => {
+  const intObserver = useRef()
+
+  const {
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading: isLoadingTeams,
+    isFetched,
+    data: teams,
+    filtered,
+  } = useLoadTeams()
+
+  const lastTeamRef = useCallback(
+    (team) => {
+      if (isFetchingNextPage) {
+        return
+      }
+
+      if (intObserver.current) {
+        intObserver.current.disconnect()
+      }
+
+      intObserver.current = new IntersectionObserver(
+        (teamsPerPage) => {
+          console.log(teamsPerPage[0])
+          if (teamsPerPage[0].isIntersecting && hasNextPage) {
+            fetchNextPage()
+          }
+        },
+        { threshold: 0.9 },
+      )
+
+      if (team) {
+        intObserver.current.observe(team)
+      }
+    },
+    [isFetchingNextPage, fetchNextPage, hasNextPage],
+  )
+
+  const content = teams?.pages.map((pg) => {
+    const teamsPerPage = pg.data
+
+    return teamsPerPage.map((team, index) => {
+      if (teamsPerPage.length === index + 1) {
+        return (
+          <Fragment key={index}>
+            {width > 900 && (
+              <Desktop team={team} i={index} handleClickOpen={handleClickOpen} ref={lastTeamRef} />
+            )}
+            {width <= 900 && (
+              <Mobile team={team} i={index} handleClickOpen={handleClickOpen} ref={lastTeamRef} />
+            )}
+          </Fragment>
+        )
+      }
+
+      return (
+        <Fragment key={index}>
+          <Desktop team={team} i={index} handleClickOpen={handleClickOpen} />
+          <Mobile team={team} i={index} handleClickOpen={handleClickOpen} />
+        </Fragment>
+      )
+    })
+  })
+
+  useEffect(() => {
+    if (isFetched && !content[0].length && !filtered) {
+      setIsNotFound(true)
+    }
+  }, [isFetched, content])
+
+  return (
+    <TeamsWrapper>
+      <TeamsListBox>
+        {content}
+        {(isFetchingNextPage || isLoadingUserData || isLoadingTeams) && (
+          <CardSkeleton
+            cards={9}
+            borderRadius={'15px'}
+            height={width > 900 ? '60px' : '74px'}
+            width="100%"
+          />
+        )}
+      </TeamsListBox>
+    </TeamsWrapper>
+  )
+}
+
+export default Teams
diff --git a/client/src/components/Team/TeamsList/TeamsList.js b/client/src/components/Team/TeamsList/TeamsList.js
new file mode 100644
index 000000000..d0f1fe436
--- /dev/null
+++ b/client/src/components/Team/TeamsList/TeamsList.js
@@ -0,0 +1,124 @@
+// * Modules
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+// * API
+import { useCheckAuth } from '../../../api/hooks/auth/useCheckAuth'
+import { useJoinTeam } from '../../../api/hooks/team/useJoinTeam'
+import { useLeaveAndJoin } from '../../../api/hooks/team/useLeaveAndJoin'
+import ROUTES from '../../../constants/routes'
+import { useGetScreenWidth } from '../../../hooks/useGetScreenWidth'
+import AppHeader from '../../../shared/components/AppHeader/AppHeader'
+import Loader from '../../../shared/components/Loader/Loader'
+import SliderToTop from '../../../shared/components/SliderToTop/SliderToTop'
+import { setTeamsFilter } from '../../../store/reducers/TeamsFiltersSlice'
+import NotFound from '../../Teammates/components/NotFound/NotFound'
+import TeamModal from '../Modal/TeamModal'
+import { MobileProfile } from '../Modal/TeamPreviewModalPhone/TeamPreviewModalPhone.styles'
+
+import Teams from './Teams/Teams'
+// * Styles
+import { Container, NotFoundContainer, TeamCardModal } from './TeamsList.styles'
+
+function TeamsList() {
+  let { data: user, isLoading: isLoadingUserData } = useCheckAuth()
+  const width = useGetScreenWidth()
+  const userId = user?._id
+
+  const [selectedTeam, setSelectedTeam] = useState({})
+  const [open, setOpen] = useState(false)
+  let [changeModal, setChangeModal] = useState('')
+
+  const { mutate: joinUser, isLoading: isUserTeamLoading } = useJoinTeam()
+  const [isNotFound, setIsNotFound] = useState(false)
+
+  const handleComeback = () => {
+    setIsNotFound(false)
+  }
+
+  const { leaveAndJoin, isLeaving, isJoining } = useLeaveAndJoin()
+
+  const navigate = useNavigate()
+
+  const handleClickOpen = (team) => {
+    setSelectedTeam(team)
+    setOpen(true)
+    setChangeModal('JoinTeam')
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleJoin = async () => {
+    if (!user?.isRegistered) {
+      navigate(ROUTES.login)
+    } else {
+      if (user.team !== undefined) {
+        if (width <= 600) {
+          setOpen(false)
+          setTimeout(() => {
+            setOpen(true)
+            setChangeModal('AlreadyOnTeam')
+          }, 100)
+        } else {
+          setChangeModal('AlreadyOnTeam')
+        }
+      } else {
+        joinUser({ user_id: userId, teamid: selectedTeam._id })
+      }
+    }
+  }
+
+  const handleLeaveAndJoin = async () => {
+    const leaveDetails = { user_id: user?._id, teamid: user?.team._id }
+    const joinDetails = { user_id: user?._id, teamid: selectedTeam._id }
+
+    await leaveAndJoin.mutateAsync({ leaveDetails, joinDetails })
+  }
+
+  if (isUserTeamLoading || isLeaving || isJoining) {
+    return (
+      <Container>
+        <Loader />
+      </Container>
+    )
+  }
+
+  return (
+    <>
+      <TeamModal
+        modalActive={changeModal}
+        open={open}
+        user={user}
+        handleClose={handleClose}
+        handleLeaveAndJoin={handleLeaveAndJoin}
+        handleJoin={handleJoin}
+        team={selectedTeam}
+      />
+      <AppHeader
+        sliceName="teamsFilters"
+        filterValueAction={setTeamsFilter}
+        hideLogoForMobile={true}
+      />
+
+      {isNotFound ? (
+        <NotFoundContainer>
+          <NotFound handleComeback={handleComeback} />
+        </NotFoundContainer>
+      ) : (
+        <Container>
+          <Teams
+            handleClickOpen={handleClickOpen}
+            setIsNotFound={setIsNotFound}
+            isLoadingUserData={isLoadingUserData}
+            width={width}
+          />
+          <SliderToTop />
+        </Container>
+      )}
+    </>
+  )
+}
+
+export default TeamsList
diff --git a/client/src/components/Team/TeamsList/TeamsList.styles.js b/client/src/components/Team/TeamsList/TeamsList.styles.js
new file mode 100644
index 000000000..ed340add5
--- /dev/null
+++ b/client/src/components/Team/TeamsList/TeamsList.styles.js
@@ -0,0 +1,142 @@
+import { Drawer, Modal } from '@mui/material'
+import styled from 'styled-components'
+
+import { BLACK, WHITE } from '../../../constants/colors'
+
+export const TeamCardModal = styled(Modal)`
+  @media screen and (min-width: 0px) and (max-width: 600px) {
+    display: none;
+  }
+`
+
+export const Container = styled.div`
+  width: 100%;
+  min-height: calc(100vh - 238px);
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  background: ${BLACK.background};
+  padding: 0 0 50px 88px;
+
+  @media screen and (max-width: 768px) {
+    padding: 0 0 50px 0;
+  }
+`
+
+export const TeamsWrapper = styled.div`
+  /* min-height: 100vh; */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  padding-left: 24px;
+  padding-right: 24px;
+`
+
+export const TeamsListBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  width: 100%;
+  max-width: 1134px;
+  background: #1a1c22;
+  border-radius: 15px;
+  padding: 32px 32px;
+  gap: 60px;
+
+  @media screen and (max-width: 1440px) {
+    max-width: 784px;
+    padding: 24px 24px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    max-width: 748px;
+  }
+
+  @media screen and (max-width: 900px) {
+    max-width: 502px;
+    background: transparent;
+    padding: 0;
+    gap: 16px;
+  }
+`
+
+export const Text = styled.h3`
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '24px'};
+  margin: ${(props) => props.margin || '0 0 0 0'};
+  color: ${(props) => props.color || WHITE.main};
+  text-align: ${(props) => props.textAlign || 'none'};
+`
+
+export const TeamDataDesktop = styled.div`
+  width: 100%;
+  display: grid;
+  justify-content: space-between;
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr 3fr 2fr repeat(2, 1fr);
+  justify-content: center;
+  align-items: center;
+  margin-top: ${(props) => props.margin || '0'};
+
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+`
+
+export const TeamDataMobile = styled.div`
+  margin-top: ${(props) => props.margin || '0'};
+  background: #1a1c22;
+  padding: 12px 16px;
+  border-radius: 15px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  display: none;
+  cursor: pointer;
+
+  @media screen and (max-width: 900px) {
+    display: flex;
+  }
+`
+
+export const TeamImage = styled.img`
+  width: ${(props) => props.width || '60px'};
+  height: ${(props) => props.height || '60px'};
+  border-radius: 50%;
+`
+
+export const TeamButton = styled.button`
+  width: ${(props) => props.width || '74px'};
+  height: ${(props) => props.height || '40px'};
+  border: none;
+  outline: none;
+  background: #46a11b;
+  /* border: 2px solid #5d9d0b; */
+  border-radius: 10px;
+  font-weight: ${(props) => props.fontWeight || '400'};
+  font-size: ${(props) => props.fontSize || '16px'};
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  justify-self: end;
+  /* position: relative; */
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-1.25px);
+  }
+`
+
+export const NotFoundContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: calc(100vh - 238px);
+  /* height: 100%; */
+  padding-left: 88px;
+`
diff --git a/client/src/components/Teammates/Teammates.js b/client/src/components/Teammates/Teammates.js
index f17521373..707ad9330 100644
--- a/client/src/components/Teammates/Teammates.js
+++ b/client/src/components/Teammates/Teammates.js
@@ -4,15 +4,16 @@ import { ThemeProvider } from 'styled-components'
 
 // * API
 import { useCheckAuth } from '../../api/hooks/auth/useCheckAuth'
+import AppHeader from '../../shared/components/AppHeader/AppHeader'
+import SliderToTop from '../../shared/components/SliderToTop/SliderToTop'
 import { GlobalStyle } from '../../shared/styles/Global.styles'
+import { setUsersFilter } from '../../store/reducers/UsersFiltersSlice'
 
 import Cards from './components/Cards/Cards'
 // * Components
-import Filters from './components/FiltersArea/Filters'
 import NotFound from './components/NotFound/NotFound'
-import SliderToTop from './components/SliderToTop/SliderToTop'
 import UserProfile from './components/UserProfile/UserProfile'
-import UserProfilePhone from './components/UserProfilePhone/UserProfilePhone'
+import UserProfilePhone from './components/UserProfile/UserProfilePhone'
 // * Styles
 import {
   CardsContainer,
@@ -29,33 +30,25 @@ function Teammates() {
   const [open, setOpen] = useState(false)
   const [showUser, setShowUser] = useState({})
   const [isNotFound, setIsNotFound] = useState(false)
-  const [displayFiltered, setDisplayFiltered] = useState(false)
-  const [mobileProfile, setMobileProfile] = useState(false)
 
   const handleComeback = () => {
     setIsNotFound(false)
-    setDisplayFiltered(false)
   }
 
   /**
    * Get global state from redux
    */
   const { data: user, isLoading: isLoadingUseData } = useCheckAuth()
-
-  const showMobileProfile = () => setMobileProfile(!mobileProfile)
   /**
    * Handle open and close for modal window that pops up whenever user clicks on the card
    */
   const handleOpen = (user) => {
     setShowUser(user)
     setOpen(true)
-    showMobileProfile()
   }
 
   const handleClose = () => {
     setOpen(false)
-    setShowUser({})
-    showMobileProfile()
   }
 
   const [scrollbar, toggleScrollbar] = useState(false)
@@ -68,18 +61,19 @@ function Teammates() {
     <>
       <ThemeProvider theme={{ scrollbar }}>
         <GlobalStyle />
-        <Filters setDisplayFiltered={setDisplayFiltered} displayFiltered={displayFiltered} />
+        <AppHeader sliceName="usersFilters" filterValueAction={setUsersFilter} />
         {/* ! USED ONLY FOR 730px or more */}
         <UserCardModal
           open={open}
           onClose={handleClose}
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
+          sx={{ backdropFilter: 'blur(15px)' }}
         >
           <UserProfile user={showUser} handleClose={handleClose} />
         </UserCardModal>
         {/* ! USED ONLY FOR 730px or less */}
-        <UserProfilePhone user={showUser} mobileProfile={mobileProfile} handleClose={handleClose} />
+        <UserProfilePhone user={showUser} mobileProfile={open} handleClose={handleClose} />
         {/* If nothing was found, show user a NotFound container */}
         {isNotFound ? (
           <InfoContainer>
@@ -91,7 +85,6 @@ function Teammates() {
               <CardsContainer>
                 <Cards
                   setIsNotFound={setIsNotFound}
-                  displayFiltered={displayFiltered}
                   handleOpen={handleOpen}
                   isLoadingUseData={isLoadingUseData}
                 />
diff --git a/client/src/components/Teammates/Teammates.styles.js b/client/src/components/Teammates/Teammates.styles.js
index 8b7a790a6..7d831ae33 100644
--- a/client/src/components/Teammates/Teammates.styles.js
+++ b/client/src/components/Teammates/Teammates.styles.js
@@ -1,6 +1,6 @@
 // * Modules
 import Modal from '@mui/material/Modal'
-import styled, { createGlobalStyle } from 'styled-components'
+import styled from 'styled-components'
 
 export const GridContainer = styled.div`
   display: flex;
@@ -17,22 +17,25 @@ export const CardsContainer = styled.div`
   justify-content: center;
   align-items: center;
   margin-top: 15px;
-  width: 80%;
+  width: 100%;
+  max-width: 1196px;
   grid-template-columns: repeat(4, 1fr);
 
-  @media screen and (min-width: 1300px) {
-    column-gap: 0px;
-    grid-template-columns: repeat(4, 1fr);
+  @media screen and (max-width: 1440px) {
+    max-width: 826px;
+    grid-template-columns: repeat(3, 1fr);
   }
-
-  @media screen and (min-width: 1000px) and (max-width: 1300px) {
+  @media screen and (max-width: 1024px) {
+    max-width: 770px;
     grid-template-columns: repeat(3, 1fr);
   }
-  @media screen and (min-width: 730px) and (max-width: 1000px) {
+
+  @media screen and (max-width: 900px) {
+    max-width: 526px;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media screen and (min-width: 0px) and (max-width: 730px) {
+  @media screen and (max-width: 600px) {
     grid-template-columns: repeat(1, 1fr);
   }
 `
@@ -42,18 +45,28 @@ export const CardsZone = styled.div`
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
-  position: relative;
+  /* position: relative; */
+  padding-left: 88px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 0px;
+  }
 `
 
 export const InfoContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - 120px);
+  min-height: calc(100vh - 238px);
+  padding-left: 88px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 0px;
+  }
 `
 
 export const UserCardModal = styled(Modal)`
-  @media screen and (min-width: 0px) and (max-width: 730px) {
+  @media screen and (min-width: 0px) and (max-width: 520px) {
     display: none;
   }
 `
diff --git a/client/src/components/Teammates/components/CardSkeleton/CardSkeleton.js b/client/src/components/Teammates/components/CardSkeleton/CardSkeleton.js
deleted file mode 100644
index 72b83cb7f..000000000
--- a/client/src/components/Teammates/components/CardSkeleton/CardSkeleton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// * Styles
-import { CardContainer, CardGridContainer, SkeletonCard } from './CardSkeleton.styles'
-
-const CardSkeleton = ({ cards }) => {
-  return Array(cards)
-    .fill(0)
-    .map((item, i) => (
-      <CardGridContainer key={i}>
-        <CardContainer>
-          <SkeletonCard baseColor="#313131" highlightColor="#525252" />
-        </CardContainer>
-      </CardGridContainer>
-    ))
-}
-
-export default CardSkeleton
diff --git a/client/src/components/Teammates/components/Cards/Cards.js b/client/src/components/Teammates/components/Cards/Cards.js
index fe7175150..1498488c8 100644
--- a/client/src/components/Teammates/components/Cards/Cards.js
+++ b/client/src/components/Teammates/components/Cards/Cards.js
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import lookup from 'country-code-lookup'
 
 import { useLoadUsers } from '../../../../api/hooks/temeights/useLoadUsers'
-import CardSkeleton from '../CardSkeleton/CardSkeleton'
+import CardSkeleton from '../../../../shared/components/CardSkeleton/CardSkeleton'
 // * Components
 import UserCard from '../UserCard/UserCard'
 
@@ -13,7 +13,7 @@ import UserCard from '../UserCard/UserCard'
 // * Styles
 import { CardContainer } from './Cards.styles'
 
-const Cards = ({ handleOpen, isLoadingUseData, displayFiltered, setIsNotFound }) => {
+const Cards = ({ handleOpen, isLoadingUseData, setIsNotFound }) => {
   const intObserver = useRef()
 
   const {
@@ -23,7 +23,8 @@ const Cards = ({ handleOpen, isLoadingUseData, displayFiltered, setIsNotFound })
     isLoading,
     isFetched,
     data: users,
-  } = useLoadUsers(displayFiltered)
+    filtered,
+  } = useLoadUsers()
   const lastUserRef = useCallback(
     (user) => {
       if (isFetchingNextPage) {
@@ -105,7 +106,7 @@ const Cards = ({ handleOpen, isLoadingUseData, displayFiltered, setIsNotFound })
   }
 
   useEffect(() => {
-    if (isFetched && !content[0].length) {
+    if (isFetched && !content[0].length && !filtered) {
       setIsNotFound(true)
     }
   }, [isFetched, content])
diff --git a/client/src/components/Teammates/components/Cards/Cards.styles.js b/client/src/components/Teammates/components/Cards/Cards.styles.js
index ceb054dab..dc794ba3a 100644
--- a/client/src/components/Teammates/components/Cards/Cards.styles.js
+++ b/client/src/components/Teammates/components/Cards/Cards.styles.js
@@ -5,4 +5,5 @@ export const CardContainer = styled.div`
   display: flex; /* new */
   align-items: center; /* new */
   justify-content: center; /* new */
+  z-index: 200; /* z-index should be higher than opacity */
 `
diff --git a/client/src/components/Teammates/components/FiltersArea/Contentration.options.js b/client/src/components/Teammates/components/FiltersArea/Contentration.options.js
deleted file mode 100644
index ecb1d0029..000000000
--- a/client/src/components/Teammates/components/FiltersArea/Contentration.options.js
+++ /dev/null
@@ -1,50 +0,0 @@
-export const concentrationOptions = [
-  {
-    label: 'Mobile Developer',
-    value: 'Mobile',
-  },
-  {
-    label: 'Frontend/UI Developer',
-    value: 'Frontend',
-  },
-  {
-    label: 'Backend Developer',
-    value: 'Backend',
-  },
-  {
-    label: 'Full-Stack Developer',
-    value: 'Fullstack',
-  },
-  {
-    label: 'Desktop Applications Developer',
-    value: 'Desktop',
-  },
-  {
-    label: 'Embedded Systems Developer',
-    value: 'Embedded',
-  },
-  {
-    label: 'Machine Learning Engineer',
-    value: 'ML',
-  },
-  {
-    label: 'Data Scientist',
-    value: 'DataScience',
-  },
-  {
-    label: 'DevOps Engineer',
-    value: 'DevOps',
-  },
-  {
-    label: 'Data Engineer',
-    value: 'DataEngineer',
-  },
-  {
-    label: 'QA/Test Engineer',
-    value: 'QA',
-  },
-  {
-    label: 'Other',
-    value: 'Other',
-  },
-]
diff --git a/client/src/components/Teammates/components/FiltersArea/Filters.js b/client/src/components/Teammates/components/FiltersArea/Filters.js
index 66731503f..59e1db840 100644
--- a/client/src/components/Teammates/components/FiltersArea/Filters.js
+++ b/client/src/components/Teammates/components/FiltersArea/Filters.js
@@ -1,50 +1,33 @@
 // * Modules
-import React, { useEffect, useMemo, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import countryList from 'react-select-country-list'
-import AppBar from '@mui/material/AppBar'
+import React, { useEffect, useState } from 'react'
 import { Form, Formik } from 'formik'
 
-import Filters from '../../../../assets/Filters/Filters'
 // * Assets
-import Search from '../../../../assets/Filters/SearchIcon'
+import PlatformLogo from '../../../../assets/Platform/TeameightsLogo'
+import SearchIcon from '../../../../assets/Shared/SearchIcon'
 // * Components
-import frameworkOptions from '../../../../constants/frameworks'
-import CustomSelect from '../../../../shared/components/CustomSelect/CustomSelect'
-import { setFilters } from '../../../../store/reducers/Shared'
-import FiltersMenu from '../FiltersMenu/FiltersMenu'
-import { PlaceholderText } from '../SelectField/SelectField.styles'
+import { setUsersFilter } from '../../../../store/reducers/UsersFiltersSlice'
+import FilterSelect from '../../../FilterSelect/FilterSelect'
+import ModalSearch from '../../../ModalSearch/ModalSearch'
+import Search from '../../../Search/Search'
+import TagsList from '../../../TagsList/TagsList'
 
 // * Options
-import { concentrationOptions } from './Contentration.options'
 import {
-  BoxContainer,
-  Button,
-  FilterContainer,
-  FilterText,
+  LogoContainer,
   NavBar,
-  SelectContainer,
+  SearchIconWrapper,
+  SearchPanel,
+  SearchPanelWrapper,
 } from './Filters.styles'
-import { programmingLanguageOptions } from './ProgrammingLanguages.options'
 
-const TopBar = ({ setDisplayFiltered, displayFiltered }) => {
-  const [filterBar, setFilterBar] = useState(false)
-  const dispatch = useDispatch()
-  const countriesOptions = useMemo(() => countryList().getData(), [])
-
-  const showFiltersBar = () => setFilterBar(!filterBar)
-  const handleSubmitFilter = (values, dirty) => {
-    if (dirty) {
-      setDisplayFiltered(true)
-      dispatch(setFilters(values))
-    } else {
-      setDisplayFiltered(false)
-    }
-  }
+const TopBar = ({ displayFiltered }) => {
+  const [currFilterIndex, setCurrFilterIndex] = useState(0)
+  const [openModal, setOpenModal] = useState(false)
 
   return (
     <Formik initialValues={{ countries: [], roles: [], languages: [], frameworks: [] }}>
-      {({ values, dirty, resetForm }) => {
+      {({ resetForm }) => {
         useEffect(() => {
           if (!displayFiltered) {
             resetForm()
@@ -52,135 +35,39 @@ const TopBar = ({ setDisplayFiltered, displayFiltered }) => {
         }, [displayFiltered])
 
         return (
-          <Form style={{ marginBottom: '40px' }}>
-            <FiltersMenu
-              filterBar={filterBar}
-              showFiltersBar={showFiltersBar}
-              handleSubmitFilter={handleSubmitFilter}
-              countriesOptions={countriesOptions}
-              concentrationOptions={concentrationOptions}
-              programmingLanguageOptions={programmingLanguageOptions}
-            />
-            <BoxContainer sx={{ flexGrow: 1 }}>
-              <AppBar
-                position="fixed"
-                elevation={2}
-                color="transparent"
-                sx={{ backdropFilter: 'blur(20px)', width: `calc(100% - 88px)`, zIndex: 100 }}
-              >
-                <NavBar>
-                  <SelectContainer>
-                    <CustomSelect
-                      multiple={true}
-                      label="Country"
-                      name="countries"
-                      options={countriesOptions}
-                      line={false}
-                      hideLabelOnSelect={true}
-                      renderValue={(selected) => {
-                        if (selected.length === 0) {
-                          return (
-                            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'end' }}>
-                              Country
-                            </PlaceholderText>
-                          )
-                        }
-
-                        return selected.join(', ')
-                      }}
-                      styles={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '8.5rem',
-                        margin: 0,
-                      }}
-                    />
-                    <CustomSelect
-                      multiple={true}
-                      label="Role"
-                      name="roles"
-                      line={false}
-                      hideLabelOnSelect={true}
-                      options={concentrationOptions}
-                      renderValue={(selected) => {
-                        if (selected.length === 0) {
-                          return (
-                            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'end' }}>
-                              Role
-                            </PlaceholderText>
-                          )
-                        }
-
-                        return selected.join(', ')
-                      }}
-                      styles={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '8.5rem',
-                        margin: 0,
-                      }}
-                    />
-                    <CustomSelect
-                      multiple={true}
-                      label="Language"
-                      name="languages"
-                      line={false}
-                      options={programmingLanguageOptions}
-                      hideLabelOnSelect={true}
-                      renderValue={(selected) => {
-                        if (selected.length === 0) {
-                          return (
-                            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'end' }}>
-                              Language
-                            </PlaceholderText>
-                          )
-                        }
-
-                        return selected.join(', ')
-                      }}
-                      styles={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '8.5rem',
-                        margin: 0,
-                      }}
-                    />
-                    <CustomSelect
-                      multiple={true}
-                      label="Framework"
-                      name="frameworks"
-                      line={false}
-                      options={frameworkOptions}
-                      hideLabelOnSelect={true}
-                      renderValue={(selected) => {
-                        if (selected.length === 0) {
-                          return (
-                            <PlaceholderText style={{ marginRight: '1rem', textAlign: 'end' }}>
-                              Frameworks
-                            </PlaceholderText>
-                          )
-                        }
-
-                        return selected.join(', ')
-                      }}
-                      styles={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '8.5rem',
-                        margin: 0,
-                      }}
-                    />
-                  </SelectContainer>
-                  <Button type="button" onClick={() => handleSubmitFilter(values, dirty)}>
-                    <Search sx={{ width: '32px', height: '32px', color: 'white' }} />
-                  </Button>
-                  <FilterContainer onClick={showFiltersBar}>
-                    <Filters />
-                    <FilterText>Filters</FilterText>
-                  </FilterContainer>
-                </NavBar>
-              </AppBar>
-            </BoxContainer>
+          <Form style={{ width: '100%', paddingLeft: '88px' }}>
+            <NavBar>
+              <LogoContainer>
+                <PlatformLogo />
+                <SearchIconWrapper onClick={() => setOpenModal(true)}>
+                  <SearchIcon />
+                </SearchIconWrapper>
+              </LogoContainer>
+              <SearchPanel>
+                <SearchPanelWrapper>
+                  <FilterSelect
+                    sliceName={'usersFilters'}
+                    currFilterIndex={currFilterIndex}
+                    setCurrFilterIndex={setCurrFilterIndex}
+                  />
+                  <Search
+                    sliceName={'usersFilters'}
+                    currFilterIndex={currFilterIndex}
+                    setFilterValueAction={setUsersFilter}
+                  />
+                </SearchPanelWrapper>
+                <TagsList sliceName={'usersFilters'} setFilterValueAction={setUsersFilter} />
+              </SearchPanel>
+              {openModal ? (
+                <ModalSearch
+                  setOpenModal={setOpenModal}
+                  sliceName={'usersFilters'}
+                  currFilterIndex={currFilterIndex}
+                  setCurrFilterIndex={setCurrFilterIndex}
+                  setFilterValueAction={setUsersFilter}
+                />
+              ) : null}
+            </NavBar>
           </Form>
         )
       }}
diff --git a/client/src/components/Teammates/components/FiltersArea/Filters.styles.js b/client/src/components/Teammates/components/FiltersArea/Filters.styles.js
index 0b560de95..ce440c55e 100644
--- a/client/src/components/Teammates/components/FiltersArea/Filters.styles.js
+++ b/client/src/components/Teammates/components/FiltersArea/Filters.styles.js
@@ -1,28 +1,27 @@
 // * Modules
-import Box from '@mui/material/Box'
 import styled from 'styled-components'
 
+import IconWrapper from '../../../../shared/components/IconWrapper/IconWrapper'
+
 export const NavBar = styled.div`
   display: flex;
-  padding: 0 24px;
   justify-content: center;
   align-items: center;
-  height: 64px;
-`
-
-export const BoxContainer = styled(Box)`
-  padding: 27px 45px;
-
-  @media screen and (min-width: 0px) and (max-width: 980px) {
-    padding: 20px 20px;
-  }
+  width: 100%;
+  flex-direction: column;
 `
 
 export const LogoContainer = styled.div`
-  margin-right: 7%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 37px;
+  margin-bottom: 33px;
 
-  @media screen and (min-width: 0px) and (max-width: 980px) {
-    display: none;
+  @media (max-width: 1023px) {
+    margin-top: 25px;
   }
 `
 
@@ -40,47 +39,37 @@ export const AlternativeLogoContainer = styled.div`
   }
 `
 
-export const Button = styled.button`
-  border: none;
-  outline: none;
-  background: none;
-  width: 46px;
-  height: 45px;
-  cursor: pointer;
-
-  @media screen and (min-width: 0px) and (max-width: 980px) {
-    display: none;
-  }
+export const SearchPanel = styled.div`
+  position: static;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 770px;
+  min-height: 40px;
+  color: white;
 `
 
-export const SelectContainer = styled.div`
-  width: 70%;
+export const SearchPanelWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  @media screen and (min-width: 0px) and (max-width: 980px) {
+  border: 1px solid #46a11b;
+  border-radius: 10px;
+  @media (max-width: 1023px) {
     display: none;
   }
 `
 
-export const FilterContainer = styled.div`
-  visibility: hidden;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+export const SearchIconWrapper = styled(IconWrapper)`
   cursor: pointer;
-
-  @media screen and (min-width: 0px) and (max-width: 980px) {
-    visibility: visible;
+  display: none;
+  --icon-size: 25px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  position: absolute;
+  top: calc(50% - (var(--icon-size) - (var(--icon-size) / 2)));
+  right: 27px;
+  @media (max-width: 1023px) {
+    display: flex;
   }
 `
-
-export const FilterText = styled.h4`
-  font-weight: 700;
-  font-size: 15px;
-  color: #ffffff;
-  margin-left: 10px;
-  margin: 0 0 0 8px;
-`
diff --git a/client/src/components/Teammates/components/FiltersArea/ProgrammingLanguages.options.js b/client/src/components/Teammates/components/FiltersArea/ProgrammingLanguages.options.js
deleted file mode 100644
index 1de8c6d17..000000000
--- a/client/src/components/Teammates/components/FiltersArea/ProgrammingLanguages.options.js
+++ /dev/null
@@ -1,62 +0,0 @@
-export const programmingLanguageOptions = [
-  {
-    label: 'JS',
-    id: 1,
-  },
-  {
-    label: 'C++',
-    id: 2,
-  },
-  {
-    label: 'C',
-    id: 3,
-  },
-  {
-    label: 'Python',
-    id: 4,
-  },
-  {
-    label: 'Swift',
-    id: 5,
-  },
-  {
-    label: 'Ruby',
-    id: 6,
-  },
-  {
-    label: 'Scala',
-    id: 7,
-  },
-  {
-    label: 'PHP',
-    id: 8,
-  },
-  {
-    label: 'Go',
-    id: 9,
-  },
-  {
-    label: 'C#',
-    id: 10,
-  },
-  {
-    label: 'Java',
-    id: 11,
-  },
-  {
-    label: 'HTML/CSS',
-    id: 12,
-  },
-  {
-    label: 'Dart',
-    id: 13,
-  },
-  {
-    label: 'Perl',
-    id: 14,
-  },
-  {
-    label: 'SQL',
-    id: 15,
-  },
-]
diff --git a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Countries.js b/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Countries.js
deleted file mode 100644
index fec1e5aad..000000000
--- a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Countries.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// * Components
-import SelectField from '../../SelectField/SelectField'
-
-const Countries = ({ options, data, setCountries }) => {
-  /**
-   * This is programmingLanguages useState filter, don't change it without approvement !!!
-   */
-  const handleCountries = (event) => {
-    const {
-      target: { value },
-    } = event
-
-    setCountries(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    )
-  }
-
-  return (
-    <SelectField
-      inputName={'Country'}
-      options={options}
-      data={data}
-      handleChange={handleCountries}
-    />
-  )
-}
-
-export default Countries
diff --git a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/ProgrammingLanguages.js b/client/src/components/Teammates/components/FiltersArea/SpecificFilters/ProgrammingLanguages.js
deleted file mode 100644
index ddc63ce27..000000000
--- a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/ProgrammingLanguages.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// * Components
-import SelectField from '../../SelectField/SelectField'
-
-const ProgrammingLanguages = ({ options, data, setProgrammingLanguages }) => {
-  /**
-   * This is programmingLanguages useState filter, don't change it without approvement !!!
-   */
-  const handleProgrammingLanguages = (event) => {
-    const {
-      target: { value },
-    } = event
-
-    setProgrammingLanguages(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    )
-  }
-
-  return (
-    <SelectField
-      inputName={'Language'}
-      options={options}
-      data={data}
-      handleChange={handleProgrammingLanguages}
-    />
-  )
-}
-
-export default ProgrammingLanguages
diff --git a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Roles.js b/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Roles.js
deleted file mode 100644
index e4ac62021..000000000
--- a/client/src/components/Teammates/components/FiltersArea/SpecificFilters/Roles.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// * Components
-import SelectField from '../../SelectField/SelectField'
-
-const Roles = ({ options, data, setRoles }) => {
-  /**
-   * This is programmingLanguages useState filter, don't change it without approvement !!!
-   */
-  const handleRoles = (event) => {
-    const {
-      target: { value },
-    } = event
-
-    setRoles(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    )
-  }
-
-  return <SelectField inputName={'Role'} options={options} data={data} handleChange={handleRoles} />
-}
-
-export default Roles
diff --git a/client/src/components/Teammates/components/FiltersMenu/FiltersMenu.js b/client/src/components/Teammates/components/FiltersMenu/FiltersMenu.js
index 3fe68c171..8c6ed4207 100644
--- a/client/src/components/Teammates/components/FiltersMenu/FiltersMenu.js
+++ b/client/src/components/Teammates/components/FiltersMenu/FiltersMenu.js
@@ -6,8 +6,8 @@ import { useFormikContext } from 'formik'
 import Filters from '../../../../assets/Filters/Filters'
 import Close from '../../../../assets/Shared/Close'
 import frameworkOptions from '../../../../constants/frameworks'
-import SelectValue from '../../../../shared/components/CustomSelect/components/SelectValue'
-import CustomSelect from '../../../../shared/components/CustomSelect/CustomSelect'
+import SelectValue from '../../../../shared/components/Formik/CustomSelect/components/SelectValue'
+import CustomSelect from '../../../../shared/components/Formik/CustomSelect/CustomSelect'
 
 // * Styles
 import {
diff --git a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourCase.js b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourCase.js
index d4e0bc0a1..8bd326561 100644
--- a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourCase.js
+++ b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourCase.js
@@ -6,26 +6,15 @@ import { Framework } from '../UserCard.styles'
 const LengthFourCase = ({ userFrameworks }) => {
   return (
     <>
-      {userFrameworks.map((element, index) =>
-        index % 2 === 0 ? (
-          <Framework
-            key={element}
-            marginRight="12px"
-            background={frameworkColors[element]}
-            color={frameworkTextColors[element]}
-          >
-            <h3>{element}</h3>
-          </Framework>
-        ) : (
-          <Framework
-            key={element}
-            background={frameworkColors[element]}
-            color={frameworkTextColors[element]}
-          >
-            <h3>{element}</h3>
-          </Framework>
-        ),
-      )}
+      {userFrameworks.map((element, index) => (
+        <Framework
+          key={element}
+          background={frameworkColors[element]}
+          color={frameworkTextColors[element]}
+        >
+          <h3>{element}</h3>
+        </Framework>
+      ))}
     </>
   )
 }
diff --git a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourSlicedCase.js b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourSlicedCase.js
index a7b696dbb..412956b79 100644
--- a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourSlicedCase.js
+++ b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthFourSlicedCase.js
@@ -8,27 +8,16 @@ const LengthFourSlicedCase = ({ userFrameworks }) => {
 
   return (
     <>
-      {userFrameworks.slice(0, 4).map((element, index) =>
-        index % 2 === 0 ? (
-          <Framework
-            key={element}
-            marginRight="12px"
-            background={frameworkColors[element]}
-            color={frameworkTextColors[element]}
-          >
-            <h3>{element}</h3>
-          </Framework>
-        ) : (
-          <Framework
-            key={element}
-            background={frameworkColors[element]}
-            color={frameworkTextColors[element]}
-          >
-            {index === 3 ? <AndMore makeWhite={element === 'IOS'}>{ufLength - 2}+</AndMore> : <></>}
-            <h3>{element}</h3>
-          </Framework>
-        ),
-      )}
+      {userFrameworks.slice(0, 4).map((element, index) => (
+        <Framework
+          key={element}
+          background={frameworkColors[element]}
+          color={frameworkTextColors[element]}
+        >
+          {index === 3 ? <AndMore makeWhite={element === 'IOS'}>{ufLength - 2}+</AndMore> : <></>}
+          <h3>{element}</h3>
+        </Framework>
+      ))}
     </>
   )
 }
diff --git a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthOneCase.js b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthOneCase.js
index f856664d3..2f5e25fda 100644
--- a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthOneCase.js
+++ b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthOneCase.js
@@ -9,8 +9,9 @@ const LengthOneCase = ({ userFrameworks }) => {
       {userFrameworks.map((element) => (
         <Framework
           key={element}
-          justifyContent="center"
+          justifyContent="end"
           marginBottom="0"
+          width="100%"
           background={frameworkColors[element]}
           color={frameworkTextColors[element]}
         >
diff --git a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthThreeCase.js b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthThreeCase.js
index 67a712414..44c54d916 100644
--- a/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthThreeCase.js
+++ b/client/src/components/Teammates/components/UserCard/FrameworksCases/LengthThreeCase.js
@@ -7,10 +7,10 @@ const LengthThreeCase = ({ userFrameworks }) => {
   return (
     <>
       {userFrameworks.map((element, index) =>
-        index === 0 ? (
+        index === 0 || index === 1 ? (
           <Framework
             key={element}
-            marginRight="12px"
+            // marginRight="12px"
             background={frameworkColors[element]}
             color={frameworkTextColors[element]}
           >
@@ -21,6 +21,7 @@ const LengthThreeCase = ({ userFrameworks }) => {
             key={element}
             background={frameworkColors[element]}
             color={frameworkTextColors[element]}
+            width="100%"
           >
             <h3>{element}</h3>
           </Framework>
diff --git a/client/src/components/Teammates/components/UserCard/UserCard.js b/client/src/components/Teammates/components/UserCard/UserCard.js
index aae84aa96..49dc0fe74 100644
--- a/client/src/components/Teammates/components/UserCard/UserCard.js
+++ b/client/src/components/Teammates/components/UserCard/UserCard.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 
 // * Images
 import CrownImg from '../../../../assets/UserProfile/LeaderCrown.png'
@@ -6,6 +6,7 @@ import CrownImg from '../../../../assets/UserProfile/LeaderCrown.png'
 import { languageOptions } from '../../../../constants/programmingLanguages'
 import { LOCAL_PATH } from '../../../../http'
 import { calculateAge } from '../../../../utils/calculateAge'
+import { getCountryFlag } from '../../../../utils/getCountryFlag'
 
 import LengthFourCase from './FrameworksCases/LengthFourCase'
 import LengthFourSlicedCase from './FrameworksCases/LengthFourSlicedCase'
@@ -19,6 +20,7 @@ import {
   CardContainer,
   CountryContainer,
   CrownContainer,
+  FlagIcon,
   FrameWorksContainer,
   LanguageContainer,
   ProgrammingLanguagesContainer,
@@ -45,6 +47,14 @@ const UserCard = React.forwardRef((props, ref) => {
           andMore = <AndMore makeWhite={false}>{plLength - 2}+</AndMore>
         }
 
+        if (plLength === 1) {
+          return (
+            <LanguageContainer key={element} width="100%">
+              {languageOptions[element]}
+            </LanguageContainer>
+          )
+        }
+
         return (
           <LanguageContainer key={element}>
             {andMore}
@@ -80,7 +90,6 @@ const UserCard = React.forwardRef((props, ref) => {
     <Wrapper ref={ref}>
       <CardContainer plLength={plLength > 2} ufLength={ufLength > 4}>
         <UserInformationContainer>
-          {/* TODO: Change for real image! */}
           <div>
             <UserImage src={person.image} alt="User's image" />
           </div>
@@ -89,11 +98,12 @@ const UserCard = React.forwardRef((props, ref) => {
         <TextContainer>
           <UserData>
             <CountryContainer>
-              <TitleText fontWeight="500" fontSize="12px" margin="0 7px 0 0">
-                {person.fullName}, {calculateAge(person.dateOfBirth)}
+              <TitleText fontWeight="400" fontSize="16px" margin="0 7px 0 0">
+                {person.fullName.split(' ')[0]}, {calculateAge(person.dateOfBirth)}
               </TitleText>
+              {getCountryFlag(person.country) && <FlagIcon src={getCountryFlag(person.country)} />}
             </CountryContainer>
-            <TitleText fontWeight="600" fontSize="12px">
+            <TitleText fontWeight="400" fontSize="14px" color="#8F9094">
               {person.concentration}
             </TitleText>
           </UserData>
@@ -102,7 +112,7 @@ const UserCard = React.forwardRef((props, ref) => {
       </CardContainer>
       {person.isLeader === true ? (
         <CrownContainer>
-          <img src={CrownImg} alt="crown"></img>
+          <img src={CrownImg} alt="crown" />
         </CrownContainer>
       ) : (
         <div></div>
@@ -111,4 +121,4 @@ const UserCard = React.forwardRef((props, ref) => {
   )
 })
 
-export default UserCard
+export default memo(UserCard)
diff --git a/client/src/components/Teammates/components/UserCard/UserCard.styles.js b/client/src/components/Teammates/components/UserCard/UserCard.styles.js
index 9c153c71e..ceaaf3f3e 100644
--- a/client/src/components/Teammates/components/UserCard/UserCard.styles.js
+++ b/client/src/components/Teammates/components/UserCard/UserCard.styles.js
@@ -10,8 +10,8 @@ export const Wrapper = styled.figure`
 
 export const UserInformationContainer = styled.div`
   display: flex;
-  justify-content: space-between;
   width: 100%;
+  gap: 32px;
 `
 
 export const UserImage = styled.img`
@@ -43,10 +43,10 @@ export const ProgrammingLanguagesContainer = styled.div`
 
 export const LanguageContainer = styled.div`
   position: relative;
-  background: #1b1d24;
+  background: #2f3239;
   border-radius: 5px;
-  width: 50px;
-  height: 50px;
+  width: ${(props) => props.width || '40px'};
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -68,6 +68,7 @@ export const TextContainer = styled.div`
 
 export const CountryContainer = styled.div`
   display: flex;
+  align-items: center;
 `
 
 export const TitleText = styled.h3`
@@ -78,8 +79,8 @@ export const TitleText = styled.h3`
 `
 
 export const Framework = styled.div`
-  width: ${(props) => props.width || '65px'};
-  height: 40px;
+  width: ${(props) => props.width || '91px'};
+  height: 32px;
   margin-right: ${(props) => props.marginRight || '0'};
   margin-bottom: ${(props) => props.marginBottom || '0'};
   flex-grow: ${(props) => props.flexGrow || '1'};
@@ -91,8 +92,8 @@ export const Framework = styled.div`
   position: relative;
 
   > h3 {
-    font-weight: 600;
-    font-size: 14px;
+    font-weight: 400;
+    font-size: 16px;
     color: ${(props) => props.color || 'white'};
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   }
@@ -102,7 +103,7 @@ export const FrameWorksContainer = styled.div`
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  height: 120px;
+  gap: 8px;
   justify-content: ${(props) => props.justifyContent || 'start'};
   align-items: center;
   margin-top: 20px;
@@ -110,8 +111,8 @@ export const FrameWorksContainer = styled.div`
 
 export const CrownContainer = styled.div`
   position: absolute;
-  margin-bottom: 300px;
-  margin-right: 235px;
+  margin-bottom: 285px;
+  margin-right: 225px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -122,17 +123,14 @@ export const CardContainer = styled.div`
   flex-direction: column;
   justify-content: start;
   align-items: center;
-  width: 240px;
-  height: 300px;
-  padding: 25px 22px;
-  background: #2e3239;
-  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.12);
+  width: 230px;
+  height: 280px;
+  padding: 20px;
+  background: #1a1c22;
   border-radius: 15px;
 
   &:hover {
     cursor: pointer;
-    background: #1b1d24;
-    box-shadow: 0px 5px 25px rgba(95, 122, 219, 0.1);
     transition: 0.3s ease-in-out;
     -webkit-transform: scale(1.02);
     -ms-transform: scale(1.02);
@@ -172,9 +170,9 @@ export const CardContainer = styled.div`
     -ms-transform: scale(1.1);
     transform: scale(1.1);
   }
+`
 
-  @media screen and (min-width: 1440px) {
-    width: 240px;
-    height: 300px;
-  }
+export const FlagIcon = styled.img`
+  width: 25px;
+  height: 25px;
 `
diff --git a/client/src/components/Teammates/components/UserProfile/UserProfile.js b/client/src/components/Teammates/components/UserProfile/UserProfile.js
index 6fadfb8bc..20fef22eb 100644
--- a/client/src/components/Teammates/components/UserProfile/UserProfile.js
+++ b/client/src/components/Teammates/components/UserProfile/UserProfile.js
@@ -1,111 +1,99 @@
 // * Modules
-import React from 'react'
-import CloseIcon from '@mui/icons-material/Close'
-import GitHubIcon from '@mui/icons-material/GitHub'
-import LinkedInIcon from '@mui/icons-material/LinkedIn'
-import TelegramIcon from '@mui/icons-material/Telegram'
+import React, { forwardRef, memo } from 'react'
 
+import LongArrowRight from '../../../../assets/Arrows/LongArrowRight'
+import AddUserIcon from '../../../../assets/Shared/AddUserIcon'
+import Close from '../../../../assets/Shared/Close'
+import Message from '../../../../assets/Shared/Message'
+import { frameworkColors, frameworkTextColors } from '../../../../constants/frameworkColors'
+import { languageOptions } from '../../../../constants/programmingLanguages'
 // * Assets
-import LinkIcon from '../../../../assets/Shared/LinkIcon'
-import AddIcon from '../../../../assets/UserProfile/AddIcon'
-import MessageIcon from '../../../../assets/UserProfile/MessageIcon'
-import { LOCAL_PATH } from '../../../../http'
 import { calculateAge } from '../../../../utils/calculateAge'
+import { getCountryFlag } from '../../../../utils/getCountryFlag'
 
 import {
   Button,
-  ButtonsContainer,
   CloseContainer,
   Container,
-  LinksAndAvatarContainer,
-  LinksContainer,
-  NameAndCloseContainer,
+  FlagIcon,
+  FlexWrapper,
+  Framework,
+  LanguageContainer,
   ProfileContainer,
-  ProjectLinkContainer,
   Text,
-  UserAvatar,
-  UserDescriptionContainer,
-  UserDetailedInfoContainer,
-  UserLink,
+  UserImg,
 } from './UserProfile.styles'
 
-const UserProfile = ({ user, handleClose }) => {
+const UserProfile = ({ user, handleClose }, ref) => {
   return (
     <Container>
       <ProfileContainer>
-        <LinksAndAvatarContainer>
-          <div>
-            <UserAvatar src={user.image} alt="avatar"></UserAvatar>
-          </div>
-          {/* TODO: Change for real links! & rewrite for the .map() */}
-          <UserLink>
-            <GitHubIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-          </UserLink>
-          <UserLink>
-            <LinkedInIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-          </UserLink>
-          <UserLink>
-            <TelegramIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-          </UserLink>
-        </LinksAndAvatarContainer>
-        <UserDetailedInfoContainer>
-          <NameAndCloseContainer>
-            <Text fontSize="16px" margin="15px 0 0 0">
-              {user.fullName}, {calculateAge(user.dateOfBirth)}
-            </Text>
-            <CloseContainer onClick={handleClose}>
-              <CloseIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-            </CloseContainer>
-          </NameAndCloseContainer>
-          <Text fontSize="16px" margin="5px 0 0 0">
-            {user.concentration}
-          </Text>
-          <Text fontSize="14px" margin="30px 0 0 0">
-            About me
-          </Text>
-          <UserDescriptionContainer>
-            <Text fontSize="14px" margin="5px 0 0 0" fontWeight="300">
-              {user?.description ? user.description : 'User has no description.'}
-            </Text>
-          </UserDescriptionContainer>
-          <Text fontSize="14px" margin="35px 0 0 0">
-            My projects
-          </Text>
-          <LinksContainer>
-            {/* TODO: Change for real project links! & rewrite for the .map() */}
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                Twitter bot
-              </Text>
-            </ProjectLinkContainer>
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                Stocks AI
+        <CloseContainer onClick={handleClose}>
+          <Close />
+        </CloseContainer>
+        <FlexWrapper gap="24px" flexDirection="column">
+          <FlexWrapper gap="32px">
+            <div>
+              <UserImg src={user?.image} alt={`${user?.username}'s image`} />
+            </div>
+            <FlexWrapper flexDirection="column" maxHeight="70px">
+              <FlexWrapper gap="8px" alignItems="center" maxHeight="30px">
+                <Text fontSize="20px">
+                  {user?.fullName?.split(' ')[0]}, {calculateAge(user?.dateOfBirth)}
+                </Text>
+                {getCountryFlag(user.country) && <FlagIcon src={getCountryFlag(user.country)} />}
+              </FlexWrapper>
+              <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                {user?.concentration}
               </Text>
-            </ProjectLinkContainer>
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                ML Linear Regression
+              <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                {user?.experience} years of experience
               </Text>
-            </ProjectLinkContainer>
-          </LinksContainer>
-          <ButtonsContainer>
-            <Button>
-              Message
-              <MessageIcon />
-            </Button>
-            <Button>
-              Invite
-              <AddIcon />
+            </FlexWrapper>
+          </FlexWrapper>
+          {user?.description && (
+            <Text fontSize="16px" fontWeight="400">
+              {user.description}
+            </Text>
+          )}
+          <FlexWrapper flexWrap="wrap" gap="8px">
+            {user?.frameworks?.map((framework) => (
+              <Framework
+                key={framework}
+                justifyContent="end"
+                marginBottom="0"
+                background={frameworkColors[framework]}
+                color={frameworkTextColors[framework]}
+              >
+                <h3>{framework}</h3>
+              </Framework>
+            ))}
+          </FlexWrapper>
+          <FlexWrapper flexWrap="wrap" gap="8px">
+            {user?.programmingLanguages?.map((language) => (
+              <LanguageContainer key={language}>{languageOptions[language]}</LanguageContainer>
+            ))}
+          </FlexWrapper>
+          <FlexWrapper justifyContent="space-between" marginTop="48px">
+            <FlexWrapper gap="8px">
+              <Button>
+                Invite
+                <AddUserIcon />
+              </Button>
+              <Button width="124px" background="none" border="2px solid #46A11B">
+                Message
+                <Message />
+              </Button>
+            </FlexWrapper>
+            <Button width="73px" background="none">
+              Profile
+              <LongArrowRight />
             </Button>
-          </ButtonsContainer>
-        </UserDetailedInfoContainer>
+          </FlexWrapper>
+        </FlexWrapper>
       </ProfileContainer>
     </Container>
   )
 }
 
-export default UserProfile
+export default memo(forwardRef(UserProfile))
diff --git a/client/src/components/Teammates/components/UserProfile/UserProfile.styles.js b/client/src/components/Teammates/components/UserProfile/UserProfile.styles.js
index e9cd6295a..8d8212f2c 100644
--- a/client/src/components/Teammates/components/UserProfile/UserProfile.styles.js
+++ b/client/src/components/Teammates/components/UserProfile/UserProfile.styles.js
@@ -1,121 +1,134 @@
 // * Modules
+import { Box, Drawer } from '@mui/material'
 import styled from 'styled-components'
 
-export const Container = styled.div`
+export const Container = styled(Box)`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 670px;
-  height: 430px;
+  width: 470px;
+  height: 530px;
 `
 
 export const ProfileContainer = styled.div`
-  background: #26292b;
+  background: #1a1c22;
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
   border-radius: 15px;
-  padding: 30px 25px;
+  padding: 32px 38px;
   display: flex;
-`
 
-export const LinksAndAvatarContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  position: relative;
 `
 
-export const UserAvatar = styled.img`
-  width: 80px;
-  height: 80px;
-  box-shadow: 0px 0px 50px rgba(114, 235, 58, 0.1);
-  border-radius: 5px;
+export const Text = styled.h3`
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '24px'};
+  color: ${(props) => props.color || '#fff'};
+  margin: ${(props) => props.margin || '0px'};
+  text-align: ${(props) => props.textAlign || 'none'};
 `
 
-export const UserLink = styled.div`
+export const CloseContainer = styled.div`
+  position: absolute;
+  top: 20px;
+  right: 20px;
   cursor: pointer;
-  margin-top: 20px;
 
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
+  :hover {
+    svg {
+      path {
+        stroke: #d42422;
+      }
+    }
   }
 `
 
-export const UserDetailedInfoContainer = styled.div`
+export const FlexWrapper = styled.div`
   display: flex;
-  width: 100%;
-  flex-direction: column;
-  margin-left: 15px;
+  gap: ${(props) => props.gap || '0'};
+  flex-direction: ${(props) => props.flexDirection || 'row'};
+  width: ${(props) => props.width || '100%'};
+  justify-content: ${(props) => props.justifyContent || 'start'};
+  align-items: ${(props) => props.alignItems || 'start'};
+  max-height: ${(props) => props.maxHeight || 'none'};
+  flex-wrap: ${(props) => props.flexWrap || 'nowrap'};
+  margin-top: ${(props) => props.marginTop || '0'};
 `
 
-export const NameAndCloseContainer = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
+export const UserImg = styled.img`
+  width: 70px;
+  height: 70px;
+  border-radius: 70px;
 `
 
-export const CloseContainer = styled.div`
-  cursor: pointer;
+export const FlagIcon = styled.img`
+  width: 30px;
+  height: 30px;
 `
 
-export const UserDescriptionContainer = styled.div`
-  max-width: 480px;
-  min-height: 90px;
-`
-export const LinksContainer = styled.div`
-  display: flex;
-  margin-top: 10px;
-`
-/*TODO: FIX THIS FOR DIFFERENT WIDTH*/
-export const ProjectLinkContainer = styled.div`
+export const Framework = styled.div`
+  width: ${(props) => props.width || '120px'};
+  max-width: 120px;
+  height: 32px;
+  background: ${(props) => props.background || '#E0FF00'};
+  border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
+  position: relative;
+  flex-basis: ${(props) => props.flexBasis || 'none'};
 
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
+  > h3 {
+    font-weight: 400;
+    font-size: 16px;
+    color: ${(props) => props.color || 'white'};
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   }
 `
 
-export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '500'};
-  font-size: ${(props) => props.fontSize || '24px'};
-  color: ${(props) => props.color || '#fff'};
-  margin: ${(props) => props.margin || '0px'};
-  text-align: ${(props) => props.textAlign || 'none'};
-`
-
-export const ButtonsContainer = styled.div`
+export const LanguageContainer = styled.div`
+  flex-basis: ${(props) => props.flexBasis || 'none'};
+  position: relative;
+  background: #2f3239;
+  border-radius: 5px;
+  width: ${(props) => props.width || '40px'};
+  max-width: 90px;
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 35px;
-  gap: 40px;
-  margin-right: 40px;
-  width: calc(100% - 80px);
 `
 
 export const Button = styled.button`
+  outline: none;
   border: none;
-  width: 132px;
-  height: 40px;
-  background: #2e3239;
-  border-radius: 5px;
-  font-weight: 400;
-  font-size: 16px;
-  color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 6px;
+  background: ${(props) => props.background || '#46a11b'};
+  height: 40px;
+  width: ${(props) => props.width || '100px'};
+  font-size: 16px;
+  font-weight: 400;
+  color: #fff;
+  border-radius: 10px;
+  border: ${(props) => props.border || 'none'};
   cursor: pointer;
+`
 
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
+export const MobileProfile = styled(Drawer)`
+  display: none;
+  @media screen and (min-width: 0px) and (max-width: 520px) {
+    display: block;
   }
 `
+
+export const MobileWrapper = styled(Box)`
+  width: 100%;
+  height: 100dvh;
+  background: #26292b;
+  padding: 24px 29px;
+`
diff --git a/client/src/components/Teammates/components/UserProfile/UserProfilePhone.js b/client/src/components/Teammates/components/UserProfile/UserProfilePhone.js
new file mode 100644
index 000000000..6f3471bc7
--- /dev/null
+++ b/client/src/components/Teammates/components/UserProfile/UserProfilePhone.js
@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+
+import LongArrowLeft from '../../../../assets/Arrows/LongArrowLeft'
+import LongArrowRight from '../../../../assets/Arrows/LongArrowRight'
+// * Assets
+import AddUserIcon from '../../../../assets/Shared/AddUserIcon'
+import Close from '../../../../assets/Shared/Close'
+import Message from '../../../../assets/Shared/Message'
+import { frameworkColors, frameworkTextColors } from '../../../../constants/frameworkColors'
+import { languageOptions } from '../../../../constants/programmingLanguages'
+import { calculateAge } from '../../../../utils/calculateAge'
+import { getCountryFlag } from '../../../../utils/getCountryFlag'
+
+import {
+  Button,
+  CloseContainer,
+  FlagIcon,
+  FlexWrapper,
+  Framework,
+  LanguageContainer,
+  MobileProfile,
+  MobileWrapper,
+  Text,
+  UserImg,
+} from './UserProfile.styles'
+
+const UserProfilePhone = ({ user, mobileProfile, handleClose }) => {
+  return (
+    <MobileProfile anchor="bottom" open={mobileProfile} onClose={handleClose}>
+      <MobileWrapper>
+        <FlexWrapper justifyContent="space-between">
+          <Button width="73px" background="none" onClick={handleClose}>
+            <LongArrowLeft />
+            Back
+          </Button>
+          <Button width="73px" background="none">
+            Profile
+            <LongArrowRight />
+          </Button>
+        </FlexWrapper>
+        <FlexWrapper gap="24px" flexDirection="column" marginTop="32px">
+          <FlexWrapper gap="32px">
+            <div>
+              <UserImg src={user.image} alt={`${user?.username}'s image`} />
+            </div>
+            <FlexWrapper flexDirection="column" maxHeight="70px">
+              <FlexWrapper gap="8px" alignItems="center" maxHeight="30px">
+                <Text fontSize="20px">
+                  {user?.fullName?.split(' ')[0]}, {calculateAge(user.dateOfBirth)}
+                </Text>
+                {getCountryFlag(user.country) && <FlagIcon src={getCountryFlag(user.country)} />}
+              </FlexWrapper>
+              <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                {user.concentration}
+              </Text>
+              <Text fontSize="14px" color="#8F9094" fontWeight="400">
+                {user.experience} years of experience
+              </Text>
+            </FlexWrapper>
+          </FlexWrapper>
+          <FlexWrapper justifyContent="space-between">
+            <FlexWrapper gap="8px">
+              <Button width="100%">
+                Invite
+                <AddUserIcon />
+              </Button>
+              <Button width="100%" background="none" border="2px solid #46A11B">
+                Message
+                <Message />
+              </Button>
+            </FlexWrapper>
+          </FlexWrapper>
+          {user?.description && (
+            <Text fontSize="16px" fontWeight="400">
+              {user.description}
+            </Text>
+          )}
+          <FlexWrapper flexWrap="wrap" gap="8px">
+            {user?.frameworks?.map((framework) => (
+              <Framework
+                key={framework}
+                justifyContent="end"
+                marginBottom="0"
+                background={frameworkColors[framework]}
+                color={frameworkTextColors[framework]}
+                flexBasis="33.3%"
+              >
+                <h3>{framework}</h3>
+              </Framework>
+            ))}
+          </FlexWrapper>
+          <FlexWrapper flexWrap="wrap" gap="8px">
+            {user?.programmingLanguages?.map((language) => (
+              <LanguageContainer key={language} width="100%" flexBasis="50%">
+                {languageOptions[language]}
+              </LanguageContainer>
+            ))}
+          </FlexWrapper>
+        </FlexWrapper>
+      </MobileWrapper>
+    </MobileProfile>
+  )
+}
+
+export default UserProfilePhone
diff --git a/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.js b/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.js
deleted file mode 100644
index 392c49ce1..000000000
--- a/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useState } from 'react'
-import GitHubIcon from '@mui/icons-material/GitHub'
-import InstagramIcon from '@mui/icons-material/Instagram'
-import LinkedInIcon from '@mui/icons-material/LinkedIn'
-import TelegramIcon from '@mui/icons-material/Telegram'
-
-// * Assets
-import ComebackArrow from '../../../../assets/Arrows/ComebackArrow'
-import LinkIcon from '../../../../assets/Shared/LinkIcon'
-import AddIcon from '../../../../assets/UserProfile/AddIcon'
-import MessageIcon from '../../../../assets/UserProfile/MessageIcon'
-import { LOCAL_PATH } from '../../../../http'
-import { calculateAge } from '../../../../utils/calculateAge'
-
-// * Styles
-import {
-  Button,
-  ButtonsContainer,
-  ComebackContainer,
-  DescriptionContainer,
-  LinksContainer,
-  ProjectLinkContainer,
-  ProjectsContainer,
-  Text,
-  UserImage,
-  UserInformationContainer,
-  UserInfoTextContainer,
-  UserLink,
-  UserProfileContainer,
-} from './UserProfilePhone.styles'
-
-const UserProfilePhone = ({ user, mobileProfile, handleClose }) => {
-  return (
-    <>
-      {mobileProfile ? (
-        <UserProfileContainer bottom="0">
-          <ComebackContainer onClick={handleClose}>
-            <ComebackArrow />
-          </ComebackContainer>
-          <UserInformationContainer>
-            <div>
-              <UserImage src={user.image} alt="User's image" />
-            </div>
-            <UserInfoTextContainer>
-              <Text fontSize="16px" textAlign="start">
-                {user.fullName}, {calculateAge(user.dateOfBirth)}
-              </Text>
-              <Text fontSize="16px" fontWeight="600" textAlign="start">
-                {user.concentration}
-              </Text>
-            </UserInfoTextContainer>
-          </UserInformationContainer>
-          {/* TODO: Change for real links! & rewrite for the .map() */}
-          <LinksContainer>
-            <UserLink>
-              <GitHubIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-            </UserLink>
-            <UserLink>
-              <LinkedInIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-            </UserLink>
-            <UserLink>
-              <TelegramIcon sx={{ color: '#6DB33F', width: '30px', height: '30px' }} />
-            </UserLink>
-          </LinksContainer>
-          <Text margin="50px 0 0 0">About me</Text>
-          {/* TODO: Change for the REAL description! */}
-          <DescriptionContainer>
-            <Text fontWeight="300" fontSize="15px">
-              {user?.description ? user.description : 'User has no description.'}
-            </Text>
-          </DescriptionContainer>
-          <Text margin="50px 0 0 0">My projects</Text>
-          {/* TODO: Change for the REAL links! */}
-          <ProjectsContainer>
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                Project #1
-              </Text>
-            </ProjectLinkContainer>
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                Project #2
-              </Text>
-            </ProjectLinkContainer>
-            <ProjectLinkContainer>
-              <LinkIcon />
-              <Text fontSize="14px" margin="2.5px 30px 0 0" fontWeight="700">
-                Project #3
-              </Text>
-            </ProjectLinkContainer>
-          </ProjectsContainer>
-          <ButtonsContainer>
-            <Button>
-              Message
-              <MessageIcon />
-            </Button>
-            <Button>
-              Invite
-              <AddIcon />
-            </Button>
-          </ButtonsContainer>
-        </UserProfileContainer>
-      ) : (
-        <UserProfileContainer></UserProfileContainer>
-      )}
-    </>
-  )
-}
-
-export default UserProfilePhone
diff --git a/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.styles.js b/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.styles.js
deleted file mode 100644
index d591ff45b..000000000
--- a/client/src/components/Teammates/components/UserProfilePhone/UserProfilePhone.styles.js
+++ /dev/null
@@ -1,143 +0,0 @@
-// * Modules
-import styled from 'styled-components'
-
-export const UserProfileContainer = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 50px 30px;
-  position: fixed;
-  background: #26292b;
-  bottom: ${(props) => props.bottom || '-100%'};
-  transition: ${(props) => props.transition || 'all 0.3s ease'};
-  z-index: 999;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  @media screen and (min-width: 730px) {
-    display: none;
-  }
-
-  @media screen and (min-width: 480px) and (max-width: 730px) {
-    align-items: center;
-  }
-`
-
-export const ComebackContainer = styled.div`
-  cursor: pointer;
-  width: 100%;
-  @media screen and (min-width: 480px) and (max-width: 730px) {
-    align-items: start;
-  }
-`
-
-export const UserInformationContainer = styled.div`
-  width: 100%;
-  align-items: center;
-  display: flex;
-  margin-top: 20px;
-
-  @media screen and (min-width: 480px) and (max-width: 730px) {
-    justify-content: center;
-    align-items: center;
-  }
-`
-
-export const UserImage = styled.img`
-  width: 80px;
-  height: 80px;
-  box-shadow: 0px 0px 50px rgba(114, 235, 58, 0.1);
-  border-radius: 5px;
-`
-
-export const UserInfoTextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 15px;
-  gap: 5px;
-`
-
-export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '500'};
-  font-size: ${(props) => props.fontSize || '14px'};
-  color: ${(props) => props.color || '#fff'};
-  margin: ${(props) => props.margin || '0px'};
-  text-align: ${(props) => props.textAlign || 'none'};
-
-  @media screen and (min-width: 480px) and (max-width: 730px) {
-    text-align: ${(props) => props.textAlign || 'center'};
-  }
-`
-
-export const LinksContainer = styled.div`
-  display: flex;
-  margin-top: 30px;
-  gap: 15px;
-`
-
-export const UserLink = styled.div`
-  cursor: pointer;
-
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-`
-
-export const DescriptionContainer = styled.div`
-  max-width: 350px;
-  margin-top: 15px;
-`
-
-export const ProjectsContainer = styled.div`
-  display: flex;
-  margin-top: 15px;
-  flex-wrap: wrap;
-`
-
-/*TODO: FIX THIS FOR DIFFERENT WIDTH*/
-export const ProjectLinkContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  height: 40px;
-
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-`
-
-export const ButtonsContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  margin-top: 20%;
-`
-
-export const Button = styled.button`
-  border: none;
-  width: 122px;
-  height: 40px;
-  background: #2e3239;
-  border-radius: 5px;
-  font-weight: 400;
-  font-size: 16px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-`
diff --git a/client/src/constants/concentrations.js b/client/src/constants/concentrations.js
index 58c4cadbb..cd118f12a 100644
--- a/client/src/constants/concentrations.js
+++ b/client/src/constants/concentrations.js
@@ -1,42 +1,51 @@
-const concentrationOptions = [
+export const concentrationOptions = [
   {
     label: 'Mobile Developer',
+    value: 'Mobile',
   },
   {
     label: 'Frontend/UI Developer',
+    value: 'Frontend',
   },
   {
     label: 'Backend Developer',
+    value: 'Backend',
   },
   {
     label: 'Full-Stack Developer',
+    value: 'Fullstack',
   },
   {
     label: 'Desktop Applications Developer',
+    value: 'Desktop',
   },
   {
     label: 'Embedded Systems Developer',
+    value: 'Embedded',
   },
   {
     label: 'Machine Learning Engineer',
+    value: 'ML',
   },
   {
     label: 'Data Scientist',
+    value: 'DataScience',
   },
   {
     label: 'DevOps Engineer',
+    value: 'DevOps',
   },
   {
     label: 'Data Engineer',
+    value: 'DataEngineer',
   },
   {
     label: 'QA/Test Engineer',
-  },
-  {
-    label: 'UI/UX Engineer',
+    value: 'QA',
   },
   {
     label: 'Other',
+    value: 'Other',
   },
 ]
 
diff --git a/client/src/constants/countryFlags.js b/client/src/constants/countryFlags.js
new file mode 100644
index 000000000..4a96f5af3
--- /dev/null
+++ b/client/src/constants/countryFlags.js
@@ -0,0 +1,1568 @@
+export const countryFlags = {
+  AC: {
+    name: 'Ascension Island',
+    emoji: '🇦🇨',
+    unicode: 'U+1F1E6 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AC.svg',
+  },
+  AD: {
+    name: 'Andorra',
+    emoji: '🇦🇩',
+    unicode: 'U+1F1E6 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AD.svg',
+  },
+  AE: {
+    name: 'United Arab Emirates',
+    emoji: '🇦🇪',
+    unicode: 'U+1F1E6 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AE.svg',
+  },
+  AF: {
+    name: 'Afghanistan',
+    emoji: '🇦🇫',
+    unicode: 'U+1F1E6 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AF.svg',
+  },
+  AG: {
+    name: 'Antigua & Barbuda',
+    emoji: '🇦🇬',
+    unicode: 'U+1F1E6 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AG.svg',
+  },
+  AI: {
+    name: 'Anguilla',
+    emoji: '🇦🇮',
+    unicode: 'U+1F1E6 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AI.svg',
+  },
+  AL: {
+    name: 'Albania',
+    emoji: '🇦🇱',
+    unicode: 'U+1F1E6 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AL.svg',
+  },
+  AM: {
+    name: 'Armenia',
+    emoji: '🇦🇲',
+    unicode: 'U+1F1E6 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AM.svg',
+  },
+  AO: {
+    name: 'Angola',
+    emoji: '🇦🇴',
+    unicode: 'U+1F1E6 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AO.svg',
+  },
+  AQ: {
+    name: 'Antarctica',
+    emoji: '🇦🇶',
+    unicode: 'U+1F1E6 U+1F1F6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AQ.svg',
+  },
+  AR: {
+    name: 'Argentina',
+    emoji: '🇦🇷',
+    unicode: 'U+1F1E6 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AR.svg',
+  },
+  AS: {
+    name: 'American Samoa',
+    emoji: '🇦🇸',
+    unicode: 'U+1F1E6 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AS.svg',
+  },
+  AT: {
+    name: 'Austria',
+    emoji: '🇦🇹',
+    unicode: 'U+1F1E6 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AT.svg',
+  },
+  AU: {
+    name: 'Australia',
+    emoji: '🇦🇺',
+    unicode: 'U+1F1E6 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AU.svg',
+  },
+  AW: {
+    name: 'Aruba',
+    emoji: '🇦🇼',
+    unicode: 'U+1F1E6 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AW.svg',
+  },
+  AX: {
+    name: 'Åland Islands',
+    emoji: '🇦🇽',
+    unicode: 'U+1F1E6 U+1F1FD',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AX.svg',
+  },
+  AZ: {
+    name: 'Azerbaijan',
+    emoji: '🇦🇿',
+    unicode: 'U+1F1E6 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AZ.svg',
+  },
+  BA: {
+    name: 'Bosnia & Herzegovina',
+    emoji: '🇧🇦',
+    unicode: 'U+1F1E7 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BA.svg',
+  },
+  BB: {
+    name: 'Barbados',
+    emoji: '🇧🇧',
+    unicode: 'U+1F1E7 U+1F1E7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BB.svg',
+  },
+  BD: {
+    name: 'Bangladesh',
+    emoji: '🇧🇩',
+    unicode: 'U+1F1E7 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BD.svg',
+  },
+  BE: {
+    name: 'Belgium',
+    emoji: '🇧🇪',
+    unicode: 'U+1F1E7 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BE.svg',
+  },
+  BF: {
+    name: 'Burkina Faso',
+    emoji: '🇧🇫',
+    unicode: 'U+1F1E7 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BF.svg',
+  },
+  BG: {
+    name: 'Bulgaria',
+    emoji: '🇧🇬',
+    unicode: 'U+1F1E7 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BG.svg',
+  },
+  BH: {
+    name: 'Bahrain',
+    emoji: '🇧🇭',
+    unicode: 'U+1F1E7 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BH.svg',
+  },
+  BI: {
+    name: 'Burundi',
+    emoji: '🇧🇮',
+    unicode: 'U+1F1E7 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BI.svg',
+  },
+  BJ: {
+    name: 'Benin',
+    emoji: '🇧🇯',
+    unicode: 'U+1F1E7 U+1F1EF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BJ.svg',
+  },
+  BL: {
+    name: 'St. Barthélemy',
+    emoji: '🇧🇱',
+    unicode: 'U+1F1E7 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BL.svg',
+  },
+  BM: {
+    name: 'Bermuda',
+    emoji: '🇧🇲',
+    unicode: 'U+1F1E7 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BM.svg',
+  },
+  BN: {
+    name: 'Brunei',
+    emoji: '🇧🇳',
+    unicode: 'U+1F1E7 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BN.svg',
+  },
+  BO: {
+    name: 'Bolivia',
+    emoji: '🇧🇴',
+    unicode: 'U+1F1E7 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BO.svg',
+  },
+  BQ: {
+    name: 'Caribbean Netherlands',
+    emoji: '🇧🇶',
+    unicode: 'U+1F1E7 U+1F1F6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BQ.svg',
+  },
+  BR: {
+    name: 'Brazil',
+    emoji: '🇧🇷',
+    unicode: 'U+1F1E7 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BR.svg',
+  },
+  BS: {
+    name: 'Bahamas',
+    emoji: '🇧🇸',
+    unicode: 'U+1F1E7 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BS.svg',
+  },
+  BT: {
+    name: 'Bhutan',
+    emoji: '🇧🇹',
+    unicode: 'U+1F1E7 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BT.svg',
+  },
+  BV: {
+    name: 'Bouvet Island',
+    emoji: '🇧🇻',
+    unicode: 'U+1F1E7 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BV.svg',
+  },
+  BW: {
+    name: 'Botswana',
+    emoji: '🇧🇼',
+    unicode: 'U+1F1E7 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BW.svg',
+  },
+  BY: {
+    name: 'Belarus',
+    emoji: '🇧🇾',
+    unicode: 'U+1F1E7 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BY.svg',
+  },
+  BZ: {
+    name: 'Belize',
+    emoji: '🇧🇿',
+    unicode: 'U+1F1E7 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BZ.svg',
+  },
+  CA: {
+    name: 'Canada',
+    emoji: '🇨🇦',
+    unicode: 'U+1F1E8 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CA.svg',
+  },
+  CC: {
+    name: 'Cocos (Keeling) Islands',
+    emoji: '🇨🇨',
+    unicode: 'U+1F1E8 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CC.svg',
+  },
+  CD: {
+    name: 'Congo - Kinshasa',
+    emoji: '🇨🇩',
+    unicode: 'U+1F1E8 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CD.svg',
+  },
+  CF: {
+    name: 'Central African Republic',
+    emoji: '🇨🇫',
+    unicode: 'U+1F1E8 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CF.svg',
+  },
+  CG: {
+    name: 'Congo - Brazzaville',
+    emoji: '🇨🇬',
+    unicode: 'U+1F1E8 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CG.svg',
+  },
+  CH: {
+    name: 'Switzerland',
+    emoji: '🇨🇭',
+    unicode: 'U+1F1E8 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CH.svg',
+  },
+  CI: {
+    name: 'Côte d’Ivoire',
+    emoji: '🇨🇮',
+    unicode: 'U+1F1E8 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CI.svg',
+  },
+  CK: {
+    name: 'Cook Islands',
+    emoji: '🇨🇰',
+    unicode: 'U+1F1E8 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CK.svg',
+  },
+  CL: {
+    name: 'Chile',
+    emoji: '🇨🇱',
+    unicode: 'U+1F1E8 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CL.svg',
+  },
+  CM: {
+    name: 'Cameroon',
+    emoji: '🇨🇲',
+    unicode: 'U+1F1E8 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CM.svg',
+  },
+  CN: {
+    name: 'China',
+    emoji: '🇨🇳',
+    unicode: 'U+1F1E8 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CN.svg',
+  },
+  CO: {
+    name: 'Colombia',
+    emoji: '🇨🇴',
+    unicode: 'U+1F1E8 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CO.svg',
+  },
+  CP: {
+    name: 'Clipperton Island',
+    emoji: '🇨🇵',
+    unicode: 'U+1F1E8 U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CP.svg',
+  },
+  CR: {
+    name: 'Costa Rica',
+    emoji: '🇨🇷',
+    unicode: 'U+1F1E8 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CR.svg',
+  },
+  CU: {
+    name: 'Cuba',
+    emoji: '🇨🇺',
+    unicode: 'U+1F1E8 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CU.svg',
+  },
+  CV: {
+    name: 'Cape Verde',
+    emoji: '🇨🇻',
+    unicode: 'U+1F1E8 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CV.svg',
+  },
+  CW: {
+    name: 'Curaçao',
+    emoji: '🇨🇼',
+    unicode: 'U+1F1E8 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CW.svg',
+  },
+  CX: {
+    name: 'Christmas Island',
+    emoji: '🇨🇽',
+    unicode: 'U+1F1E8 U+1F1FD',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CX.svg',
+  },
+  CY: {
+    name: 'Cyprus',
+    emoji: '🇨🇾',
+    unicode: 'U+1F1E8 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CY.svg',
+  },
+  CZ: {
+    name: 'Czechia',
+    emoji: '🇨🇿',
+    unicode: 'U+1F1E8 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CZ.svg',
+  },
+  DE: {
+    name: 'Germany',
+    emoji: '🇩🇪',
+    unicode: 'U+1F1E9 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DE.svg',
+  },
+  DG: {
+    name: 'Diego Garcia',
+    emoji: '🇩🇬',
+    unicode: 'U+1F1E9 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DG.svg',
+  },
+  DJ: {
+    name: 'Djibouti',
+    emoji: '🇩🇯',
+    unicode: 'U+1F1E9 U+1F1EF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DJ.svg',
+  },
+  DK: {
+    name: 'Denmark',
+    emoji: '🇩🇰',
+    unicode: 'U+1F1E9 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DK.svg',
+  },
+  DM: {
+    name: 'Dominica',
+    emoji: '🇩🇲',
+    unicode: 'U+1F1E9 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DM.svg',
+  },
+  DO: {
+    name: 'Dominican Republic',
+    emoji: '🇩🇴',
+    unicode: 'U+1F1E9 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DO.svg',
+  },
+  DZ: {
+    name: 'Algeria',
+    emoji: '🇩🇿',
+    unicode: 'U+1F1E9 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DZ.svg',
+  },
+  EA: {
+    name: 'Ceuta & Melilla',
+    emoji: '🇪🇦',
+    unicode: 'U+1F1EA U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EA.svg',
+  },
+  EC: {
+    name: 'Ecuador',
+    emoji: '🇪🇨',
+    unicode: 'U+1F1EA U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EC.svg',
+  },
+  EE: {
+    name: 'Estonia',
+    emoji: '🇪🇪',
+    unicode: 'U+1F1EA U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EE.svg',
+  },
+  EG: {
+    name: 'Egypt',
+    emoji: '🇪🇬',
+    unicode: 'U+1F1EA U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EG.svg',
+  },
+  EH: {
+    name: 'Western Sahara',
+    emoji: '🇪🇭',
+    unicode: 'U+1F1EA U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EH.svg',
+  },
+  ER: {
+    name: 'Eritrea',
+    emoji: '🇪🇷',
+    unicode: 'U+1F1EA U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ER.svg',
+  },
+  ES: {
+    name: 'Spain',
+    emoji: '🇪🇸',
+    unicode: 'U+1F1EA U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ES.svg',
+  },
+  ET: {
+    name: 'Ethiopia',
+    emoji: '🇪🇹',
+    unicode: 'U+1F1EA U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ET.svg',
+  },
+  EU: {
+    name: 'European Union',
+    emoji: '🇪🇺',
+    unicode: 'U+1F1EA U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EU.svg',
+  },
+  FI: {
+    name: 'Finland',
+    emoji: '🇫🇮',
+    unicode: 'U+1F1EB U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FI.svg',
+  },
+  FJ: {
+    name: 'Fiji',
+    emoji: '🇫🇯',
+    unicode: 'U+1F1EB U+1F1EF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FJ.svg',
+  },
+  FK: {
+    name: 'Falkland Islands',
+    emoji: '🇫🇰',
+    unicode: 'U+1F1EB U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FK.svg',
+  },
+  FM: {
+    name: 'Micronesia',
+    emoji: '🇫🇲',
+    unicode: 'U+1F1EB U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FM.svg',
+  },
+  FO: {
+    name: 'Faroe Islands',
+    emoji: '🇫🇴',
+    unicode: 'U+1F1EB U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FO.svg',
+  },
+  FR: {
+    name: 'France',
+    emoji: '🇫🇷',
+    unicode: 'U+1F1EB U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FR.svg',
+  },
+  GA: {
+    name: 'Gabon',
+    emoji: '🇬🇦',
+    unicode: 'U+1F1EC U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GA.svg',
+  },
+  GB: {
+    name: 'United Kingdom',
+    emoji: '🇬🇧',
+    unicode: 'U+1F1EC U+1F1E7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GB.svg',
+  },
+  GD: {
+    name: 'Grenada',
+    emoji: '🇬🇩',
+    unicode: 'U+1F1EC U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GD.svg',
+  },
+  GE: {
+    name: 'Georgia',
+    emoji: '🇬🇪',
+    unicode: 'U+1F1EC U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GE.svg',
+  },
+  GF: {
+    name: 'French Guiana',
+    emoji: '🇬🇫',
+    unicode: 'U+1F1EC U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GF.svg',
+  },
+  GG: {
+    name: 'Guernsey',
+    emoji: '🇬🇬',
+    unicode: 'U+1F1EC U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GG.svg',
+  },
+  GH: {
+    name: 'Ghana',
+    emoji: '🇬🇭',
+    unicode: 'U+1F1EC U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GH.svg',
+  },
+  GI: {
+    name: 'Gibraltar',
+    emoji: '🇬🇮',
+    unicode: 'U+1F1EC U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GI.svg',
+  },
+  GL: {
+    name: 'Greenland',
+    emoji: '🇬🇱',
+    unicode: 'U+1F1EC U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GL.svg',
+  },
+  GM: {
+    name: 'Gambia',
+    emoji: '🇬🇲',
+    unicode: 'U+1F1EC U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GM.svg',
+  },
+  GN: {
+    name: 'Guinea',
+    emoji: '🇬🇳',
+    unicode: 'U+1F1EC U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GN.svg',
+  },
+  GP: {
+    name: 'Guadeloupe',
+    emoji: '🇬🇵',
+    unicode: 'U+1F1EC U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GP.svg',
+  },
+  GQ: {
+    name: 'Equatorial Guinea',
+    emoji: '🇬🇶',
+    unicode: 'U+1F1EC U+1F1F6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GQ.svg',
+  },
+  GR: {
+    name: 'Greece',
+    emoji: '🇬🇷',
+    unicode: 'U+1F1EC U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GR.svg',
+  },
+  GS: {
+    name: 'South Georgia & South Sandwich Islands',
+    emoji: '🇬🇸',
+    unicode: 'U+1F1EC U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GS.svg',
+  },
+  GT: {
+    name: 'Guatemala',
+    emoji: '🇬🇹',
+    unicode: 'U+1F1EC U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GT.svg',
+  },
+  GU: {
+    name: 'Guam',
+    emoji: '🇬🇺',
+    unicode: 'U+1F1EC U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GU.svg',
+  },
+  GW: {
+    name: 'Guinea-Bissau',
+    emoji: '🇬🇼',
+    unicode: 'U+1F1EC U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GW.svg',
+  },
+  GY: {
+    name: 'Guyana',
+    emoji: '🇬🇾',
+    unicode: 'U+1F1EC U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GY.svg',
+  },
+  HK: {
+    name: 'Hong Kong SAR China',
+    emoji: '🇭🇰',
+    unicode: 'U+1F1ED U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HK.svg',
+  },
+  HM: {
+    name: 'Heard & McDonald Islands',
+    emoji: '🇭🇲',
+    unicode: 'U+1F1ED U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HM.svg',
+  },
+  HN: {
+    name: 'Honduras',
+    emoji: '🇭🇳',
+    unicode: 'U+1F1ED U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HN.svg',
+  },
+  HR: {
+    name: 'Croatia',
+    emoji: '🇭🇷',
+    unicode: 'U+1F1ED U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HR.svg',
+  },
+  HT: {
+    name: 'Haiti',
+    emoji: '🇭🇹',
+    unicode: 'U+1F1ED U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HT.svg',
+  },
+  HU: {
+    name: 'Hungary',
+    emoji: '🇭🇺',
+    unicode: 'U+1F1ED U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HU.svg',
+  },
+  IC: {
+    name: 'Canary Islands',
+    emoji: '🇮🇨',
+    unicode: 'U+1F1EE U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IC.svg',
+  },
+  ID: {
+    name: 'Indonesia',
+    emoji: '🇮🇩',
+    unicode: 'U+1F1EE U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ID.svg',
+  },
+  IE: {
+    name: 'Ireland',
+    emoji: '🇮🇪',
+    unicode: 'U+1F1EE U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IE.svg',
+  },
+  IL: {
+    name: 'Israel',
+    emoji: '🇮🇱',
+    unicode: 'U+1F1EE U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IL.svg',
+  },
+  IM: {
+    name: 'Isle of Man',
+    emoji: '🇮🇲',
+    unicode: 'U+1F1EE U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IM.svg',
+  },
+  IN: {
+    name: 'India',
+    emoji: '🇮🇳',
+    unicode: 'U+1F1EE U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IN.svg',
+  },
+  IO: {
+    name: 'British Indian Ocean Territory',
+    emoji: '🇮🇴',
+    unicode: 'U+1F1EE U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IO.svg',
+  },
+  IQ: {
+    name: 'Iraq',
+    emoji: '🇮🇶',
+    unicode: 'U+1F1EE U+1F1F6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IQ.svg',
+  },
+  IR: {
+    name: 'Iran',
+    emoji: '🇮🇷',
+    unicode: 'U+1F1EE U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IR.svg',
+  },
+  IS: {
+    name: 'Iceland',
+    emoji: '🇮🇸',
+    unicode: 'U+1F1EE U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IS.svg',
+  },
+  IT: {
+    name: 'Italy',
+    emoji: '🇮🇹',
+    unicode: 'U+1F1EE U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IT.svg',
+  },
+  JE: {
+    name: 'Jersey',
+    emoji: '🇯🇪',
+    unicode: 'U+1F1EF U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JE.svg',
+  },
+  JM: {
+    name: 'Jamaica',
+    emoji: '🇯🇲',
+    unicode: 'U+1F1EF U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JM.svg',
+  },
+  JO: {
+    name: 'Jordan',
+    emoji: '🇯🇴',
+    unicode: 'U+1F1EF U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JO.svg',
+  },
+  JP: {
+    name: 'Japan',
+    emoji: '🇯🇵',
+    unicode: 'U+1F1EF U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JP.svg',
+  },
+  KE: {
+    name: 'Kenya',
+    emoji: '🇰🇪',
+    unicode: 'U+1F1F0 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KE.svg',
+  },
+  KG: {
+    name: 'Kyrgyzstan',
+    emoji: '🇰🇬',
+    unicode: 'U+1F1F0 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KG.svg',
+  },
+  KH: {
+    name: 'Cambodia',
+    emoji: '🇰🇭',
+    unicode: 'U+1F1F0 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KH.svg',
+  },
+  KI: {
+    name: 'Kiribati',
+    emoji: '🇰🇮',
+    unicode: 'U+1F1F0 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KI.svg',
+  },
+  KM: {
+    name: 'Comoros',
+    emoji: '🇰🇲',
+    unicode: 'U+1F1F0 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KM.svg',
+  },
+  KN: {
+    name: 'St. Kitts & Nevis',
+    emoji: '🇰🇳',
+    unicode: 'U+1F1F0 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KN.svg',
+  },
+  KP: {
+    name: 'North Korea',
+    emoji: '🇰🇵',
+    unicode: 'U+1F1F0 U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KP.svg',
+  },
+  KR: {
+    name: 'South Korea',
+    emoji: '🇰🇷',
+    unicode: 'U+1F1F0 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KR.svg',
+  },
+  KW: {
+    name: 'Kuwait',
+    emoji: '🇰🇼',
+    unicode: 'U+1F1F0 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KW.svg',
+  },
+  KY: {
+    name: 'Cayman Islands',
+    emoji: '🇰🇾',
+    unicode: 'U+1F1F0 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KY.svg',
+  },
+  KZ: {
+    name: 'Kazakhstan',
+    emoji: '🇰🇿',
+    unicode: 'U+1F1F0 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KZ.svg',
+  },
+  LA: {
+    name: 'Laos',
+    emoji: '🇱🇦',
+    unicode: 'U+1F1F1 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LA.svg',
+  },
+  LB: {
+    name: 'Lebanon',
+    emoji: '🇱🇧',
+    unicode: 'U+1F1F1 U+1F1E7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LB.svg',
+  },
+  LC: {
+    name: 'St. Lucia',
+    emoji: '🇱🇨',
+    unicode: 'U+1F1F1 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LC.svg',
+  },
+  LI: {
+    name: 'Liechtenstein',
+    emoji: '🇱🇮',
+    unicode: 'U+1F1F1 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LI.svg',
+  },
+  LK: {
+    name: 'Sri Lanka',
+    emoji: '🇱🇰',
+    unicode: 'U+1F1F1 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LK.svg',
+  },
+  LR: {
+    name: 'Liberia',
+    emoji: '🇱🇷',
+    unicode: 'U+1F1F1 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LR.svg',
+  },
+  LS: {
+    name: 'Lesotho',
+    emoji: '🇱🇸',
+    unicode: 'U+1F1F1 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LS.svg',
+  },
+  LT: {
+    name: 'Lithuania',
+    emoji: '🇱🇹',
+    unicode: 'U+1F1F1 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LT.svg',
+  },
+  LU: {
+    name: 'Luxembourg',
+    emoji: '🇱🇺',
+    unicode: 'U+1F1F1 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LU.svg',
+  },
+  LV: {
+    name: 'Latvia',
+    emoji: '🇱🇻',
+    unicode: 'U+1F1F1 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LV.svg',
+  },
+  LY: {
+    name: 'Libya',
+    emoji: '🇱🇾',
+    unicode: 'U+1F1F1 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LY.svg',
+  },
+  MA: {
+    name: 'Morocco',
+    emoji: '🇲🇦',
+    unicode: 'U+1F1F2 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MA.svg',
+  },
+  MC: {
+    name: 'Monaco',
+    emoji: '🇲🇨',
+    unicode: 'U+1F1F2 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MC.svg',
+  },
+  MD: {
+    name: 'Moldova',
+    emoji: '🇲🇩',
+    unicode: 'U+1F1F2 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MD.svg',
+  },
+  ME: {
+    name: 'Montenegro',
+    emoji: '🇲🇪',
+    unicode: 'U+1F1F2 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ME.svg',
+  },
+  MF: {
+    name: 'St. Martin',
+    emoji: '🇲🇫',
+    unicode: 'U+1F1F2 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MF.svg',
+  },
+  MG: {
+    name: 'Madagascar',
+    emoji: '🇲🇬',
+    unicode: 'U+1F1F2 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MG.svg',
+  },
+  MH: {
+    name: 'Marshall Islands',
+    emoji: '🇲🇭',
+    unicode: 'U+1F1F2 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MH.svg',
+  },
+  MK: {
+    name: 'North Macedonia',
+    emoji: '🇲🇰',
+    unicode: 'U+1F1F2 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MK.svg',
+  },
+  ML: {
+    name: 'Mali',
+    emoji: '🇲🇱',
+    unicode: 'U+1F1F2 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ML.svg',
+  },
+  MM: {
+    name: 'Myanmar (Burma)',
+    emoji: '🇲🇲',
+    unicode: 'U+1F1F2 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MM.svg',
+  },
+  MN: {
+    name: 'Mongolia',
+    emoji: '🇲🇳',
+    unicode: 'U+1F1F2 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MN.svg',
+  },
+  MO: {
+    name: 'Macao SAR China',
+    emoji: '🇲🇴',
+    unicode: 'U+1F1F2 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MO.svg',
+  },
+  MP: {
+    name: 'Northern Mariana Islands',
+    emoji: '🇲🇵',
+    unicode: 'U+1F1F2 U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MP.svg',
+  },
+  MQ: {
+    name: 'Martinique',
+    emoji: '🇲🇶',
+    unicode: 'U+1F1F2 U+1F1F6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MQ.svg',
+  },
+  MR: {
+    name: 'Mauritania',
+    emoji: '🇲🇷',
+    unicode: 'U+1F1F2 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MR.svg',
+  },
+  MS: {
+    name: 'Montserrat',
+    emoji: '🇲🇸',
+    unicode: 'U+1F1F2 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MS.svg',
+  },
+  MT: {
+    name: 'Malta',
+    emoji: '🇲🇹',
+    unicode: 'U+1F1F2 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MT.svg',
+  },
+  MU: {
+    name: 'Mauritius',
+    emoji: '🇲🇺',
+    unicode: 'U+1F1F2 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MU.svg',
+  },
+  MV: {
+    name: 'Maldives',
+    emoji: '🇲🇻',
+    unicode: 'U+1F1F2 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MV.svg',
+  },
+  MW: {
+    name: 'Malawi',
+    emoji: '🇲🇼',
+    unicode: 'U+1F1F2 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MW.svg',
+  },
+  MX: {
+    name: 'Mexico',
+    emoji: '🇲🇽',
+    unicode: 'U+1F1F2 U+1F1FD',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MX.svg',
+  },
+  MY: {
+    name: 'Malaysia',
+    emoji: '🇲🇾',
+    unicode: 'U+1F1F2 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MY.svg',
+  },
+  MZ: {
+    name: 'Mozambique',
+    emoji: '🇲🇿',
+    unicode: 'U+1F1F2 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MZ.svg',
+  },
+  NA: {
+    name: 'Namibia',
+    emoji: '🇳🇦',
+    unicode: 'U+1F1F3 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NA.svg',
+  },
+  NC: {
+    name: 'New Caledonia',
+    emoji: '🇳🇨',
+    unicode: 'U+1F1F3 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NC.svg',
+  },
+  NE: {
+    name: 'Niger',
+    emoji: '🇳🇪',
+    unicode: 'U+1F1F3 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NE.svg',
+  },
+  NF: {
+    name: 'Norfolk Island',
+    emoji: '🇳🇫',
+    unicode: 'U+1F1F3 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NF.svg',
+  },
+  NG: {
+    name: 'Nigeria',
+    emoji: '🇳🇬',
+    unicode: 'U+1F1F3 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NG.svg',
+  },
+  NI: {
+    name: 'Nicaragua',
+    emoji: '🇳🇮',
+    unicode: 'U+1F1F3 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NI.svg',
+  },
+  NL: {
+    name: 'Netherlands',
+    emoji: '🇳🇱',
+    unicode: 'U+1F1F3 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NL.svg',
+  },
+  NO: {
+    name: 'Norway',
+    emoji: '🇳🇴',
+    unicode: 'U+1F1F3 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NO.svg',
+  },
+  NP: {
+    name: 'Nepal',
+    emoji: '🇳🇵',
+    unicode: 'U+1F1F3 U+1F1F5',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NP.svg',
+  },
+  NR: {
+    name: 'Nauru',
+    emoji: '🇳🇷',
+    unicode: 'U+1F1F3 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NR.svg',
+  },
+  NU: {
+    name: 'Niue',
+    emoji: '🇳🇺',
+    unicode: 'U+1F1F3 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NU.svg',
+  },
+  NZ: {
+    name: 'New Zealand',
+    emoji: '🇳🇿',
+    unicode: 'U+1F1F3 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NZ.svg',
+  },
+  OM: {
+    name: 'Oman',
+    emoji: '🇴🇲',
+    unicode: 'U+1F1F4 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/OM.svg',
+  },
+  PA: {
+    name: 'Panama',
+    emoji: '🇵🇦',
+    unicode: 'U+1F1F5 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PA.svg',
+  },
+  PE: {
+    name: 'Peru',
+    emoji: '🇵🇪',
+    unicode: 'U+1F1F5 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PE.svg',
+  },
+  PF: {
+    name: 'French Polynesia',
+    emoji: '🇵🇫',
+    unicode: 'U+1F1F5 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PF.svg',
+  },
+  PG: {
+    name: 'Papua New Guinea',
+    emoji: '🇵🇬',
+    unicode: 'U+1F1F5 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PG.svg',
+  },
+  PH: {
+    name: 'Philippines',
+    emoji: '🇵🇭',
+    unicode: 'U+1F1F5 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PH.svg',
+  },
+  PK: {
+    name: 'Pakistan',
+    emoji: '🇵🇰',
+    unicode: 'U+1F1F5 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PK.svg',
+  },
+  PL: {
+    name: 'Poland',
+    emoji: '🇵🇱',
+    unicode: 'U+1F1F5 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PL.svg',
+  },
+  PM: {
+    name: 'St. Pierre & Miquelon',
+    emoji: '🇵🇲',
+    unicode: 'U+1F1F5 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PM.svg',
+  },
+  PN: {
+    name: 'Pitcairn Islands',
+    emoji: '🇵🇳',
+    unicode: 'U+1F1F5 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PN.svg',
+  },
+  PR: {
+    name: 'Puerto Rico',
+    emoji: '🇵🇷',
+    unicode: 'U+1F1F5 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PR.svg',
+  },
+  PS: {
+    name: 'Palestinian Territories',
+    emoji: '🇵🇸',
+    unicode: 'U+1F1F5 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PS.svg',
+  },
+  PT: {
+    name: 'Portugal',
+    emoji: '🇵🇹',
+    unicode: 'U+1F1F5 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PT.svg',
+  },
+  PW: {
+    name: 'Palau',
+    emoji: '🇵🇼',
+    unicode: 'U+1F1F5 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PW.svg',
+  },
+  PY: {
+    name: 'Paraguay',
+    emoji: '🇵🇾',
+    unicode: 'U+1F1F5 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PY.svg',
+  },
+  QA: {
+    name: 'Qatar',
+    emoji: '🇶🇦',
+    unicode: 'U+1F1F6 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/QA.svg',
+  },
+  RE: {
+    name: 'Réunion',
+    emoji: '🇷🇪',
+    unicode: 'U+1F1F7 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RE.svg',
+  },
+  RO: {
+    name: 'Romania',
+    emoji: '🇷🇴',
+    unicode: 'U+1F1F7 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RO.svg',
+  },
+  RS: {
+    name: 'Serbia',
+    emoji: '🇷🇸',
+    unicode: 'U+1F1F7 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RS.svg',
+  },
+  RU: {
+    name: 'Russia',
+    emoji: '🇷🇺',
+    unicode: 'U+1F1F7 U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RU.svg',
+  },
+  RW: {
+    name: 'Rwanda',
+    emoji: '🇷🇼',
+    unicode: 'U+1F1F7 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RW.svg',
+  },
+  SA: {
+    name: 'Saudi Arabia',
+    emoji: '🇸🇦',
+    unicode: 'U+1F1F8 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SA.svg',
+  },
+  SB: {
+    name: 'Solomon Islands',
+    emoji: '🇸🇧',
+    unicode: 'U+1F1F8 U+1F1E7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SB.svg',
+  },
+  SC: {
+    name: 'Seychelles',
+    emoji: '🇸🇨',
+    unicode: 'U+1F1F8 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SC.svg',
+  },
+  SD: {
+    name: 'Sudan',
+    emoji: '🇸🇩',
+    unicode: 'U+1F1F8 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SD.svg',
+  },
+  SE: {
+    name: 'Sweden',
+    emoji: '🇸🇪',
+    unicode: 'U+1F1F8 U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SE.svg',
+  },
+  SG: {
+    name: 'Singapore',
+    emoji: '🇸🇬',
+    unicode: 'U+1F1F8 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SG.svg',
+  },
+  SH: {
+    name: 'St. Helena',
+    emoji: '🇸🇭',
+    unicode: 'U+1F1F8 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SH.svg',
+  },
+  SI: {
+    name: 'Slovenia',
+    emoji: '🇸🇮',
+    unicode: 'U+1F1F8 U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SI.svg',
+  },
+  SJ: {
+    name: 'Svalbard & Jan Mayen',
+    emoji: '🇸🇯',
+    unicode: 'U+1F1F8 U+1F1EF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SJ.svg',
+  },
+  SK: {
+    name: 'Slovakia',
+    emoji: '🇸🇰',
+    unicode: 'U+1F1F8 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SK.svg',
+  },
+  SL: {
+    name: 'Sierra Leone',
+    emoji: '🇸🇱',
+    unicode: 'U+1F1F8 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SL.svg',
+  },
+  SM: {
+    name: 'San Marino',
+    emoji: '🇸🇲',
+    unicode: 'U+1F1F8 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SM.svg',
+  },
+  SN: {
+    name: 'Senegal',
+    emoji: '🇸🇳',
+    unicode: 'U+1F1F8 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SN.svg',
+  },
+  SO: {
+    name: 'Somalia',
+    emoji: '🇸🇴',
+    unicode: 'U+1F1F8 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SO.svg',
+  },
+  SR: {
+    name: 'Suriname',
+    emoji: '🇸🇷',
+    unicode: 'U+1F1F8 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SR.svg',
+  },
+  SS: {
+    name: 'South Sudan',
+    emoji: '🇸🇸',
+    unicode: 'U+1F1F8 U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SS.svg',
+  },
+  ST: {
+    name: 'São Tomé & Príncipe',
+    emoji: '🇸🇹',
+    unicode: 'U+1F1F8 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ST.svg',
+  },
+  SV: {
+    name: 'El Salvador',
+    emoji: '🇸🇻',
+    unicode: 'U+1F1F8 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SV.svg',
+  },
+  SX: {
+    name: 'Sint Maarten',
+    emoji: '🇸🇽',
+    unicode: 'U+1F1F8 U+1F1FD',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SX.svg',
+  },
+  SY: {
+    name: 'Syria',
+    emoji: '🇸🇾',
+    unicode: 'U+1F1F8 U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SY.svg',
+  },
+  SZ: {
+    name: 'Eswatini',
+    emoji: '🇸🇿',
+    unicode: 'U+1F1F8 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SZ.svg',
+  },
+  TA: {
+    name: 'Tristan da Cunha',
+    emoji: '🇹🇦',
+    unicode: 'U+1F1F9 U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TA.svg',
+  },
+  TC: {
+    name: 'Turks & Caicos Islands',
+    emoji: '🇹🇨',
+    unicode: 'U+1F1F9 U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TC.svg',
+  },
+  TD: {
+    name: 'Chad',
+    emoji: '🇹🇩',
+    unicode: 'U+1F1F9 U+1F1E9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TD.svg',
+  },
+  TF: {
+    name: 'French Southern Territories',
+    emoji: '🇹🇫',
+    unicode: 'U+1F1F9 U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TF.svg',
+  },
+  TG: {
+    name: 'Togo',
+    emoji: '🇹🇬',
+    unicode: 'U+1F1F9 U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TG.svg',
+  },
+  TH: {
+    name: 'Thailand',
+    emoji: '🇹🇭',
+    unicode: 'U+1F1F9 U+1F1ED',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TH.svg',
+  },
+  TJ: {
+    name: 'Tajikistan',
+    emoji: '🇹🇯',
+    unicode: 'U+1F1F9 U+1F1EF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TJ.svg',
+  },
+  TK: {
+    name: 'Tokelau',
+    emoji: '🇹🇰',
+    unicode: 'U+1F1F9 U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TK.svg',
+  },
+  TL: {
+    name: 'Timor-Leste',
+    emoji: '🇹🇱',
+    unicode: 'U+1F1F9 U+1F1F1',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TL.svg',
+  },
+  TM: {
+    name: 'Turkmenistan',
+    emoji: '🇹🇲',
+    unicode: 'U+1F1F9 U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TM.svg',
+  },
+  TN: {
+    name: 'Tunisia',
+    emoji: '🇹🇳',
+    unicode: 'U+1F1F9 U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TN.svg',
+  },
+  TO: {
+    name: 'Tonga',
+    emoji: '🇹🇴',
+    unicode: 'U+1F1F9 U+1F1F4',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TO.svg',
+  },
+  TR: {
+    name: 'Turkey',
+    emoji: '🇹🇷',
+    unicode: 'U+1F1F9 U+1F1F7',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TR.svg',
+  },
+  TT: {
+    name: 'Trinidad & Tobago',
+    emoji: '🇹🇹',
+    unicode: 'U+1F1F9 U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TT.svg',
+  },
+  TV: {
+    name: 'Tuvalu',
+    emoji: '🇹🇻',
+    unicode: 'U+1F1F9 U+1F1FB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TV.svg',
+  },
+  TW: {
+    name: 'Taiwan',
+    emoji: '🇹🇼',
+    unicode: 'U+1F1F9 U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TW.svg',
+  },
+  TZ: {
+    name: 'Tanzania',
+    emoji: '🇹🇿',
+    unicode: 'U+1F1F9 U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TZ.svg',
+  },
+  UA: {
+    name: 'Ukraine',
+    emoji: '🇺🇦',
+    unicode: 'U+1F1FA U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UA.svg',
+  },
+  UG: {
+    name: 'Uganda',
+    emoji: '🇺🇬',
+    unicode: 'U+1F1FA U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UG.svg',
+  },
+  UM: {
+    name: 'U.S. Outlying Islands',
+    emoji: '🇺🇲',
+    unicode: 'U+1F1FA U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UM.svg',
+  },
+  UN: {
+    name: 'United Nations',
+    emoji: '🇺🇳',
+    unicode: 'U+1F1FA U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UN.svg',
+  },
+  US: {
+    name: 'United States',
+    emoji: '🇺🇸',
+    unicode: 'U+1F1FA U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/US.svg',
+  },
+  UY: {
+    name: 'Uruguay',
+    emoji: '🇺🇾',
+    unicode: 'U+1F1FA U+1F1FE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UY.svg',
+  },
+  UZ: {
+    name: 'Uzbekistan',
+    emoji: '🇺🇿',
+    unicode: 'U+1F1FA U+1F1FF',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UZ.svg',
+  },
+  VA: {
+    name: 'Vatican City',
+    emoji: '🇻🇦',
+    unicode: 'U+1F1FB U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VA.svg',
+  },
+  VC: {
+    name: 'St. Vincent & Grenadines',
+    emoji: '🇻🇨',
+    unicode: 'U+1F1FB U+1F1E8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VC.svg',
+  },
+  VE: {
+    name: 'Venezuela',
+    emoji: '🇻🇪',
+    unicode: 'U+1F1FB U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VE.svg',
+  },
+  VG: {
+    name: 'British Virgin Islands',
+    emoji: '🇻🇬',
+    unicode: 'U+1F1FB U+1F1EC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VG.svg',
+  },
+  VI: {
+    name: 'U.S. Virgin Islands',
+    emoji: '🇻🇮',
+    unicode: 'U+1F1FB U+1F1EE',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VI.svg',
+  },
+  VN: {
+    name: 'Vietnam',
+    emoji: '🇻🇳',
+    unicode: 'U+1F1FB U+1F1F3',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VN.svg',
+  },
+  VU: {
+    name: 'Vanuatu',
+    emoji: '🇻🇺',
+    unicode: 'U+1F1FB U+1F1FA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VU.svg',
+  },
+  WF: {
+    name: 'Wallis & Futuna',
+    emoji: '🇼🇫',
+    unicode: 'U+1F1FC U+1F1EB',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WF.svg',
+  },
+  WS: {
+    name: 'Samoa',
+    emoji: '🇼🇸',
+    unicode: 'U+1F1FC U+1F1F8',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WS.svg',
+  },
+  XK: {
+    name: 'Kosovo',
+    emoji: '🇽🇰',
+    unicode: 'U+1F1FD U+1F1F0',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/XK.svg',
+  },
+  YE: {
+    name: 'Yemen',
+    emoji: '🇾🇪',
+    unicode: 'U+1F1FE U+1F1EA',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/YE.svg',
+  },
+  YT: {
+    name: 'Mayotte',
+    emoji: '🇾🇹',
+    unicode: 'U+1F1FE U+1F1F9',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/YT.svg',
+  },
+  ZA: {
+    name: 'South Africa',
+    emoji: '🇿🇦',
+    unicode: 'U+1F1FF U+1F1E6',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZA.svg',
+  },
+  ZM: {
+    name: 'Zambia',
+    emoji: '🇿🇲',
+    unicode: 'U+1F1FF U+1F1F2',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZM.svg',
+  },
+  ZW: {
+    name: 'Zimbabwe',
+    emoji: '🇿🇼',
+    unicode: 'U+1F1FF U+1F1FC',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZW.svg',
+  },
+  ENGLAND: {
+    name: 'England',
+    emoji: '🏴󠁧󠁢󠁥󠁮󠁧󠁿',
+    unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0065 U+E006E U+E0067 U+E007F',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ENGLAND.svg',
+  },
+  SCOTLAND: {
+    name: 'Scotland',
+    emoji: '🏴󠁧󠁢󠁳󠁣󠁴󠁿',
+    unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0073 U+E0063 U+E0074 U+E007F',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SCOTLAND.svg',
+  },
+  WALES: {
+    name: 'Wales',
+    emoji: '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
+    unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0077 U+E006C U+E0073 U+E007F',
+    image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WALES.svg',
+  },
+}
diff --git a/client/src/constants/fonts.js b/client/src/constants/fonts.js
new file mode 100644
index 000000000..b54a29f8b
--- /dev/null
+++ b/client/src/constants/fonts.js
@@ -0,0 +1,33 @@
+/*
+fw - font weight
+fs - font style
+lh - line height
+*/
+
+export const H1fw = 500
+export const H1fs = '38px'
+export const H1lh = '45.6px'
+
+export const H2fw = 500
+export const H2fs = '32px'
+export const H2lh = '38.4px'
+
+export const H3fw = 500
+export const H3fs = '24px'
+export const H3lh = '28.8px'
+
+export const H4fw = 500
+export const H4fs = '20px'
+export const H4lh = '24px'
+
+export const B1fw = 400
+export const B1fs = '24px'
+export const B1lh = '33.6px'
+
+export const B2fw = 400
+export const B2fs = '16px'
+export const B2lh = '22.4px'
+
+export const B3fw = 300
+export const B3fs = '14px'
+export const B3lh = '16.8px'
diff --git a/client/src/constants/frameworkColors.js b/client/src/constants/frameworkColors.js
index 42e35466b..18a0afdbc 100644
--- a/client/src/constants/frameworkColors.js
+++ b/client/src/constants/frameworkColors.js
@@ -1,37 +1,37 @@
 const frameworkColors = Object.freeze({
-  NodeJS: '#42443B',
-  Ruby: '#911101',
-  Angular: '#7986CB',
-  Android: '#073042',
-  IOS: 'white',
-  Hadoop: '#F3E20E',
+  NodeJS: '#5A9E54',
+  Ruby: '#900E04',
+  Angular: '#C3002F',
+  Android: '#06B75D',
+  IOS: '#F2F2F2',
+  Hadoop: '#E4E017',
   Ember: '#E24B31',
-  Django: '#103E2E',
-  Redux: '#553E98',
+  Django: '#194838',
+  Redux: '#6333AA',
   React: '#00A4D3',
-  Spring: '#6DB33F',
-  Spark: '#DA018E',
-  Backbone: '#0071B5',
-  Figma: 'black',
-  Photoshop: '#001833',
+  Spring: '#66C229',
+  Spark: '#E67609',
+  Backbone: '#00619C',
+  Figma: '#8D3DF5',
+  Photoshop: '#2C97E6',
 })
 
 const frameworkTextColors = Object.freeze({
-  NodeJS: '#7AC408',
+  NodeJS: 'white',
   Ruby: 'white',
   Angular: 'white',
-  Android: '#3DDC84',
-  IOS: 'rgba(0, 0, 0, 0.85)',
-  Hadoop: 'black',
+  Android: 'white',
+  IOS: '#1E1E1E',
+  Hadoop: '#1E1E1E',
   Ember: 'white',
   Django: 'white',
   Redux: 'white',
   React: 'white',
   Spring: 'white',
   Spark: 'white',
-  Backbone: 'black',
-  Figma: '#A259FF',
-  Photoshop: '#2DA9FF',
+  Backbone: 'white',
+  Figma: 'white',
+  Photoshop: 'white',
 })
 
 export { frameworkColors, frameworkTextColors }
diff --git a/client/src/constants/frameworks.js b/client/src/constants/frameworks.js
index 22a5316e3..0d807d6ac 100644
--- a/client/src/constants/frameworks.js
+++ b/client/src/constants/frameworks.js
@@ -1,49 +1,19 @@
 const frameworkOptions = [
-  {
-    label: 'NodeJS',
-  },
-  {
-    label: 'Ruby',
-  },
-  {
-    label: 'Angular',
-  },
-  {
-    label: 'Android',
-  },
-  {
-    label: 'IOS',
-  },
-  {
-    label: 'Hadoop',
-  },
-  {
-    label: 'Ember',
-  },
-  {
-    label: 'Django',
-  },
-  {
-    label: 'Redux',
-  },
-  {
-    label: 'React',
-  },
-  {
-    label: 'Spring',
-  },
-  {
-    label: 'Spark',
-  },
-  {
-    label: 'Backbone',
-  },
-  {
-    label: 'Figma',
-  },
-  {
-    label: 'Photoshop',
-  },
+  { label: 'NodeJS', value: 'nodejs' },
+  { label: 'Ruby', value: 'ruby' },
+  { label: 'Angular', value: 'angular' },
+  { label: 'Android', value: 'android' },
+  { label: 'IOS', value: 'ios' },
+  { label: 'Hadoop', value: 'hadoop' },
+  { label: 'Ember', value: 'ember' },
+  { label: 'Django', value: 'django' },
+  { label: 'Redux', value: 'redux' },
+  { label: 'React', value: 'react' },
+  { label: 'Spring', value: 'spring' },
+  { label: 'Spark', value: 'spark' },
+  { label: 'Backbone', value: 'backbone' },
+  { label: 'Figma', value: 'figma' },
+  { label: 'Photoshop', value: 'photoshop' },
 ]
 
 export default frameworkOptions
diff --git a/client/src/constants/images.js b/client/src/constants/images.js
index c44c19ab1..c67700471 100644
--- a/client/src/constants/images.js
+++ b/client/src/constants/images.js
@@ -1 +1,8 @@
-// export const unregisteredImg =
+export const defaultTeamImages = [
+  'default-green',
+  'default-pink',
+  'default-blue',
+  'default-orange',
+  'default-purple',
+  'default-yellow',
+]
diff --git a/client/src/constants/programmingLanguages.js b/client/src/constants/programmingLanguages.js
index 8a65abc09..e609534b8 100644
--- a/client/src/constants/programmingLanguages.js
+++ b/client/src/constants/programmingLanguages.js
@@ -16,51 +16,21 @@ import SQL from '../assets/LanguageLogo/SQL'
 import Swift from '../assets/LanguageLogo/Swift'
 
 const programmingLanguageOptions = [
-  {
-    label: 'JS',
-  },
-  {
-    label: 'C++',
-  },
-  {
-    label: 'C',
-  },
-  {
-    label: 'Python',
-  },
-  {
-    label: 'Swift',
-  },
-  {
-    label: 'Ruby',
-  },
-  {
-    label: 'Scala',
-  },
-  {
-    label: 'PHP',
-  },
-  {
-    label: 'Go',
-  },
-  {
-    label: 'C#',
-  },
-  {
-    label: 'Java',
-  },
-  {
-    label: 'HTML/CSS',
-  },
-  {
-    label: 'Dart',
-  },
-  {
-    label: 'Perl',
-  },
-  {
-    label: 'SQL',
-  },
+  { label: 'JS', value: 'js' },
+  { label: 'C++', value: 'c++' },
+  { label: 'C', value: 'c' },
+  { label: 'Python', value: 'python' },
+  { label: 'Swift', value: 'swift' },
+  { label: 'Ruby', value: 'ruby' },
+  { label: 'Scala', value: 'scala' },
+  { label: 'PHP', value: 'php' },
+  { label: 'Go', value: 'go' },
+  { label: 'C#', value: 'c#' },
+  { label: 'Java', value: 'java' },
+  { label: 'HTML/CSS', value: 'html/css' },
+  { label: 'Dart', value: 'dart' },
+  { label: 'Perl', value: 'perl' },
+  { label: 'SQL', value: 'sql' },
 ]
 
 const languageOptions = Object.freeze({
diff --git a/client/src/constants/types.js b/client/src/constants/types.js
new file mode 100644
index 000000000..fbec33dba
--- /dev/null
+++ b/client/src/constants/types.js
@@ -0,0 +1,13 @@
+const typeOptions = [
+  {
+    label: 'Invite-only',
+  },
+  {
+    label: 'Closed',
+  },
+  {
+    label: 'Open',
+  },
+]
+
+export default typeOptions
diff --git a/client/src/hooks/useGetScreenWidth.js b/client/src/hooks/useGetScreenWidth.js
new file mode 100644
index 000000000..0a7833ddc
--- /dev/null
+++ b/client/src/hooks/useGetScreenWidth.js
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+export const useGetScreenWidth = () => {
+  const [screenWidth, setScreenWidth] = useState(0)
+
+  useEffect(function onFirstMount() {
+    setScreenWidth(window.innerWidth)
+  }, [])
+
+  useEffect(() => {
+    // Function to update the screen width state
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth)
+    }
+
+    // Event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return screenWidth
+}
diff --git a/client/src/http/index.js b/client/src/http/index.js
index 0285f5d00..1108344ce 100644
--- a/client/src/http/index.js
+++ b/client/src/http/index.js
@@ -31,6 +31,8 @@ api.interceptors.response.use(
       try {
         const response = await axios.get(`${API_URL}/auth/refresh`, { withCredentials: true })
 
+        console.log(response)
+
         localStorage.setItem('token', response.data.accessToken)
 
         return api.request(originalRequest)
diff --git a/client/src/schemas/index.js b/client/src/schemas/index.js
index 4990f890a..8f14df39a 100644
--- a/client/src/schemas/index.js
+++ b/client/src/schemas/index.js
@@ -347,3 +347,8 @@ export const editProfileValidation = yup.object().shape(
     ['telegram', 'telegram'],
   ],
 )
+
+export const editTeamValidation = yup.object().shape({
+  name: yup.string().max(20, '20 characters max'),
+  tag: yup.string().max(5),
+})
diff --git a/client/src/screens/NoTeamScreen/NoTeamScreen.js b/client/src/screens/NoTeamScreen/NoTeamScreen.js
index c07804f5e..5999fee54 100644
--- a/client/src/screens/NoTeamScreen/NoTeamScreen.js
+++ b/client/src/screens/NoTeamScreen/NoTeamScreen.js
@@ -1,13 +1,15 @@
 import React from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
 
-import NoTeamForm from '../../components/Forms/NoTeamForm/NoTeamForm'
+import NoTeam from '../../components/Team/NoTeam/NoTeam'
+import TeamTypeSwitch from '../../components/Team/TeamTypeSwitch/TeamTypeSwitch'
 
 function NoTeamScreen() {
   return (
     <>
       <CssBaseline />
-      <NoTeamForm />
+      <TeamTypeSwitch myTeam={''} />
+      <NoTeam />
     </>
   )
 }
diff --git a/client/src/screens/TeamScreen/TeamScreen.js b/client/src/screens/TeamScreen/TeamScreen.js
index 1830a4fd0..d6f8f6d9d 100644
--- a/client/src/screens/TeamScreen/TeamScreen.js
+++ b/client/src/screens/TeamScreen/TeamScreen.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
 
-import TeamForm from '../../components/Forms/TeamForm/TeamForm'
+import TeamForm from '../../components/Team/TeamForm/TeamForm'
+import TeamsTopTemplate from '../../components/Team/TeamTypeSwitch/TeamTypeSwitch'
 
 function TeamScreen() {
   return (
diff --git a/client/src/screens/TeamsScreen/TeamsScreen.js b/client/src/screens/TeamsScreen/TeamsScreen.js
index 6db21bfff..65cdd741c 100644
--- a/client/src/screens/TeamsScreen/TeamsScreen.js
+++ b/client/src/screens/TeamsScreen/TeamsScreen.js
@@ -1,11 +1,13 @@
 import CssBaseline from '@mui/material/CssBaseline'
 
-import TeamsList from '../../components/Forms/TeamsList/TeamsList'
+import TeamsList from '../../components/Team/TeamsList/TeamsList'
+import TeamsTopTemplate from '../../components/Team/TeamTypeSwitch/TeamTypeSwitch'
 
 function TeamsScreen() {
   return (
     <>
       <CssBaseline />
+      <TeamsTopTemplate myTeam={'teams'} />
       <TeamsList />
     </>
   )
diff --git a/client/src/shared/components/AppHeader/AppHeader.jsx b/client/src/shared/components/AppHeader/AppHeader.jsx
new file mode 100644
index 000000000..a3bb56073
--- /dev/null
+++ b/client/src/shared/components/AppHeader/AppHeader.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+import PlatformLogo from '../../../assets/Platform/TeameightsLogo'
+import SearchIcon from '../../../assets/Shared/SearchIcon'
+import ModalSearch from '../../../components/ModalSearch/ModalSearch'
+import SearchPanel from '../SearchPanel/SearchPanel'
+
+import { FiltersWrapper, LogoContainer, NavBar, SearchIconWrapper } from './AppHeader.styles'
+
+const AppHeader = ({ sliceName, filterValueAction, hideLogoForMobile = false }) => {
+  const [currFilterIndex, setCurrFilterIndex] = useState(0)
+  const [openModal, setOpenModal] = useState(false)
+
+  return (
+    <>
+      <SearchIconWrapper onClick={() => setOpenModal(true)}>
+        <SearchIcon />
+      </SearchIconWrapper>
+      <FiltersWrapper>
+        <NavBar>
+          <LogoContainer hideLogoForMobile={hideLogoForMobile}>
+            <PlatformLogo />
+          </LogoContainer>
+          <SearchPanel
+            sliceName={sliceName}
+            currFilterIndex={currFilterIndex}
+            setCurrFilterIndex={setCurrFilterIndex}
+            setFilterValueAction={filterValueAction}
+          />
+
+          <ModalSearch
+            openModal={openModal}
+            setOpenModal={setOpenModal}
+            sliceName={sliceName}
+            currFilterIndex={currFilterIndex}
+            setCurrFilterIndex={setCurrFilterIndex}
+            setFilterValueAction={filterValueAction}
+          />
+        </NavBar>
+      </FiltersWrapper>
+    </>
+  )
+}
+
+export default AppHeader
diff --git a/client/src/shared/components/AppHeader/AppHeader.styles.jsx b/client/src/shared/components/AppHeader/AppHeader.styles.jsx
new file mode 100644
index 000000000..d18151fdd
--- /dev/null
+++ b/client/src/shared/components/AppHeader/AppHeader.styles.jsx
@@ -0,0 +1,51 @@
+// * Modules
+import Box from '@mui/material/Box'
+import { Form } from 'formik'
+import styled from 'styled-components'
+
+import IconWrapper from '../IconWrapper/IconWrapper'
+
+export const FiltersWrapper = styled.div`
+  width: 100%;
+  padding-left: 88px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 0px;
+  }
+`
+export const NavBar = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex-direction: column;
+`
+
+export const LogoContainer = styled.div`
+  /* position: relative; */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 49px;
+  margin-bottom: 48px;
+
+  @media screen and (max-width: 768px) {
+    margin-top: 34px;
+    margin-bottom: 32px;
+    visibility: ${(props) => (props.hideLogoForMobile ? 'hidden' : 'visible')};
+  }
+`
+
+export const SearchIconWrapper = styled(IconWrapper)`
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 37px;
+  z-index: 999;
+  right: 27px;
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
+`
diff --git a/client/src/shared/components/AutocompleteInput/AutocompleteInput.jsx b/client/src/shared/components/AutocompleteInput/AutocompleteInput.jsx
index a33c149fe..61f418106 100644
--- a/client/src/shared/components/AutocompleteInput/AutocompleteInput.jsx
+++ b/client/src/shared/components/AutocompleteInput/AutocompleteInput.jsx
@@ -11,7 +11,7 @@ import { List } from './List'
 import { InputLoader } from './Loader'
 import { InputTextField } from './TextField'
 
-export default function UserSearch({ value, setValue, width = 412, ...props }) {
+export default function AutocompleteInput({ value, setValue, width = 412, ...props }) {
   const [inputValue, setInputValue] = useState('')
   const [user, setUser] = useState([])
 
@@ -55,7 +55,7 @@ export default function UserSearch({ value, setValue, width = 412, ...props }) {
         filterSelectedOptions
         filterOptions={(x) => x}
         value={value}
-        isOptionEqualToValue={(option, value) => option.username === value.username}
+        isOptionEqualToValue={(option, value) => option.username === value?.username}
         forcePopupIcon={false}
         noOptionsText={<InputLoader areUsersLoading={areUsersLoading} />}
         onChange={(event, newValue, reason) => {
@@ -70,7 +70,7 @@ export default function UserSearch({ value, setValue, width = 412, ...props }) {
         }}
         renderInput={(params) => <InputTextField params={params} />}
         renderOption={(props, option) => {
-          return <List props={props} option={option} />
+          return <List props={props} option={option} key={option.username} />
         }}
         {...props}
       />
diff --git a/client/src/shared/components/AutocompleteInput/List.js b/client/src/shared/components/AutocompleteInput/List.js
index 870062dbb..abdaae577 100644
--- a/client/src/shared/components/AutocompleteInput/List.js
+++ b/client/src/shared/components/AutocompleteInput/List.js
@@ -4,7 +4,7 @@ import { LOCAL_PATH } from '../../../http'
 
 export const List = ({ props, option }) => {
   return (
-    <li {...props}>
+    <li {...props} key={option.username}>
       <Grid container alignItems="center">
         <Grid item sx={{ display: 'flex', width: 38 }}>
           <img style={{ width: '30px', height: '30px', borderRadius: '50%' }} src={option.image} />
diff --git a/client/src/shared/components/CardSkeleton/CardSkeleton.js b/client/src/shared/components/CardSkeleton/CardSkeleton.js
new file mode 100644
index 000000000..815635130
--- /dev/null
+++ b/client/src/shared/components/CardSkeleton/CardSkeleton.js
@@ -0,0 +1,23 @@
+// * Styles
+import { CardContainer, CardGridContainer, SkeletonCard } from './CardSkeleton.styles'
+
+const CardSkeleton = ({ cards, width, height, borderRadius, maxWidth }) => {
+  return Array(cards)
+    .fill(0)
+    .map((item, i) => (
+      <CardGridContainer key={i} width={width}>
+        <CardContainer borderRadius={borderRadius} width={width}>
+          <SkeletonCard
+            baseColor="#313131"
+            highlightColor="#525252"
+            width={width}
+            maxWidth={maxWidth}
+            height={height}
+            borderRadius={borderRadius}
+          />
+        </CardContainer>
+      </CardGridContainer>
+    ))
+}
+
+export default CardSkeleton
diff --git a/client/src/components/Teammates/components/CardSkeleton/CardSkeleton.styles.js b/client/src/shared/components/CardSkeleton/CardSkeleton.styles.js
similarity index 54%
rename from client/src/components/Teammates/components/CardSkeleton/CardSkeleton.styles.js
rename to client/src/shared/components/CardSkeleton/CardSkeleton.styles.js
index 1f829f539..29af955f6 100644
--- a/client/src/components/Teammates/components/CardSkeleton/CardSkeleton.styles.js
+++ b/client/src/shared/components/CardSkeleton/CardSkeleton.styles.js
@@ -8,21 +8,19 @@ export const CardGridContainer = styled.div`
   display: flex; /* new */
   align-items: center; /* new */
   justify-content: center; /* new */
+  width: ${(props) => props.width || 'auto'};
 `
 
 export const CardContainer = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: 25px;
+  border-radius: ${(props) => props.borderRadius || '25px'};
+  width: ${(props) => props.width || 'auto'};
 `
 
 export const SkeletonCard = styled(Skeleton)`
-  width: 200px;
-  height: 270px;
-  border-radius: 25px;
-
-  @media screen and (min-width: 1440px) {
-    width: 240px;
-    height: 300px;
-  }
+  width: ${(props) => props.width || '230px'};
+  /* max-width: ${(props) => props.maxWidth || '0'}; */
+  height: ${(props) => props.height || '280px'};
+  border-radius: ${(props) => props.borderRadius || '25px'};
 `
diff --git a/client/src/components/NavBar/FlexWrapper/FlexWrapper.js b/client/src/shared/components/FlexWrapper/FlexWrapper.js
similarity index 76%
rename from client/src/components/NavBar/FlexWrapper/FlexWrapper.js
rename to client/src/shared/components/FlexWrapper/FlexWrapper.js
index 1c1a87e77..b68db471a 100644
--- a/client/src/components/NavBar/FlexWrapper/FlexWrapper.js
+++ b/client/src/shared/components/FlexWrapper/FlexWrapper.js
@@ -8,6 +8,9 @@ const StyledFlexWrapper = styled.div`
   margin: ${(props) => props.margin || 0};
   padding: ${(props) => props.padding || 0};
   flex-direction: ${(props) => props.direction || 'row'};
+  max-height: ${(props) => props.maxHeight || 'none'};
+  position: ${(props) => props.position || 'static'};
+  width: ${(props) => props.width || 'auto'};
 `
 
 const FlexWrapper = (props) => {
diff --git a/client/src/shared/components/CustomInput/CustomInput.jsx b/client/src/shared/components/Formik/CustomInput/CustomInput.jsx
similarity index 90%
rename from client/src/shared/components/CustomInput/CustomInput.jsx
rename to client/src/shared/components/Formik/CustomInput/CustomInput.jsx
index 6cbd1cd42..4efe10cda 100644
--- a/client/src/shared/components/CustomInput/CustomInput.jsx
+++ b/client/src/shared/components/Formik/CustomInput/CustomInput.jsx
@@ -2,9 +2,9 @@ import React from 'react'
 import Box from '@mui/material/Box'
 import { useField } from 'formik'
 
-import AlertIcon from '../../../assets/Inputs/AlertIcon'
-import { formatDateInput } from '../../../utils/formatDateString'
-import { ErrorMessage, Label } from '../../styles/Tpography.styles'
+import AlertIcon from '../../../../assets/Inputs/AlertIcon'
+import { formatDateInput } from '../../../../utils/formatDateString'
+import { ErrorMessage, Label } from '../../../styles/Tpography.styles'
 
 import { IconSpan, Input, InputWrapper } from './CustomInput.styles'
 
diff --git a/client/src/shared/components/CustomInput/CustomInput.styles.js b/client/src/shared/components/Formik/CustomInput/CustomInput.styles.js
similarity index 88%
rename from client/src/shared/components/CustomInput/CustomInput.styles.js
rename to client/src/shared/components/Formik/CustomInput/CustomInput.styles.js
index f0d466ea1..70b79ca47 100644
--- a/client/src/shared/components/CustomInput/CustomInput.styles.js
+++ b/client/src/shared/components/Formik/CustomInput/CustomInput.styles.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import { WHITE } from '../../../constants/colors'
-import { shake } from '../../styles/KeyFrames.styles'
+import { WHITE } from '../../../../constants/colors'
+import { shake } from '../../../styles/KeyFrames.styles'
 
 export const InputWrapper = styled.div`
   position: relative;
@@ -17,7 +17,7 @@ export const IconSpan = styled.span`
 export const Input = styled.input`
   outline: 0;
   border-width: 0 0 1.5px;
-  border-color: ${(props) => props.borderColor || '#4b4b4b'};
+  border-color: ${(props) => props.borderColor || '#8F9094'};
   background: inherit;
   width: ${(props) => props.inputWidth};
   height: ${(props) => props.height || '2.375rem'};
diff --git a/client/src/shared/components/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx b/client/src/shared/components/Formik/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx
similarity index 97%
rename from client/src/shared/components/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx
rename to client/src/shared/components/Formik/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx
index ddf0762d9..4cc29735a 100644
--- a/client/src/shared/components/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx
+++ b/client/src/shared/components/Formik/CustomRadioButtonsGroup/CustomRadioButtonsGroup.jsx
@@ -5,8 +5,8 @@ import Sheet from '@mui/joy/Sheet'
 import Stack from '@mui/material/Stack'
 import { useField, useFormikContext } from 'formik'
 
-import { GREEN, WHITE } from '../../../constants/colors'
-import { ErrorMessage } from '../../styles/Tpography.styles'
+import { GREEN, WHITE } from '../../../../constants/colors'
+import { ErrorMessage } from '../../../styles/Tpography.styles'
 
 const CustomRadioButtonsGroup = ({ options, ...props }) => {
   const [field, meta] = useField(props)
diff --git a/client/src/shared/components/CustomSelect/CustomSelect.jsx b/client/src/shared/components/Formik/CustomSelect/CustomSelect.jsx
similarity index 76%
rename from client/src/shared/components/CustomSelect/CustomSelect.jsx
rename to client/src/shared/components/Formik/CustomSelect/CustomSelect.jsx
index 53b89127a..340543305 100644
--- a/client/src/shared/components/CustomSelect/CustomSelect.jsx
+++ b/client/src/shared/components/Formik/CustomSelect/CustomSelect.jsx
@@ -2,8 +2,8 @@ import React from 'react'
 import FormControl from '@mui/material/FormControl'
 import { useField } from 'formik'
 
-import { Item } from '../../../components/Teammates/components/SelectField/SelectField.styles'
-import { ErrorMessage, Label, Text } from '../../styles/Tpography.styles'
+import { Item } from '../../../../components/Teammates/components/SelectField/SelectField.styles'
+import { ErrorMessage, Label, Text } from '../../../styles/Tpography.styles'
 
 import { Line, MenuProps, SelectCustom } from './CustomSelect.styles'
 
@@ -37,13 +37,6 @@ const CustomSelect = ({
         $isError={isError}
         MenuProps={MenuProps}
         id={field.name}
-        // renderValue={(selected) => {
-        //   if (selected.length === 0) {
-        //     return <PlaceholderText>{placeholder}</PlaceholderText>
-        //   }
-        //
-        //   return selected
-        // }}
       >
         {options.map(({ label }) => (
           <Item key={label} value={label}>
diff --git a/client/src/shared/components/CustomSelect/CustomSelect.styles.js b/client/src/shared/components/Formik/CustomSelect/CustomSelect.styles.js
similarity index 93%
rename from client/src/shared/components/CustomSelect/CustomSelect.styles.js
rename to client/src/shared/components/Formik/CustomSelect/CustomSelect.styles.js
index 3ce817897..878236c68 100644
--- a/client/src/shared/components/CustomSelect/CustomSelect.styles.js
+++ b/client/src/shared/components/Formik/CustomSelect/CustomSelect.styles.js
@@ -2,8 +2,8 @@ import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import styled from 'styled-components'
 
-import { GREEN, GREY, WHITE } from '../../../constants/colors'
-import { shake } from '../../styles/KeyFrames.styles'
+import { GREEN, GREY, WHITE } from '../../../../constants/colors'
+import { shake } from '../../../styles/KeyFrames.styles'
 
 export const SelectCustom = styled(Select)`
   animation-name: ${(props) => (!props.$isError ? 'none' : shake)};
@@ -11,7 +11,7 @@ export const SelectCustom = styled(Select)`
   background: none;
   height: 45px;
   border: none;
-  fontsize: 18px;
+  font-size: 18px;
   color: ${WHITE.main};
   width: 100%;
 
@@ -79,7 +79,7 @@ export const MenuProps = {
       background: GREY.selectBackground,
       boxSizing: 'border-box',
       padding: '0 5px',
-      margin: '5px 0',
+      margin: '12px 0',
       borderRadius: '5px',
       color: WHITE.main,
       overflow: 'auto',
diff --git a/client/src/shared/components/CustomSelect/components/SelectValue.jsx b/client/src/shared/components/Formik/CustomSelect/components/SelectValue.jsx
similarity index 100%
rename from client/src/shared/components/CustomSelect/components/SelectValue.jsx
rename to client/src/shared/components/Formik/CustomSelect/components/SelectValue.jsx
diff --git a/client/src/shared/components/CustomSelect/components/SelectValue.styles.js b/client/src/shared/components/Formik/CustomSelect/components/SelectValue.styles.js
similarity index 100%
rename from client/src/shared/components/CustomSelect/components/SelectValue.styles.js
rename to client/src/shared/components/Formik/CustomSelect/components/SelectValue.styles.js
diff --git a/client/src/shared/components/CustomTextArea/CustomTextArea.jsx b/client/src/shared/components/Formik/CustomTextArea/CustomTextArea.jsx
similarity index 89%
rename from client/src/shared/components/CustomTextArea/CustomTextArea.jsx
rename to client/src/shared/components/Formik/CustomTextArea/CustomTextArea.jsx
index 075468dce..1fc88b6ac 100644
--- a/client/src/shared/components/CustomTextArea/CustomTextArea.jsx
+++ b/client/src/shared/components/Formik/CustomTextArea/CustomTextArea.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Stack from '@mui/material/Stack'
 import { useField, useFormikContext } from 'formik'
 
-import { ErrorMessage, Label } from '../../styles/Tpography.styles'
+import { ErrorMessage, Label } from '../../../styles/Tpography.styles'
 
 import { TextArea, TextAreaWrapper, TextLimitContainer } from './CustomTextArea.styles'
 
@@ -31,7 +31,7 @@ const CustomTextArea = ({ label, options, maxLength, margin, ...props }) => {
         {isError && <ErrorMessage>{meta.error}</ErrorMessage>}
         <TextLimitContainer>
           <Label>
-            {values.description.length}/{maxLength}
+            {values?.description.length}/{maxLength}
           </Label>
         </TextLimitContainer>
       </Stack>
diff --git a/client/src/shared/components/CustomTextArea/CustomTextArea.styles.js b/client/src/shared/components/Formik/CustomTextArea/CustomTextArea.styles.js
similarity index 82%
rename from client/src/shared/components/CustomTextArea/CustomTextArea.styles.js
rename to client/src/shared/components/Formik/CustomTextArea/CustomTextArea.styles.js
index 2dffc4dc8..aeb235168 100644
--- a/client/src/shared/components/CustomTextArea/CustomTextArea.styles.js
+++ b/client/src/shared/components/Formik/CustomTextArea/CustomTextArea.styles.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import { WHITE } from '../../../constants/colors'
-import { shake } from '../../styles/KeyFrames.styles'
+import { WHITE } from '../../../../constants/colors'
+import { shake } from '../../../styles/KeyFrames.styles'
 
 export const TextAreaWrapper = styled.div`
   width: 100%;
@@ -9,7 +9,7 @@ export const TextAreaWrapper = styled.div`
 `
 
 export const TextArea = styled.textarea`
-  margin-top: 10px;
+  margin-top: ${(props) => props.marginTop || `10px`};
   height: 180px;
   width: 100%;
   padding: 12px 20px;
diff --git a/client/src/shared/components/IconWrapper/IconWrapper.js b/client/src/shared/components/IconWrapper/IconWrapper.js
new file mode 100644
index 000000000..535a61cd2
--- /dev/null
+++ b/client/src/shared/components/IconWrapper/IconWrapper.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledIconWrapper = styled.div`
+  cursor: ${(props) => props.cursor || 'default'};
+  width: ${(props) => props.width || 'auto'};
+  height: ${(props) => props.height || 'auto'};
+  padding: ${(props) => props.padding || 0};
+  margin: ${(props) => props.margin || 0};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    width: ${(props) => props.width || 'auto'};
+    height: ${(props) => props.height || 'auto'};
+  }
+`
+
+const IconWrapper = (props) => {
+  return <StyledIconWrapper {...props} />
+}
+
+export default IconWrapper
diff --git a/client/src/shared/components/Loader/Loader.js b/client/src/shared/components/Loader/Loader.js
index 5bea45c9c..767f36f4d 100644
--- a/client/src/shared/components/Loader/Loader.js
+++ b/client/src/shared/components/Loader/Loader.js
@@ -14,14 +14,15 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
   background: ${BLACK.background};
+  padding-left: ${(props) => props.paddingLeft || '0'};
 `
 
-const Loader = () => {
+const Loader = ({ paddingLeft = '0' }) => {
   return (
-    <Container>
+    <Container paddingLeft={paddingLeft}>
       <InfinitySpin width="200" color="#4fa94d" />
     </Container>
   )
diff --git a/client/src/shared/components/SearchPanel/SearchPanel.js b/client/src/shared/components/SearchPanel/SearchPanel.js
new file mode 100644
index 000000000..2987b8b0c
--- /dev/null
+++ b/client/src/shared/components/SearchPanel/SearchPanel.js
@@ -0,0 +1,27 @@
+import FilterSelect from '../../../components/FilterSelect/FilterSelect'
+import Search from '../../../components/Search/Search'
+import TagsList from '../../../components/TagsList/TagsList'
+
+import { SearchPanelWrapper, StyledSearchPanel } from './SearchPanel.style'
+
+const SearchPanel = ({ sliceName, currFilterIndex, setCurrFilterIndex, setFilterValueAction }) => {
+  return (
+    <StyledSearchPanel>
+      <SearchPanelWrapper>
+        <FilterSelect
+          sliceName={sliceName}
+          currFilterIndex={currFilterIndex}
+          setCurrFilterIndex={setCurrFilterIndex}
+        />
+        <Search
+          sliceName={sliceName}
+          currFilterIndex={currFilterIndex}
+          setFilterValueAction={setFilterValueAction}
+        />
+      </SearchPanelWrapper>
+      <TagsList sliceName={sliceName} setFilterValueAction={setFilterValueAction} />
+    </StyledSearchPanel>
+  )
+}
+
+export default SearchPanel
diff --git a/client/src/shared/components/SearchPanel/SearchPanel.style.js b/client/src/shared/components/SearchPanel/SearchPanel.style.js
new file mode 100644
index 000000000..efb4e2476
--- /dev/null
+++ b/client/src/shared/components/SearchPanel/SearchPanel.style.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+
+export const StyledSearchPanel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 1176px;
+  min-height: 40px;
+  color: white;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  @media screen and (max-width: 1440px) {
+    max-width: 826px;
+  }
+  @media screen and (max-width: 1024px) {
+    max-width: 790px;
+  }
+
+  @media screen and (max-width: 900px) {
+    max-width: 546px;
+  }
+`
+
+export const SearchPanelWrapper = styled.div`
+  display: flex;
+  border: 1px solid #46a11b;
+  border-radius: 10px;
+  @media (max-width: 768px) {
+    display: none;
+  }
+  & > div:last-child {
+    border: none;
+    border-radius: 0 10px 10px 0;
+  }
+`
diff --git a/client/src/components/Teammates/components/SliderToTop/SliderToTop.jsx b/client/src/shared/components/SliderToTop/SliderToTop.jsx
similarity index 75%
rename from client/src/components/Teammates/components/SliderToTop/SliderToTop.jsx
rename to client/src/shared/components/SliderToTop/SliderToTop.jsx
index 393a58f05..7a462e672 100644
--- a/client/src/components/Teammates/components/SliderToTop/SliderToTop.jsx
+++ b/client/src/shared/components/SliderToTop/SliderToTop.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { animateScroll as scroll } from 'react-scroll'
 
 // * Assets
-import Slider from '../../../../assets/Shared/Slider'
+import Slider from '../../../assets/Shared/Slider'
 
 // * Styles
 import {
@@ -48,17 +48,18 @@ const SliderToTop = ({ scrollbar, toggleScrollbar }) => {
     return () => window.removeEventListener('scroll', listenToScroll)
   }, [])
 
-  const accesibilityWindow = (
-    <AccessibilityWindow show={accessibility}>
-      {accesibilityMenu.map((option) => {
-        return (
-          <ScrollbarOn key={option} onClick={toggleScrollbar} isOn={scrollbar}>
-            {option}
-          </ScrollbarOn>
-        )
-      })}
-    </AccessibilityWindow>
-  )
+  // ! TODO: FIX STRANGE WIDTH ON MOBILES
+  // const accesibilityWindow = (
+  //   <AccessibilityWindow show={accessibility}>
+  //     {accesibilityMenu.map((option) => {
+  //       return (
+  //         <ScrollbarOn key={option} onClick={toggleScrollbar} isOn={scrollbar}>
+  //           {option}
+  //         </ScrollbarOn>
+  //       )
+  //     })}
+  //   </AccessibilityWindow>
+  // )
 
   return (
     <>
@@ -71,7 +72,7 @@ const SliderToTop = ({ scrollbar, toggleScrollbar }) => {
           <AccessibilityContainer show={accessibility} onClick={toggleAccessibility}>
             ?
           </AccessibilityContainer>
-          {accesibilityWindow}
+          {/* {accesibilityWindow} */}
         </>
       )}
     </>
diff --git a/client/src/components/Teammates/components/SliderToTop/SliderToTop.styles.js b/client/src/shared/components/SliderToTop/SliderToTop.styles.js
similarity index 100%
rename from client/src/components/Teammates/components/SliderToTop/SliderToTop.styles.js
rename to client/src/shared/components/SliderToTop/SliderToTop.styles.js
diff --git a/client/src/shared/components/Tag/Tag.js b/client/src/shared/components/Tag/Tag.js
new file mode 100644
index 000000000..a62176626
--- /dev/null
+++ b/client/src/shared/components/Tag/Tag.js
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+const StyledTag = styled.div`
+  font-family: 'Rubik';
+  cursor: pointer;
+  padding: 6px 8px;
+  background: #2f3239;
+  border-radius: 5px;
+  font-size: 14px;
+  line-height: 120%;
+  border-radius: 5px;
+  color: #c1c1c4;
+`
+
+const Tag = (props) => {
+  return <StyledTag {...props} />
+}
+
+export default Tag
diff --git a/client/src/store/reducers/Shared.js b/client/src/store/reducers/Shared.js
index c62d59454..3ccd930f0 100644
--- a/client/src/store/reducers/Shared.js
+++ b/client/src/store/reducers/Shared.js
@@ -2,12 +2,6 @@ import { createSlice } from '@reduxjs/toolkit'
 
 const initialState = {
   isModalOpen: false,
-  filters: {
-    countries: [],
-    roles: [],
-    languages: [],
-    frameworks: [],
-  },
 }
 
 const sharedSlice = createSlice({
@@ -17,12 +11,9 @@ const sharedSlice = createSlice({
     setIsModalOpen: (state, action) => {
       state.isModalOpen = action.payload
     },
-    setFilters: (state, action) => {
-      state.filters = action.payload
-    },
   },
 })
 
-export const { setIsModalOpen, setFilters } = sharedSlice.actions
+export const { setIsModalOpen } = sharedSlice.actions
 
 export default sharedSlice.reducer
diff --git a/client/src/store/reducers/TeamsFiltersSlice.js b/client/src/store/reducers/TeamsFiltersSlice.js
new file mode 100644
index 000000000..19fd710b1
--- /dev/null
+++ b/client/src/store/reducers/TeamsFiltersSlice.js
@@ -0,0 +1,82 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+/*
+
+interface ITextFilter {
+  name: string;
+  text: string;
+  type: 'text';
+  value: string;
+}
+
+interface IChecksItem {
+  label: string;
+  value: string;
+}
+
+interface IChecksFilter {
+  name: string;
+  text: string;
+  type: 'checks';
+  value: IChecksItem[];
+}
+
+interface IRangeFilter {
+  name: string;
+  text: string;
+  type: 'range';
+  min: number;
+  max: number;
+  value: null | [number, number];
+}
+
+initialState: (ITextFilter | IChecksFilter | IRangeFilter)[]
+
+*/
+
+const initialState = [
+  {
+    name: 'name',
+    text: 'Name',
+    type: 'text',
+    value: '',
+  },
+  {
+    name: 'tag',
+    text: 'Tag',
+    type: 'text',
+    value: '',
+  },
+  {
+    name: 'countries',
+    text: 'Countries',
+    type: 'checks',
+    value: [],
+  },
+  // {
+  //   name: 'people',
+  //   text: 'People',
+  //   type: 'range',
+  //   min: 1,
+  //   max: 8,
+  //   value: null,
+  // },
+]
+
+const teamsFiltersSlice = createSlice({
+  name: 'teamsFilters',
+  initialState,
+  reducers: {
+    setTeamsFilter(state, action) {
+      const { index, value } = action.payload
+
+      state[index].value = value
+    },
+  },
+})
+
+const { reducer, actions } = teamsFiltersSlice
+
+export default reducer
+
+export const { setTeamsFilter } = actions
diff --git a/client/src/store/reducers/UsersFiltersSlice.js b/client/src/store/reducers/UsersFiltersSlice.js
new file mode 100644
index 000000000..259f8fded
--- /dev/null
+++ b/client/src/store/reducers/UsersFiltersSlice.js
@@ -0,0 +1,94 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+/*
+
+interface ITextFilter {
+  name: string;
+  text: string;
+  type: 'text';
+  value: string;
+}
+
+interface IChecksItem {
+  label: string;
+  value: string;
+}
+
+interface IChecksFilter {
+  name: string;
+  text: string;
+  type: 'checks';
+  value: IChecksItem[];
+}
+
+interface IRangeFilter {
+  name: string;
+  text: string;
+  type: 'range';
+  min: number;
+  max: number;
+  value: null | [number, number];
+}
+
+initialState: (ITextFilter | IChecksFilter | IRangeFilter)[]
+
+*/
+
+const initialState = [
+  {
+    name: 'name',
+    text: 'Name',
+    type: 'text',
+    value: '',
+  },
+  {
+    name: 'countries',
+    text: 'Countries',
+    type: 'checks',
+    value: [],
+  },
+  {
+    name: 'languages',
+    text: 'Languages',
+    type: 'checks',
+    value: [],
+  },
+  // {
+  //   name: 'people',
+  //   text: 'People',
+  //   type: 'range',
+  //   min: 1,
+  //   max: 8,
+  //   value: null,
+  // },
+  {
+    name: 'frameworks',
+    text: 'Frameworks',
+    type: 'checks',
+    value: [],
+  },
+  {
+    name: 'concentrations',
+    text: 'Concentrations',
+    type: 'checks',
+    value: [],
+  },
+]
+
+const usersFiltersSlice = createSlice({
+  name: 'usersFilters',
+  initialState,
+  reducers: {
+    setUsersFilter(state, action) {
+      const { index, value } = action.payload
+
+      state[index].value = value
+    },
+  },
+})
+
+const { reducer, actions } = usersFiltersSlice
+
+export default reducer
+
+export const { setUsersFilter } = actions
diff --git a/client/src/store/store.js b/client/src/store/store.js
index 2773e5c7a..a79f258c1 100644
--- a/client/src/store/store.js
+++ b/client/src/store/store.js
@@ -2,12 +2,16 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit'
 
 import registrationReducer from './reducers/RegistrationAuth'
 import sharedReducer from './reducers/Shared'
+import teamsFilters from './reducers/TeamsFiltersSlice'
 import userReducer from './reducers/UserAuth'
+import usersFilters from './reducers/UsersFiltersSlice'
 
 const rootReducer = combineReducers({
   userReducer,
   registrationReducer,
   sharedReducer,
+  usersFilters,
+  teamsFilters,
 })
 
 export const setupStore = () => {
diff --git a/client/src/utils/checkEntriesForValue.js b/client/src/utils/checkEntriesForValue.js
new file mode 100644
index 000000000..1c591e34b
--- /dev/null
+++ b/client/src/utils/checkEntriesForValue.js
@@ -0,0 +1,12 @@
+export default function checkEntriesForValue(data) {
+  for (const entry of data) {
+    if (
+      (typeof entry.value === 'string' && entry.value !== '') ||
+      (Array.isArray(entry.value) && entry.value.length > 0)
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
diff --git a/client/src/utils/determineUserRoleInTeam.js b/client/src/utils/determineUserRoleInTeam.js
new file mode 100644
index 000000000..2f3797d9b
--- /dev/null
+++ b/client/src/utils/determineUserRoleInTeam.js
@@ -0,0 +1,10 @@
+export const determineUserRoleInTeam = (team, user) => {
+  switch (true) {
+    case team?.leader._id === user?._id:
+      return 'leader'
+    case team?.members.some((member) => member?._id === user?._id):
+      return 'member'
+    default:
+      return 'regular'
+  }
+}
diff --git a/client/src/utils/filteredQueryMaker.js b/client/src/utils/filteredQueryMaker.js
index 450372f1a..eb44536e3 100644
--- a/client/src/utils/filteredQueryMaker.js
+++ b/client/src/utils/filteredQueryMaker.js
@@ -1,10 +1,11 @@
-const users = (countries, roles, programmingLanguages, frameworks) => {
+const users = (countries, concentrations, programmingLanguages, frameworks, name) => {
   const querySearch = {
     isRegistered: true,
     country: countries.length ? { $in: countries } : null,
-    concentration: roles?.length ? { $in: roles } : null,
+    concentration: concentrations?.length ? { $in: concentrations } : null,
     programmingLanguages: programmingLanguages?.length ? { $in: programmingLanguages } : null,
     frameworks: frameworks?.length ? { $in: frameworks } : null,
+    fullName: name ? { $regex: name, $options: 'i' } : null,
   }
   const querySearchWithOutBlankFields = Object.fromEntries(
     Object.entries(querySearch).filter(([_, v]) => v != null),
diff --git a/client/src/utils/getCountryFlag.js b/client/src/utils/getCountryFlag.js
new file mode 100644
index 000000000..332645e54
--- /dev/null
+++ b/client/src/utils/getCountryFlag.js
@@ -0,0 +1,15 @@
+import { countryFlags } from '../constants/countryFlags'
+
+export const getCountryFlag = (countryName) => {
+  // Loop through the countryFlags object
+  for (const countryCode in countryFlags) {
+    const country = countryFlags[countryCode]
+
+    // Check if the name matches the desired country
+    if (country.name === countryName) {
+      const imageURL = country.image
+
+      return imageURL // Exit the loop since we found the desired country
+    }
+  }
+}
diff --git a/client/src/utils/getServedProfilepic.js b/client/src/utils/getServedProfilepic.js
new file mode 100644
index 000000000..ae9ee17b6
--- /dev/null
+++ b/client/src/utils/getServedProfilepic.js
@@ -0,0 +1,12 @@
+import { defaultTeamImages } from '../constants/images'
+
+export const getServedProfilePic = (selectedImage, picture, imgData) => {
+  // if we have a default, choose default
+  if (selectedImage !== '') {
+    return require(`../assets/Images/team/${defaultTeamImages[selectedImage]}.png`)
+  }
+
+  if (picture !== null) {
+    return imgData
+  }
+}
diff --git a/client/src/utils/normalizeFilters.js b/client/src/utils/normalizeFilters.js
new file mode 100644
index 000000000..f38dd5be7
--- /dev/null
+++ b/client/src/utils/normalizeFilters.js
@@ -0,0 +1,13 @@
+export const normalizeFilters = (filters) => {
+  const result = {}
+
+  filters.forEach((entry) => {
+    if (Array.isArray(entry.value)) {
+      result[entry.name] = entry.value.map((item) => item.label)
+    } else {
+      result[entry.name] = entry.value
+    }
+  })
+
+  return result
+}
diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
index 8bf98718a..37ae49cce 100644
--- a/server/src/auth/auth.service.ts
+++ b/server/src/auth/auth.service.ts
@@ -200,6 +200,7 @@ export class AuthService {
 	 * @returns { ...tokens, user }
 	 */
 	async refresh(refreshToken: string): Promise<AuthResponseDto> {
+		console.log(refreshToken);
 		if (!refreshToken) {
 			throw new HttpException(
 				`No refresh token was found in the request`,
@@ -213,6 +214,8 @@ export class AuthService {
 		);
 		const tokenFromDb = await this.tokensService.findToken(refreshToken);
 
+		console.log(tokenFromDb);
+
 		/* It's checking if the user & token exists. */
 		if (!userData || !tokenFromDb) {
 			throw new HttpException(
diff --git a/server/src/main.ts b/server/src/main.ts
index 4f5efcebe..33d5590a3 100644
--- a/server/src/main.ts
+++ b/server/src/main.ts
@@ -1,12 +1,12 @@
 import { NestFactory } from '@nestjs/core';
 import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
+import * as bodyParser from 'body-parser';
 // import { JwtAuthGuard } from "./auth/jwt-auth.guard";
 // import { ValidationPipe } from "./pipes/validation.pipe";
 import cookieParser from 'cookie-parser';
 import { AsyncApiDocumentBuilder, AsyncApiModule } from 'nestjs-asyncapi';
 
 import { AppModule } from './app.module';
-import { ValidationPipe } from './pipes/validation.pipe';
 
 async function start(): Promise<void> {
 	try {
@@ -21,6 +21,9 @@ async function start(): Promise<void> {
 			origin: [process.env.CLIENT_URL, process.env.LANDING_URL],
 		});
 
+		app.use(bodyParser.json({ limit: '10mb' }));
+		app.use(bodyParser.urlencoded({ limit: '10mb', extended: true }));
+
 		app.setGlobalPrefix('/api');
 		app.use(cookieParser());
 		const config = new DocumentBuilder()
diff --git a/server/src/maintenance/maintenance.service.ts b/server/src/maintenance/maintenance.service.ts
index 5c1f5679d..35d4f5039 100644
--- a/server/src/maintenance/maintenance.service.ts
+++ b/server/src/maintenance/maintenance.service.ts
@@ -159,7 +159,7 @@ export class MaintenanceService {
 			max: 65,
 			mode: 'age',
 		})),
-			(initialUser.description = faker.lorem.sentence());
+			(initialUser.description = this.generateDescription(230));
 		initialUser.concentration = faker.name.jobTitle();
 		initialUser.country = faker.address.country();
 		initialUser.experience = `${faker.datatype.number({
diff --git a/server/src/notifications/notifications.gateway.ts b/server/src/notifications/notifications.gateway.ts
index dd627d084..b57ae59d4 100644
--- a/server/src/notifications/notifications.gateway.ts
+++ b/server/src/notifications/notifications.gateway.ts
@@ -71,6 +71,7 @@ export class NotificationsGateway
 				`Client ${client.id} subscribed to notifications for user ${user.id}`,
 			);
 		} catch (e) {
+			console.log('error here!');
 			console.log(e.message);
 			this.server.emit(`subscribeToNotificationsError`, e.message);
 			this.handleDisconnect(client);
diff --git a/server/src/teams/teams.controller.ts b/server/src/teams/teams.controller.ts
index 2833ee1a0..8ac96113d 100644
--- a/server/src/teams/teams.controller.ts
+++ b/server/src/teams/teams.controller.ts
@@ -24,7 +24,6 @@ import { InviteToTeamResponseDto } from './dto/invite-to-team.response.dto';
 import { TeamMembershipDTO } from './dto/membership.dto';
 import { Results } from './dto/results.dto';
 import { StatusResponseDto } from './dto/status-response.dto';
-import { TeamSearchDto } from './dto/team-search.dto';
 import { TransferLeaderDto } from './dto/transfer-leader.dto';
 import { UpdateTeamDto } from './dto/update-team.dto';
 import { UpdateTeamAvatarDto } from './dto/update-team-avatar.dto';
@@ -95,6 +94,15 @@ export class TeamsController {
 		);
 	}
 
+	@ApiOperation({
+		summary: 'Get all open type teams',
+	})
+	@ApiResponse({ status: 200, type: [Team] })
+	@Get('/all')
+	getAllTeams(): Promise<Team[]> {
+		return this.teamsService.getAllTeams();
+	}
+
 	@ApiOperation({
 		summary: 'Get team by id',
 	})
diff --git a/server/src/teams/teams.service.ts b/server/src/teams/teams.service.ts
index 165b74b1d..a2b8c6da3 100644
--- a/server/src/teams/teams.service.ts
+++ b/server/src/teams/teams.service.ts
@@ -157,10 +157,17 @@ export class TeamsService {
 	 * @returns A team object
 	 */
 	async getTeamById(id: mongoose.Types.ObjectId): Promise<Team> {
-		return await this.teamModel
-			.findById(id)
-			.populate('members')
-			.populate('leader');
+		try {
+			return await this.teamModel
+				.findById(id)
+				.populate('members')
+				.populate('leader');
+		} catch (err) {
+			throw new HttpException(
+				`Team with this id: ${id} not found`,
+				HttpStatus.BAD_REQUEST,
+			);
+		}
 	}
 
 	/**
@@ -202,6 +209,13 @@ export class TeamsService {
 		return updatedTeam;
 	}
 
+	async getAllTeams(): Promise<Team[]> {
+		return await this.teamModel
+			.find({ type: TeamType.OPEN })
+			.populate('members')
+			.populate('leader');
+	}
+
 	/**
 	 * This function retrieves a list of teams with their members and leader, based on a given page and
 	 * limit, and returns the results as a Promise.
@@ -257,8 +271,6 @@ export class TeamsService {
 		/* A type assertion. */
 		const results = {} as Results;
 
-		console.log(parsedQuery);
-
 		/* The above code is checking if the parsed query has a "members" property. If it does, it checks the
 		length of the "members" array. If the length is 1, it replaces the "members" property with a MongoDB
 		query that checks for the size of the "members" array. If the length is 2, it adds a ""
@@ -719,26 +731,39 @@ export class TeamsService {
 	 * @returns The updated team.
 	 */
 	async updateTeam(dto: UpdateTeamDto): Promise<Team> {
-		// check if dto has extra fields that we don't want to allow
-		const filteredDto = await teamUpdateValidate(dto);
+		try {
+			// check if dto has extra fields that we don't want to allow
+			const filteredDto = await teamUpdateValidate(dto);
 
-		const team = await this.getTeamById(dto.teamid);
+			const team = await this.getTeamById(dto.teamid);
 
-		if (!team) {
-			throw new HttpException(
-				`The team with id: ${dto.teamid} does not exist`,
-				HttpStatus.BAD_REQUEST,
-			);
-		}
+			if (!team) {
+				throw new HttpException(
+					`The team with id: ${dto.teamid} does not exist`,
+					HttpStatus.BAD_REQUEST,
+				);
+			}
 
-		/* Updating the team with the given teamid with the new data and returning the updated team. */
-		const updated = await this.teamModel.findOneAndUpdate(
-			{ _id: dto.teamid },
-			{ ...filteredDto },
-			{ new: true },
-		);
+			/* Updating the team with the given teamid with the new data and returning the updated team. */
+			const updated = await this.teamModel.findOneAndUpdate(
+				{ _id: dto.teamid },
+				{ ...filteredDto },
+				{ new: true },
+			);
 
-		return updated;
+			return updated;
+		} catch (error) {
+			if (error.name === 'MongoServerError' && error.code === 11000) {
+				// Handle the MongoDB error accordingly
+				throw new HttpException(
+					'This tag is already taken, please choose a different one.',
+					HttpStatus.BAD_REQUEST,
+				);
+			} else {
+				// Handle the regular error accordingly
+				throw new HttpException(error.message, HttpStatus.BAD_REQUEST);
+			}
+		}
 	}
 
 	/**
diff --git a/server/src/users/users.service.ts b/server/src/users/users.service.ts
index 58796e747..46cdead16 100644
--- a/server/src/users/users.service.ts
+++ b/server/src/users/users.service.ts
@@ -269,32 +269,43 @@ export class UsersService {
 		/* A type assertion. */
 		const results = {} as Results;
 
-		/* Getting the total number of users that match the query. */
-		results.total = await this.userModel
-			.find(parsedQuery as FilterQuery<any>)
-			.count();
+		try {
+			/* Getting the total number of users that match the query. */
+			results.total = await this.userModel
+				.find(parsedQuery as FilterQuery<any>)
+				.count();
 
-		/* Calculating the last page and the limit. */
-		results.last_page = Math.ceil(results.total / limit);
-		results.limit = limit;
+			/* Calculating the last page and the limit. */
+			results.last_page = Math.ceil(results.total / limit);
+			results.limit = limit;
 
-		/* Getting all the users that match the query, limiting the number of users to the limit, skipping the
+			/* Getting all the users that match the query, limiting the number of users to the limit, skipping the
 		users that are not on the current page, limiting the number of users to the limit, populating the
 		roles and executing the query. */
-		const users = await this.userModel
-			/* Casting the parsedQuery to FilterQuery<any> */
-			.find(parsedQuery as FilterQuery<any>)
-			.limit(limit)
-			.skip((page - 1) * limit)
-			.limit(limit)
-			.populate('roles')
-			.exec();
-
-		/* Setting the number of users on the current page and the data of the users. */
-		results.on_current_page = users.length;
-		results.data = users;
-		/* Returning the results object. */
-		return results;
+			const users = await this.userModel
+				/* Casting the parsedQuery to FilterQuery<any> */
+				.find(parsedQuery as FilterQuery<any>)
+				.limit(limit)
+				.skip((page - 1) * limit)
+				.limit(limit)
+				.populate('roles')
+				.exec();
+
+			/* Setting the number of users on the current page and the data of the users. */
+			results.on_current_page = users.length;
+			results.data = users;
+			/* Returning the results object. */
+			return results;
+		} catch (e) {
+			console.log(e.message);
+			results.total = 0;
+			results.data = [];
+			results.last_page = 0;
+			results.limit = 9;
+			results.on_current_page = 0;
+			results.page = 0;
+			return results;
+		}
 	}
 
 	/**
@@ -328,14 +339,41 @@ export class UsersService {
 			}
 		}
 
-		/* Updating the user with the given email with the new data and returning the updated user. */
-		const user = await this.userModel.findOneAndUpdate(
+		/* 
+		The above code is updating a user document in a MongoDB database using the Mongoose library. It
+		first filters the data to be updated using a spread operator and sets the "isRegistered" field to
+		true. Then it uses the "updateOne" method to update the document with the specified email. If the
+		update is successful (i.e., the modifiedCount is 1), it fetches the updated document using the
+		"findOne" method and returns it. If the update is not successful, it throws an HttpException with a
+		message indicating an error occurred while updating the user. 
+		
+		This approach gurantees data consistency as we would wait for update and then get full object back.
+		*/
+		const updateResult = await this.userModel.updateOne(
 			{ email: dto.email },
 			{ ...filtered, isRegistered: true },
-			{ new: true },
 		);
 
-		return user;
+		if (updateResult.modifiedCount === 1) {
+			// Fetch the updated document
+			const updatedDocument = await this.userModel.findOne({
+				email: dto.email,
+			});
+			return updatedDocument;
+		} else {
+			// Handle the case when the update was not successful
+			throw new HttpException(
+				`Error while updating user`,
+				HttpStatus.INTERNAL_SERVER_ERROR,
+			);
+		}
+		// const user = await this.userModel.findOneAndUpdate(
+		// 	{ email: dto.email },
+		// 	{ ...filtered, isRegistered: true },
+		// 	{ new: true },
+		// );
+
+		// return user;
 	}
 
 	/**