diff --git a/frontend/mobile/src/app/(app)/(tabs)/index.tsx b/frontend/mobile/src/app/(app)/(tabs)/index.tsx
index dfc535ff..b49d4872 100644
--- a/frontend/mobile/src/app/(app)/(tabs)/index.tsx
+++ b/frontend/mobile/src/app/(app)/(tabs)/index.tsx
@@ -1,33 +1,41 @@
-import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
 
-import { router } from 'expo-router';
+import BottomSheet from '@gorhom/bottom-sheet';
 
-import { Box, Text } from '@/src/app/(design-system)';
-import { EventCard } from '@/src/app/(design-system)/components/EventCard';
+import { ClubPreview, EventPreview } from '@/src/app/(design-system)';
+import { Box, Button, Text } from '@/src/app/(design-system)';
 
 const HomePage = () => {
-    const item = {
-        name: 'Your Event Name',
-        host: 'Your Club Name',
-        start_time: new Date(),
-        end_time: new Date()
-    };
+    const club = useRef<BottomSheet>(null);
+    const event = useRef<BottomSheet>(null);
+
+    const [clubPreview, setClubPreview] = useState('');
+    const [eventPreview, setEventPreview] = useState('');
 
     return (
         <Box style={styles.container}>
             <Text variant="body-1">Home</Text>
-            <Pressable onPress={() => router.push(`/event/1`)}>
-                <EventCard
-                    variant="small"
-                    event={item.name}
-                    club={item.host}
-                    eventId="1"
-                    startTime={item.start_time}
-                    endTime={item.end_time}
-                    image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLF3ord7lnV_5Je-pC2AUgUiesHNPcZlpI7A&s"
-                />
-            </Pressable>
+            <Button
+                onPress={() => {
+                    setClubPreview('1');
+                    club.current?.snapToIndex(0);
+                }}
+                variant="standardButton"
+            >
+                Club Preview
+            </Button>
+            <Button
+                onPress={() => {
+                    setEventPreview('1');
+                    event.current?.snapToIndex(0);
+                }}
+                variant="standardButton"
+            >
+                Event Preview
+            </Button>
+            <EventPreview eventId={eventPreview} ref={event} />
+            <ClubPreview clubId={clubPreview} ref={club} />
         </Box>
     );
 };
diff --git a/frontend/mobile/src/app/(app)/event/components/about.tsx b/frontend/mobile/src/app/(app)/event/components/about.tsx
index 438eb6aa..d7f64cf2 100644
--- a/frontend/mobile/src/app/(app)/event/components/about.tsx
+++ b/frontend/mobile/src/app/(app)/event/components/about.tsx
@@ -12,9 +12,10 @@ import {
     Text,
     textColorVariants
 } from '@/src/app/(design-system)';
-import { Tag as TagComponent } from '@/src/app/(design-system)';
 import { Button } from '@/src/app/(design-system)/components/Button/Button';
 
+import { EventPageTags } from '../../../(design-system)/components/Tag/Tags';
+
 interface AboutEventProps {
     tags: Tag[];
     description: string;
@@ -36,12 +37,6 @@ export const AboutEvent = ({
         }
     };
 
-    const renderTag = (item: Tag) => (
-        <TagComponent key={item.id} variant="selected" color={color}>
-            <Text variant="body-2">{item.name}</Text>
-        </TagComponent>
-    );
-
     return (
         <Box flexDirection="column" alignItems="flex-start">
             <Text marginBottom="m" variant="subheader-1">
@@ -57,10 +52,8 @@ export const AboutEvent = ({
                     </Text>
                 </Box>
             </TouchableOpacity>
-            <Box paddingTop="xl" flexDirection="row" flexWrap="wrap" gap="xs">
-                {tags.length >= 5
-                    ? tags.slice(0, 5).map((item) => renderTag(item))
-                    : tags.map((item) => renderTag(item))}
+            <Box paddingTop="xl">
+                <EventPageTags tags={tags} color={color} />
             </Box>
             {zoomLink && (
                 <Button
diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx
new file mode 100644
index 00000000..591d1ab4
--- /dev/null
+++ b/frontend/mobile/src/app/(design-system)/components/Preview/Club.tsx
@@ -0,0 +1,143 @@
+import React, { forwardRef, useCallback, useState } from 'react';
+import { Linking, Pressable } from 'react-native';
+
+import { router } from 'expo-router';
+
+import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { Avatar } from '@rneui/base';
+
+import { SACColors, textColorVariants } from '../../shared/colors';
+import { Box } from '../Box/Box';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+interface ClubPreviewProps {
+    clubId: string;
+}
+
+const mockClub = {
+    name: 'Sandbox',
+    preview: `Sandbox is Northeastern's student-led software consultancy building software for Northeastern clients. We work closely with clients across Northeastern to help them best leverage computation.`,
+    applicationTitle: 'Apply to be a Member',
+    applicationLink: 'https://google.com',
+    color: 'darkBlue' as SACColors,
+    logo: 'https://avatars.githubusercontent.com/u/45272992?s=200&v=4'
+};
+
+type Ref = BottomSheet;
+const LOGO_HEIGHT = 77;
+
+export const ClubPreview = forwardRef<Ref, ClubPreviewProps>(
+    ({ clubId }, ref) => {
+        const isRecruiting = true;
+
+        const renderBackdrop = useCallback(
+            (props: any) => (
+                <BottomSheetBackdrop
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    {...props}
+                />
+            ),
+            []
+        );
+
+        const ClubLogo = () => {
+            return () => (
+                <Box marginLeft="xl">
+                    <Avatar
+                        containerStyle={{
+                            top: -LOGO_HEIGHT / 2,
+                            position: 'absolute',
+                            borderWidth: 2,
+                            borderColor: 'white'
+                        }}
+                        rounded
+                        size={LOGO_HEIGHT}
+                        source={{
+                            uri: mockClub.logo
+                        }}
+                    />
+                </Box>
+            );
+        };
+
+        const NoLogo = () => {
+            return () => <></>;
+        };
+
+        const [logo, setLogo] = useState(NoLogo);
+
+        return (
+            <BottomSheet
+                ref={ref}
+                index={-1}
+                snapPoints={isRecruiting ? ['50%'] : ['40%']}
+                enablePanDownToClose={true}
+                handleComponent={logo}
+                onAnimate={(_, toIndex: number) => {
+                    toIndex === 0 ? setLogo(ClubLogo) : setLogo(NoLogo);
+                }}
+                backgroundStyle={{ backgroundColor: 'white' }}
+                backdropComponent={renderBackdrop}
+            >
+                <Box overflow="visible" marginLeft="xl" zIndex={1} />
+                <Box
+                    gap="l"
+                    paddingTop="xxl"
+                    marginHorizontal="xl"
+                    flexDirection="column"
+                >
+                    <Text paddingTop="s" variant="header-1">
+                        {mockClub.name}
+                    </Text>
+                    {isRecruiting && (
+                        <Button
+                            size="md"
+                            onPress={() =>
+                                Linking.openURL(mockClub.applicationLink)
+                            }
+                            alignItems="flex-start"
+                            variant="standardButton"
+                            backgroundColor={mockClub.color}
+                        >
+                            <Box
+                                width="100%"
+                                alignItems="flex-start"
+                                flexDirection="column"
+                                backgroundColor={mockClub.color}
+                            >
+                                <Text
+                                    color={textColorVariants[mockClub.color]}
+                                    variant="body-1"
+                                    fontWeight={500}
+                                >
+                                    Title
+                                </Text>
+                                <Text
+                                    color={textColorVariants[mockClub.color]}
+                                    variant="body-2"
+                                >
+                                    Application Form: Apply Now!
+                                </Text>
+                            </Box>
+                        </Button>
+                    )}
+                    <Box flexDirection="column" gap="xs">
+                        <Text>Who are we?</Text>
+                        <Text variant="caption-1">{mockClub.preview}</Text>
+                    </Box>
+                    <Button
+                        onPress={() => router.push(`/club/${clubId}`)}
+                        width="50%"
+                        size="md"
+                        variant="standardButton"
+                        color={mockClub.color}
+                    >
+                        Learn More
+                    </Button>
+                </Box>
+            </BottomSheet>
+        );
+    }
+);
diff --git a/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx b/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx
new file mode 100644
index 00000000..d5b4266c
--- /dev/null
+++ b/frontend/mobile/src/app/(design-system)/components/Preview/Event.tsx
@@ -0,0 +1,145 @@
+import React, { forwardRef, useCallback } from 'react';
+import { Pressable } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { router } from 'expo-router';
+
+import { Tag } from '@generatesac/lib';
+import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { Avatar } from '@rneui/base';
+
+import { SACColors } from '../../shared/colors';
+import { Box } from '../Box/Box';
+import { Button } from '../Button/Button';
+import { EventPageTags } from '../Tag/Tags';
+import { Text } from '../Text/Text';
+
+interface EventPreviewProps {
+    eventId: string;
+}
+
+const tags: Tag[] = [
+    {
+        id: 'abc123',
+        created_at: '2024-06-16T09:30:00Z',
+        updated_at: '2024-06-16T10:45:00Z',
+        name: 'Product A',
+        category_id: 'cat001'
+    },
+    {
+        id: 'def456',
+        created_at: '2024-06-15T14:00:00Z',
+        updated_at: '2024-06-16T08:20:00Z',
+        name: 'Service B',
+        category_id: 'cat002'
+    },
+    {
+        id: 'ghi789',
+        created_at: '2024-06-14T11:45:00Z',
+        updated_at: '2024-06-16T11:00:00Z',
+        name: 'Item C',
+        category_id: 'cat003'
+    },
+    {
+        id: 'jkl012',
+        created_at: '2024-06-15T17:20:00Z',
+        updated_at: '2024-06-16T09:05:00Z',
+        name: 'Project D',
+        category_id: 'cat004'
+    },
+    {
+        id: 'mno345',
+        created_at: '2024-06-13T13:00:00Z',
+        updated_at: '2024-06-16T10:30:00Z',
+        name: 'Task E',
+        category_id: 'cat005'
+    }
+];
+
+const mockEvent = {
+    name: 'Spring Showcase 2024',
+    clubId: '1',
+    hostedClub: 'Generate Product Development Studio',
+    preview: `Sandbox is Northeastern's student-led software consultancy building software for Northeastern clients. We work closely with clients across Northeastern to help them best leverage computation.`,
+    color: 'darkBlue' as SACColors,
+    clubLogo: 'https://avatars.githubusercontent.com/u/45272992?s=200&v=4',
+    tags: tags as Tag[]
+};
+
+type Ref = BottomSheet;
+
+export const EventPreview = forwardRef<Ref, EventPreviewProps>(
+    ({ eventId }, ref) => {
+        const renderBackdrop = useCallback(
+            (props: any) => (
+                <BottomSheetBackdrop
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    {...props}
+                />
+            ),
+            []
+        );
+
+        return (
+            <BottomSheet
+                ref={ref}
+                index={-1}
+                snapPoints={['50%']}
+                enablePanDownToClose={true}
+                handleIndicatorStyle={{ backgroundColor: 'white' }}
+                backgroundStyle={{ backgroundColor: 'white' }}
+                backdropComponent={renderBackdrop}
+            >
+                <Box marginHorizontal="xl" flexDirection="column">
+                    <Text paddingTop="s" variant="header-1">
+                        {mockEvent.name}
+                    </Text>
+                    <Box paddingVertical="s" flexDirection="row" gap="xxs">
+                        <Text variant="caption-1">Hosted by</Text>
+                        <TouchableOpacity
+                            onPress={() =>
+                                router.push(`/club/${mockEvent.clubId}`)
+                            }
+                        >
+                            <Box flexDirection="row" gap="xxs">
+                                <Avatar
+                                    rounded
+                                    size={15}
+                                    source={{ uri: mockEvent.clubLogo }}
+                                />
+                                <Text variant="caption-1">
+                                    {mockEvent.hostedClub}
+                                </Text>
+                            </Box>
+                        </TouchableOpacity>
+                    </Box>
+                    <Box
+                        paddingTop="s"
+                        paddingBottom="l"
+                        flexDirection="column"
+                        gap="s"
+                    >
+                        <Text>About Event</Text>
+                        <Text variant="caption-1">{mockEvent.preview}</Text>
+                    </Box>
+                    <EventPageTags
+                        tags={mockEvent.tags}
+                        color={mockEvent.color}
+                    />
+                    <Button
+                        marginTop="m"
+                        onPress={() => router.push(`/event/${eventId}`)}
+                        width="50%"
+                        size="md"
+                        variant="standardButton"
+                        color={mockEvent.color}
+                        alignContent="flex-end"
+                    >
+                        Learn More
+                    </Button>
+                </Box>
+            </BottomSheet>
+        );
+    }
+);
diff --git a/frontend/mobile/src/app/(design-system)/components/Tag/Tags.tsx b/frontend/mobile/src/app/(design-system)/components/Tag/Tags.tsx
new file mode 100644
index 00000000..011a4228
--- /dev/null
+++ b/frontend/mobile/src/app/(design-system)/components/Tag/Tags.tsx
@@ -0,0 +1,27 @@
+import { Tag } from '@generatesac/lib';
+
+import { SACColors } from '../../shared/colors';
+import { Box } from '../Box/Box';
+import { Text } from '../Text/Text';
+import { Tag as TagComponent } from './Tag';
+
+interface EventTagsProps {
+    tags: Tag[];
+    color: SACColors;
+}
+
+export const EventPageTags: React.FC<EventTagsProps> = ({ tags, color }) => {
+    const renderTag = (item: Tag) => (
+        <TagComponent key={item.id} variant="selected" color={color}>
+            <Text variant="body-2">{item.name}</Text>
+        </TagComponent>
+    );
+
+    return (
+        <Box flexDirection="row" flexWrap="wrap" gap="xs">
+            {tags.length >= 5
+                ? tags.slice(0, 5).map((item) => renderTag(item))
+                : tags.map((item) => renderTag(item))}
+        </Box>
+    );
+};
diff --git a/frontend/mobile/src/app/(design-system)/index.ts b/frontend/mobile/src/app/(design-system)/index.ts
index c45d74da..308f6f15 100644
--- a/frontend/mobile/src/app/(design-system)/index.ts
+++ b/frontend/mobile/src/app/(design-system)/index.ts
@@ -12,3 +12,6 @@ export * from './components/Dropdown/SelectOne';
 export * from './components/Dropdown/Multiselect';
 export * from './components/PointOfContactCard/PointOfContactCard';
 export * from './components/Tag/Tag';
+export * from './components/Preview/Event';
+export * from './components/Preview/Club';
+export * from './components/Tag/Tags';