diff --git a/EUniversity/ClientApp/src/AppRoutes.js b/EUniversity/ClientApp/src/AppRoutes.js
index 0d01104..c10d841 100644
--- a/EUniversity/ClientApp/src/AppRoutes.js
+++ b/EUniversity/ClientApp/src/AppRoutes.js
@@ -13,6 +13,7 @@ import AdminSemesters from './components/Pages/AdminSemesters';
 import AdminSemester from "./components/Pages/AdminSemester";
 import AdminClasses from './components/Pages/AdminClasses';
 import AdminClass from './components/Pages/AdminClass';
+import ActivityTypes from './components/Pages/ActivityTypes';
 
 const AppRoutes = [
   {
@@ -83,6 +84,11 @@ const AppRoutes = [
     requireAuth: true,
     element: <AdminClass/>,
   },
+  {
+    path: '/activityTypes',
+    requireAuth: true,
+    element: <ActivityTypes/>,
+  },
   ...ApiAuthorzationRoutes
 ];
 
diff --git a/EUniversity/ClientApp/src/components/Header.jsx b/EUniversity/ClientApp/src/components/Header.jsx
index fb66127..71613d1 100644
--- a/EUniversity/ClientApp/src/components/Header.jsx
+++ b/EUniversity/ClientApp/src/components/Header.jsx
@@ -48,6 +48,10 @@ const Header = () => {
             to: "/classes",
             title: "Classes"
         },
+        {
+            to: "/activityTypes",
+            title: "Activity types"
+        },
     ];
 
     const adminNavList = [
@@ -79,6 +83,10 @@ const Header = () => {
             to: "/classes",
             title: "Classes"
         },
+        {
+            to: "/activityTypes",
+            title: "Activity types"
+        },
     ];
 
     const AuthNav = () => {
diff --git a/EUniversity/ClientApp/src/components/PageForm.jsx b/EUniversity/ClientApp/src/components/PageForm.jsx
index 61846c2..a144ad0 100644
--- a/EUniversity/ClientApp/src/components/PageForm.jsx
+++ b/EUniversity/ClientApp/src/components/PageForm.jsx
@@ -62,6 +62,7 @@ const PageForm = ({
                   
                   if (response.ok) {
                       const data = await response.json();
+                      console.log(data.items);
                       setItems(data.items);
                       setItemsPerPage(data.pageSize);
                       setTotalItems(data.totalItemsCount);
diff --git a/EUniversity/ClientApp/src/components/Pages/ActivityTypes.jsx b/EUniversity/ClientApp/src/components/Pages/ActivityTypes.jsx
new file mode 100644
index 0000000..1ed47d8
--- /dev/null
+++ b/EUniversity/ClientApp/src/components/Pages/ActivityTypes.jsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '../UI/Button';
+import { useAppSelector } from '../../store/store';
+import DeleteModal from '../DeleteModal';
+import PageForm from '../PageForm';
+import EditFormModal from '../EditFormModal';
+
+const ActivityTypes = () => {
+
+    const [activityTypes, setActivityTypes] = useState([]);
+    const [pageSize, setPageSize] = useState(10);
+    const [page, setPage] = useState(1);
+    const [isDeleteVisible, setIsDeleteVisible] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [sortingMethod, setSortingMethod] = useState(0);
+    const [isEditable, setIsEditable] = useState(false);
+    const [editedItem, setEditedItem] = useState(null);
+    const [deletedActivityType, setDeletedActivityType] = useState({
+        id: '',
+        name: ''
+    });
+    const navigate = useNavigate();
+    const isAdmin = useAppSelector(state => state.isAdmin.isAdmin);
+
+    const deleteActivityType = async(activityTypeId) => {
+        try {
+            const response = await fetch(`/api/activityTypes/${activityTypeId}`, {
+                method: "DELETE",
+                headers: {
+                    "Content-Type": "application/json",
+                }
+            });
+            if (response.ok) {
+                setIsDeleteVisible(false);
+            } else {
+                console.log('error');
+            }
+        } catch(error) {
+            console.log(error);
+        }
+    };
+
+    return (
+        <PageForm
+                setItems={setActivityTypes}
+                additionalComponents={
+                    <>
+                        <DeleteModal
+                            isVisible={isDeleteVisible}
+                            setIsVisible={setIsDeleteVisible}
+                            itemType = "group"
+                            deleteFunction = {deleteActivityType}
+                            deletedItem = {deletedActivityType}    
+                        />
+                        {
+                            editedItem
+                            ?    <EditFormModal
+                                    item={editedItem}
+                                    isEditable={isEditable}
+                                    setIsEditable={setIsEditable}
+                                    responseTitle="activityTypes"
+                                />
+                            : ""
+                        }
+                    </>
+                }
+                registerTitle="activityTypes"
+                tableBody={(
+                    activityTypes.map((item) => (
+                        <tr 
+                            key={item.id} className="cursor-pointer"
+                        >
+                            <td>{item.name}</td>
+                            {
+                            isAdmin
+                                ?   <>
+                                        <td><Button onClick = {e => 
+                                            {
+                                                e.stopPropagation();
+                                                setIsDeleteVisible(true);
+                                                setDeletedActivityType({id: item.id, name: item.name});
+                                            }}
+                                            >Delete ActivityType</Button></td>
+                                        <td>
+                                            <Button onClick = {e => 
+                                                {
+                                                    e.stopPropagation();
+                                                    setIsEditable(true);
+                                                    setEditedItem(item);
+                                                }}
+                                            >Edit ActivityType</Button>
+                                        </td>
+                                    </>
+                                :   ""
+                        }
+                        </tr>
+                    ))
+                )}
+                tableHead={(
+                    <tr>
+                        <th>Name</th>
+                        {
+                            isAdmin
+                                ?   <>
+                                        <th>Delete</th>
+                                        <th>Edit</th>
+                                    </>
+                                : ""
+                        }
+                    </tr>
+                )}
+                searchLink={`/api/activityTypes?Page=${page}&PageSize=${pageSize}&name=${inputValue}&sortingMode=${sortingMethod}`}
+                fetchLink={`/api/activityTypes?Page=${page}&PageSize=${pageSize}&sortingMode=${sortingMethod}`}
+                currentPage={page}
+                setCurrentPage={setPage}
+                itemsPerPage={pageSize}
+                setItemsPerPage={setPageSize}
+                inputValue={inputValue}
+                setInputValue={setInputValue}
+                isDeleteVisible={isDeleteVisible}
+                setSortingMethod={setSortingMethod}
+                sortingMethod={sortingMethod}
+                isEditVisible={isEditable}
+        />      
+    );
+};
+
+export default ActivityTypes;
\ No newline at end of file