diff --git a/src/SuperuserLayout.jsx b/src/SuperuserLayout.jsx
new file mode 100644
index 0000000..0225ec1
--- /dev/null
+++ b/src/SuperuserLayout.jsx
@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { Outlet, useNavigate } from 'react-router-dom';
+
+function SuperuserLayout() {
+    const navigate = useNavigate();
+    const { loaded, superuser } = useSelector(state => state.auth);
+
+    useEffect(() => {
+        if (loaded && superuser !== true) {
+            console.log('Unauthorised access to superuser privileged resource; redirecting...')
+            navigate('/');
+            return;
+        }
+    }, [loaded, superuser]);
+
+    return <Outlet />
+}
+
+export default SuperuserLayout
\ No newline at end of file
diff --git a/src/components/Catalogue/metadataDisplay.jsx b/src/components/Catalogue/metadataDisplay.jsx
index 9e1972a..5ab3368 100644
--- a/src/components/Catalogue/metadataDisplay.jsx
+++ b/src/components/Catalogue/metadataDisplay.jsx
@@ -113,7 +113,7 @@ function MetadataDisplay({ currentItem, isOpen }) {
                 }
 
                 // Success case
-                setMetadata(response.data.raw.data);
+                setMetadata(response.data.raw.data.metadata);
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -245,6 +245,14 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     <Text fontWeight="bold" mb={1}>Caption:</Text>
                     <Text mb={6}>{metadata.caption || "N/A"}</Text>
 
+                    {/* Additional figure metadata, if present */}
+                    {metadata.addInfo && (
+                        <>
+                            <Text fontWeight="bold" mb={1}>Additional Info:</Text>
+                            <Text>{metadata.addInfo}</Text>
+                        </>
+                    )}
+
                     {/* Figure headshots (if available) */}
                     {Array.isArray(metadata.figureIDs) && metadata.figureIDs.length > 0 ? (
                         <Flex wrap="wrap" gap={4} mb={4}>
@@ -277,14 +285,6 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     ) : (
                         <Text mb={2}>N/A</Text>
                     )}
-
-                    {/* Additional figure metadata, if present */}
-                    {metadata.addInfo && (
-                        <>
-                            <Text fontWeight="bold" mb={1}>Additional Info:</Text>
-                            <Text>{metadata.addInfo}</Text>
-                        </>
-                    )}
                 </>
             )}
         </Box>
diff --git a/src/components/Catalogue/transcriptionToggle.jsx b/src/components/Catalogue/transcriptionToggle.jsx
index adec14b..b1ec21d 100644
--- a/src/components/Catalogue/transcriptionToggle.jsx
+++ b/src/components/Catalogue/transcriptionToggle.jsx
@@ -57,7 +57,7 @@ const TranscriptionToggle = ({ value, onChange }) => {
             p="1"
             rounded="lg"
             boxShadow="sm"
-            gap="00"
+            gap="0"
         >
             <SegmentGroup.Indicator bg="primaryColour" rounded="lg" />
             <SegmentGroup.Items items={items} />
diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
new file mode 100644
index 0000000..0188d80
--- /dev/null
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -0,0 +1,222 @@
+import { ActionBar, Button, Dialog, Portal } from '@chakra-ui/react'
+import { isEqual } from 'lodash';
+import { useEffect, useState } from 'react'
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData, artefactId, isEditing, setIsEditing, isMMArtefact }) {
+    const [changesMade, setChangesMade] = useState(false);
+    const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    useEffect(() => {
+        setChangesMade(!isEqual(artefactData, originalArtefactData) && isEditing);
+    }, [artefactData, originalArtefactData, isEditing])
+
+    // Validation functions
+    const validateField = (fieldName, value) => {
+        if (value === null || value === undefined) return true;
+        
+        switch (fieldName) {
+            case 'name':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 25;
+            case 'tradCN':
+            case 'simplifiedCN':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 1000;
+            case 'caption':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 200;
+            case 'english':
+            case 'summary':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 2000;
+            case 'addInfo':
+                return typeof value === 'string' && value.trim().length <= 3000;
+            default:
+                return true;
+        }
+    };
+
+    const validateUpdateDict = (updateDict) => {
+        const errors = [];
+        
+        // Common validation
+        if (!validateField('name', updateDict.name)) {
+            errors.push('Name must be between 1-25 characters');
+        }
+
+        if (isMMArtefact) {
+            // MM-type validation
+            if (updateDict.tradCN && !validateField('tradCN', updateDict.tradCN)) errors.push('Traditional Chinese must be between 1-1000 characters')
+            if (updateDict.simplifiedCN && !validateField('simplifiedCN', updateDict.simplifiedCN)) errors.push('Simplified Chinese must be between 1-1000 characters')
+            if (updateDict.english && !validateField('english', updateDict.english)) errors.push('English must be between 1-2000 characters')
+            if (updateDict.summary && !validateField('summary', updateDict.summary)) errors.push('Summary must be between 1-2000 characters')
+        } else {
+            // HF-type validation
+            if (updateDict.caption && !validateField('caption', updateDict.caption)) errors.push('Caption must be between 1-200 characters')
+            if (updateDict.addInfo && !validateField('addInfo', updateDict.addInfo)) errors.push('Additional Info must be 3000 characters or less')
+        }
+
+        return errors;
+    };
+
+    const handleCancelChanges = () => {
+        setArtefactData(originalArtefactData);
+        ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
+    }
+
+    const handleSaveChanges = async () => {
+        setSaveLoading(true);
+
+        var updateDict = {
+            artefactID: artefactId,
+            name: artefactData.name || '',
+        };
+
+        // Add fields based on artefact type
+        if (isMMArtefact) {
+            // MM-type metadata fields
+            if (artefactData.metadata.tradCN != originalArtefactData.tradCN) updateDict.tradCN = artefactData.metadata.tradCN
+            if (artefactData.metadata.simplifiedCN != originalArtefactData.simplifiedCN) updateDict.simplifiedCN = artefactData.metadata.simplifiedCN
+            if (artefactData.metadata.english != originalArtefactData.english) updateDict.english = artefactData.metadata.english
+            if (artefactData.metadata.summary != originalArtefactData.summary) updateDict.summary = artefactData.metadata.summary
+        } else {
+            // HF-type metadata fields
+            if (artefactData.metadata.caption != originalArtefactData.caption) updateDict.caption = artefactData.metadata.caption
+            if (artefactData.metadata.addInfo != originalArtefactData.addInfo) updateDict.addInfo = artefactData.metadata.addInfo
+        }
+
+        // Validate the update dictionary
+        const validationErrors = validateUpdateDict(updateDict);
+        if (validationErrors.length > 0) {
+            setSaveLoading(false);
+            ToastWizard.standard(
+                "error", 
+                "Validation Error", 
+                validationErrors.join('. '), 
+                5000
+            );
+            return;
+        }
+
+        try {
+            const response = await server.post('/studio/artefact/update', updateDict);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case - handle both full success (200) and partial success (207)
+                getArtefactData();
+                setIsConfirmSaveOpen(false);
+                setIsEditing(false); // Exit editing mode after successful save
+
+                if (response.data.status === 207) {
+                    // Partial success - metadata updated but NER labelling failed
+                    ToastWizard.standard(
+                        "warning", 
+                        "Artefact partially updated.", 
+                        5000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                } else {
+                    // Full success
+                    ToastWizard.standard("success", "Artefact updated.", response.data.message);
+                }
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in update artefact data request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard(
+                        "error", 
+                        "Artefact update failed.", 
+                        err.response.data.message, 
+                        3000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                } else {
+                    ToastWizard.standard(
+                        "error", 
+                        "Artefact update failed.", 
+                        "Failed to update your artefact information. Please try again.", 
+                        3000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                }
+            } else {
+                console.log("Unexpected error in artefact update request:", err);
+                ToastWizard.standard(
+                    "error", 
+                    "Artefact update failed.", 
+                    "Failed to update your artefact information. Please try again.", 
+                    3000,
+                    true,
+                    handleSaveChanges,
+                    "Retry"
+                );
+            }
+        }
+
+        setSaveLoading(false);
+    }
+
+    return (
+        <ActionBar.Root open={changesMade}>
+            <Portal>
+                <ActionBar.Positioner>
+                    <ActionBar.Content>
+                        <Button variant={'outline'} colorPalette={'red'} onClick={handleCancelChanges}>
+                            Reset
+                        </Button>
+
+                        <Dialog.Root placement="center" open={isConfirmSaveOpen} onOpenChange={(e) => setIsConfirmSaveOpen(e.open)}>
+                            <Dialog.Trigger asChild>
+                                <Button variant={"outline"} colorPalette={'green'} size="sm">
+                                    Save Changes
+                                </Button>
+                            </Dialog.Trigger>
+                            <Portal>
+                                <Dialog.Backdrop />
+                                <Dialog.Positioner>
+                                    <Dialog.Content>
+                                        <Dialog.Header>
+                                            <Dialog.Title>Update Artefact</Dialog.Title>
+                                        </Dialog.Header>
+                                        <Dialog.Body>
+                                            <Dialog.Description>
+                                                Are you sure you'd like to save these changes? This action cannot be undone.
+                                            </Dialog.Description>
+                                        </Dialog.Body>
+                                        <Dialog.Footer>
+                                            <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmSaveOpen(false)}>
+                                                Cancel
+                                            </Button>
+                                            <Button bgColor={'primaryColour'} color={'white'} onClick={handleSaveChanges} loading={saveLoading} loadingText={'Saving...'}>
+                                                Save Changes
+                                            </Button>
+                                        </Dialog.Footer>
+                                    </Dialog.Content>
+                                </Dialog.Positioner>
+                            </Portal>
+                        </Dialog.Root>
+                    </ActionBar.Content>
+                </ActionBar.Positioner>
+            </Portal>
+        </ActionBar.Root>
+    )
+}
+
+export default ArtefactEditorActionBar
\ No newline at end of file
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
new file mode 100644
index 0000000..29dbc71
--- /dev/null
+++ b/src/components/DataStudio/editorCard.jsx
@@ -0,0 +1,367 @@
+import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
+import { useState, useEffect, useRef } from "react";
+import { IoInformationCircleOutline } from "react-icons/io5";
+import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
+import MetadataToggle from "./metadataToggle";
+import ArtefactEditorActionBar from "./artefactEditorActionBar";
+import ToastWizard from "../toastWizard";
+import FigureDisplaySection from "./figureDisplay";
+
+// Helper function to render text with labeled entities highlighted
+function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
+    if (!labels || !Array.isArray(labels)) return <Text>{text}</Text>;
+
+    // Define background colors for each entity type
+    const entityColors = {
+        PERSON: "yellow.200",
+        ORGANIZATION: "blue.200",
+        LOCATION: "green.200",
+        DATE: "orange.200",
+        GPE: "purple.200",
+        EVENT: "pink.200",
+    };
+
+    const chunks = [];
+    let remainingText = text;
+
+    // Iterate through each labeled entity and highlight it
+    labels.forEach(([entity, label], i) => {
+        const index = remainingText.indexOf(entity);
+        if (index === -1) return;
+
+        const before = remainingText.slice(0, index);
+        const matched = remainingText.slice(index, index + entity.length);
+        const after = remainingText.slice(index + entity.length);
+
+        if (before) {
+            chunks.push(<Text as="span" key={`before-${i}`}>{before}</Text>);
+        }
+
+        // Render the matched entity with a tooltip for the label
+        chunks.push(
+            <Box
+                key={`entity-${i}`}
+                as="span"
+                position="relative"
+                onMouseEnter={() => setHoveredIndex(i)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                display="inline-block"
+                bg={entityColors[label] || "gray.200"}
+                borderRadius="md"
+                px={1}
+                mx="0.5px"
+            >
+                {matched}
+                <Box
+                    position="absolute"
+                    top="100%"
+                    left="50%"
+                    transform="translateX(-50%)"
+                    mt={1}
+                    px={2}
+                    py={1}
+                    fontSize="xs"
+                    bg="blackAlpha.700"
+                    color="white"
+                    borderRadius="md"
+                    whiteSpace="nowrap"
+                    zIndex={10}
+                    pointerEvents="none"
+                    opacity={hoveredIndex === i ? 1 : 0}
+                    transition="opacity 0.1s ease"
+                    transitionDelay={hoveredIndex === i ? "0.2s" : "0s"}
+                >
+                    {label}
+                </Box>
+            </Box>
+        );
+
+        remainingText = after;
+    });
+
+    if (remainingText) {
+        chunks.push(<Text as="span" key="remaining">{remainingText}</Text>);
+    }
+
+    return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
+}
+
+function EditorCard({ metadata, artefactId, refreshArtefactData }) {
+    const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
+    const [isEditing, setIsEditing] = useState(false);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const hoverTimeoutRef = useRef(null);
+    
+    // Change detection states
+    const [originalArtefactData, setOriginalArtefactData] = useState({});
+    const [artefactData, setArtefactData] = useState({});
+
+    // Initialize data when metadata prop changes
+    useEffect(() => {
+        if (metadata) {
+            const processedData = {
+                name: metadata.name || '',
+                metadata: metadata.metadata || {}
+            };
+            
+            setOriginalArtefactData(processedData);
+            setArtefactData(processedData);
+        }
+    }, [metadata]);
+
+    // Delay tooltip hover effect for entity labels
+    const handleMouseEnter = (index) => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            setHoveredIndex(index);
+        }, 500);
+    };
+
+    // Handle edit/cancel button click
+    const handleEditClick = () => {
+        setIsEditing(true);
+        ToastWizard.standard("info", "Editor Mode Enabled", "You are currently in editor mode. Remember to save your changes!", 3000);
+    }
+
+    const handleCancelClick = () => {
+        // Reset data to original state
+        setArtefactData(originalArtefactData);
+        setIsEditing(false);
+        ToastWizard.standard("warning", "Editor Mode Disabled", "All changes reverted.", 3000);
+    }
+
+    // Handle input changes
+    const handleNameChange = (e) => {
+        setArtefactData({
+            ...artefactData,
+            name: e.target.value
+        });
+    }
+
+    const handleTranscriptionChange = (e) => {
+        setArtefactData({
+            ...artefactData,
+            metadata: {
+                ...artefactData.metadata,
+                [selectedTranscription]: e.target.value
+            }
+        });
+    }
+
+    const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
+
+    return (
+        <>
+            <Card.Root h="100%" borderRadius={15}>
+                <Card.Header alignItems="center" flexDirection="row" justifyContent="space-between">
+                    <Flex alignItems="center" flexDirection="row" gap={1}>
+                        <IoInformationCircleOutline size={25} />
+                        <Card.Title>Artefact Details</Card.Title>
+                    </Flex>
+                    <Flex alignItems="center" flexDirection="row" gap={4}>
+                        <Button size="sm" variant="ArchPrimaryAlt">
+                            Manage Associations
+                        </Button>
+                        <Button size="sm" variant="ArchPrimary" onClick={isEditing ? handleCancelClick : handleEditClick}>
+                            {isEditing ? <MdOutlineCancel /> : <MdOutlineEdit />}
+                            <Text>{isEditing ? 'Cancel' : 'Edit'}</Text>
+                        </Button>
+                    </Flex>
+                </Card.Header>
+
+                <Card.Body display="flex" flexDirection="column" flex="1" overflowY="hidden">
+                    {isMMArtefact ? (
+                        <>
+                            <Flex flexDirection="row" alignItems="center" overflowY={"auto"}>
+                                <Text mr={4}>Name:</Text>
+                                {isEditing ? (
+                                    <Input 
+                                        placeholder="Artefact name" 
+                                        type="text" 
+                                        value={artefactData.name || ''} 
+                                        onChange={handleNameChange}
+                                        width="100%"
+                                        fontSize={17}
+                                    />
+                                ) : (
+                                    <Box 
+                                        p={2}
+                                        minH="40px"
+                                        display="flex"
+                                        alignItems="center"
+                                        w="100%"
+                                    >
+                                        <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                    </Box>
+                                )}
+                            </Flex>
+
+                            {/* MM Artefact Specific Fields */}
+                            <Flex flexDirection="row" alignItems="center" mb={4} mt={5}>
+                                <Text mr={4}>Transcription:</Text>
+                                <MetadataToggle
+                                    value={selectedTranscription}
+                                    onChange={setSelectedTranscription}
+                                />
+                            </Flex>
+
+                            {isEditing ? (
+                                <Textarea
+                                    flex="1"
+                                    overflowY="auto"
+                                    p={2}
+                                    borderRadius="md"
+                                    whiteSpace="pre-wrap"
+                                    resize="none"
+                                    fontSize={17}
+                                    lineHeight={1.6}
+                                    value={artefactData.metadata?.[selectedTranscription] || ''}
+                                    onChange={handleTranscriptionChange}
+                                    scrollbar={"hidden"}
+                                />
+                            ) : (
+                                <Box
+                                    flex="1"
+                                    overflowY="auto"
+                                    p={2}
+                                    whiteSpace="pre-wrap"
+                                    cursor="default"
+                                    w="100%"
+                                    scrollbar={"hidden"}    
+                                >
+                                    {selectedTranscription === "english" ? (
+                                        renderHighlightedText(
+                                            artefactData.metadata?.[selectedTranscription] || "",
+                                            artefactData.metadata?.nerLabels,
+                                            hoveredIndex,
+                                            handleMouseEnter
+                                        )
+                                    ) : (
+                                        <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
+                                            {artefactData.metadata?.[selectedTranscription] || 'No content available'}
+                                        </Text>
+                                    )}
+                                </Box>
+                            )}
+                        </>
+                    ) : (
+                        <Box overflowY={"auto"} scrollbar={"hidden"}>
+                            <Flex flexDirection="row" alignItems="center">
+                                <Text mr={4}>Name:</Text>
+                                {isEditing ? (
+                                    <Input 
+                                        placeholder="Artefact name" 
+                                        type="text" 
+                                        value={artefactData.name || ''} 
+                                        onChange={handleNameChange}
+                                        width="100%"
+                                        fontSize={17}
+                                    />
+                                ) : (
+                                    <Box 
+                                        p={2}
+                                        minH="40px"
+                                        display="flex"
+                                        alignItems="center"
+                                        w="100%"
+                                    >
+                                        <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                    </Box>
+                                )}
+                            </Flex>
+
+                            {/* HF Artefact Specific Fields */}
+                            <Flex flexDirection="column" gap={4} flex="1" overflow="hidden" mt={4}>
+                                {/* Caption Field */}
+                                <Flex flexDirection="column">
+                                    <Text mb={2}>Caption:</Text>
+                                    {isEditing ? (
+                                        <Textarea
+                                            value={artefactData.metadata?.caption || ''}
+                                            onChange={(e) => setArtefactData({
+                                                ...artefactData,
+                                                metadata: {
+                                                    ...artefactData.metadata,
+                                                    caption: e.target.value
+                                                }
+                                            })}
+                                            resize="none"
+                                            fontSize={17}
+                                            lineHeight={1.5}
+                                            minH={100}
+                                            scrollbar={"hidden"}
+                                        />
+                                    ) : (
+                                        <Box
+                                            w={"100%"}
+                                            overflowY={"auto"}
+                                            scrollbar={"hidden"}
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
+                                                {artefactData.metadata?.caption || 'No caption available'}
+                                            </Text>
+                                        </Box>
+                                    )}
+                                </Flex>
+
+                                {/* Additional Info Field */}
+                                <Flex flexDirection="column" flex="1">
+                                    <Text mb={2}>Additional Info:</Text>
+                                    {isEditing ? (
+                                        <Textarea
+                                            flex="1"
+                                            value={artefactData.metadata?.addInfo || ''}
+                                            onChange={(e) => setArtefactData({
+                                                ...artefactData,
+                                                metadata: {
+                                                    ...artefactData.metadata,
+                                                    addInfo: e.target.value
+                                                }
+                                            })}
+                                            resize="none"
+                                            fontSize={17}
+                                            minH={200}
+                                            lineHeight={1.5}
+                                            scrollbar={"hidden"}
+                                        />
+                                    ) : (
+                                        <Box
+                                            flex="1"
+                                            w={"100%"}
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
+                                                {artefactData.metadata?.addInfo || 'No additional info available'}
+                                            </Text>
+                                        </Box>
+                                    )}
+                                </Flex>
+
+                                <FigureDisplaySection 
+                                    artefactId={artefactId}
+                                    figureIds={metadata.metadata.figureIDs} 
+                                    getArtefactData={refreshArtefactData}
+                                    isEditing={isEditing}
+                                />
+                            </Flex>
+                        </Box>
+                    )}
+                </Card.Body>
+            </Card.Root>
+
+            <ArtefactEditorActionBar 
+                artefactData={artefactData}
+                originalArtefactData={originalArtefactData}
+                setArtefactData={setArtefactData}
+                getArtefactData={refreshArtefactData}
+                artefactId={artefactId}
+                isEditing={isEditing}
+                setIsEditing={setIsEditing}
+                isMMArtefact={isMMArtefact}
+            />
+        </>
+    );
+}
+
+export default EditorCard;
\ No newline at end of file
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
new file mode 100644
index 0000000..d47d465
--- /dev/null
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -0,0 +1,165 @@
+import { Box, Flex, Text, Image, SkeletonCircle, Portal, Dialog, Button } from '@chakra-ui/react';
+import { MdOutlineDeleteForever } from 'react-icons/md';
+import { useState } from 'react';
+import server, { JSONResponse } from '../../networking';
+import ToastWizard from '../toastWizard';
+
+function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditing }) {
+    const [deletingFigure, setDeletingFigure] = useState(null);
+    const [removing, setRemoving] = useState(false);
+    const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+    const [selectedFigureId, setSelectedFigureId] = useState(null);
+
+    const handleRemoveFigure = async (figureID) => {
+        setDeletingFigure(figureID);
+        setRemoving(true);
+        
+        try {
+            const response = await server.post('/studio/artefact/removeFigure', {
+                artefactID: artefactId,
+                figureID: figureID
+            });
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    throw new Error(response.data.message);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Figure removed");
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            console.error("Error removing figure:", err);
+            
+            let errorMessage = "Failed to remove figure. Please try again.";
+            if (err.response && err.response.data instanceof JSONResponse) {
+                errorMessage = err.response.data.message;
+            } else if (err.message) {
+                errorMessage = err.message;
+            }
+
+            ToastWizard.standard(
+                "error", 
+                "Remove failed", 
+                errorMessage, 
+                3000,
+                true,
+                handleRemoveFigure,
+                'Retry'
+            );
+        } finally {
+            setDeletingFigure(null);
+            setRemoving(false);
+            setIsConfirmDeleteOpen(false);
+            getArtefactData();
+        }
+    };
+
+    return (
+        <Flex flexDirection="column">
+            <Text mb={2}>Associated Figures:</Text>
+            <Box p={2} h="auto">
+                {figureIds.length > 0 ? (
+                    <Flex wrap="wrap" gap={4}>
+                        {figureIds.map(id => (
+                            <Box
+                                key={id}
+                                textAlign="center"
+                                position="relative"
+                                width={100}
+                                height={100}
+                                cursor="pointer"
+                                borderRadius="full"
+                                overflow="hidden"
+                                _hover={isEditing ? {
+                                    '& .delete-overlay': {
+                                        opacity: 1
+                                    }
+                                } : {}}
+                            >
+                                <Image
+                                    src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
+                                    alt={`Headshot of ${id}`}
+                                    width="100%"
+                                    height="100%"
+                                    objectFit="cover"
+                                    border="1px solid"
+                                    borderColor="gray.200"
+                                    fallback={<SkeletonCircle size="100px"/>}
+                                    loading="eager"
+                                />
+                                
+                                {/* Delete Overlay - only show when editing */}
+                                {isEditing && (
+                                    <Box
+                                        className="delete-overlay"
+                                        position="absolute"
+                                        top={0}
+                                        left={0}
+                                        right={0}
+                                        bottom={0}
+                                        bg="blackAlpha.600"
+                                        opacity={0}
+                                        transition="opacity 0.2s ease-in-out"
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        borderRadius="full"
+                                        onClick={() => {
+                                            setSelectedFigureId(id);
+                                            setIsConfirmDeleteOpen(true);
+                                        }}
+                                        cursor={deletingFigure === id ? "not-allowed" : "pointer"}
+                                        pointerEvents={deletingFigure === id ? "none" : "auto"}
+                                    >
+                                        <MdOutlineDeleteForever
+                                            size={32}
+                                            color={deletingFigure === id ? "#999" : "#e53e3e"}
+                                            style={{
+                                                opacity: deletingFigure === id ? 0.5 : 1,
+                                                transform: deletingFigure === id ? "scale(0.8)" : "scale(1)",
+                                                transition: "all 0.2s ease-in-out"
+                                            }}
+                                        />
+                                    </Box>
+                                )}
+                            </Box>
+                        ))}
+                    </Flex>
+                ) : (
+                    <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
+                )}
+            </Box>
+
+            <Dialog.Root placement="center" open={isConfirmDeleteOpen} onOpenChange={(e) => setIsConfirmDeleteOpen(e.open)}>
+                <Portal>
+                    <Dialog.Backdrop />
+                    <Dialog.Positioner>
+                        <Dialog.Content>
+                            <Dialog.Header>
+                                <Dialog.Title>Remove Figure</Dialog.Title>
+                            </Dialog.Header>
+                            <Dialog.Body>
+                                <Dialog.Description>
+                                    Are you sure you'd like to remove this figure? This action cannot be undone.
+                                </Dialog.Description>
+                            </Dialog.Body>
+                            <Dialog.Footer>
+                                <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmDeleteOpen(false)}>
+                                    Cancel
+                                </Button>
+                                <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={removing} loadingText={'Removing...'}>
+                                    Remove
+                                </Button>
+                            </Dialog.Footer>
+                        </Dialog.Content>
+                    </Dialog.Positioner>
+                </Portal>
+            </Dialog.Root>
+        </Flex>
+    );
+}
+
+export default FigureDisplaySection;
\ No newline at end of file
diff --git a/src/components/DataStudio/metadataToggle.jsx b/src/components/DataStudio/metadataToggle.jsx
new file mode 100644
index 0000000..416e122
--- /dev/null
+++ b/src/components/DataStudio/metadataToggle.jsx
@@ -0,0 +1,60 @@
+import { SegmentGroup, Text } from "@chakra-ui/react";
+
+const MetadataToggle = ({ value, onChange }) => {
+    const items = [
+        { value: "tradCN", label: "Trad CN" },
+        { value: "simplifiedCN", label: "Simp CN" },
+        { value: "english", label: "ENG" },
+        { value: "summary", label: "SUM" },
+    ];
+
+    return (
+        <SegmentGroup.Root
+            value={value}
+            onValueChange={({ value }) => onChange(value)}
+            size="sm"
+            bg="gray.100"
+            p="1"
+            rounded="lg"
+            boxShadow="sm"
+            w="100%"
+            display="flex"
+            position="relative"
+        >
+            <SegmentGroup.Indicator 
+                bg="primaryColour" 
+                rounded="lg"
+                w="25%"
+            />
+            <SegmentGroup.Items
+                display="flex"
+                w="100%"
+                cursor={"pointer"}
+                items={items.map(item => ({
+                    value: item.value,
+                    label: (
+                        <Text
+                            fontWeight={value === item.value ? "bold" : "normal"}
+                            color={value === item.value ? "white" : "black"}
+                            w="100%"
+                            textAlign="center"
+                        >
+                            {item.label}
+                        </Text>
+                    ),
+                    style: {
+                        flex: 1,
+                        minWidth: 0,
+                        position: "relative",
+                        zIndex: 1,
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    },
+                }))}
+            />
+        </SegmentGroup.Root>
+    );
+};
+
+export default MetadataToggle;
\ No newline at end of file
diff --git a/src/components/Identity/AccountActivityCard.jsx b/src/components/Identity/AccountActivityCard.jsx
index 2f5bea3..713b8ca 100644
--- a/src/components/Identity/AccountActivityCard.jsx
+++ b/src/components/Identity/AccountActivityCard.jsx
@@ -10,7 +10,7 @@ function AccountActivityCard({ infoLoading, auditLogsData }) {
                 <Text alignSelf={'flex-start'} fontSize={'xl'} fontWeight={'bolder'} mt={'10px'}>Account Activity</Text>
             </Card.Header>
 
-            <Card.Body maxH={isSmallerThan800 ? '500px' : '400px'} overflow={"auto"}>
+            <Card.Body h={'100%'} overflow={"auto"}>
                 <Skeleton loading={infoLoading} w={'100%'} h={isSmallerThan800 ? '400px': '350px'}>
                     {auditLogsData.length == 0 ? (
                         <>
@@ -19,7 +19,7 @@ function AccountActivityCard({ infoLoading, auditLogsData }) {
                             <Text color={'grey'}>💤 Oops! No account activity yet.</Text>
                         </>
                     ) : (
-                        <Stack divider={<StackSeparator />} gap={4}>
+                        <Stack divider={<StackSeparator />} gap={4} pb={'20px'}>
                             {auditLogsData.map((log, index) => (
                                 <Box key={index} p='5' shadow='md' borderWidth='1px' borderRadius='md'>
                                     <Heading size='md' textTransform='uppercase'>
diff --git a/src/components/Identity/ChangePasswordDialogButton.jsx b/src/components/Identity/ChangePasswordDialogButton.jsx
index 94a8379..a7770c7 100644
--- a/src/components/Identity/ChangePasswordDialogButton.jsx
+++ b/src/components/Identity/ChangePasswordDialogButton.jsx
@@ -127,9 +127,9 @@ function ChangePasswordDialogButton() {
                             </Field.Root>
                         </Dialog.Body>
                         <Dialog.Footer>
-                            {/* <Dialog.ActionTrigger asChild>
-                                <Button variant={'outline'} colorPalette={'red'}>Close</Button>
-                            </Dialog.ActionTrigger> */}
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant={'outline'} colorPalette={'red'}>Cancel</Button>
+                            </Dialog.ActionTrigger>
                             <Button variant={'ArchPrimary'} disabled={!currentPass || !newPass || !confirmNewPass || newPass !== confirmNewPass} onClick={handleChangePassword} loading={changing} loadingText='Changing...'>Change</Button>
                         </Dialog.Footer>
                         <Dialog.CloseTrigger asChild>
diff --git a/src/components/Identity/CreateUserDialog.jsx b/src/components/Identity/CreateUserDialog.jsx
new file mode 100644
index 0000000..699e46d
--- /dev/null
+++ b/src/components/Identity/CreateUserDialog.jsx
@@ -0,0 +1,149 @@
+import { Button, CloseButton, Dialog, Field, IconButton, Input, Portal, Text, VStack } from '@chakra-ui/react';
+import { useState, useEffect } from 'react';
+import { FaPlus } from 'react-icons/fa';
+import { useNavigate } from 'react-router-dom';
+import { withMask } from 'use-mask-input';
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function CreateUserDialog() {
+    const navigate = useNavigate();
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [fname, setFname] = useState('');
+    const [lname, setLname] = useState('');
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [contact, setContact] = useState('');
+    const [role, setRole] = useState('');
+    const [creatingUser, setCreatingUser] = useState(false);
+
+    const isDisabled = !fname || !lname || !username || !email || !contact || !role;
+
+    const handleCreateUser = async () => {
+        if (isDisabled) {
+            ToastWizard.standard("error", "All fields are required.");
+            return;
+        }
+
+        setCreatingUser(true);
+
+        try {
+            const response = await server.post('/admin/createUser', {
+                fname,
+                lname,
+                username,
+                email,
+                contact,
+                role
+            })
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Account Created", `Welcome ${fname} to the family! Login instructions have been sent via email!`);
+                setDialogOpen(false);
+                if (response.data.raw.newUserID) {
+                    navigate(`/profile/${response.data.raw.newUserID}`);
+                }
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in user creation request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "User creation failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't create user. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in user creation request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't create user. Please try again.")
+            }
+        } finally {
+            setCreatingUser(false);
+        }
+    }
+
+    const handleEnterKey = (e) => {
+        if (e.key === 'Enter') {
+            handleCreateUser();
+        }
+    }
+
+    return (
+        <Dialog.Root placement={'center'} size={'lg'} closeOnInteractOutside={false} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)} unmountOnExit>
+            <Dialog.Trigger asChild>
+                <IconButton bgColor={'primaryColour'} ml={'20px'}><FaPlus /></IconButton>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title><Text fontWeight={'bold'}>Create New Account</Text></Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            <VStack display={'flex'} justifyContent={'center'} gap={'10px'}>
+                                <Text>Create new accounts to enable more people to gain access to ArchAIve's innovative artefact digitisation services!</Text>
+                                <Text>Users will be able to access most of the platform's features, except those that are sensitive like managing other users.</Text>
+                                <Text>Every user's activity is monitored closely, empowering you to redress in any dire situations at all times.</Text>
+                            </VStack>
+                            <VStack mt={'20px'} gap={'10px'} w={'100%'}>
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>First Name</Field.Label>
+                                    <Input placeholder="e.g John" type='text' onKeyDown={handleEnterKey} value={fname} onChange={e => setFname(e.target.value)} />
+                                </Field.Root>
+
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>Last Name</Field.Label>
+                                    <Input placeholder="e.g Appleseed" type='text' onKeyDown={handleEnterKey} value={lname} onChange={e => setLname(e.target.value)} />
+                                </Field.Root>
+
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>Username</Field.Label>
+                                    <Input placeholder="e.g johnappleseed" type='text' onKeyDown={handleEnterKey} value={username} onChange={e => setUsername(e.target.value)} />
+                                </Field.Root>
+
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>Email</Field.Label>
+                                    <Input placeholder="e.g me@example.com" type='email' onKeyDown={handleEnterKey} value={email} onChange={e => setEmail(e.target.value)} />
+                                </Field.Root>
+
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>Contact</Field.Label>
+                                    <Input placeholder="e.g 1234 5678" type='tel' onKeyDown={handleEnterKey} ref={withMask("9999 9999")} value={contact} onChange={e => setContact(e.target.value)} />
+                                </Field.Root>
+
+                                <Field.Root mt={'10px'} w={'100%'}>
+                                    <Field.Label fontSize={'md'}>Role</Field.Label>
+                                    <Input placeholder="e.g Researcher" type='text' onKeyDown={handleEnterKey} value={role} onChange={e => setRole(e.target.value)} />
+                                </Field.Root>
+                            </VStack>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline">Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimary'} onClick={handleCreateUser} disabled={isDisabled || creatingUser} loading={creatingUser} loadingText={'Creating...'}>Create User</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default CreateUserDialog
\ No newline at end of file
diff --git a/src/components/Identity/IAMDeleteAccountButton.jsx b/src/components/Identity/IAMDeleteAccountButton.jsx
new file mode 100644
index 0000000..5c01bbe
--- /dev/null
+++ b/src/components/Identity/IAMDeleteAccountButton.jsx
@@ -0,0 +1,109 @@
+import { Button, CloseButton, Dialog, Field, Input, Portal, Text } from '@chakra-ui/react';
+import { useSelector } from 'react-redux'
+import ToastWizard from '../toastWizard';
+import { useState } from 'react';
+import server, { JSONResponse } from '../../networking';
+import { LuTrash2 } from 'react-icons/lu';
+import { useNavigate } from 'react-router-dom';
+
+function IAMDeleteAccountButton({ targetUsername, targetProfileID }) {
+    const navigate = useNavigate();
+    const { accountID, superuser } = useSelector(state => state.auth);
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [deletingAccount, setDeletingAccount] = useState(false);
+    const [confirmUsername, setConfirmUsername] = useState('');
+
+    const handleUserAccountDelete = async () => {
+        if (superuser !== true) {
+            ToastWizard.standard("error", "Superuser privileges required to delete a user's account.")
+            return;
+        }
+        if (targetProfileID === accountID) {
+            ToastWizard.standard("error", "Unexpected delete attempt for admin profile", "You cannot delete your own account.")
+            return;
+        }
+
+        setDeletingAccount(true);
+
+        try {
+            const response = await server.post('/admin/deleteUser', {
+                userID: targetProfileID
+            })
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Account deleted", "The user and their data has been successfully deleted.")
+                setDialogOpen(false)
+                navigate('/admin/iam');
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in account deletion request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Account deletion failed", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't delete the user's account. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in user account deletion request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't delete the user's account. Please try again.")
+            }
+        } finally {
+            setDeletingAccount(false);
+        }
+    }
+
+    return (
+        <Dialog.Root size={'sm'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)} placement={'center'}>
+            <Dialog.Trigger asChild>
+                <Button variant={'ArchPrimary'}>
+                    <LuTrash2 />
+                    Delete Account
+                </Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Delete user account?</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body fontSize={'md'}>
+                            <Text><strong>This is a destructive action that cannot be undone.</strong></Text>
+                            <Text mt={'20px'}>The user's account and all associated data will be permanently deleted.</Text>
+                            <Text mt={'20px'}>Please re-enter the user's username to proceed with deletion:</Text>
+                            <Field.Root mt={'20px'} required>
+                                <Field.Label>Username</Field.Label>
+                                <Input placeholder={targetUsername} value={confirmUsername} onChange={(e) => setConfirmUsername(e.target.value)} />
+                                <Field.HelperText>Type in: {targetUsername}</Field.HelperText>
+                            </Field.Root>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" disabled={deletingAccount}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimary'} disabled={confirmUsername !== targetUsername || deletingAccount} onClick={handleUserAccountDelete} loading={deletingAccount} loadingText={'Deleting...'}>Confirm</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size={'sm'} disabled={deletingAccount} />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default IAMDeleteAccountButton
\ No newline at end of file
diff --git a/src/components/Identity/IAMLogoutUserButton.jsx b/src/components/Identity/IAMLogoutUserButton.jsx
new file mode 100644
index 0000000..c273c0c
--- /dev/null
+++ b/src/components/Identity/IAMLogoutUserButton.jsx
@@ -0,0 +1,94 @@
+import { Button, CloseButton, Dialog, Portal } from '@chakra-ui/react';
+import { useSelector } from 'react-redux'
+import ToastWizard from '../toastWizard';
+import { useState } from 'react';
+import server, { JSONResponse } from '../../networking';
+
+function IAMLogoutUserButton({ targetProfileID }) {
+    const { accountID, superuser } = useSelector(state => state.auth);
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [invalidatingSession, setInvalidatingSession] = useState(false);
+
+    const handleUserSessionInvalidate = async () => {
+        if (superuser !== true) {
+            ToastWizard.standard("error", "Superuser privileges required to log out other users.")
+            return;
+        }
+        if (targetProfileID === accountID) {
+            ToastWizard.standard("error", "Unexpected session invalidation attempt for admin profile", "You cannot invalidate your own session. To log yourself out, please click the avatar at the top-right.")
+            return;
+        }
+
+        setInvalidatingSession(true);
+
+        try {
+            const response = await server.post('/admin/invalidateUserSession', {
+                userID: targetProfileID
+            })
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "User session invalidated", "The user will need to re-login if they had already logged in.")
+                setDialogOpen(false);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in user session invalidation request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "User session invalidation failed", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't invalidate the user's login session. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in user session invalidation request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't invalidate the user's login session. Please try again.")
+            }
+        } finally {
+            setInvalidatingSession(false);
+        }
+    }
+
+    return (
+        <Dialog.Root size={'sm'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)} placement={'center'}>
+            <Dialog.Trigger asChild>
+                <Button variant={'ArchPrimary'}>Log user out</Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Logout user?</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            This will clear the user's session, if they have a valid one currently. They will have to re-login.
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" disabled={invalidatingSession}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimary'} onClick={handleUserSessionInvalidate} loading={invalidatingSession} loadingText={'Logging out user...'}>Confirm</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default IAMLogoutUserButton
\ No newline at end of file
diff --git a/src/components/Identity/IAMResetPasswordButton.jsx b/src/components/Identity/IAMResetPasswordButton.jsx
new file mode 100644
index 0000000..81c51f2
--- /dev/null
+++ b/src/components/Identity/IAMResetPasswordButton.jsx
@@ -0,0 +1,94 @@
+import { Button, CloseButton, Dialog, Portal } from '@chakra-ui/react';
+import { useSelector } from 'react-redux'
+import ToastWizard from '../toastWizard';
+import { useState } from 'react';
+import server, { JSONResponse } from '../../networking';
+
+function IAMResetPasswordButton({ targetProfileID }) {
+    const { accountID, superuser } = useSelector(state => state.auth);
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [resettingPassword, setResettingPassword] = useState(false);
+
+    const handleUserPasswordReset = async () => {
+        if (superuser !== true) {
+            ToastWizard.standard("error", "Superuser privileges required to reset a user's password.")
+            return;
+        }
+        if (targetProfileID === accountID) {
+            ToastWizard.standard("error", "Unexpected password reset attempt for admin profile", "You cannot reset your own password. To change your password, please click the avatar at the top-right.")
+            return;
+        }
+
+        setResettingPassword(true);
+
+        try {
+            const response = await server.post('/admin/resetPassword', {
+                userID: targetProfileID
+            })
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Password reset successfully", "New login instructions have been sent to the user.")
+                setDialogOpen(false);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in user password reset request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Password reset failed", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't reset the user's password. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in user password reset request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't reset the user's password. Please try again.")
+            }
+        } finally {
+            setResettingPassword(false);
+        }
+    }
+
+    return (
+        <Dialog.Root size={'sm'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)} placement={'center'}>
+            <Dialog.Trigger asChild>
+                <Button variant={'ArchPrimary'}>Reset Password</Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Reset user's password?</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            This will change the user's password to an auto-generated one and log them out. They will receive an email with new login instructions.
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" disabled={resettingPassword}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimary'} onClick={handleUserPasswordReset} loading={resettingPassword} loadingText={'Resetting...'}>Confirm</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default IAMResetPasswordButton
\ No newline at end of file
diff --git a/src/components/Identity/IAMStatisticBox.jsx b/src/components/Identity/IAMStatisticBox.jsx
new file mode 100644
index 0000000..0e62439
--- /dev/null
+++ b/src/components/Identity/IAMStatisticBox.jsx
@@ -0,0 +1,13 @@
+import { Box, Text } from '@chakra-ui/react'
+import React from 'react'
+
+function IAMStatisticBox({ metric, label }) {
+    return (
+        <Box bgColor={'gray.100'} w={'300px'} py={'30px'} borderRadius={'md'} boxShadow={'md'} display={'flex'} flexDir={'column'} alignItems={'center'}>
+            <Text fontSize={'2xl'} fontWeight={'bold'}>{metric}</Text>
+            <Text fontSize={'md'} color={'gray.600'}>{label}</Text>
+        </Box>
+    )
+}
+
+export default IAMStatisticBox
\ No newline at end of file
diff --git a/src/components/Identity/IAMUserCard.jsx b/src/components/Identity/IAMUserCard.jsx
new file mode 100644
index 0000000..0f5d4da
--- /dev/null
+++ b/src/components/Identity/IAMUserCard.jsx
@@ -0,0 +1,28 @@
+import { Avatar, Button, CloseButton, Dialog, Portal, Text, VStack } from '@chakra-ui/react'
+import { Tooltip } from '../ui/tooltip'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+
+function IAMUserCard({ userData }) {
+    const navigate = useNavigate();
+
+    return (
+        <Tooltip content={`Username: ${userData.username}`} showArrow positioning={{ placement: 'top' }}>
+            <VStack onClick={() => navigate(`/profile/${userData.userID}`)} px={'30px'} py={'20px'} w={'100%'} boxShadow={'lg'} borderRadius={'lg'} bgColor={'white'} cursor={'pointer'} _hover={{ boxShadow: '2xl' }} transition={'box-shadow 0.2s ease-in-out'}>
+                <Avatar.Root size={'2xl'} border={'2px solid'}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src={`${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${userData.userID}`} />
+                </Avatar.Root>
+
+                <Text fontSize={'lg'} fontWeight={'bold'} mt={'15px'} textAlign={'center'} w={'100%'}>{userData.fname + ' ' + userData.lname || userData.username}</Text>
+                {userData.role ? (
+                    <Text fontSize={'sm'} textAlign={'center'} w={'100%'}>{userData.role}</Text>
+                ) : (
+                    <Text fontSize={'xs'} textAlign={'center'} w={'100%'} fontStyle={'italic'}>Role Unavailable</Text>
+                )}
+            </VStack>
+        </Tooltip>
+    )
+}
+
+export default IAMUserCard
\ No newline at end of file
diff --git a/src/components/Identity/ProfileActionBar.jsx b/src/components/Identity/ProfileActionBar.jsx
index 2a87cc8..9750238 100644
--- a/src/components/Identity/ProfileActionBar.jsx
+++ b/src/components/Identity/ProfileActionBar.jsx
@@ -4,12 +4,15 @@ import { useEffect, useState } from 'react'
 import { LuSquarePlus, LuTrash2 } from 'react-icons/lu';
 import ToastWizard from '../toastWizard';
 import server, { JSONResponse } from '../../networking';
+import { useSelector } from 'react-redux';
 
-function ProfileActionBar({ accountInfo, originalAccountInfo, setAccountInfo, getAccountInfo, enterKeyHit }) {
+function ProfileActionBar({ accountInfo, originalAccountInfo, setAccountInfo, getAccountInfo, enterKeyHit, targetProfileID }) {
     const [changesMade, setChangesMade] = useState(false);
     const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
 
+    const { superuser } = useSelector(state => state.auth);
+
     useEffect(() => {
         setChangesMade(!isEqual(accountInfo, originalAccountInfo));
     }, [accountInfo, originalAccountInfo])
@@ -33,6 +36,8 @@ function ProfileActionBar({ accountInfo, originalAccountInfo, setAccountInfo, ge
         if (accountInfo.lname !== originalAccountInfo.lname) updateDict.lname = accountInfo.lname;
         if (accountInfo.contact !== originalAccountInfo.contact) updateDict.contact = accountInfo.contact;
         if (accountInfo.email !== originalAccountInfo.email) updateDict.email = accountInfo.email;
+        if (accountInfo.role !== originalAccountInfo.role && superuser === true) updateDict.role = accountInfo.role;
+        if (targetProfileID) updateDict.userID = targetProfileID;
 
         try {
             const response = await server.post('/profile/update', updateDict);
diff --git a/src/components/Identity/ProfileAvatar.jsx b/src/components/Identity/ProfileAvatar.jsx
index 0b974af..b9ce4cf 100644
--- a/src/components/Identity/ProfileAvatar.jsx
+++ b/src/components/Identity/ProfileAvatar.jsx
@@ -1,17 +1,26 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux';
 import ToastWizard from '../toastWizard';
 import server, { JSONResponse } from '../../networking';
-import { Avatar, Spinner } from '@chakra-ui/react';
+import { Avatar, Float, IconButton, Popover, Portal, Spinner, VStack } from '@chakra-ui/react';
+import { LuTrash2 } from 'react-icons/lu';
+import { BiCloudUpload } from 'react-icons/bi';
 
-function ProfileAvatar({ accountInfo }) {
+function ProfileAvatar({ accountInfo, targetProfileID, reloadAccountInfo }) {
     const { username, accountID } = useSelector(state => state.auth);
 
-    const [avatarSrc, setAvatarSrc] = useState(accountID && `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${accountID}`);
+    const [avatarSrc, setAvatarSrc] = useState(targetProfileID ? `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${targetProfileID}?t=${Date.now()}` : null);
     const [avatarUploading, setAvatarUploading] = useState(false);
+    const [deletingPicture, setDeletingPicture] = useState(false);
     const fileInputRef = useRef(null);
 
     const handleFileChange = async (e) => {
+        if (targetProfileID !== accountID) {
+            ToastWizard.standard("error", "You cannot change the avatar of another user, despite being a super user.");
+            fileInputRef.current.value = null;
+            return;
+        }
+
         if (e.target.files.length === 0) {
             ToastWizard.standard("warning", "No avatar image selected for upload")
             return;
@@ -56,6 +65,7 @@ function ProfileAvatar({ accountInfo }) {
 
                 // Success case
                 ToastWizard.standard("success", "Avatar updated successfully!");
+                reloadAccountInfo();
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -65,36 +75,109 @@ function ProfileAvatar({ accountInfo }) {
                 if (err.response.data.userErrorType()) {
                     ToastWizard.standard("error", "Avatar update failed.", err.response.data.message);
                 } else {
-                    ToastWizard.standard("error", "Something went wrong in updating your avatar.", "Please try again.");
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't update avatar. Please try again.");
                 }
             } else {
-                console.log("Unexpected error in login request:", err);
-                ToastWizard.standard("error", "Something went wrong in updating your avatar.", "Please try again.");
+                console.log("Unexpected error in avatar update request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't update avatar. Please try again.");
             }
         }
 
-        setAvatarSrc(accountID && `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${accountID}?t=${Date.now()}`);
+        setAvatarSrc(targetProfileID ? `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${targetProfileID}?t=${Date.now()}` : null);
         setAvatarUploading(false);
     }
 
+    const handleDeletePicture = async (e) => {
+        e.stopPropagation(); // Prevent triggering the avatar click event
+
+        if (accountInfo.pfp !== true) {
+            ToastWizard.standard("error", "No profile picture to delete.");
+            return;
+        }
+
+        setDeletingPicture(true);
+
+        try {
+            const response = await server.post('/profile/deletePicture', {
+                userID: targetProfileID
+            });
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Avatar deleted successfully.");
+                setAvatarSrc(targetProfileID ? `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${targetProfileID}?t=${Date.now()}` : null);
+                reloadAccountInfo();
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in avatar deletion request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Avatar deletion failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't delete avatar. Please try again.");
+                }
+            } else {
+                console.log("Unexpected error in avatar deletion request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't delete avatar. Please try again.");
+            }
+        } finally {
+            setDeletingPicture(false);
+        }
+    }
+
     const handleAvatarClick = (e) => {
-        fileInputRef.current.click();
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        } else {
+            ToastWizard.standard("warning", "Superusers cannot change user avatars.")
+        }
     };
 
+    useEffect(() => {
+        setAvatarSrc(targetProfileID ? `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${targetProfileID}?t=${Date.now()}` : null);
+    }, [targetProfileID]);
+
     return <>
-        <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleFileChange}
-            accept="image/*"
-            multiple={false}
-            style={{ display: 'none' }}
-        />
-        <Avatar.Root boxSize={'150px'} onClick={handleAvatarClick} cursor={'pointer'}>
+        {targetProfileID === accountID &&
+            <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                accept="image/*"
+                multiple={false}
+                style={{ display: 'none' }}
+            />
+        }
+        <Avatar.Root boxSize={'150px'} onClick={handleAvatarClick} cursor={targetProfileID === accountID ? 'pointer' : 'default'}>
             <Avatar.Fallback name={(accountInfo.fname && accountInfo.lname) ? `${accountInfo.fname} ${accountInfo.lname}` : username} />
             <Avatar.Image src={avatarSrc} />
+            {(accountInfo.pfp === true || avatarUploading) &&
+                <Float placement="bottom-end" offsetX="1" offsetY="1">
+                    <IconButton
+                        bgColor={avatarUploading ? 'primaryColour' : 'red'}
+                        color={'white'}
+                        _hover={{ bgColor: 'red.600' }}
+                        transition={'background-color 0.2s ease'}
+                        size={'xs'}
+                        onClick={handleDeletePicture}
+                        disabled={deletingPicture || avatarUploading}
+                    >
+                        {avatarUploading || deletingPicture ? <Spinner size={'xs'} /> : <LuTrash2 />}
+                    </IconButton>
+                </Float>
+            }
         </Avatar.Root>
-        {avatarUploading && <Spinner />}
     </>
 }
 
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 1062f4c..f50511a 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -29,7 +29,7 @@ function Navbar() {
             <Spacer />
             <Text cursor={'pointer'} onClick={handleLogoClick} fontSize={'2xl'} fontWeight={'bolder'} color={'white'} fontFamily={'Pixelify Sans'}>ArchAIve</Text>
             <Spacer />
-            <Avatar.Root onClick={handleProfileClick}>
+            <Avatar.Root onClick={handleProfileClick} cursor={'pointer'}>
                 <Avatar.Fallback name={username} />
                 <Avatar.Image src={accountID && `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${accountID}`} />
             </Avatar.Root>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 8ef87a5..e82df02 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,4 +1,4 @@
-import { Box, Button, CloseButton, Drawer, Image, Portal, Span, Text, VStack } from '@chakra-ui/react'
+import { Badge, Box, Button, CloseButton, Drawer, Image, Portal, Span, Text, VStack } from '@chakra-ui/react'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import logoVisual from '../assets/logoVisual.svg';
@@ -72,6 +72,9 @@ function Sidebar({ isOpen, onOpenChange }) {
                         </Drawer.Body>
                         <Drawer.Footer>
                             <Box w={'100%'} h={'100%'} display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'}>
+                                {superuser === true && (
+                                    <Badge size={'lg'} variant={'solid'} colorPalette={'pink'} mb={'10px'}>ADMIN</Badge>
+                                )}
                                 {username && (
                                     <Text fontSize={'md'} mb={'10px'}>Signed in: <Span fontWeight={'bold'}>{username}</Span></Text>
                                 )}
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
index e68f1c7..0a29358 100644
--- a/src/components/ui/toaster.jsx
+++ b/src/components/ui/toaster.jsx
@@ -15,7 +15,7 @@ export const toaster = createToaster({
   overlap: true
 })
 
-const toastColors = {
+const toastColours = {
   success: 'primaryColour',
   error: 'sccciColour',
   info: 'blue.500',
@@ -24,28 +24,37 @@ const toastColors = {
   default: 'white',
 };
 
+const toastFgColours = {
+  'success': 'white',
+  'error': 'white',
+  'info': 'white',
+  'warning': 'white',
+  'loading': 'black',
+  'default': 'black'
+}
+
 
 export const Toaster = () => {
   return (
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
         {(toast) => (
-          <Toast.Root width={{ md: 'sm' }} bg={toastColors[toast.type] || toastColors.default} borderRadius={'20px'}>
+          <Toast.Root width={{ md: 'sm' }} bg={toastColours[toast.type] || toastColours.default} borderRadius={'20px'}>
             {toast.type === 'loading' ? (
               <Spinner size='sm' color='blue.solid' />
             ) : (
               <Toast.Indicator />
             )}
             <Stack gap='1' flex='1' maxWidth='100%'>
-              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.title && <Toast.Title color={toastFgColours[toast.type] || toastFgColours.default}>{toast.title}</Toast.Title>}
               {toast.description && (
-                <Toast.Description>{toast.description}</Toast.Description>
+                <Toast.Description color={toastFgColours[toast.type] || toastFgColours.default}>{toast.description}</Toast.Description>
               )}
             </Stack>
             {toast.action && (
-              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+              <Toast.ActionTrigger color={toastFgColours[toast.type] || toastFgColours.default}>{toast.action.label}</Toast.ActionTrigger>
             )}
-            {toast.closable && <Toast.CloseTrigger />}
+            {toast.closable && <Toast.CloseTrigger color={toastFgColours[toast.type] || toastFgColours.default} />}
           </Toast.Root>
         )}
       </ChakraToaster>
diff --git a/src/main.jsx b/src/main.jsx
index 93b5ac2..5500b43 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -26,6 +26,8 @@ import ArtefactEditor from './pages/ArtefactEditor.jsx';
 import GroupView from './pages/GroupView.jsx';
 import Profile from './pages/Profile.jsx';
 import AdminConsole from './pages/AdminConsole.jsx';
+import UserManagement from './pages/UserManagement.jsx';
+import SuperuserLayout from './SuperuserLayout.jsx';
 
 const store = configureStore({
     reducer: {
@@ -50,21 +52,24 @@ createRoot(document.getElementById('root')).render(
                                 <Route path='auth'>
                                     <Route path='login' element={<Login />} />
                                 </Route>
-
-                                <Route path='studio'>
-                                    <Route index element={<DataStudio />} />
-                                    <Route path='editor'>
-                                        <Route path=':colID/:artID' element={<GroupView  />} />
-                                        <Route path='artefact/:artID' element={<ArtefactEditor />} />
-                                    </Route>
-                                </Route>
                             </Route>
 
                             {/* Protected Pages */}
                             <Route element={<ProtectedLayout />}>
                                 <Route path='import' element={<DataImport />} />
                                 <Route path='profile' element={<Profile />} />
-                                <Route path='admin' element={<AdminConsole />} />
+
+                                <Route path='studio'>
+                                    <Route index element={<DataStudio />} />
+                                    <Route path=':colID' element={<GroupView  />} />
+                                    <Route path=':colID/:artID' element={<ArtefactEditor />} />
+                                </Route>
+
+                                <Route path='profile/:userID' element={<Profile />} />
+                                <Route path='admin' element={<SuperuserLayout />}>
+                                    <Route index element={<AdminConsole />} />
+                                    <Route path='iam' element={<UserManagement />} />
+                                </Route>
                             </Route>
                         </Route>
 
diff --git a/src/pages/AdminConsole.jsx b/src/pages/AdminConsole.jsx
index 5ae7505..9769402 100644
--- a/src/pages/AdminConsole.jsx
+++ b/src/pages/AdminConsole.jsx
@@ -1,11 +1,18 @@
 import { Box, Button, Card, Text } from '@chakra-ui/react'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 
 function AdminConsole() {
+    const navigate = useNavigate();
+
+    const handleNav = (path) => {
+        navigate(path);
+    }
+
     return (
         <Box p={'20px'}>
             <Text fontSize={'2xl'} fontWeight={'bold'}>Admin Console</Text>
-            <Box display={'flex'} flexDir={'row'} justifyContent={'space-around'} alignItems={'center'} h={'100%'} w={'100%'} mt={'20px'}>
+            <Box display={'flex'} flexDir={'row'} justifyContent={'flex-start'} flexWrap={'wrap'} gap={'20px'} alignItems={'center'} h={'100%'} w={'100%'} mt={'20px'}>
                 <Card.Root width="320px" variant={'elevated'} size={'lg'}>
                     <Card.Body gap="2">
                         <Card.Title mb="2">User Management</Card.Title>
@@ -14,19 +21,7 @@ function AdminConsole() {
                         </Card.Description>
                     </Card.Body>
                     <Card.Footer justifyContent="flex-end">
-                        <Button variant={'ArchPrimary'} size={'md'}>Manage Users</Button>
-                    </Card.Footer>
-                </Card.Root>
-
-                <Card.Root width="320px" variant={'elevated'} size={'lg'}>
-                    <Card.Body gap="2">
-                        <Card.Title mb="2">Data Management</Card.Title>
-                        <Card.Description fontSize={'md'}>
-                            Analyse and manage batches, collections, artefacts and other data that goes into the platform.
-                        </Card.Description>
-                    </Card.Body>
-                    <Card.Footer justifyContent="flex-end">
-                        <Button variant={'ArchPrimary'} size={'md'}>Manage Data</Button>
+                        <Button variant={'ArchPrimary'} size={'md'} onClick={() => handleNav('/admin/iam')}>Manage Users</Button>
                     </Card.Footer>
                 </Card.Root>
 
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 5a297fe..e1f30c5 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -1,11 +1,126 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, Text, Image } from "@chakra-ui/react";
 import { useParams } from 'react-router-dom';
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import ToastWizard from "../components/toastWizard";
+import server, { JSONResponse } from "../networking";
+import CentredSpinner from "../components/CentredSpinner";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import EditorCard from "../components/DataStudio/editorCard";
+import { FaCircleArrowLeft } from "react-icons/fa6";
 
 function ArtefactEditor() {
     const { artID } = useParams();
+    const [metadata, setMetadata] = useState(null);
+    const { loaded } = useSelector(state => state.auth);
+
+    // Metadata fetching function
+    const fetchMetadata = async () => {
+        try {
+            const response = await server.get(`/cdn/artefactMetadata/${artID}`);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw errObject;
+                }
+
+                // Success case
+                setMetadata(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 fetching metadata:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard(
+                        "error",
+                        "We could not load the details",
+                        err.response.data.message || "There was a problem retrieving this item information. Please try again later.",
+                        3000,
+                        true,
+                        fetchMetadata,
+                        'Retry'
+                    );
+                } else {
+                    ToastWizard.standard(
+                        "error",
+                        "Something went wrong",
+                        "We are having trouble loading the information. Please try again in a moment.",
+                        3000,
+                        true,
+                        fetchMetadata,
+                        'Retry'
+                    );
+                }
+            } else {
+                console.log("Unexpected error in fetching metadata:", err.response.data.fullMessage());
+                ToastWizard.standard(
+                    "error",
+                    "Connection issue",
+                    "We could not connect to the server. Please check your internet connection or try again later.",
+                    3000,
+                    true,
+                    fetchMetadata,
+                    'Retry'
+                );
+            }
+            setMetadata(null);
+        }
+    };
+
+    // Fetch metadata if user is loaded
+    useEffect(() => {
+        if (loaded) {
+            fetchMetadata()
+        }
+    }, [loaded]);
+
+    // Show loading spinner while data is being fetched
+    if (!metadata) {
+        return <CentredSpinner />
+    }
+
     return (
-        <Box>ArtefactEditor for {artID}</Box>
+        <Box h="80vh">
+            <Flex mt={6} flexDirection="row">
+                <FaCircleArrowLeft size={40} color='darkBlue' />
+                <Box ml={6}>
+                    <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
+                    <Text fontSize="md" mt={1} mb={2}>{metadata.name}</Text>
+                </Box>
+            </Flex>
+
+            <Flex h="calc(79vh - 45px)">
+                <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-start">
+                    <FaChevronLeft size={30} />
+                </Flex>
+
+                <Box width="46%" overflow="hidden" p={3}>
+                    <Image
+                        src={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`}
+                        w="100%"
+                        h="100%"
+                        objectFit="contain"
+                        borderRadius={15}
+                    />
+                </Box>
+
+                <Box width="46%" p={3}>
+                    <EditorCard metadata={metadata} artefactId={artID} refreshArtefactData={fetchMetadata}/>
+                </Box>
+
+                <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">
+                    <FaChevronRight size={30}/>
+                </Flex>
+            </Flex>
+        </Box>
     );
 }
 
-export default ArtefactEditor;
+export default ArtefactEditor;
\ No newline at end of file
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 575240f..d3fbe4d 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -1,9 +1,9 @@
 import { useParams } from 'react-router-dom';
 
 function GroupView() {
-    const { artID, colID } = useParams();
+    const { colID } = useParams();
 
-    return <div>GroupView for collection {colID}, {artID}</div>;
+    return <div>GroupView for collection {colID}</div>;
 }
 
 export default GroupView;
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index 2329c60..3091463 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -1,23 +1,28 @@
-import { Avatar, Box, Button, CloseButton, Dialog, Field, FileUpload, Flex, Grid, GridItem, HStack, Input, Portal, Skeleton, SkeletonText, Spacer, Spinner, Stack, Text, useMediaQuery, VStack } from '@chakra-ui/react'
+import { Alert, Avatar, Box, Button, CloseButton, Dialog, Field, FileUpload, Flex, Grid, GridItem, HStack, Input, Portal, Skeleton, SkeletonCircle, SkeletonText, Spacer, Spinner, Stack, Text, useMediaQuery, VStack } from '@chakra-ui/react'
 import { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { withMask } from 'use-mask-input';
 import { logout } from '../slices/AuthState';
 import ToastWizard from '../components/toastWizard';
 import server, { JSONResponse } from '../networking';
-import { GiExitDoor } from 'react-icons/gi';
 import { IoLogOutOutline } from 'react-icons/io5';
 import ProfileActionBar from '../components/Identity/ProfileActionBar';
 import AccountActivityCard from '../components/Identity/AccountActivityCard';
 import ChangePasswordDialogButton from '../components/Identity/ChangePasswordDialogButton';
 import ProfileAvatar from '../components/Identity/ProfileAvatar';
+import IAMLogoutUserButton from '../components/Identity/IAMLogoutUserButton';
+import IAMResetPasswordButton from '../components/Identity/IAMResetPasswordButton';
+import IAMDeleteAccountButton from '../components/Identity/IAMDeleteAccountButton';
 
 function Profile() {
     const navigate = useNavigate();
     const dispatch = useDispatch();
+    const { userID } = useParams();
 
-    const { username, accountID } = useSelector(state => state.auth);
+    const { accountID, superuser, loaded } = useSelector(state => state.auth);
+
+    const [targetProfileID, setTargetProfileID] = useState(null);
 
     // Loading states
     const [loggingOut, setLoggingOut] = useState(false);
@@ -34,6 +39,11 @@ function Profile() {
     const [isSmallerThan800] = useMediaQuery("(max-width: 800px)");
 
     const handleLogout = () => {
+        if (targetProfileID !== accountID) {
+            ToastWizard.standard("error", "You cannot log out another user", "Please go to your own profile to log out.");
+            return;
+        }
+
         setLoggingOut(true);
         const logoutPromise = new Promise((resolve, reject) => {
             dispatch(logout(true, (msg) => {
@@ -89,7 +99,7 @@ function Profile() {
     const getAccountInfo = async () => {
         setInfoLoading(true);
         try {
-            const response = await server.get(`/cdn/profileInfo/${accountID}?includeLogs=true`);
+            const response = await server.get(`/cdn/profileInfo/${targetProfileID}?includeLogs=true`);
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
@@ -108,6 +118,7 @@ function Profile() {
                 setOriginalAccountInfo(preppedAccInfo);
                 setAccountInfo(preppedAccInfo);
                 setAuditLogsData(processAuditLogs(response.data.raw.info.logs || []));
+                setInfoLoading(false);
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -124,20 +135,24 @@ function Profile() {
                 ToastWizard.standard("error", "Couldn't retrieve profile.", "Failed to retrieve your information. Please try again.", 3000, true, getAccountInfo, 'Retry');
             }
         }
-
-        setInfoLoading(false);
     }
 
     useEffect(() => {
-        if (username) {
+        if (targetProfileID) {
             getAccountInfo();
         }
-    }, [])
+    }, [targetProfileID])
 
-    // useEffect(() => {
-    //     console.log(accountInfo)
-    //     console.log(auditLogsData)
-    // }, [accountInfo, auditLogsData])
+    useEffect(() => {
+        if (loaded) {
+            if (userID && userID !== accountID && !superuser) {
+                console.log("Unauthorised access to superuser protected resource; redirecting...")
+                navigate('/profile');
+            } else {
+                setTargetProfileID(userID || accountID);
+            }
+        }
+    }, [loaded, userID])
 
     const handleEnterKey = (e) => {
         if (e.key === 'Enter') {
@@ -147,15 +162,29 @@ function Profile() {
 
     return <>
         <Grid
-            templateRows={isSmallerThan800 ? "repeat(6, 1fr)" : "repeat(3, 1fr)"}
+            templateRows={isSmallerThan800 ? "repeat(7, 1fr)" : "repeat(3, 1fr)"}
             templateColumns={isSmallerThan800 ? "repeat(1, 1fr)" : "repeat(2, 1fr)"}
             gap={10}
             p={isSmallerThan800 ? '10px 0px 30px 0px' : '20px'}
-            mt={isSmallerThan800 ? '30px' : '30px'}
+            mt={'10px'}
         >
-            <GridItem colSpan={1} rowSpan={3}>
-                <VStack display={'flex'} flexDir={'column'} alignItems={'center'} border={'thin solid lightgrey'} borderRadius={'20px'} p={'20px'} h={'100%'} w={'100%'} shadow={'lg'} pb={'40px'}>
-                    <ProfileAvatar accountInfo={accountInfo} />
+            <GridItem colSpan={1} rowSpan={isSmallerThan800 ? 4 : 3}>
+                <VStack display={'flex'} flexDir={'column'} alignItems={'center'} border={'thin solid lightgrey'} borderRadius={'20px'} p={'20px'} h={'100%'} w={'100%'} shadow={'lg'}>
+                    {targetProfileID !== accountID &&
+                        <Alert.Root mb={'20px'} status="info">
+                            <Alert.Indicator />
+                            <Alert.Content>
+                                <Alert.Title><strong>Superuser Access</strong></Alert.Title>
+                                <Alert.Description>
+                                    You're viewing this profile with superuser privileges. You're allowed to carry out some actions on this profile, but be cautious as changes will affect the user directly.
+                                </Alert.Description>
+                            </Alert.Content>
+                        </Alert.Root>
+                    }
+
+                    <SkeletonCircle loading={infoLoading}>
+                        <ProfileAvatar accountInfo={accountInfo} targetProfileID={targetProfileID} reloadAccountInfo={getAccountInfo} />
+                    </SkeletonCircle>
 
                     <Skeleton loading={infoLoading} textAlign={'center'} mt={'10px'}>
                         <Text fontSize={'2xl'} fontWeight={'bold'} mt={'10px'}>{fullName}</Text>
@@ -165,39 +194,38 @@ function Profile() {
                     <Text alignSelf={'flex-start'} fontSize={'xl'} fontWeight={'bolder'} mt={'40px'}>Name & Account Details</Text>
 
                     <Skeleton loading={infoLoading} w={'100%'} alignSelf={'flex-start'} mt={'10px'} h={'250px'}>
-                        <HStack alignItems={'flex-start'} w={'100%'} flexWrap={'wrap'}>
+                        <HStack alignItems={'flex-start'} w={'100%'} gap={'10px'} flexWrap={'wrap'}>
                             <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
                                 <Field.Label fontSize={'md'}>First Name</Field.Label>
                                 <Input placeholder="e.g John" type='text' onKeyDown={handleEnterKey} borderColor={accountInfo.fname !== originalAccountInfo.fname ? 'darkblue' : 'inherit'} value={accountInfo.fname || ''} onChange={e => setAccountInfo({ ...accountInfo, fname: e.target.value })} />
                             </Field.Root>
 
-                            <Spacer />
-
                             <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
                                 <Field.Label fontSize={'md'}>Last Name</Field.Label>
                                 <Input placeholder="e.g Appleseed" type='text' onKeyDown={handleEnterKey} borderColor={accountInfo.lname !== originalAccountInfo.lname ? 'darkblue' : 'inherit'} value={accountInfo.lname || ''} onChange={e => setAccountInfo({ ...accountInfo, lname: e.target.value })} />
                             </Field.Root>
 
-                            <Spacer />
-
                             <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
                                 <Field.Label fontSize={'md'}>Username</Field.Label>
                                 <Input placeholder="e.g johnappleseed" type='text' onKeyDown={handleEnterKey} borderColor={accountInfo.username !== originalAccountInfo.username ? 'darkblue' : 'inherit'} value={accountInfo.username || ''} onChange={e => setAccountInfo({ ...accountInfo, username: e.target.value })} />
                             </Field.Root>
 
-                            <Spacer />
-
                             <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
                                 <Field.Label fontSize={'md'}>Email</Field.Label>
                                 <Input placeholder="e.g me@example.com" type='email' onKeyDown={handleEnterKey} borderColor={accountInfo.email !== originalAccountInfo.email ? 'darkblue' : 'inherit'} value={accountInfo.email || ''} onChange={e => setAccountInfo({ ...accountInfo, email: e.target.value })} />
                             </Field.Root>
 
-                            <Spacer />
-
                             <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
                                 <Field.Label fontSize={'md'}>Contact</Field.Label>
                                 <Input placeholder="e.g 1234 5678" type='tel' onKeyDown={handleEnterKey} ref={withMask("9999 9999")} borderColor={accountInfo.contact !== originalAccountInfo.contact ? 'darkblue' : 'inherit'} value={accountInfo.contact || ''} onChange={e => setAccountInfo({ ...accountInfo, contact: e.target.value })} />
                             </Field.Root>
+
+                            {superuser === true && <>
+                                <Field.Root mt={'10px'} w={isSmallerThan800 ? '100%' : '45%'}>
+                                    <Field.Label fontSize={'md'}>Role</Field.Label>
+                                    <Input placeholder="e.g Researcher" type='text' onKeyDown={handleEnterKey} borderColor={accountInfo.role !== originalAccountInfo.role ? 'darkblue' : 'inherit'} value={accountInfo.role || ''} onChange={e => setAccountInfo({ ...accountInfo, role: e.target.value })} />
+                                </Field.Root>
+                            </>}
                         </HStack>
                     </Skeleton>
                 </VStack>
@@ -213,20 +241,29 @@ function Profile() {
                     <Text alignSelf={'flex-start'} fontSize={'xl'} fontWeight={'bolder'} mt={'20px'}>Security & Authentication</Text>
 
                     <SkeletonText noOfLines={1} loading={infoLoading} textAlign={'left'}>
-                        <Text>Last Login: {originalAccountInfo.lastLogin}</Text>
+                        <Text>Last Login: {originalAccountInfo.lastLogin || 'Never'}</Text>
                     </SkeletonText>
 
                     <Spacer />
 
-                    <Box display={'flex'} flexDir={'row'} alignItems={'center'} justifyContent={'flex-start'} mt={'20px'} w={'100%'}>
-                        <ChangePasswordDialogButton />
-                        <Spacer />
-                        <Button variant={'ArchPrimary'} ml={'20px'} onClick={handleLogout} loading={loggingOut} loadingText={'Logging out...'}><IoLogOutOutline />Logout</Button>
-                    </Box>
+                    {!infoLoading &&
+                        <Box display={'flex'} flexDir={'row'} alignItems={'center'} gap={'10px'} justifyContent={'flex-start'} mt={'20px'} flexWrap={'wrap'}>
+                            {targetProfileID === accountID ? <>
+                                <ChangePasswordDialogButton />
+                                <Spacer />
+                                <Button variant={'ArchPrimary'} onClick={handleLogout} loading={loggingOut} loadingText={'Logging out...'}><IoLogOutOutline />Logout</Button>
+                            </> : <>
+                                <IAMLogoutUserButton targetProfileID={targetProfileID} />
+                                <IAMResetPasswordButton targetProfileID={targetProfileID} />
+                                <Spacer />
+                                <IAMDeleteAccountButton targetUsername={originalAccountInfo.username} targetProfileID={targetProfileID} />
+                            </>}
+                        </Box>
+                    }
                 </VStack>
             </GridItem>
         </Grid >
-        <ProfileActionBar accountInfo={accountInfo} originalAccountInfo={originalAccountInfo} setAccountInfo={setAccountInfo} getAccountInfo={getAccountInfo} enterKeyHit={enterKeyHit} />
+        <ProfileActionBar accountInfo={accountInfo} originalAccountInfo={originalAccountInfo} setAccountInfo={setAccountInfo} getAccountInfo={getAccountInfo} enterKeyHit={enterKeyHit} targetProfileID={targetProfileID} />
     </>
 }
 
diff --git a/src/pages/UserManagement.jsx b/src/pages/UserManagement.jsx
new file mode 100644
index 0000000..75bc85c
--- /dev/null
+++ b/src/pages/UserManagement.jsx
@@ -0,0 +1,102 @@
+import { Box, SimpleGrid, Skeleton, Text } from '@chakra-ui/react'
+import IAMStatisticBox from '../components/Identity/IAMStatisticBox'
+import IAMUserCard from '../components/Identity/IAMUserCard'
+import { useSelector } from 'react-redux'
+import { useState } from 'react'
+import server, { JSONResponse } from '../networking';
+import ToastWizard from '../components/toastWizard';
+import { useEffect } from 'react'
+import CreateUserDialog from '../components/Identity/CreateUserDialog'
+
+function UserManagement() {
+    const { loaded, superuser } = useSelector(state => state.auth);
+
+    const [userData, setUserData] = useState({});
+    const [retrievingUsers, setRetrievingUsers] = useState(true);
+
+    const retrieveUserData = async () => {
+        setRetrievingUsers(true);
+        try {
+            const response = await server.get('/admin/listUsers')
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                var rawData = response.data.raw.users; // dictionary where userID: userDict
+                for (const userID in rawData) {
+                    rawData[userID].userID = userID; // add userID to each user object
+                }
+
+                setUserData(rawData);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in login request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Failed to retrieve users.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Failed to retrieve users. Please try again later.");
+                }
+            } else {
+                console.log("Unexpected error in login request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Failed to retrieve users. Please try again later.");
+            }
+        } finally {
+            setRetrievingUsers(false);
+        }
+    }
+
+    useEffect(() => {
+        if (loaded && superuser === true) {
+            retrieveUserData();
+        }
+    }, [loaded, superuser]);
+
+    return (
+        <Box display={'flex'} flexDir={'column'} alignItems={'flex-start'} justifyContent={'center'} h={'100%'} w={'100%'} p={'20px'} mt={'20px'}>
+            <Box display={'flex'} flexDir={'row'} alignItems={'flex-start'}>
+                <Text fontSize={'2xl'} fontWeight={'bold'}>User Management</Text>
+                <CreateUserDialog />
+            </Box>
+
+            <Box display={'flex'} flexDir={'row'} alignItems={'center'} justifyContent={'space-around'} w={'100%'} mt={'20px'} flexWrap={'wrap'} gap={'20px'}>
+                <IAMStatisticBox metric={100} label={'Total Users'} />
+                <IAMStatisticBox metric={7} label={'Recently Active'} />
+                <IAMStatisticBox metric={5} label={'Inactive Users'} />
+            </Box>
+
+            <Text fontSize={'lg'} fontWeight={'bold'} mt={'40px'}>Manage & View Accounts</Text>
+
+            <SimpleGrid
+                columns={{ base: 2, sm: 3, md: 4, lg: 5, xl: 6 }}
+                gap={'20px'}
+                mt={'20px'}
+                w={'100%'}
+            >
+                {retrievingUsers ? (
+                    <Skeleton w={'200px'} h={'200px'} borderRadius={'lg'} />
+                ) : (
+                    Object.keys(userData).length > 0 ? (
+                        Object.values(userData).map((user) => (
+                            <IAMUserCard key={user.userID} userData={user} />
+                        ))
+                    ) : (
+                        <Text>No regular users found.</Text>
+                    )
+                )}
+            </SimpleGrid>
+        </Box>
+    )
+}
+
+export default UserManagement
\ No newline at end of file