diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 455b18d..6cae9a0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,7 +7,8 @@ import AddGroup from './views/coordinator/AddGroup'
 import AddStudent from './views/coordinator/AddStudent'
 import AddLeader from './views/coordinator/AddLeader'
 import Coordinator from './views/coordinator/Coordinator'
-import Groups from './views/coordinator/Groups'
+import CoordinatorGroups from './views/coordinator/CoordinatorGroups'
+import SupervisorGroups from './views/supervisor/SupervisorGroups'
 import Leaders from './views/coordinator/Leaders'
 import Students from './views/coordinator/Students'
 import Login from './views/Login'
@@ -42,7 +43,7 @@ function App() {
           <Route index element={<Login />} />
           <Route path="coordinator" element={<Coordinator />}>
             <Route index element={<Home />} />
-            <Route path="groups" element={<Groups />} />
+            <Route path="groups" element={<CoordinatorGroups />} />
             <Route path="groups/:id" element={<Group />} />
             <Route path="students" element={<Students />} />
             <Route path="leaders" element={<Leaders />} />
@@ -69,7 +70,7 @@ function App() {
           </Route>
           <Route path="supervisor" element={<Supervisor />}>
             <Route index element={<Navigate to="groups" />} />
-            <Route path="groups" element={<Groups />} />
+            <Route path="groups" element={<SupervisorGroups />} />
             <Route path="schedule" element={<SupervisorSchedules />} />
             <Route path="schedule/:id" element={<SupervisorSchedule />} />
           </Route>
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index d992936..1dfc535 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/frontend/src/components/TopBar.tsx
@@ -1,10 +1,10 @@
 import { NavLink } from 'react-router-dom'
 
-const TopBar = ({ routes }: { routes: { name: string; path: string }[] }) => {
+const TopBar = ({ routes, color }: { routes: { name: string; path: string }[]; color: string}, ) => {
   const linkClass = ({ isActive }: { isActive: boolean }) =>
     isActive ? 'underline font-bold' : ''
   return (
-    <div className="flex items-center bg-gray-300 py-6 px-10 shadow">
+    <div className={"flex items-center py-6 px-10 shadow " + color}>
       <h1 className="text-xl font-bold">System PRI</h1>
       <div className="flex ml-10 gap-3">
         {routes.map(({ path, name }) => (
diff --git a/frontend/src/views/coordinator/AddLeader.tsx b/frontend/src/views/coordinator/AddLeader.tsx
index 005705c..5e0c83a 100644
--- a/frontend/src/views/coordinator/AddLeader.tsx
+++ b/frontend/src/views/coordinator/AddLeader.tsx
@@ -83,7 +83,23 @@ const AddLeader = () => {
           <InputError>Email jest wymagany</InputError>
         )}
       </div>
-      {/* <div className="form-control">
+      <div className="form-control">
+        <label className="label" htmlFor="stationary_mode">
+          Tryb stacjonarny
+        </label>
+        <input
+          className="input input-bordered"
+          id="stationary_mode"
+          type="checkbox"
+          {...register('stationary_mode', {
+            required: true,
+          })}
+        />
+        {errors.email?.type === 'required' && (
+          <InputError>Email jest wymagany</InputError>
+        )}
+      </div>
+      <div className="form-control">
         <label className="label" htmlFor="limit_group">
           Limit grup
         </label>
@@ -99,7 +115,7 @@ const AddLeader = () => {
         {errors.limit_group?.type === 'pattern' && (
           <InputError>Limit grup musi być liczbą dodatnią</InputError>
         )}
-      </div> */}
+      </div>
       <button className="btn btn-success mt-4">Dodaj opiekuna</button>
     </form>
   )
diff --git a/frontend/src/views/coordinator/Coordinator.tsx b/frontend/src/views/coordinator/Coordinator.tsx
index e98344d..3e2cb1f 100644
--- a/frontend/src/views/coordinator/Coordinator.tsx
+++ b/frontend/src/views/coordinator/Coordinator.tsx
@@ -4,7 +4,7 @@ import TopBar from '../../components/TopBar'
 const Coordinator = () => {
   return (
     <>
-      <TopBar
+      <TopBar 
         routes={[
           { name: 'Home', path: '/coordinator/' },
           { name: 'Grupy', path: '/coordinator/groups' },
@@ -13,6 +13,7 @@ const Coordinator = () => {
           { name: 'Harmonogram', path: '/coordinator/schedule' },
           { name: 'Dostępność', path: '/coordinator/supervisors_availability' },
         ]}
+        color="bg-violet-400"
       />
       <div className="m-10">
         <Outlet />
diff --git a/frontend/src/views/coordinator/Groups.tsx b/frontend/src/views/coordinator/CoordinatorGroups.tsx
similarity index 100%
rename from frontend/src/views/coordinator/Groups.tsx
rename to frontend/src/views/coordinator/CoordinatorGroups.tsx
diff --git a/frontend/src/views/student/Student.tsx b/frontend/src/views/student/Student.tsx
index c5ff6a5..0ad0c66 100644
--- a/frontend/src/views/student/Student.tsx
+++ b/frontend/src/views/student/Student.tsx
@@ -9,6 +9,7 @@ const Student = () => {
           { name: 'Zapisy', path: '/student/enrollment' },
           { name: 'Harmonogram', path: '/student/schedule' },
         ]}
+        color="bg-gray-300"
       />
       <div className="m-10">
         <Outlet />
diff --git a/frontend/src/views/supervisor/Supervisor.tsx b/frontend/src/views/supervisor/Supervisor.tsx
index 6540b2b..b0f89bd 100644
--- a/frontend/src/views/supervisor/Supervisor.tsx
+++ b/frontend/src/views/supervisor/Supervisor.tsx
@@ -9,6 +9,7 @@ const Supervisor = () => {
           { name: 'Grupy', path: '/supervisor/groups' },
           { name: 'Harmonogram', path: '/supervisor/schedule' },
         ]}
+        color="bg-amber-300"
       />
       <div className="m-10">
         <Outlet />
diff --git a/frontend/src/views/supervisor/SupervisorGroups.tsx b/frontend/src/views/supervisor/SupervisorGroups.tsx
new file mode 100644
index 0000000..b8aa9e5
--- /dev/null
+++ b/frontend/src/views/supervisor/SupervisorGroups.tsx
@@ -0,0 +1,161 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+import { useMutation, useQuery } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+import useLocalStorageState from 'use-local-storage-state'
+import { deleteGroup, getGroups } from '../../api/groups'
+import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
+import { Link } from 'react-router-dom'
+
+const SupervisorGroups = () => {
+  let navigate = useNavigate()
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(10)
+  const [yearGroupId] = useLocalStorageState('yearGroupId')
+
+  const perPageOptions = [
+    {
+      value: 10,
+      label: '10 rekordów',
+    },
+    {
+      value: 20,
+      label: '20 rekordów',
+    },
+    {
+      value: 50,
+      label: '50 rekordów',
+    },
+    {
+      value: 1000,
+      label: 'Pokaż wszystkie',
+    },
+  ]
+
+  const {
+    isLoading: areGroupsLoading,
+    data: groups,
+    refetch: refetchGroups,
+  } = useQuery(['groups', page, perPage], () =>
+    getGroups({ year_group_id: Number(yearGroupId), page, per_page: perPage }),
+  )
+
+  const { mutate: mutateDelete } = useMutation(
+    'deleteGroup',
+    (index: number) => deleteGroup(index),
+    {
+      onSuccess: () => refetchGroups(),
+    },
+  )
+
+  useEffect(() => {
+    setPage(1)
+  }, [perPage])
+
+  if (areGroupsLoading) {
+    return <div>Ładowanie</div>
+  }
+  return (
+    <div>
+      <div className="flex items-center justify-between flex-col gap-3 md:flex-row md:gap-0">
+        <button
+          className="btn btn-success"
+          onClick={() => navigate('/coordinator/add-group')}
+        >
+          Dodaj nową grupę
+        </button>
+        <div className="flex">
+          <select className="select select-xs md:select-md select-bordered mr-3">
+            {perPageOptions.map(({ value, label }) => (
+              <option key={value} onClick={() => setPerPage(value)}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
+        <table className="min-w-full table table-compact">
+          <thead>
+            <tr className="bg-gray-50">
+              <th>Nazwa</th>
+              <th>Opiekun</th>
+              <th>Semestr 1</th>
+              <th>Semestr 2</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {groups?.data?.groups?.map(
+              ({
+                id,
+                name,
+                project_supervisor,
+                points_for_first_term,
+                points_for_second_term,
+              }) => (
+                <tr key={id}>
+                  <td>
+                    <Link
+                      to={`/coordinator/groups/${id}`}
+                      className="underline font-bold"
+                    >
+                      {name}
+                    </Link>
+                  </td>
+                  <td>
+                    {`${project_supervisor.first_name} ${project_supervisor.last_name}`}
+                  </td>
+                  <td>{points_for_first_term}</td>
+                  <td>{points_for_second_term}</td>
+                  <td>
+                    <button onClick={() => mutateDelete(id)}>
+                      <IconRemove />
+                    </button>
+                  </td>
+                </tr>
+              ),
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="w-full flex items-center justify-center mt-2">
+        <div className="btn-group">
+          <button
+            className="btn btn-outline"
+            onClick={() => setPage(page - 1)}
+            disabled={page === 1}
+          >
+            «
+          </button>
+          {[
+            ...Array(
+              groups?.data?.max_pages && groups?.data?.max_pages + 1,
+            ).keys(),
+          ]
+            .slice(1)
+            .map((p) => (
+              <button
+                key={p}
+                className={classNames('btn btn-outline', {
+                  'bg-success': p === page,
+                })}
+                onClick={() => setPage(p)}
+              >
+                {p}
+              </button>
+            ))}
+          <button
+            className="btn btn-outline"
+            onClick={() => setPage(page + 1)}
+            disabled={page === groups?.data?.max_pages}
+          >
+            »
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SupervisorGroups