diff --git a/packages/web/src/components/UpdatePage/UpdatePage.jsx b/packages/web/src/components/UpdatePage/UpdatePage.jsx
index 74e58b4..3590c91 100644
--- a/packages/web/src/components/UpdatePage/UpdatePage.jsx
+++ b/packages/web/src/components/UpdatePage/UpdatePage.jsx
@@ -1,108 +1,170 @@
-import { React, useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
+  Box,
   Flex,
   Text,
   Button,
-  Stack,
+  VStack,
+  HStack,
   List,
   ListItem,
-  ListIcon,
   Icon,
   Image,
+  useColorModeValue,
+  Container,
+  Heading,
+  Badge,
+  Divider,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
 } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
-import { ChevronRightIcon, ArrowBackIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 import { SiInstagram } from "react-icons/si";
+import { motion } from "framer-motion";
 import updatepage from "../../assets/images/updatepage.png";
 
+const MotionBox = motion(Box);
+
 export default function UpdatePage() {
   const navigate = useNavigate();
-  const [screenWidth, setScreenWidth] = useState(window.screen.width);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedImage, setSelectedImage] = useState("");
+  const [updates, setUpdates] = useState([
+    {
+      date: "9/25/2023",
+      title: "Website Launch",
+      description: "ZotnFound is now live! Explore our new features and start finding lost items.",
+      items: [
+        { type: "image", content: updatepage },
+        { type: "text", content: "WEBSITE IS LIVE!" },
+        { type: "text", content: "New user-friendly interface" },
+        { type: "text", content: "Enhanced search capabilities" },
+      ],
+      tag: "Major Update",
+    },
+    // Add more updates here
+  ]);
+
+  const bgColor = useColorModeValue("gray.50", "gray.900");
+  const cardBgColor = useColorModeValue("white", "gray.800");
+  const borderColor = useColorModeValue("gray.200", "gray.600");
+  const tagColor = useColorModeValue("green.500", "green.200");
 
   const handleClick = () => {
     navigate("/");
   };
 
-  window.onresize = () => {
-    setScreenWidth(window.screen.width);
+  const openImageModal = (imageSrc) => {
+    setSelectedImage(imageSrc);
+    onOpen();
   };
 
   return (
-    <Stack alignItems="center" h="100vh">
-      <Stack
-        marginBottom="2%"
-        direction={{ base: "column", md: "column", lg: "row" }}
-        alignItems={"center"}
-        justifyContent={"space-between"}
-        w="100vw"
-      >
-        <Flex display={screenWidth < 992 ? "none" : "block"} marginLeft={10}>
-          <Button onClick={handleClick} visibility={"hidden"}>
-            <Icon as={ArrowBackIcon} marginRight={"2%"} />
-            Return Home{" "}
-          </Button>
-        </Flex>
-        <Flex textAlign={"center"}>
-          <Text fontSize={{ base: "2rem", md: "3rem" }} as="b">
-            ZotnFound Updates
-          </Text>
-        </Flex>
-        <Flex>
-          <Button onClick={handleClick} marginRight={{ lg: 10 }}>
-            <Icon as={ArrowBackIcon} marginRight={"2%"} />
-            Return Home{" "}
-          </Button>
-        </Flex>
-      </Stack>
-      <Flex direction="column">
-        <Flex
-          direction={"column"}
-          minH={"80vh"}
-          w={{ base: "90vw", md: "50vw" }}
-          borderLeft={"1px"}
-          borderColor={"gray"}
-        >
-          <Flex
-            position={{ lg: "absolute" }}
-            right={{ lg: "20vw" }}
-            top={{ lg: "30vh" }}
-            transform={{ lg: "rotate(90deg)" }}
-            justifyContent={"center"}
-            alignItems={"center"}
-          >
-            <Text as="b" fontSize={".75rem"} marginRight={10}>
-              FOLLOW:
-            </Text>
-            <a href="https://www.instagram.com/zotnfound/">
-              <SiInstagram size={"1.5rem"} cursor="pointer" />
-            </a>
+    <Box minH="100vh" bg={bgColor}>
+      <Container maxW="container.xl" py={8}>
+        <Flex direction="column" align="center">
+          <Flex w="full" justifyContent="space-between" mb={8} align="center">
+            <Button
+              leftIcon={<ArrowBackIcon />}
+              onClick={handleClick}
+              size="lg"
+              variant="outline"
+            >
+              Return Home
+            </Button>
+            <Heading
+              fontSize={{ base: "3xl", md: "4xl" }}
+              fontWeight="extrabold"
+              bgGradient="linear(to-r, blue.400, purple.500)"
+              bgClip="text"
+            >
+              ZotnFound Updates
+            </Heading>
+            <Button
+              as="a"
+              href="https://www.instagram.com/zotnfound/"
+              target="_blank"
+              leftIcon={<Icon as={SiInstagram} />}
+              colorScheme="pink"
+              size="lg"
+            >
+              Follow Us
+            </Button>
           </Flex>
 
-          {/* update messages */}
-          <Flex
-            direction={"column"}
-            alignItems={"flex-start"}
-            marginLeft="15%"
-            marginRight="15%"
-            marginBottom={"2.5"}
-            marginTop={"2.5"}
-            gap="15px"
-          >
-            <Text as="b">9/25/2023</Text>
-            <List>
-              <ListItem textAlign="left" marginBottom={"2%"}>
-                <ListIcon as={ChevronRightIcon} color="gray" />
-                <Image w={"100vw"} src={updatepage} />
-              </ListItem>
-              <ListItem textAlign="left">
-                <ListIcon as={ChevronRightIcon} color="gray" />
-                WEBSITE IS LIVE!
-              </ListItem>
-            </List>
-          </Flex>
-          {/* ^^^^^ update messages ^^^^^^*/}
+          <VStack spacing={12} align="stretch" w="full">
+            {updates.map((update, index) => (
+              <MotionBox
+                key={index}
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Box
+                  borderWidth={1}
+                  borderRadius="xl"
+                  p={8}
+                  borderColor={borderColor}
+                  boxShadow="xl"
+                  bg={cardBgColor}
+                >
+                  <Flex justifyContent="space-between" alignItems="center" mb={4}>
+                    <Badge colorScheme="green" fontSize="md" px={3} py={1} borderRadius="full">
+                      {update.tag}
+                    </Badge>
+                    <Text fontSize="lg" fontWeight="medium" color="gray.500">
+                      {update.date}
+                    </Text>
+                  </Flex>
+                  <Heading as="h3" size="xl" mb={4}>
+                    {update.title}
+                  </Heading>
+                  <Text fontSize="lg" mb={6}>
+                    {update.description}
+                  </Text>
+                  <Divider mb={6} />
+                  <List spacing={4}>
+                    {update.items.map((item, itemIndex) => (
+                      <ListItem key={itemIndex}>
+                        <HStack align="flex-start" spacing={4}>
+                          {item.type === "image" ? (
+                            <Image
+                              src={item.content}
+                              maxW="200px"
+                              borderRadius="md"
+                              cursor="pointer"
+                              onClick={() => openImageModal(item.content)}
+                              transition="transform 0.3s"
+                              _hover={{ transform: "scale(1.05)" }}
+                            />
+                          ) : (
+                            <Text fontSize="lg">• {item.content}</Text>
+                          )}
+                        </HStack>
+                      </ListItem>
+                    ))}
+                  </List>
+                </Box>
+              </MotionBox>
+            ))}
+          </VStack>
         </Flex>
-      </Flex>
-    </Stack>
+      </Container>
+
+      <Modal isOpen={isOpen} onClose={onClose} size="xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody p={0}>
+            <Image src={selectedImage} w="100%" />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
   );
 }