diff --git a/src/components/Catalogue/cardComponent.jsx b/src/components/Catalogue/cardComponent.jsx
index 9a67ce8..4dcb16a 100644
--- a/src/components/Catalogue/cardComponent.jsx
+++ b/src/components/Catalogue/cardComponent.jsx
@@ -14,13 +14,13 @@ const CardComponent = ({ imageSrc, itemTitle, itemDescription, expanded }) => {
                     alt={itemTitle}
                     loading={expanded ? "eager" : "lazy"}
                     onLoad={() => setIsImageLoaded(true)}
-                        height="180px"
+                    height="180px"
                     width="100%"
                 />
             </Skeleton>
             <Card.Body>
                 <Skeleton loading={isLoading}>
-                    <Card.Title>{itemTitle}</Card.Title>
+                    <Card.Title lineClamp={1}>{itemTitle}</Card.Title>
                 </Skeleton>
                 {expanded && (
                     <Skeleton loading={isLoading} mt={2}>
diff --git a/src/components/Catalogue/catalogueItemView.jsx b/src/components/Catalogue/catalogueItemView.jsx
index 2afa607..2de7a53 100644
--- a/src/components/Catalogue/catalogueItemView.jsx
+++ b/src/components/Catalogue/catalogueItemView.jsx
@@ -356,7 +356,7 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                                 gap={2}
                                                             >
                                                                 <Text
-                                                                    fontSize="xl"
+                                                                    fontSize="lg"
                                                                     fontWeight="bold"
                                                                 >
                                                                     {item.title}
@@ -491,8 +491,8 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                         >
                                                             <Text
                                                                 fontSize={{
-                                                                    md: "xl",
-                                                                    lg: "2xl",
+                                                                    md: "lg",
+                                                                    lg: "xl",
                                                                 }}
                                                                 fontWeight="bold"
                                                                 mr={4}
diff --git a/src/components/DataStudio/associationCard.jsx b/src/components/DataStudio/associationCard.jsx
new file mode 100644
index 0000000..900e7a8
--- /dev/null
+++ b/src/components/DataStudio/associationCard.jsx
@@ -0,0 +1,34 @@
+import { Card, Box, Text, Flex } from "@chakra-ui/react";
+import AssociationSwitch from "./associationSwitch";
+
+function AssociationCard({ associationData, isMember, onToggle }) {
+    if (!associationData) return null;
+
+    return (
+        <Card.Root direction="row" variant="outline" p={4}>
+            <Card.Body p={0}>
+                <Flex flexDirection="row" justifyContent="space-between" gap={4} alignItems="center">
+                    {/* Left: title & description */}
+                    <Box flex="1">
+                        <Text fontWeight="bold" fontSize="lg" mb={1}>
+                            {associationData.name || "Untitled"}
+                        </Text>
+                        <Text fontSize="sm" color="gray.600" lineClamp={1}>
+                            {associationData.description}
+                        </Text>
+                    </Box>
+
+                    {/* Right: membership switch */}
+                    <Box>
+                        <AssociationSwitch
+                            isMember={isMember}
+                            onToggle={onToggle}
+                        />
+                    </Box>
+                </Flex>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+
+export default AssociationCard;
\ No newline at end of file
diff --git a/src/components/DataStudio/associationSwitch.jsx b/src/components/DataStudio/associationSwitch.jsx
new file mode 100644
index 0000000..75a9114
--- /dev/null
+++ b/src/components/DataStudio/associationSwitch.jsx
@@ -0,0 +1,26 @@
+import { Switch } from "@chakra-ui/react";
+import { HiCheck, HiX } from "react-icons/hi";
+
+const AssociationSwitch = ({ isMember, onToggle }) => {
+    return (
+        <Switch.Root
+            size="lg"
+            checked={isMember}
+            onCheckedChange={(details) => onToggle(details.checked)}
+            colorPalette={'green'}
+        >
+            <Switch.HiddenInput />
+            <Switch.Control>
+                <Switch.Thumb>
+                    <Switch.ThumbIndicator
+                        fallback={<HiX color="black" />}
+                    >
+                        <HiCheck />
+                    </Switch.ThumbIndicator>
+                </Switch.Thumb>
+            </Switch.Control>
+        </Switch.Root>
+    );
+};
+
+export default AssociationSwitch;
\ No newline at end of file
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 0b1e50b..013277d 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -6,6 +6,7 @@ import MetadataToggle from "./metadataToggle";
 import ArtefactEditorActionBar from "./artefactEditorActionBar";
 import ToastWizard from "../toastWizard";
 import FigureDisplaySection from "./figureDisplay";
+import ManageAssociationsDialog from "./manageAssociationsDialog";
 
 // Helper function to render text with labeled entities highlighted
 function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
@@ -91,6 +92,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
     const [isEditing, setIsEditing] = useState(false);
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const hoverTimeoutRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
     
     // Change detection states
     const [originalArtefactData, setOriginalArtefactData] = useState({});
@@ -164,7 +166,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         <Card.Title>Artefact Details</Card.Title>
                     </Flex>
                     <Flex alignItems="center" flexDirection={isMobile? "column" : "row"} gap={4} w={isMobile ? "70%" : "auto"}>
-                        <Button size="sm" variant="ArchPrimaryAlt" w={isMobile ? "100%" : "auto"}>
+                        <Button onClick={() => setIsOpen(true)} size="sm" variant="ArchPrimaryAlt" w={isMobile ? "100%" : "auto"}>
                             Manage Associations
                         </Button>
                         <Button size="sm" variant="ArchPrimary" onClick={isEditing ? handleCancelClick : handleEditClick} w={isMobile ? "100%" : "auto"}>
@@ -364,6 +366,12 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                 setIsEditing={setIsEditing}
                 isMMArtefact={isMMArtefact}
             />
+
+            <ManageAssociationsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                itemID={artefactId}
+            />
         </>
     );
 }
diff --git a/src/components/DataStudio/groupCardItem.jsx b/src/components/DataStudio/groupCardItem.jsx
index b7315e2..c9ec975 100644
--- a/src/components/DataStudio/groupCardItem.jsx
+++ b/src/components/DataStudio/groupCardItem.jsx
@@ -1,7 +1,13 @@
 import { Box } from "@chakra-ui/react";
 import CardComponent from "../Catalogue/cardComponent";
+import { useNavigate } from "react-router-dom";
+import GroupItemMenu from "./groupItemMenu";
+import ManageAssociationsDialog from "./manageAssociationsDialog";
+import { useState } from "react";
 
-const GroupCardItem = ({ itemTitle, itemDescription, imageSrc }) => {
+const GroupCardItem = ({ item, colID, fetchCollection }) => {
+    const navigate = useNavigate();
+    const [isOpen, setIsOpen] = useState(false);
 
     return (
         <>
@@ -10,16 +16,42 @@ const GroupCardItem = ({ itemTitle, itemDescription, imageSrc }) => {
                 cursor="pointer"
                 w="300px"
                 borderRadius="md"
+                position="relative"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    navigate(`/studio/${colID}/${item.id}`);
+                }}
             >
                 <CardComponent
-                    imageSrc={imageSrc}
-                    itemTitle={itemTitle}
-                    itemDescription={itemDescription}
+                    imageSrc={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${item.id}`}
+                    itemTitle={item.title}
+                    itemDescription={item.description}
                     expanded={true}
                 />
+
+                {/* 3 Dot Menu */}
+                <Box
+                    position="absolute"
+                    top={3}
+                    right={3}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <GroupItemMenu
+                        onEdit={() => navigate(`/studio/${colID}/${item.id}`)}
+                        onManage={() => setIsOpen(true)}
+                    />
+                </Box>
             </Box>
+
+            {/* Centered Manage Associations Dialog */}
+            <ManageAssociationsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                itemID={item.id}
+                fetchCollection={fetchCollection}
+            />
         </>
     );
 };
 
-export default GroupCardItem;
\ No newline at end of file
+export default GroupCardItem;
diff --git a/src/components/DataStudio/groupItemMenu.jsx b/src/components/DataStudio/groupItemMenu.jsx
new file mode 100644
index 0000000..885b338
--- /dev/null
+++ b/src/components/DataStudio/groupItemMenu.jsx
@@ -0,0 +1,40 @@
+import { Box, Menu, Portal } from "@chakra-ui/react";
+import { CgMoreVerticalAlt } from "react-icons/cg";
+
+const GroupItemMenu = ({ onEdit, onManage }) => {
+    return (
+        <Menu.Root positioning={{ placement: "bottom" }}>
+            <Menu.Trigger asChild>
+                <Box
+                    cursor="pointer"
+                    borderRadius="full"
+                    bg="white"
+                    boxShadow="md"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    p={0.5}
+                    _hover={{ transform: "scale(1.05)" }}
+                    transition="transform 0.1s ease"
+                >
+                    <CgMoreVerticalAlt size={22} />
+                </Box>
+            </Menu.Trigger>
+
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content zIndex={1500}>
+                        <Menu.Item value="edit-artefacts" onClick={onEdit}>
+                            Edit Artefact
+                        </Menu.Item>
+                        <Menu.Item value="manage-associations" onClick={onManage}>
+                            Manage Associations
+                        </Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
+    );
+};
+
+export default GroupItemMenu;
diff --git a/src/components/DataStudio/manageAssociationsDialog.jsx b/src/components/DataStudio/manageAssociationsDialog.jsx
new file mode 100644
index 0000000..e4c3b24
--- /dev/null
+++ b/src/components/DataStudio/manageAssociationsDialog.jsx
@@ -0,0 +1,198 @@
+import { Button, CloseButton, Dialog, Portal, Box } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import ToastWizard from "../toastWizard";
+import server, { JSONResponse } from "../../networking"
+import AssociationCard from "./associationCard";
+
+function ManageAssociationsDialog({ isOpen, onClose, itemID, fetchCollection }) {
+    const [association, setAssociation] = useState(null);
+    const [originalStates, setOriginalStates] = useState({});
+    const [currentStates, setCurrentStates] = useState({});
+    const [hasChanges, setHasChanges] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const fetchAssociation = async () => {
+        try {
+            const response = await server.get(`/cdn/retrieveAssociationInfo/${itemID}`);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                const associationData = response.data.raw.data;
+                setAssociation(associationData);
+                
+                // Initialize original and current states
+                const initialStates = {};
+                associationData.forEach(assoc => {
+                    initialStates[assoc.id] = assoc.isMember;
+                });
+                setOriginalStates(initialStates);
+                setCurrentStates(initialStates);
+                setHasChanges(false);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in fetching association:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Error fetching associations", err.response.data.message)
+                } else {
+                    ToastWizard.standard("error", "An Error Occurred", "Unable to fetch associations. Please try again later.", 3000, true, fetchAssociation, 'Retry')
+                }
+            } else {
+                console.log("Unexpected error in fetching association:", err);
+                ToastWizard.standard("error", "An Error Occurred", "Unable to fetch associations. Please try again later.", 3000, true, fetchAssociation, 'Retry')
+            }
+        }
+    };
+
+    const handleAssociationChange = (assocId, isMember) => {
+        const newStates = { ...currentStates, [assocId]: isMember };
+        setCurrentStates(newStates);
+        
+        // Check if there are any changes
+        const hasAnyChanges = Object.keys(newStates).some(id => 
+            newStates[id] !== originalStates[id]
+        );
+        setHasChanges(hasAnyChanges);
+    };
+
+    const handleReset = () => {
+        ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
+        setCurrentStates(originalStates);
+        setHasChanges(false);
+    };
+
+    const handleSave = async () => {
+        if (!hasChanges) return;
+
+        setIsSaving(true);
+        try {
+            // Only include items that have changed
+            const colIDs = Object.keys(currentStates)
+                .filter(id => currentStates[id] !== originalStates[id])
+                .map(id => ({
+                    colID: id,
+                    isMember: currentStates[id]
+                }));
+
+            const payload = {
+                artefactID: itemID,
+                colIDs: colIDs
+            };
+
+            const response = await server.post('/studio/artefact/updateAssociation', payload);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    throw new Error(response.data.fullMessage());
+                }
+
+                // Success
+                ToastWizard.standard("success", "Success", "Associations updated successfully.", 3000);
+                setOriginalStates(currentStates);
+                setHasChanges(false);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            console.error("Error saving associations:", err);
+            ToastWizard.standard("error", "Error", "Failed to save associations. Please try again.", 3000);
+        } finally {
+            setIsSaving(false);
+            onClose();
+            fetchCollection()
+        }
+    };
+
+    const handleClose = () => {
+        if (hasChanges) {
+            onClose()
+            ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
+            if (!confirmClose) return;
+        }
+        
+        // Reset states when closing
+        setCurrentStates(originalStates);
+        setHasChanges(false);
+        onClose();
+    };
+
+    useEffect(() => {
+        if (isOpen && itemID) {
+            fetchAssociation();
+        }
+    }, [itemID, isOpen]);
+
+    return (
+        <Dialog.Root
+            open={isOpen}
+            placement="center"
+            onEscapeKeyDown={handleClose}
+            onInteractOutside={handleClose}
+            size={"lg"}
+        >
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Manage Associations</Dialog.Title>
+                        </Dialog.Header>
+
+                        <Dialog.Body maxH={"80vh"} overflowY={"auto"}>
+                            <Box display="flex" flexDirection="column" gap={3}>
+                                {association
+                                    ?.slice()
+                                    .sort((a, b) => (originalStates[b.id] === true) - (originalStates[a.id] === true))
+                                    .map((assoc) => (
+                                        <AssociationCard
+                                            key={assoc.id}
+                                            associationData={assoc}
+                                            isMember={currentStates[assoc.id]}
+                                            onToggle={(checked) => handleAssociationChange(assoc.id, checked)}
+                                        />
+                                    ))}
+                            </Box>
+                        </Dialog.Body>
+
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button 
+                                    variant="outline"
+                                    colorPalette={"red"}
+                                    onClick={hasChanges ? handleReset : onClose}
+                                >
+                                    {hasChanges ? "Reset Changes" : "Cancel"}
+                                </Button>
+                            </Dialog.ActionTrigger>
+                            <Button 
+                                variant="ArchPrimaryAlt" 
+                                onClick={handleSave}
+                                disabled={!hasChanges}
+                                loading={isSaving}
+                            >
+                                Save
+                            </Button>
+                        </Dialog.Footer>
+
+                        <Dialog.CloseTrigger asChild onClick={handleClose}>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    );
+}
+
+export default ManageAssociationsDialog;
\ No newline at end of file
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index f7dbc72..9eea4f1 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -13,97 +13,76 @@ function GroupView() {
     const [collection, setCollection] = useState(null);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        const fetchCollection = async () => {
-            try {
-                setLoading(true);
-                const response = await server.get(`/cdn/collection/${colID}`);
-
-                if (response.data instanceof JSONResponse) {
-                    if (response.data.isErrorStatus()) {
-                        const errObject = {
-                            response: {
-                                data: response.data
-                            }
-                        };
-                        throw errObject;
-                    }
+    const fetchCollection = async () => {
+        try {
+            setLoading(true);
+            const response = await server.get(`/cdn/collection/${colID}`);
 
-                    // Success case - format the data
-                    let formattedData;
-                    const apiData = response.data.raw.data;
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw errObject;
+                }
 
-                    if (apiData.type === 'book') {
-                        formattedData = {
-                            type: 'book',
-                            name: apiData.title,
-                            description: apiData.subtitle || '',
-                            items: apiData.mmArtefacts.map(art => ({
-                                id: art.id,
-                                title: art.name,
-                                description: art.description,
-                                image: art.image || null
-                            }))
-                        };
-                    } else if (apiData.type === 'category') {
-                        formattedData = {
-                            type: 'category',
-                            name: apiData.name,
-                            description: apiData.description || '',
-                            items: apiData.members.map(art => ({
-                                id: art.id,
-                                title: art.name,
-                                description: art.description,
-                                image: art.image
-                            }))
-                        };
-                    } else if (apiData.type === 'batch') {
-                        formattedData = {
-                            type: 'batch',
-                            name: apiData.name || `Batch ${apiData.id}`,
-                            description: apiData.description || '',
-                            items: apiData.artefacts.map(art => ({
-                                id: art.id,
-                                title: art.name,
-                                description: art.description,
-                                image: art.image || null
-                            }))
-                        };
-                    } else {
-                        throw new Error('Unknown collection type');
-                    }
+                // Success case - format the data
+                let formattedData;
+                const apiData = response.data.raw.data;
 
-                    setCollection(formattedData);
+                if (apiData.type === 'book') {
+                    formattedData = {
+                        type: 'book',
+                        name: apiData.title,
+                        description: apiData.subtitle || '',
+                        items: apiData.mmArtefacts.map(art => ({
+                            id: art.id,
+                            title: art.name,
+                            description: art.description,
+                            image: art.image || null
+                        }))
+                    };
+                } else if (apiData.type === 'category') {
+                    formattedData = {
+                        type: 'category',
+                        name: apiData.name,
+                        description: apiData.description || '',
+                        items: apiData.members.map(art => ({
+                            id: art.id,
+                            title: art.name,
+                            description: art.description,
+                            image: art.image
+                        }))
+                    };
+                } else if (apiData.type === 'batch') {
+                    formattedData = {
+                        type: 'batch',
+                        name: apiData.name || `Batch ${apiData.id}`,
+                        description: apiData.description || '',
+                        items: apiData.artefacts.map(art => ({
+                            id: art.id,
+                            title: art.name,
+                            description: art.description,
+                            image: art.image || null
+                        }))
+                    };
                 } else {
-                    throw new Error("Unexpected response format");
+                    throw new Error('Unknown collection type');
                 }
-            } catch (err) {
-                if (err.response && err.response.data instanceof JSONResponse) {
-                    console.log("Error response in collection request:", err.response.data.fullMessage());
-                    
-                    if (err.response.data.userErrorType()) {
-                        ToastWizard.standard(
-                            "error",
-                            "An Error Occured",
-                            "We could not fetch the collection data. Please try again later.",
-                            3000,
-                            true,
-                            fetchCollection,
-                            'Retry'
-                        );
-                    } else {
-                        ToastWizard.standard(
-                            "error",
-                            "An Error Occured",
-                            "We could not fetch the collection data. Please try again later.",
-                            3000,
-                            true,
-                            fetchCollection,
-                            'Retry'
-                        );
-                    }
+
+                setCollection(formattedData);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in collection request:", err.response.data.fullMessage());
+                
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Error fetching data.", err.response.data.message);
                 } else {
-                    console.log("Unexpected error in collection request:", err);
                     ToastWizard.standard(
                         "error",
                         "An Error Occured",
@@ -114,11 +93,24 @@ function GroupView() {
                         'Retry'
                     );
                 }
-            } finally {
-                setLoading(false);
+            } else {
+                console.log("Unexpected error in collection request:", err);
+                ToastWizard.standard(
+                    "error",
+                    "An Error Occured",
+                    "We could not fetch the collection data. Please try again later.",
+                    3000,
+                    true,
+                    fetchCollection,
+                    'Retry'
+                );
             }
-        };
+        } finally {
+            setLoading(false);
+        }
+    };
 
+    useEffect(() => {
         fetchCollection();
     }, [colID]);
 
@@ -161,9 +153,9 @@ function GroupView() {
                 {collection.items.map(item => (
                     <GroupCardItem
                         key={item.id}
-                        itemTitle={item.title}
-                        itemDescription={item.description}
-                        imageSrc={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${item.id}`}
+                        colID={colID}
+                        item={item}
+                        fetchCollection={fetchCollection}
                     />
                 ))}
             </Grid>