diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 4cd8895..c564305 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,6 +1,6 @@
 vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-index.html,1724519372624,990e9c4883f5c2f61d7e820aea835f614698a2ca3c2cbbcb59a3aa137ee87704
-assets/index-BvQ6TMY8.js,1724519372623,50737d9aa1473a057e4bbc149da0f718542e172b0290288c420f30cff296b85d
-assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724519372623,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
+index.html,1724588508243,97772e31b8e0d46bc0ac7c73343d634095f9bb6ccb9bd17173e1b400bf077b90
+assets/index-TXoG1jib.js,1724588508243,2a2d0533a8fc7f66015f18835ad510662f60b8d17e8a42ef36e48a47fd6f69fb
+assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724588508243,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
diff --git a/public/LeetMigo_banner_main_01.png b/public/LeetMigo_banner_main_01.png
new file mode 100644
index 0000000..a91c7a6
Binary files /dev/null and b/public/LeetMigo_banner_main_01.png differ
diff --git a/src/AppContent.jsx b/src/AppContent.jsx
index 35049ae..fc90ede 100644
--- a/src/AppContent.jsx
+++ b/src/AppContent.jsx
@@ -16,12 +16,16 @@ import {
   Container,
   AspectRatio,
   Spinner,
+  useClipboard,
 } from '@chakra-ui/react';
 import bannerImage from './LeetMigo_banner_main_01.png';
+import { v4 as uuidv4 } from 'uuid';  // Mock DID generation using UUID
 
 const AppContent = () => {
   const [gdprAccepted, setGdprAccepted] = useState(false);
   const [isPrivacyPolicyOpen, setIsPrivacyPolicyOpen] = useState(false);
+  const [did, setDid] = useState('');
+  const { hasCopied, onCopy } = useClipboard(did);
   const widgetRef = useRef(null);
 
   const handleGdprAccept = () => {
@@ -40,10 +44,14 @@ const AppContent = () => {
       script.src = 'https://getlaunchlist.com/js/widget.js';
       script.async = true;
       script.defer = true;
+      script.loading = 'lazy';
       script.onload = () => {
         if (window.LaunchListWidget) {
           window.LaunchListWidget.init();
           widgetRef.current = true;
+          setTimeout(() => {
+            widgetRef.current = false;
+          }, 500);
         }
       };
       document.body.appendChild(script);
@@ -56,14 +64,25 @@ const AppContent = () => {
     }
   }, []);
 
+  useEffect(() => {
+    // Generate DID automatically on mount (mock implementation)
+    const generatedDid = `did:web5:${uuidv4()}`;
+    setDid(generatedDid);
+  }, []);
+
   const commonButtonStyles = {
-    colorScheme: 'blue',
-    variant: 'solid',
+    colorScheme: 'orange',
+    bg: 'orange.400',
+    color: 'black',
     size: 'lg',
     borderRadius: 'full',
-    width: '100%',
-    maxW: { base: '100%', md: '300px' },
-    _hover: { transform: 'scale(1.05)', boxShadow: 'lg' },
+    paddingX: 8,
+    paddingY: 6,
+    fontSize: 'lg',
+    textDecoration: 'none',  // Remove underline
+    transition: 'all 0.2s ease-in-out',
+    _hover: { bg: 'orange.500', transform: 'scale(1.1)', boxShadow: '2xl' },
+    _active: { bg: 'orange.600' },
     _focus: { boxShadow: 'outline' },
   };
 
@@ -71,15 +90,17 @@ const AppContent = () => {
     <Box minH="100vh" color="white" bg="gray.900" position="relative">
       <Container maxW="container.md" pt={8} px={{ base: 4, md: 8 }} pb={16}>
         <VStack spacing={8} align="center" justify="center">
-          <Box textAlign="center" px={{ base: 2, md: 4 }}>
-            <Text fontSize={{ base: 'lg', md: 'xl' }} fontWeight="extrabold" lineHeight="shorter">
+          {/* Title Section */}
+          <VStack spacing={2} textAlign="center">
+            <Text fontSize={{ base: 'xl', md: '2xl' }} fontWeight="extrabold" lineHeight="shorter">
               LeetMigo 👾
             </Text>
-            <Text fontSize={{ base: 'sm', md: 'md' }} mt={2} fontWeight="semibold">
+            <Text fontSize={{ base: 'sm', md: 'lg' }} fontWeight="semibold">
               the world's first decentralized platform for dsa interview prep, made for non-trad, cracked techies and frens
             </Text>
-          </Box>
+          </VStack>
 
+          {/* Banner Image */}
           <AspectRatio ratio={16 / 9} width="100%" maxW="800px" borderRadius="md">
             <Image 
               src={bannerImage} 
@@ -89,35 +110,78 @@ const AppContent = () => {
             />
           </AspectRatio>
 
-          {!widgetRef.current && <Spinner color="blue.500" size="xl" />}
-          <Box width="100%" maxW="400px">
+          {/* LaunchList Widget and CTA */}
+          {!widgetRef.current && <Spinner color="orange.400" size="xl" />}
+          {widgetRef.current && (
+            <Text mt={2} fontSize="sm" color="gray.400">
+              Widget loaded successfully
+            </Text>
+          )}
+          <Box width="100%" maxW="400px" mt={4}>
             <div className="launchlist-widget" data-key-id="pI1JRr" data-height="180px"></div>
           </Box>
 
-          <Button 
-            as="a" 
-            href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing" 
-            target="_blank" 
-            rel="noopener noreferrer" 
-            {...commonButtonStyles}
-            colorScheme="teal"
-          >
-            Free LeetCode Grind 75 Study Spreadsheet
-          </Button>
-
-          <VStack align="center" spacing={4} width="100%">
-            <Text fontSize="lg" fontWeight="bold" textAlign="center">
+          <VStack align="center" width="100%" mt={4} spacing={4}>
+            <Text fontSize={{ base: 'lg', md: 'xl' }} fontWeight="bold" color="orange.400" textAlign="center">
+              don’t miss out! 🚀 get free early access and be part of the first wave of cracked techies. sign up now!
+            </Text>
+            <Box width="100%" maxW="400px">
+              <div className="launchlist-widget" data-key-id="pI1JRr" data-height="180px"></div>
+            </Box>
+          </VStack>
+
+          {/* LeetCode 75 Button */}
+          <VStack align="center" width="100%" mt={4}>
+            <Button 
+              {...commonButtonStyles}
+              as="a"
+              href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing"
+              target="_blank"
+              rel="noopener noreferrer"
+              bg="orange.500"
+              border="2px solid"
+              borderColor="orange.600"
+              color="white"
+              _hover={{ bg: "orange.600", transform: "scale(1.1)", boxShadow: "2xl" }}
+              textDecoration="none"
+            >
+              free leetcode grind 75 study spreadsheet
+            </Button>
+          </VStack>
+
+          {/* Features Section */}
+          <VStack align="center" spacing={4} width="100%" mt={8}>
+            <Text fontSize="lg" fontWeight="bold" textAlign="center" color="gray.300">
               features coming soon:
             </Text>
-            <HStack spacing={4} justify="center" width="100%">
-              <Button {...commonButtonStyles}>
+            <HStack spacing={{ base: 6, md: 4 }} justify="center" width="100%">
+              <Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
                 learn
               </Button>
-              <Button {...commonButtonStyles}>
+              <Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
                 collab
               </Button>
+              <Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
+                pay with bitcoin
+              </Button>
             </HStack>
           </VStack>
+
+          {/* DID Login Section */}
+          <VStack spacing={4} align="center" width="100%" mt={8}>
+            <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="bold" color="orange.400">
+              your DID has been generated! 🎉
+            </Text>
+            <Text fontSize="sm" color="gray.300">
+              DID: {did}
+            </Text>
+            <Button {...commonButtonStyles} onClick={onCopy}>
+              {hasCopied ? 'copied!' : 'copy DID to clipboard'}
+            </Button>
+            <Text fontSize="sm" color="gray.400" mt={2}>
+              save your DID for future logins using your username.
+            </Text>
+          </VStack>
         </VStack>
       </Container>
 
@@ -135,10 +199,10 @@ const AppContent = () => {
         >
           <Text mb={2}>we use cookies for a based experience. continue to use this site and we'll assume you think it's kino.</Text>
           <HStack spacing={2} justify="center">
-            <Button {...commonButtonStyles} size="sm" colorScheme="gray" onClick={handleGdprAccept}>
+            <Button {...commonButtonStyles} size="sm" bg="gray.600" onClick={handleGdprAccept}>
               accept
             </Button>
-            <Button {...commonButtonStyles} size="sm" colorScheme="gray" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
+            <Button {...commonButtonStyles} size="sm" bg="gray.600" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
               dismiss
             </Button>
           </HStack>
@@ -151,7 +215,10 @@ const AppContent = () => {
           <ModalHeader>Privacy Policy</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            {/* Privacy policy content here */}
+            <Text>
+              This is where your privacy policy content will be displayed. Make sure to
+              include all necessary details regarding data usage, storage, and user rights.
+            </Text>
           </ModalBody>
           <ModalFooter>
             <Button {...commonButtonStyles} onClick={() => setIsPrivacyPolicyOpen(false)}>