diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index f61e44e..56e5162 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -3,85 +3,87 @@ import ItemCard from '../../components/item-card/item-card.jsx';
 import Toast from '../../components/toast/Toast.jsx';
 import { Helper } from '../../utils/Helper.js';
 import useWorkshopsPage from './useWorkshopsPage.js';
-import './workshops.css'
+import './workshops.css';
 
 export default function WorkshopsPage() {
+  const {
+    parsedItemsList,
+    addToCart,
+    gridTemplateColumnsValue,
+    toastData,
+    setOpenToast,
+    openToast,
+    options,
+    filterOption,
+    setFilterOption,
+    fileteredItems,
+    setFileteredItems,
+  } = useWorkshopsPage();
 
-    const {
-        parsedItemsList,
-        addToCart,
-        gridTemplateColumnsValue,
-        toastData,
-        setOpenToast,
-        openToast,
-        options,
-        filterOption,
-        setFilterOption,
-        fileteredItems,
-        setFileteredItems
-    } = useWorkshopsPage()
+  const handleFilterChange = (option) => {
+    setFilterOption(option);
 
-
-    const handleFilterChange = (option) => {
-            setFilterOption(option)
-
-            if (option == "All Items"){
-                setFileteredItems(parsedItemsList)
-            }
-
-            else if (option == 'Workshops'){
-                setFileteredItems(parsedItemsList?.filter(item => item.isWorkshop))
-            }
-
-            else if (option == 'Presentations'){
-                setFileteredItems(parsedItemsList?.filter(item => !item.isWorkshop))
-            }
+    if (option == 'All Items') {
+      setFileteredItems(parsedItemsList);
+    } else if (option == 'Workshops') {
+      setFileteredItems(parsedItemsList?.filter((item) => item.isWorkshop));
+    } else if (option == 'Presentations') {
+      setFileteredItems(parsedItemsList?.filter((item) => !item.isWorkshop));
     }
+  };
 
-    return (
-        <section style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          gap: '20px',
-        }}>
-            {toastData && <Toast
-                open={openToast}
-                setOpen={setOpenToast}
-                alertType={toastData.type}
-                message={toastData.message}
-            />}
-            <div className="filter-dropdown-container">
-                <select  name="filter" id="" className="filter-dropdown-select"
-                    value={filterOption}
-                    onChange={(e) => handleFilterChange(e.target.value)}
-                >
-                     {options.map((option) => (
-                        <option key={option} value={option}>
-                        {option}
-                        </option>
-                     ))}
-                </select>
-            </div>
-            {fileteredItems && fileteredItems.map((e, index) => {
-                return (
-                    <ItemCard
-                        key={index}
-                        isWorkshop={e.isWorkshop}
-                        title={e.name}
-                        description={e.desc && Helper.omitLongString(e.desc, 50)}
-                        purchaseState={0}
-                        presenterName={e.presenters.join(", ")}
-                        startDate={new Date(e.start_date).toLocaleString()}
-                        endDate={new Date(e.end_date).toLocaleString()}
-                        level={e.level}
-                        onClickAddToCart={() => addToCart({
-                            id: e.id,
-                            type: e.isWorkshop ? "workshop" : "presentation"
-                        })}
-                    />
-                )
-            })}
-        </section>
-    )
+  return (
+    <section
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gap: '20px',
+      }}
+    >
+      {toastData && (
+        <Toast open={openToast} setOpen={setOpenToast} alertType={toastData.type} message={toastData.message} />
+      )}
+      <div className="filter-dropdown-container">
+        <select
+          name="filter"
+          id=""
+          className="filter-dropdown-select"
+          value={filterOption}
+          onChange={(e) => handleFilterChange(e.target.value)}
+        >
+          {options.map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+      {fileteredItems &&
+        fileteredItems.map((e, index) => {
+          return (
+            <ItemCard
+              key={index}
+              isWorkshop={e.isWorkshop}
+              title={e.name}
+              description={e.desc && Helper.omitLongString(e.desc, 50)}
+              purchaseState={0}
+              presenterName={e.presenters.join(', ')}
+              startDate={new Date(e.start_date).toLocaleString()}
+              endDate={new Date(e.end_date).toLocaleString()}
+              level={e.level}
+              capacity={e.capacity}
+              cost={e.cost}
+              onClickAddToCart={() =>
+                addToCart({
+                  id: e.id,
+                  type: e.isWorkshop ? 'workshop' : 'presentation',
+                })
+              }
+            />
+          );
+        })}
+      {!fileteredItems && <CircularProgress />}
+    </section>
+  );
 }
diff --git a/frontend/src/pages/workshops/useWorkshopsPage.js b/frontend/src/pages/workshops/useWorkshopsPage.js
index 01ebad7..5053bf9 100644
--- a/frontend/src/pages/workshops/useWorkshopsPage.js
+++ b/frontend/src/pages/workshops/useWorkshopsPage.js
@@ -2,30 +2,28 @@ import { useCallback, useEffect, useState } from 'react';
 import { useAPI } from '../../providers/APIProvider/APIProvider.jsx';
 
 export default function useWorkshopsPage() {
-    const {
-        getWorkshopsData,
-        workshopsData,
-        getPresentationsData,
-        presentationsData,
-        addToCartResponse,
-        addItemToCart,
-        teachersData,
-        getTeachersData,
-        presenterData,
-        getPresenterData,
-        setAddToCartResponse,
-    } = useAPI()
+  const {
+    getWorkshopsData,
+    workshopsData,
+    getPresentationsData,
+    presentationsData,
+    addToCartResponse,
+    addItemToCart,
+    teachersData,
+    getTeachersData,
+    presenterData,
+    getPresenterData,
+    setAddToCartResponse,
+  } = useAPI();
 
-    const options = ["All Items", "Workshops", "Presentations"]
+  const options = ['All Items', 'Workshops', 'Presentations'];
 
-    const [parsedItemsList, setParsedItemsList] = useState()
-    const [fileteredItems, setFileteredItems] = useState()
-    const [gridTemplateColumnsValue, setGridTemplateColumnsValue] = useState("")
-    const [toastData, setToastData] = useState(false)
-    const [openToast, setOpenToast] = useState(false)
-    const [filterOption, setFilterOption] = useState(options[0])
-
-    
+  const [parsedItemsList, setParsedItemsList] = useState();
+  const [fileteredItems, setFileteredItems] = useState();
+  const [gridTemplateColumnsValue, setGridTemplateColumnsValue] = useState('');
+  const [toastData, setToastData] = useState(false);
+  const [openToast, setOpenToast] = useState(false);
+  const [filterOption, setFilterOption] = useState(options[0]);
 
   useEffect(() => {
     const func = () => {
@@ -64,64 +62,65 @@ export default function useWorkshopsPage() {
     getPresenterData();
   }, [getPresentationsData, getWorkshopsData]);
 
-    useEffect(() => {
-        if (workshopsData == null
-          || presentationsData == null
-        || teachersData == null
-        || presenterData == null) return
+  useEffect(() => {
+    if (workshopsData == null || presentationsData == null || teachersData == null || presenterData == null) return;
 
-        const parsedData = workshopsData.concat(presentationsData).map(workshop => {
-            if ("is_full" in workshop && !("id" in workshop)) return null
-            if (workshop.year < 2023)
-              return
-            const item = {}
+    const parsedData = workshopsData
+      .concat(presentationsData)
+      .map((workshop) => {
+        if ('is_full' in workshop && !('id' in workshop)) return null;
+        if (workshop.year < 2023) return;
+        const item = {};
 
-            const presenters = []
-            if (workshop.teachers) {
-              workshop.teachers.forEach(item => {
-                presenters.push(teachersData.filter(el => el.id === item)[0].name);
-              })
-            } else {
-              workshop.presenters.forEach(item => {
-                presenters.push(presenterData.filter(el => el.id === item)[0].name);
-              })
-            }
-            item.presenters = presenters
+        const presenters = [];
+        if (workshop.teachers) {
+          workshop.teachers.forEach((item) => {
+            presenters.push(teachersData.filter((el) => el.id === item)[0].name);
+          });
+        } else {
+          workshop.presenters.forEach((item) => {
+            presenters.push(presenterData.filter((el) => el.id === item)[0].name);
+          });
+        }
+        item.presenters = presenters;
 
-            item["id"] = workshop.id
-            item["name"] = workshop.name
-            item["start_date"] = workshop.start_date
-            item["end_date"] = workshop.end_date
-            item["level"] = workshop.level
-            item["desc"] = workshop.desc
-            item["isWorkshop"] = !("presenters" in workshop)
-            return item
-        }).filter(e => e != null)
-        setParsedItemsList(parsedData)
-        setFileteredItems(parsedData)
-    }, [workshopsData, presentationsData, presenterData, teachersData])
+        item['id'] = workshop.id;
+        item['name'] = workshop.name;
+        item['start_date'] = workshop.start_date;
+        item['end_date'] = workshop.end_date;
+        item['level'] = workshop.level;
+        item['desc'] = workshop.desc;
+        item['isWorkshop'] = !('presenters' in workshop);
+        item['capacity'] = workshop.capacity;
+        item['cost'] = workshop.cost;
+        return item;
+      })
+      .filter((e) => e != null);
+    setParsedItemsList(parsedData);
+    setFileteredItems(parsedData);
+  }, [workshopsData, presentationsData, presenterData, teachersData]);
 
-    const addToCart = useCallback(({
-                                       id,
-                                       type
-                                   }) => {
-        addItemToCart({
-            id,
-            type,
-        })
-    }, [addItemToCart])
+  const addToCart = useCallback(
+    ({ id, type }) => {
+      addItemToCart({
+        id,
+        type,
+      });
+    },
+    [addItemToCart],
+  );
 
-    return {
-        parsedItemsList,
-        addToCart,
-        gridTemplateColumnsValue,
-        toastData,
-        setOpenToast,
-        openToast,
-        options,
-        filterOption,
-        setFilterOption,
-        fileteredItems,
-        setFileteredItems
-    }
+  return {
+    parsedItemsList,
+    addToCart,
+    gridTemplateColumnsValue,
+    toastData,
+    setOpenToast,
+    openToast,
+    options,
+    filterOption,
+    setFilterOption,
+    fileteredItems,
+    setFileteredItems,
+  };
 }