diff --git a/src/components/DataStudio/FigureItem.jsx b/src/components/DataStudio/FigureItem.jsx
new file mode 100644
index 0000000..0b070d9
--- /dev/null
+++ b/src/components/DataStudio/FigureItem.jsx
@@ -0,0 +1,110 @@
+import { Button, CloseButton, Dialog, Field, Image, Input, Portal, Text, VStack } from '@chakra-ui/react'
+import { useState } from 'react'
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function FigureItem({ figureID, label, reloadInfo }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [updatingLabel, setUpdatingLabel] = useState(false);
+    const [newLabel, setNewLabel] = useState(label);
+
+    const handleUpdateLabel = async () => {
+        if (!newLabel) {
+            ToastWizard.standard("error", "All fields are required.")
+            return;
+        }
+        if (newLabel === label) {
+            ToastWizard.standard("error", "Please enter a different label to update.")
+            return;
+        }
+
+        const newValue = newLabel;
+
+        setUpdatingLabel(true);
+
+        try {
+            const response = await server.post('/gallery/updateFigure', {
+                figureID: figureID,
+                label: newValue
+            });
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                setDialogOpen(false);
+                reloadInfo();
+                ToastWizard.standard("success", "Label updated", `The figure's label has been changed to '${newValue}'.`);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in figure label update request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Label update failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't update the figure's label. Please try again.");
+                }
+            } else {
+                console.log("Unexpected error in figure label update request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't update the figure's label. Please try again.");
+            }
+        } finally {
+            setUpdatingLabel(false);
+        }
+    }
+    
+    const handleEnterKey = (e) => {
+        if (e.key === 'Enter') {
+            handleUpdateLabel();
+        }
+    }
+
+    return (
+        <Dialog.Root placement={'center'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)}>
+            <Dialog.Trigger asChild>
+                <VStack display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'} gap={2} cursor={'pointer'}>
+                    <Image src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${figureID}`} fit={'cover'} boxSize={'100px'} borderRadius={'full'} />
+                    <Text fontSize={label.length > 15 ? 'xs' : 'md'}>{label}</Text>
+                </VStack>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Update Label</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            <Text mt={'10px'}>Is '{label}' not quite right? Update the label for this auto-detected figure.</Text>
+                            <Field.Root mt={'20px'}>
+                                <Field.Label>Figure Name</Field.Label>
+                                <Input placeholder={'Enter figure\'s name'} value={newLabel} onChange={(e) => setNewLabel(e.target.value)} onKeyDown={handleEnterKey} />
+                                <Field.HelperText>This change will be reflected across the system.</Field.HelperText>
+                            </Field.Root>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" colorPalette={'red'} disabled={updatingLabel}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimaryAlt'} onClick={handleUpdateLabel} loading={updatingLabel} loadingText={"Updating..."}>Update</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton disabled={updatingLabel} size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default FigureItem
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index e82df02..fc42c5f 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -42,15 +42,11 @@ function Sidebar({ isOpen, onOpenChange }) {
                                         <GrCatalogOption /> Catalogue Browser
                                     </Button>
 
-                                    <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                    <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/figures')} fontSize={'md'}>
                                         <FaPeopleGroup /> Key Figures
                                     </Button>
                                 </>}
 
-                                <Button variant={isActive('/publicGallery') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/publicGallery')} fontSize={'md'}>
-                                    <MdOutlinePublic /> Public Gallery
-                                </Button>
-
                                 {username && (
                                     <Button variant={isActive('/profile') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
                                         <CgProfile /> My Profile
diff --git a/src/main.jsx b/src/main.jsx
index 4f79425..fe57bc3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -27,6 +27,7 @@ import Profile from './pages/Profile.jsx';
 import AdminConsole from './pages/AdminConsole.jsx';
 import UserManagement from './pages/UserManagement.jsx';
 import SuperuserLayout from './SuperuserLayout.jsx';
+import FigureGallery from './pages/FigureGallery.jsx';
 
 const store = configureStore({
     reducer: {
@@ -57,6 +58,7 @@ createRoot(document.getElementById('root')).render(
                             <Route element={<ProtectedLayout />}>
                                 <Route path='import' element={<DataImport />} />
                                 <Route path='profile' element={<Profile />} />
+                                <Route path='figures' element={<FigureGallery />} />
 
                                 <Route path='studio'>
                                     <Route path=':colID' element={<GroupView  />} />
diff --git a/src/pages/FigureGallery.jsx b/src/pages/FigureGallery.jsx
new file mode 100644
index 0000000..04daf9c
--- /dev/null
+++ b/src/pages/FigureGallery.jsx
@@ -0,0 +1,79 @@
+import { Avatar, Box, HStack, Image, SimpleGrid, SkeletonCircle, SkeletonText, Text, VStack } from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import FigureItem from '../components/DataStudio/FigureItem'
+import server, { JSONResponse } from '../networking';
+import ToastWizard from '../components/toastWizard';
+import { useSelector } from 'react-redux';
+
+function FigureGallery() {
+    const [figures, setFigures] = useState([]);
+    const [retrieving, setRetrieving] = useState(true);
+
+    const { loaded } = useSelector(state => state.auth);
+
+    const retrieveFigureInfo = async () => {
+        setRetrieving(true);
+
+        try {
+            const response = await server.get('/cdn/figures')
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                setFigures(response.data.raw.data);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in figures data retrieval request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Couldn't retrieve figure data.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't retrieve key figures information. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in figures data retrieval request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't retrieve key figures information. Please try again.");
+            }
+        } finally {
+            setRetrieving(false);
+        }
+    }
+
+    useEffect(() => {
+        if (loaded) {
+            retrieveFigureInfo();
+        }
+    }, [loaded]);
+
+    return (
+        <Box p={'20px'}>
+            <Text fontSize={'2xl'} fontWeight={'bold'}>Key Figures</Text>
+            <HStack mt={'30px'} display={'flex'} flexDir={'row'} alignItems={'center'} justifyContent={'flex-start'} flexWrap={'wrap'} gap={'50px'}>
+                {retrieving ? <>
+                    {Array.from({ length: 5 }).map((_, index) => {
+                        return <VStack>
+                            <SkeletonCircle key={index} size={'100px'} />
+                            <SkeletonText width={'100px'} noOfLines={1} />
+                        </VStack>
+                    })}
+                </>: <>
+                    {figures.length > 0 ? figures.map((figure, index) => {
+                        return <FigureItem key={index} figureID={figure.id} label={figure.label} reloadInfo={retrieveFigureInfo} />
+                    }) : <Text fontSize={'md'}>No figures found.</Text>}
+                </>}
+            </HStack>
+        </Box>
+    )
+}
+
+export default FigureGallery
\ No newline at end of file