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..e75adc7 100644
--- a/src/components/Catalogue/catalogueItemView.jsx
+++ b/src/components/Catalogue/catalogueItemView.jsx
@@ -12,7 +12,7 @@ import { IoOpen } from "react-icons/io5";
 const MotionBox = motion.create(Box);
 const MotionChevron = motion.create(Box);
 
-const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialogTitle, imageSrc }) => {
+const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialogTitle, imageSrc, artefactID }) => {
     const [isNavigating, setIsNavigating] = useState(false);
     const [direction, setDirection] = useState(0);
     const [isInitialRender, setIsInitialRender] = useState(true);
@@ -92,11 +92,11 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
             debounceTimeout = setTimeout(() => {
                 const scrollLeft = scrollRef.current.scrollLeft;
                 const newIndex = Math.round(scrollLeft / window.innerWidth);
-                
+
                 if (newIndex !== currentIndex && items[newIndex]) {
                     setDialogTitle(items[newIndex].title);
                 }
-                
+
                 // Reset scrolling flag after debounce
                 isScrolling = false;
             }, 100); // Keep the debounce time reasonable (100ms)
@@ -104,7 +104,7 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
 
         const scrollEl = scrollRef.current;
         scrollEl.addEventListener("scroll", handleScroll);
-        
+
         return () => {
             scrollEl.removeEventListener("scroll", handleScroll);
             if (debounceTimeout) clearTimeout(debounceTimeout);
@@ -151,13 +151,13 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
         left: isMobile
             ? "10px"
             : isTablet
-              ? "calc(5vw - 50px)"
-              : "calc(10vw - 60px)",
+                ? "calc(5vw - 50px)"
+                : "calc(10vw - 60px)",
         right: isMobile
             ? "10px"
             : isTablet
-              ? "calc(5vw - 50px)"
-              : "calc(10vw - 60px)",
+                ? "calc(5vw - 50px)"
+                : "calc(10vw - 60px)",
         top: "50%",
     };
 
@@ -356,21 +356,21 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                                 gap={2}
                                                             >
                                                                 <Text
-                                                                    fontSize="xl"
+                                                                    fontSize="lg"
                                                                     fontWeight="bold"
                                                                 >
                                                                     {item.title}
                                                                 </Text>
 
-                                                                <Tooltip 
-                                                                    showArrow 
-                                                                    content="Open in Data Studio" 
-                                                                    positioning={{ placement: "right-end" }} 
-                                                                    closeDelay={150} 
+                                                                <Tooltip
+                                                                    showArrow
+                                                                    content="Open in Data Studio"
+                                                                    positioning={{ placement: "right-end" }}
+                                                                    closeDelay={150}
                                                                     openDelay={150}
                                                                     contentProps={{ css: { "--tooltip-bg": "#12144C" } }}
                                                                 >
-                                                                    <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"}/>
+                                                                    <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"} />
                                                                 </Tooltip>
                                                             </Flex>
 
@@ -394,14 +394,14 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
 
                                                         <Box flex={1} mt={4}>
                                                             {selectedSegment ===
-                                                            "metadata" ? (
+                                                                "metadata" ? (
                                                                 <MetadataDisplay
-                                                                    currentItem={items[currentIndex]} 
+                                                                    currentItem={items[currentIndex]}
                                                                     isOpen={isOpen}
                                                                 />
                                                             ) : selectedSegment ===
-                                                              "chat" ? (
-                                                                <ItemChat />
+                                                                "chat" ? (
+                                                                <ItemChat artefactID={artefactID} />
                                                             ) : null}
                                                         </Box>
                                                     </Box>
@@ -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}
@@ -500,15 +500,15 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                                 {title}
                                                             </Text>
 
-                                                            <Tooltip 
-                                                                showArrow 
-                                                                content="Open in Data Studio" 
-                                                                positioning={{ placement: "right-end" }} 
-                                                                closeDelay={150} 
+                                                            <Tooltip
+                                                                showArrow
+                                                                content="Open in Data Studio"
+                                                                positioning={{ placement: "right-end" }}
+                                                                closeDelay={150}
                                                                 openDelay={150}
                                                                 contentProps={{ css: { "--tooltip-bg": "#12144C" } }}
                                                             >
-                                                                <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"}/>
+                                                                <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"} />
                                                             </Tooltip>
                                                         </Flex>
 
@@ -532,14 +532,14 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
 
                                                         <Box flex={1} mt={4} overflowY={"auto"} scrollbar={"hidden"}>
                                                             {selectedSegment ===
-                                                            "metadata" ? (
+                                                                "metadata" ? (
                                                                 <MetadataDisplay
-                                                                    currentItem={items[currentIndex]} 
+                                                                    currentItem={items[currentIndex]}
                                                                     isOpen={isOpen}
                                                                 />
                                                             ) : selectedSegment ===
-                                                              "chat" ? (
-                                                                <ItemChat />
+                                                                "chat" ? (
+                                                                <ItemChat artefactID={artefactID} />
                                                             ) : null}
                                                         </Box>
                                                     </Box>
diff --git a/src/components/Catalogue/itemChat.jsx b/src/components/Catalogue/itemChat.jsx
index 415be99..51d1ebb 100644
--- a/src/components/Catalogue/itemChat.jsx
+++ b/src/components/Catalogue/itemChat.jsx
@@ -1,5 +1,132 @@
-function ItemChat() {
-    return <div>ItemChat</div>;
+import { useState, useEffect, useRef } from "react";
+import { Input, Box, Button, VStack, HStack, Text } from "@chakra-ui/react";
+import { IoIosSend } from "react-icons/io";
+import server, { JSONResponse } from "../../networking";
+import ToastWizard from "../toastWizard";
+
+function ItemChat({ artefactID }) {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [loading, setLoading] = useState(false);
+    const messagesEndRef = useRef(null);
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+
+    const sendMessage = async () => {
+        if (!input.trim() || loading) return;
+
+        const userMessage = { role: "user", content: input };
+        setMessages(prev => [...prev, userMessage]);
+        setInput("");
+        setLoading(true);
+
+        try {
+            const response = await server.post('/chatbot/query', {
+                artefactID,
+                newPrompt: input,
+                history: messages
+            })
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                if (response.data?.raw?.data?.history) {
+                    setMessages(response.data.raw.data.history);
+                } else if (response.data?.raw?.data?.response) {
+                    setMessages(prev => [...prev,
+                    { role: "assistant", content: response.data.raw.data.response }
+                    ]);
+                }
+
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in chatbot query:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Chatbot query failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Chatbot query failed.", "An unexpected error occurred.");
+                }
+            } else {
+                console.log("Unexpected error in chatbot query:", err);
+                ToastWizard.standard("error", "Chatbot query failed.", "An unexpected error occurred.");
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    };
+
+    return (
+        <VStack spacing={4} align="stretch" h="100%">
+            <Box
+                flex="1"
+                overflowY="auto"
+                border="1px solid"
+                borderColor="gray.200"
+                p={4}
+                borderRadius="md"
+                bg="white"
+            >
+                {messages.length === 0 ? (
+                    <Text color="gray.500" textAlign="center" py={4}>
+                        Let's discover this artefact together !
+                    </Text>
+                ) : (
+                    messages.map((msg, idx) => (
+                        <Box
+                            key={`${idx}-${msg.role}`}
+                            mb={3}
+                            p={3}
+                            bg={msg.role === "user" ? "blue.50" : "green.50"}
+                            borderRadius="md"
+                        >
+                            <Text fontWeight="bold" color={msg.role === "user" ? "blue.600" : "green.600"}>
+                                {msg.role === "user" ? "You: " : "Archivus: "}
+                            </Text>
+                            <Text whiteSpace="pre-wrap">{msg.content}</Text>
+                        </Box>
+                    ))
+                )}
+                <div ref={messagesEndRef} />
+            </Box>
+
+            <HStack>
+                <Input
+                    placeholder="Ask Archivus..."
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    disabled={loading}
+                />
+                <Button
+                    onClick={sendMessage}
+                    loading={loading}
+                    variant={"ArchPrimaryAlt"}
+                    px={6}
+                >
+                    Send
+                </Button>
+            </HStack>
+        </VStack>
+    );
 }
 
-export default ItemChat;
+export default ItemChat;
\ No newline at end of file
diff --git a/src/components/Catalogue/section.jsx b/src/components/Catalogue/section.jsx
index 0d9bb91..8206c51 100644
--- a/src/components/Catalogue/section.jsx
+++ b/src/components/Catalogue/section.jsx
@@ -25,6 +25,7 @@ const Section = ({ sectionTitle, sectionId, onItemClick, artefacts = [] }) => {
     const [atEnd, setAtEnd] = useState(false);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogTitle, setDialogTitle] = useState("");
+    const [dialogArtefactID, setDialogArtefactID] = useState("");
 
     const checkScrollEdges = () => {
         const node = scrollRef.current;
@@ -45,10 +46,11 @@ const Section = ({ sectionTitle, sectionId, onItemClick, artefacts = [] }) => {
         });
     };
 
-    const handleCardClick = (title) => {
-        setDialogTitle(title);
+    const handleCardClick = (item) => {
+        setDialogTitle(item.title);
+        setDialogArtefactID(item.id);
         setDialogOpen(true);
-        if (onItemClick) onItemClick(title);
+        if (onItemClick) onItemClick(item.id);
     };
 
     useEffect(() => {
@@ -129,7 +131,7 @@ const Section = ({ sectionTitle, sectionId, onItemClick, artefacts = [] }) => {
                             flex="0 0 auto"
                             cursor="pointer"
                             borderRadius="md"
-                            onClick={() => handleCardClick(item.title)}
+                            onClick={() => handleCardClick(item)}
                         >
                             <CardItem
                                 imageSrc={item.imageSrc}
@@ -144,6 +146,7 @@ const Section = ({ sectionTitle, sectionId, onItemClick, artefacts = [] }) => {
             <CatalogueItemView
                 isOpen={dialogOpen}
                 onClose={() => setDialogOpen(false)}
+                artefactID={dialogArtefactID}
                 title={dialogTitle}
                 sectionId={sectionId}
                 items={items}
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>