diff --git a/frontend/src/css/workshops-page.css b/frontend/src/css/workshops-page.css
new file mode 100644
index 0000000..80b1872
--- /dev/null
+++ b/frontend/src/css/workshops-page.css
@@ -0,0 +1,13 @@
+#radio-container-workshops {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    margin-bottom: 30px;
+}
+
+@media only screen and (max-width: 500px) {
+    #radio-container-workshops {
+        flex-direction: column;
+
+    }
+}
diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index 56e5162..b841036 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,89 +1,129 @@
-import { CircularProgress } from '@mui/material';
+import {CircularProgress, FormControlLabel, FormLabel, Radio, RadioGroup} from '@mui/material';
+import "../../css/workshops-page.css"
 import ItemCard from '../../components/item-card/item-card.jsx';
 import Toast from '../../components/toast/Toast.jsx';
-import { Helper } from '../../utils/Helper.js';
+import {Helper} from '../../utils/Helper.js';
 import useWorkshopsPage from './useWorkshopsPage.js';
 import './workshops.css';
+import {useCallback} from "react";
 
 export default function WorkshopsPage() {
-  const {
-    parsedItemsList,
-    addToCart,
-    gridTemplateColumnsValue,
-    toastData,
-    setOpenToast,
-    openToast,
-    options,
-    filterOption,
-    setFilterOption,
-    fileteredItems,
-    setFileteredItems,
-  } = useWorkshopsPage();
+    const {
+        parsedItemsList,
+        addToCart,
+        gridTemplateColumnsValue,
+        toastData,
+        setOpenToast,
+        openToast,
+        radioSelectedItem,
+        options,
+        filterOption,
+        handleCheckbox,
+        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 (
+    const getRenderedItems = useCallback((item, 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',
-                })
-              }
+                key={index}
+                isWorkshop={item.isWorkshop}
+                title={item.name}
+                description={item.desc && Helper.omitLongString(item.desc, 50)}
+                purchaseState={0}
+                presenterName={item.presenters.join(', ')}
+                startDate={new Date(item.start_date).toLocaleString()}
+                endDate={new Date(item.end_date).toLocaleString()}
+                level={item.level}
+                capacity={item.capacity}
+                cost={item.cost}
+                onClickAddToCart={() =>
+                    addToCart({
+                        id: item.id,
+                        type: item.isWorkshop ? 'workshop' : 'presentation',
+                    })
+                }
             />
-          );
-        })}
-      {!fileteredItems && <CircularProgress />}
-    </section>
-  );
+        );
+    }, [])
+
+    return (
+        <section
+        >
+            {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>*/}
+            <section style={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: 'column'
+            }}>
+                <div>
+                    <FormLabel id={"radio-container-workshops-container-label"}>
+                        Filter By:
+                    </FormLabel>
+                    <RadioGroup
+                        id={"radio-container-workshops"}
+                        value={radioSelectedItem}
+                        onChange={handleCheckbox}
+                        name={"radio-container-workshops-container-label"}
+                    >
+                        {options.map((item, index) => (
+                            <FormControlLabel
+                                value={item.id}
+                                control={<Radio/>}
+                                key={index}
+                                label={item.label}
+                            />
+                        ))}
+                    </RadioGroup>
+                </div>
+                <div style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    gap: '20px',
+                }}>
+                    {(radioSelectedItem === "all-items") && fileteredItems &&
+                        fileteredItems.map((e, index) => getRenderedItems(e, index))
+                    }
+                    {(radioSelectedItem === "workshops") && fileteredItems &&
+                        fileteredItems.filter(e => e.isWorkshop === true).map((e, index) => getRenderedItems(e, index))
+                    }
+                    {(radioSelectedItem === "presentations") && fileteredItems &&
+                        fileteredItems.filter(e => e.isWorkshop === false).map((e, index) => getRenderedItems(e, index))
+                    }
+                    {!fileteredItems && <CircularProgress/>}
+                </div>
+            </section>
+        </section>
+    );
 }
diff --git a/frontend/src/pages/workshops/useWorkshopsPage.js b/frontend/src/pages/workshops/useWorkshopsPage.js
index 5053bf9..0953b97 100644
--- a/frontend/src/pages/workshops/useWorkshopsPage.js
+++ b/frontend/src/pages/workshops/useWorkshopsPage.js
@@ -1,126 +1,147 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useAPI } from '../../providers/APIProvider/APIProvider.jsx';
+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 = [
+        {
+            label: "All Items",
+            id: "all-items",
+        },
+        {
+            label: "Workshops",
+            id: 'workshops',
+        },
+        {
+            label: 'Presentations',
+            id: "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]);
+    const [radioSelectedItem, setRadioSelectedItem] = useState(options[0].id)
 
-  useEffect(() => {
-    const func = () => {
-      setGridTemplateColumnsValue('1fr '.repeat(Math.floor(window.innerWidth / 400)));
-    };
-    func();
-    window.addEventListener('resize', func);
-  }, []);
+    const handleCheckbox = useCallback(e => {
+        setRadioSelectedItem(e.target.value)
+        console.log(e.target.value)
+    }, [])
+
+    useEffect(() => {
+        const func = () => {
+            setGridTemplateColumnsValue('1fr '.repeat(Math.floor(window.innerWidth / 400)));
+        };
+        func();
+        window.addEventListener('resize', func);
+    }, []);
 
-  useEffect(() => {
-    if (addToCartResponse == null) return;
+    useEffect(() => {
+        if (addToCartResponse == null) return;
 
-    const toastDataTemp = {};
-    switch (addToCartResponse.status) {
-      case 200:
-        toastDataTemp.type = 'success';
-        toastDataTemp.message = 'Item Successfully Added to Cart!';
-        break;
-      case 400:
-        toastDataTemp.type = 'error';
-        toastDataTemp.message = 'Failed to Add Item to Cart: Item Is Already In Your Cart!';
-        break;
-      case 401:
-        toastDataTemp.type = 'error';
-        toastDataTemp.message = 'Failed to Add Item to Cart: You Should Login First!';
-    }
-    setToastData(toastDataTemp);
-    setOpenToast(true);
-    setAddToCartResponse(null);
-  }, [addToCartResponse]);
+        const toastDataTemp = {};
+        switch (addToCartResponse.status) {
+            case 200:
+                toastDataTemp.type = 'success';
+                toastDataTemp.message = 'Item Successfully Added to Cart!';
+                break;
+            case 400:
+                toastDataTemp.type = 'error';
+                toastDataTemp.message = 'Failed to Add Item to Cart: Item Is Already In Your Cart!';
+                break;
+            case 401:
+                toastDataTemp.type = 'error';
+                toastDataTemp.message = 'Failed to Add Item to Cart: You Should Login First!';
+        }
+        setToastData(toastDataTemp);
+        setOpenToast(true);
+        setAddToCartResponse(null);
+    }, [addToCartResponse]);
 
-  useEffect(() => {
-    getWorkshopsData();
-    getPresentationsData();
-    getTeachersData();
-    getPresenterData();
-  }, [getPresentationsData, getWorkshopsData]);
+    useEffect(() => {
+        getWorkshopsData();
+        getPresentationsData();
+        getTeachersData();
+        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);
-        item['capacity'] = workshop.capacity;
-        item['cost'] = workshop.cost;
-        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,
+        handleCheckbox,
+        fileteredItems,
+        setFileteredItems,
+        radioSelectedItem,
+    };
 }