diff --git a/packages/app/hooks/favorites/index.ts b/packages/app/hooks/favorites/index.ts
deleted file mode 100644
index e883e1944..000000000
--- a/packages/app/hooks/favorites/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useFetchUserFavorites';
-export * from './useAddFavorite';
diff --git a/packages/app/modules/feed/components/CreatedAtLabel/CreatedAtLabel.tsx b/packages/app/modules/feed/components/CreatedAtLabel/CreatedAtLabel.tsx
new file mode 100644
index 000000000..3dba940d0
--- /dev/null
+++ b/packages/app/modules/feed/components/CreatedAtLabel/CreatedAtLabel.tsx
@@ -0,0 +1,18 @@
+import { XStack, RText } from '@packrat/ui';
+import { Clock } from '@tamagui/lucide-icons';
+import React, { type FC } from 'react';
+
+interface CreatedAtLabelProps {
+  date: string;
+}
+export const CreatedAtLabel: FC<CreatedAtLabelProps> = ({ date }) => {
+  return (
+    <XStack
+      style={{ marginTop: 4, alignItems: 'center', maxWidth: '100%' }}
+      space={4}
+    >
+      <Clock size={16} />
+      <RText>{date}</RText>
+    </XStack>
+  );
+};
diff --git a/packages/app/modules/feed/components/CreatedAtLabel/index.ts b/packages/app/modules/feed/components/CreatedAtLabel/index.ts
new file mode 100644
index 000000000..81212b482
--- /dev/null
+++ b/packages/app/modules/feed/components/CreatedAtLabel/index.ts
@@ -0,0 +1 @@
+export { CreatedAtLabel } from './CreatedAtLabel';
diff --git a/packages/app/modules/feed/components/FavoriteButton/FavoriteButton.tsx b/packages/app/modules/feed/components/FavoriteButton/FavoriteButton.tsx
new file mode 100644
index 000000000..ed56821eb
--- /dev/null
+++ b/packages/app/modules/feed/components/FavoriteButton/FavoriteButton.tsx
@@ -0,0 +1,28 @@
+import { AntDesign } from '@expo/vector-icons';
+import { RText, XStack } from '@packrat/ui';
+import React, { type FC } from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+
+interface FavoriteButtonProps {
+  isAuthUserFavorite: boolean;
+  onClick: (e: GestureResponderEvent) => void;
+  count: number;
+}
+export const FavoriteButton: FC<FavoriteButtonProps> = ({
+  onClick,
+  isAuthUserFavorite,
+  count,
+}) => {
+  return (
+    <XStack style={{ alignItems: 'center' }} space="$2">
+      <Pressable onPress={onClick}>
+        <AntDesign
+          name="heart"
+          size={16}
+          color={isAuthUserFavorite ? 'red' : undefined}
+        />
+      </Pressable>
+      <RText style={{ fontSize: 14 }}>{count}</RText>
+    </XStack>
+  );
+};
diff --git a/packages/app/modules/feed/components/FavoriteButton/index.ts b/packages/app/modules/feed/components/FavoriteButton/index.ts
new file mode 100644
index 000000000..5647cda88
--- /dev/null
+++ b/packages/app/modules/feed/components/FavoriteButton/index.ts
@@ -0,0 +1 @@
+export { FavoriteButton } from './FavoriteButton';
diff --git a/packages/app/modules/feed/components/FeedCard.tsx b/packages/app/modules/feed/components/FeedCard/FeedCard.tsx
similarity index 84%
rename from packages/app/modules/feed/components/FeedCard.tsx
rename to packages/app/modules/feed/components/FeedCard/FeedCard.tsx
index 93c4426aa..5374ff139 100644
--- a/packages/app/modules/feed/components/FeedCard.tsx
+++ b/packages/app/modules/feed/components/FeedCard/FeedCard.tsx
@@ -1,49 +1,60 @@
-import { AntDesign } from '@expo/vector-icons';
-import { formatDistanceToNow } from 'date-fns';
-import { MaterialIcons, Entypo } from '@expo/vector-icons';
-import useTheme from 'app/hooks/useTheme';
-import { TouchableOpacity } from 'react-native';
-import { DuplicateIcon } from 'app/assets/icons';
-import { truncateString } from 'app/utils/truncateString';
-import { RLink, RText as OriginalRText, ContextMenu } from '@packrat/ui';
-import { formatNumber } from 'app/utils/formatNumber';
-import { useAddFavorite } from 'app/hooks/favorites';
+import React, { type FC } from 'react';
+import { type FeedItem, type FeedType } from 'app/modules/feed/model';
+import { feedItemPackCardConverter } from './utils';
+import { PackCard } from 'app/modules/pack';
+import { type CardType } from '@packrat/ui';
+import { useAddFavorite } from 'app/modules/feed';
 import { useAuthUser } from 'app/modules/auth';
-import { useRouter } from 'app/hooks/router';
-import { useItemWeightUnit } from 'app/modules/item';
-import { convertWeight } from 'app/utils/convertWeight';
-import Layout from 'app/components/layout/Layout';
-import { Button, Card, H2, Paragraph, XStack, YStack } from 'tamagui';
-
-const RText: any = OriginalRText;
-
-interface CardProps {
-  type: string;
-  id: string;
-  owner: {
-    id: string;
-    username: string;
-  };
-  name: string;
-  total_weight: number;
-  is_public: boolean;
-  favorited_by: Array<{
-    id: string;
-  }>;
-  favorites_count: number;
-  owner_id: string | { id: string };
-  destination: string;
-  createdAt: string;
-  owners: Array<{ any: any }>;
-  duration: string;
-  itemPacks?: any[];
-}
 
-interface User {
-  id: string;
+const convertersByType = {
+  pack: feedItemPackCardConverter,
+};
+
+const cardComponentsByType = {
+  pack: PackCard,
+};
+
+interface FeedCardProps {
+  feedType: FeedType;
+  cardType: CardType;
+  item: FeedItem;
 }
 
-export function FeedCard({
+export const FeedCard: FC<FeedCardProps> = ({ item, cardType, feedType }) => {
+  const { addFavorite } = useAddFavorite();
+  const user = useAuthUser();
+  const cardProps =
+    typeof convertersByType[feedType] === 'function'
+      ? convertersByType[feedType](item, user?.id)
+      : null;
+
+  const handleAddToFavorite = () => {
+    if (!user) return;
+    const data = {
+      packId: item.id,
+      userId: user.id,
+    };
+
+    addFavorite(data);
+  };
+
+  if (!cardProps) {
+    return null;
+  }
+
+  const CardComponent = cardComponentsByType[feedType];
+
+  return (
+    <CardComponent
+      {...cardProps}
+      cardType={cardType}
+      toggleFavorite={handleAddToFavorite}
+    />
+  );
+};
+
+/*
+export function FeedCardOld({
   type,
   id,
   owner,
@@ -58,7 +69,7 @@ export function FeedCard({
   owners,
   duration,
   itemPacks,
-}: CardProps) {
+}: FeedCardProps) {
   console.log('CardProps:', favorited_by);
   const user = useAuthUser();
   const { currentTheme } = useTheme();
@@ -246,3 +257,4 @@ export function FeedCard({
     </Layout>
   );
 }
+*/
diff --git a/packages/app/modules/feed/components/FeedCard/index.ts b/packages/app/modules/feed/components/FeedCard/index.ts
new file mode 100644
index 000000000..a6871b085
--- /dev/null
+++ b/packages/app/modules/feed/components/FeedCard/index.ts
@@ -0,0 +1 @@
+export { FeedCard } from './FeedCard';
diff --git a/packages/app/modules/feed/components/FeedCard/utils.ts b/packages/app/modules/feed/components/FeedCard/utils.ts
new file mode 100644
index 000000000..ea18d5b94
--- /dev/null
+++ b/packages/app/modules/feed/components/FeedCard/utils.ts
@@ -0,0 +1,40 @@
+import { type FeedCardProps, type FeedItem } from 'modules/feed/model';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { type PackDetails } from 'app/modules/pack';
+import { truncateString } from 'app/utils/truncateString';
+
+type Converter<Input, Result> = (
+  input: Input,
+  currentUserId?: string | number,
+) => Result;
+
+export const feedItemPackCardConverter: Converter<
+  FeedItem,
+  Omit<FeedCardProps<PackDetails>, 'cardType' | 'toggleFavorite'>
+> = (input, currentUserId) => {
+  return {
+    id: input.id,
+    createdAt: formatDistanceToNowStrict(new Date(input.createdAt), {
+      addSuffix: false,
+    }),
+    title: truncateString(input.name, 25),
+    ownerId:
+      typeof input.owner_id === 'string'
+        ? input.owner_id
+        : input.owner_id?.id || '',
+    details: {
+      score: input.total_score,
+      weight: input.total_weight,
+      quantity:
+        input?.itemPacks?.reduce(
+          (accumulator, currentValue) =>
+            accumulator + currentValue?.item?.quantity,
+          0,
+        ) ?? 0,
+    },
+    isUserFavorite: input?.userFavoritePacks?.some(
+      (obj) => obj?.userId === currentUserId,
+    ),
+    favoriteCount: input.favorites_count,
+  };
+};
diff --git a/packages/app/modules/feed/components/index.ts b/packages/app/modules/feed/components/index.ts
index f2a5b6056..3c0d35173 100644
--- a/packages/app/modules/feed/components/index.ts
+++ b/packages/app/modules/feed/components/index.ts
@@ -1,3 +1,5 @@
 export { FeedCard } from './FeedCard';
 export { FeedSearchFilter } from './FeedSearchFilter';
 export { SearchProvider, SearchContext } from './SearchProvider';
+export { FavoriteButton } from './FavoriteButton';
+export { CreatedAtLabel } from './CreatedAtLabel';
diff --git a/packages/app/modules/feed/hooks/index.ts b/packages/app/modules/feed/hooks/index.ts
index a1ff51b2d..096f0b3da 100644
--- a/packages/app/modules/feed/hooks/index.ts
+++ b/packages/app/modules/feed/hooks/index.ts
@@ -1 +1,3 @@
 export { useFeed } from './useFeed';
+export { useAddFavorite } from './useAddFavorite';
+export { useFetchUserFavorites } from './useFetchUserFavorites';
diff --git a/packages/app/hooks/favorites/useAddFavorite.ts b/packages/app/modules/feed/hooks/useAddFavorite.ts
similarity index 95%
rename from packages/app/hooks/favorites/useAddFavorite.ts
rename to packages/app/modules/feed/hooks/useAddFavorite.ts
index 41b5af9d8..b52c8796f 100644
--- a/packages/app/hooks/favorites/useAddFavorite.ts
+++ b/packages/app/modules/feed/hooks/useAddFavorite.ts
@@ -1,4 +1,4 @@
-import { queryTrpc } from '../../trpc';
+import { queryTrpc } from 'app/trpc';
 
 export function useAddFavorite() {
   const utils = queryTrpc.useContext();
diff --git a/packages/app/hooks/favorites/useFetchUserFavorites.ts b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
similarity index 90%
rename from packages/app/hooks/favorites/useFetchUserFavorites.ts
rename to packages/app/modules/feed/hooks/useFetchUserFavorites.ts
index cfb3e6c39..978fc6bff 100644
--- a/packages/app/hooks/favorites/useFetchUserFavorites.ts
+++ b/packages/app/modules/feed/hooks/useFetchUserFavorites.ts
@@ -1,4 +1,4 @@
-import { queryTrpc } from '../../trpc';
+import { queryTrpc } from 'app/trpc';
 
 export const useFetchUserFavorites = (userId: string) => {
   const enabled = !!userId;
diff --git a/packages/app/modules/feed/index.ts b/packages/app/modules/feed/index.ts
index 94d9e2c14..1b1318e65 100644
--- a/packages/app/modules/feed/index.ts
+++ b/packages/app/modules/feed/index.ts
@@ -1,4 +1,11 @@
 export * from './widgets';
 export * from './screens';
-export { useFeed } from './hooks';
-export { SearchProvider, FeedSearchFilter, FeedCard } from './components';
+export { useFeed, useAddFavorite, useFetchUserFavorites } from './hooks';
+export {
+  SearchProvider,
+  FeedSearchFilter,
+  FeedCard,
+  FavoriteButton,
+  CreatedAtLabel,
+} from './components';
+export { type FeedCardProps, type FeedItem } from './model';
diff --git a/packages/app/modules/feed/model.ts b/packages/app/modules/feed/model.ts
new file mode 100644
index 000000000..cc30e1659
--- /dev/null
+++ b/packages/app/modules/feed/model.ts
@@ -0,0 +1,39 @@
+import { type CardType } from '@packrat/ui';
+
+export type FeedType = 'pack';
+
+export interface FeedItem {
+  id: string;
+  owner: {
+    id: string;
+    username: string;
+  };
+  name: string;
+  total_weight: number;
+  total_score: number;
+  is_public: boolean;
+  favorited_by: Array<{
+    id: string;
+  }>;
+  userFavoritePacks?: Array<{ userId: string }>;
+  favorites_count: number;
+  owner_id: string | { id: string };
+  destination: string;
+  createdAt: string;
+  owners: Array<{ any: any }>;
+  duration: string;
+  type: FeedType;
+  itemPacks?: any[];
+}
+
+export interface FeedCardProps<Details> {
+  id: string;
+  title: string;
+  cardType: CardType;
+  createdAt: string;
+  details: Details;
+  ownerId: string;
+  favoriteCount: number;
+  isUserFavorite: boolean;
+  toggleFavorite: () => void;
+}
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index db33bb99b..70c766d2e 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -149,13 +149,16 @@ const Feed = ({ feedType = 'public' }: FeedProps) => {
           <FlatList
             data={filteredData}
             horizontal={false}
+            ItemSeparatorComponent={() => (
+              <View style={{ height: 12, width: '100%' }} />
+            )}
             keyExtractor={(item) => item?.id + item?.type}
             renderItem={({ item }) => (
               <FeedCard
                 key={item?.id}
-                type={item?.type}
-                favorited_by={item?.userFavoritePacks}
-                {...item}
+                item={item}
+                cardType="primary"
+                feedType={item.type}
               />
             )}
             ListFooterComponent={() => <View style={{ height: 50 }} />}
diff --git a/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx b/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx
index 33bf44dd2..02723e320 100644
--- a/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx
+++ b/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import Carousel from 'app/components/carousel';
 import { useFeed } from '../../hooks';
-import { default as FeedPreviewCard, type FeedItem } from './FeedPreviewCard';
 import Loader from 'app/components/Loader';
+import { FeedCard, type FeedItem } from 'app/modules/feed';
+import { View } from 'tamagui';
 
 interface FeedPreviewScrollProps {
   itemWidth: number;
@@ -24,9 +25,11 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({
       {feedData
         ?.filter((item): item is FeedItem => item.type !== null)
         .map((item: FeedItem) => {
-          const linkStr = `/${item.type}/${item.id}`;
+          const linkStr = `/pack/${item.id}`;
           return linkStr ? (
-            <FeedPreviewCard {...{ linkStr, item, feedType }} key={linkStr} />
+            <View style={{ marginBottom: 10 }}>
+              <FeedCard item={item} cardType="secondary" feedType="pack" />
+            </View>
           ) : null;
         })}
     </Carousel>
diff --git a/packages/app/modules/feed/widgets/FeedPreview/FeedPreviewCard.tsx b/packages/app/modules/feed/widgets/FeedPreview/FeedPreviewCard.tsx
deleted file mode 100644
index 0453036d8..000000000
--- a/packages/app/modules/feed/widgets/FeedPreview/FeedPreviewCard.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/react-in-jsx-scope */
-import { useState } from 'react';
-import { RText as OriginalRText, RStack } from '@packrat/ui';
-import { RLink } from '@packrat/ui';
-import { type LayoutChangeEvent, View } from 'react-native';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import loadStyles from './feedpreview.style';
-import { AntDesign, Fontisto, MaterialIcons } from '@expo/vector-icons';
-import useTheme from 'app/hooks/useTheme';
-import { useItemWeightUnit } from 'app/modules/item';
-import { convertWeight } from 'app/utils/convertWeight';
-import { formatNumber } from 'app/utils/formatNumber';
-import { hexToRGBA } from 'app/utils/colorFunctions';
-
-// TODO FeedItem is one of: trip, pack, similar pack & item
-export type FeedItem = any;
-
-interface FeedPreviewCardProps {
-  linkStr: string;
-  item: FeedItem;
-  feedType: string;
-}
-
-const RText: any = OriginalRText;
-
-const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({
-  linkStr,
-  item,
-  feedType,
-}) => {
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles);
-  const [weightUnit] = useItemWeightUnit();
-  const formattedWeight = convertWeight(
-    item.total_weight ?? item.weight,
-    item.unit ?? 'g',
-    weightUnit,
-  );
-  const [cardWidth, setCardWidth] = useState<number | undefined>();
-
-  const handleSetCardWidth = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    setCardWidth(width);
-  };
-
-  if (feedType == 'similarItems') {
-    return (
-      <View style={styles.cardStyles}>
-        <View
-          style={{
-            backgroundColor: currentTheme.colors.cardIconColor,
-            width: '100%',
-            paddingLeft: 16,
-            alignSelf: 'stretch',
-          }}
-        >
-          <View
-            style={{
-              backgroundColor: currentTheme.colors.primary,
-              padding: 4,
-              alignSelf: 'flex-start',
-              borderRadius: 8,
-              position: 'relative',
-              top: 16,
-            }}
-          >
-            <Fontisto
-              name="tent"
-              size={24}
-              color={currentTheme.colors.cardIconColor}
-            />
-          </View>
-        </View>
-        <View style={{ padding: 16 }}>
-          <RText style={[styles.feedItemTitle, { width: cardWidth }]}>
-            {item.name}
-          </RText>
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'start',
-              fontWeight: 500,
-            }}
-            gap="$6"
-            onLayout={handleSetCardWidth}
-          >
-            <RText
-              color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
-            >
-              {formatNumber(formattedWeight)}
-              {weightUnit}
-            </RText>
-
-            <RText
-              color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
-            >
-              Qty: {item.quantity}
-            </RText>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-              }}
-            >
-              <AntDesign
-                name="clockcircle"
-                size={16}
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              />
-              <RText
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-                style={{ fontWeight: 'bold', lineHeight: 'normal' }}
-              >
-                {new Date(item.createdAt).toLocaleString('en-US', {
-                  month: 'short',
-                  day: '2-digit',
-                  ...(new Date(item.createdAt).getFullYear() ==
-                  new Date().getFullYear()
-                    ? {}
-                    : { year: 'numeric' }),
-                })}
-              </RText>
-            </View>
-          </RStack>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <RLink href={linkStr}>
-      <View style={styles.cardStyles}>
-        <View
-          style={{
-            backgroundColor: currentTheme.colors.secondaryBlue,
-            width: '100%',
-            paddingLeft: 16,
-            alignSelf: 'stretch',
-          }}
-        >
-          <View
-            style={{
-              backgroundColor: currentTheme.colors.border,
-              padding: 4,
-              alignSelf: 'flex-start',
-              borderRadius: 8,
-              position: 'relative',
-              top: 16,
-            }}
-          >
-            <MaterialIcons
-              name="backpack"
-              size={24}
-              color={currentTheme.colors.tertiaryBlue}
-            />
-          </View>
-        </View>
-        <View style={{ padding: 16 }}>
-          <RText style={[styles.feedItemTitle, { width: cardWidth }]}>
-            {item.name}
-          </RText>
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'start',
-              fontWeight: 500,
-            }}
-            gap="$4"
-            onLayout={handleSetCardWidth}
-          >
-            <RText
-              color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold' }}
-            >
-              {formatNumber(formattedWeight)}
-              {weightUnit}
-            </RText>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-              }}
-            >
-              <AntDesign
-                name="heart"
-                size={16}
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              />
-              <RText
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-                style={{ fontWeight: 'bold' }}
-              >
-                {item.favorites_count}
-              </RText>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-              }}
-            >
-              <AntDesign
-                name="clockcircle"
-                size={16}
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              />
-              <RText
-                color={hexToRGBA(currentTheme.colors.text, 0.8)}
-                style={{ fontWeight: 'bold' }}
-              >
-                {new Date(item.createdAt).toLocaleString('en-US', {
-                  month: 'short',
-                  day: '2-digit',
-                  ...(new Date(item.createdAt).getFullYear() ==
-                  new Date().getFullYear()
-                    ? {}
-                    : { year: 'numeric' }),
-                })}
-              </RText>
-            </View>
-            <RText
-              color={hexToRGBA(currentTheme.colors.text, 0.8)}
-              style={{ fontWeight: 'bold' }}
-            >
-              Ttl Score: {item.total_score}
-            </RText>
-          </RStack>
-        </View>
-      </View>
-    </RLink>
-  );
-};
-
-export default FeedPreviewCard;
diff --git a/packages/app/modules/pack/components/PackCard/PackCard.tsx b/packages/app/modules/pack/components/PackCard/PackCard.tsx
new file mode 100644
index 000000000..8c7f42f69
--- /dev/null
+++ b/packages/app/modules/pack/components/PackCard/PackCard.tsx
@@ -0,0 +1,18 @@
+import React, { type FC } from 'react';
+import { type FeedCardProps } from 'app/modules/feed';
+import { type PackDetails } from 'app/modules/pack/model';
+import { PackPrimaryCard } from './PackPrimaryCard';
+import { PackSecondaryCard } from './PackSecondaryCard';
+
+interface PackCardProps extends FeedCardProps<PackDetails> {}
+
+const PackCards = {
+  primary: PackPrimaryCard,
+  secondary: PackSecondaryCard,
+};
+
+export const PackCard: FC<PackCardProps> = (props) => {
+  const PackCardComponent = PackCards[props.cardType];
+
+  return <PackCardComponent {...props} />;
+};
diff --git a/packages/app/modules/pack/components/PackCard/PackImage.tsx b/packages/app/modules/pack/components/PackCard/PackImage.tsx
new file mode 100644
index 000000000..868841090
--- /dev/null
+++ b/packages/app/modules/pack/components/PackCard/PackImage.tsx
@@ -0,0 +1,29 @@
+import React, { type FC } from 'react';
+import { View } from '@packrat/ui';
+import { Package } from '@tamagui/lucide-icons';
+import { type ViewProps } from 'tamagui';
+
+interface PackImageProps {
+  style?: ViewProps['style'];
+}
+
+export const PackImage: FC<PackImageProps> = ({ style = {} }) => {
+  return (
+    <View
+      style={[
+        {
+          display: 'flex',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          alignItems: 'center',
+        },
+        style,
+      ]}
+    >
+      <View>
+        <Package />
+      </View>
+    </View>
+  );
+};
diff --git a/packages/app/modules/pack/components/PackCard/PackPrimaryCard.tsx b/packages/app/modules/pack/components/PackCard/PackPrimaryCard.tsx
new file mode 100644
index 000000000..4c624cded
--- /dev/null
+++ b/packages/app/modules/pack/components/PackCard/PackPrimaryCard.tsx
@@ -0,0 +1,59 @@
+import { Card, Details, RLink, RStack, RText } from '@packrat/ui';
+import React, { type FC } from 'react';
+import { PackImage } from './PackImage';
+import {
+  FavoriteButton,
+  CreatedAtLabel,
+  type FeedCardProps,
+} from 'app/modules/feed';
+import { type PackDetails } from 'app/modules/pack/model';
+import { DuplicateIcon } from 'app/assets/icons';
+import { useItemWeightUnit } from 'app/modules/item';
+import { convertWeight } from 'app/utils/convertWeight';
+
+interface PackCardProps extends FeedCardProps<PackDetails> {}
+
+export const PackPrimaryCard: FC<PackCardProps> = (props) => {
+  const [weightUnit] = useItemWeightUnit();
+  const packDetails = Object.entries(props.details).map(([key, value]) => ({
+    key,
+    label: key,
+    value:
+      key === 'weight'
+        ? `${convertWeight(value, 'g', weightUnit)} ${weightUnit}`
+        : value,
+  }));
+
+  return (
+    <Card
+      title={props.title}
+      link={`/pack/${props.id}`}
+      image={<PackImage />}
+      subtitle={<CreatedAtLabel date={props.createdAt} />}
+      actions={
+        <RStack style={{ flexDirection: 'row', gap: 12 }}>
+          <FavoriteButton
+            count={props.favoriteCount}
+            isAuthUserFavorite={props.isUserFavorite}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              props.toggleFavorite();
+            }}
+          />
+          <RStack alignItems="center" style={{ flexDirection: 'row', gap: 8 }}>
+            <DuplicateIcon link={`/pack/${props.id}?copy=true`} />
+          </RStack>
+          <RLink
+            href={`/profile/${props.ownerId}`}
+            style={{ textDecoration: 'none' }}
+          >
+            <RText style={{ marginLeft: 'auto' }}>View owner</RText>
+          </RLink>
+        </RStack>
+      }
+      content={<Details items={packDetails} />}
+      type={props.cardType}
+    />
+  );
+};
diff --git a/packages/app/modules/pack/components/PackCard/PackSecondaryCard.tsx b/packages/app/modules/pack/components/PackCard/PackSecondaryCard.tsx
new file mode 100644
index 000000000..1f222a45f
--- /dev/null
+++ b/packages/app/modules/pack/components/PackCard/PackSecondaryCard.tsx
@@ -0,0 +1,38 @@
+import { Card, RStack } from '@packrat/ui';
+import React, { type FC } from 'react';
+import { PackImage } from './PackImage';
+import {
+  CreatedAtLabel,
+  FavoriteButton,
+  type FeedCardProps,
+} from 'app/modules/feed';
+import { type PackDetails } from 'app/modules/pack/model';
+
+interface PackCardProps extends FeedCardProps<PackDetails> {}
+
+export const PackSecondaryCard: FC<PackCardProps> = (props) => {
+  return (
+    <Card
+      title={props.title}
+      link={`/pack/${props.id}`}
+      image={
+        <PackImage style={{ justifyContent: 'flex-start', paddingTop: 15 }} />
+      }
+      subtitle={<CreatedAtLabel date={props.createdAt} />}
+      actions={
+        <RStack style={{ flexDirection: 'row', gap: 12 }}>
+          <FavoriteButton
+            count={props.favoriteCount}
+            isAuthUserFavorite={props.isUserFavorite}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              props.toggleFavorite();
+            }}
+          />
+        </RStack>
+      }
+      type={props.cardType}
+    />
+  );
+};
diff --git a/packages/app/modules/pack/components/PackCard/index.ts b/packages/app/modules/pack/components/PackCard/index.ts
new file mode 100644
index 000000000..184fc6a3b
--- /dev/null
+++ b/packages/app/modules/pack/components/PackCard/index.ts
@@ -0,0 +1 @@
+export { PackCard } from './PackCard';
diff --git a/packages/app/modules/pack/components/index.ts b/packages/app/modules/pack/components/index.ts
index 3c3c80097..3fa8751e1 100644
--- a/packages/app/modules/pack/components/index.ts
+++ b/packages/app/modules/pack/components/index.ts
@@ -5,3 +5,4 @@ export {
   EditPackItemModal,
 } from './PackTable';
 export { CopyPackModal } from './CopyPackModal';
+export { PackCard } from './PackCard';
diff --git a/packages/app/modules/pack/index.ts b/packages/app/modules/pack/index.ts
index de11d3544..d60ba23cc 100644
--- a/packages/app/modules/pack/index.ts
+++ b/packages/app/modules/pack/index.ts
@@ -1,3 +1,4 @@
 export * from './hooks';
 export * from './components';
 export { AddPackScreen, PackDetailsScreen } from './screens';
+export { type PackDetails } from './model';
diff --git a/packages/app/modules/pack/model.ts b/packages/app/modules/pack/model.ts
new file mode 100644
index 000000000..960e743ab
--- /dev/null
+++ b/packages/app/modules/pack/model.ts
@@ -0,0 +1,5 @@
+export interface PackDetails {
+  score?: number;
+  quantity: number;
+  weight: number;
+}
diff --git a/packages/app/modules/user/components/UserDataCard.tsx b/packages/app/modules/user/components/UserDataCard.tsx
index fdbe319ac..e28684ba4 100644
--- a/packages/app/modules/user/components/UserDataCard.tsx
+++ b/packages/app/modules/user/components/UserDataCard.tsx
@@ -14,7 +14,7 @@ import { truncateString } from 'app/utils/truncateString';
 import { useEditPack } from 'app/modules/pack';
 import { Platform } from 'react-native';
 import { useEditTrips } from 'app/hooks/trips';
-import { useAddFavorite } from 'app/hooks/favorites';
+import { useAddFavorite } from 'app/modules/feed';
 import useTheme from 'app/hooks/useTheme';
 
 const RText: any = OriginalRText;
diff --git a/packages/app/modules/user/components/UserDetailList.tsx b/packages/app/modules/user/components/UserDetailList.tsx
index 5fa4aa831..2b2a92386 100644
--- a/packages/app/modules/user/components/UserDetailList.tsx
+++ b/packages/app/modules/user/components/UserDetailList.tsx
@@ -51,7 +51,9 @@ export const UserDataList = ({ data }: DataListProps) => {
           ]}
           footerComponent={undefined}
         >
-          <View style={{ width: 'auto%', paddingBottom: 10 } as any}>
+          <View
+            style={{ width: '100vw', paddingBottom: 10, maxWidth: 992 } as any}
+          >
             <FeedSearchFilter
               isSortHidden={true}
               queryString={searchQuery}
@@ -61,8 +63,14 @@ export const UserDataList = ({ data }: DataListProps) => {
               data={filteredData.slice(0, 2)}
               horizontal={false}
               keyExtractor={(item) => item?.id}
+              ItemSeparatorComponent={() => <View style={{ marginTop: 8 }} />}
               renderItem={({ item }) => (
-                <FeedCard key={item?._id} type={item?.type} {...item} />
+                <FeedCard
+                  key={item?._id}
+                  item={item}
+                  cardType="primary"
+                  feedType={item.type}
+                />
               )}
               showsVerticalScrollIndicator={false}
               maxToRenderPerBatch={2}
@@ -93,8 +101,14 @@ export const UserDataList = ({ data }: DataListProps) => {
               data={filteredData}
               horizontal={false}
               keyExtractor={(item) => item?._id}
+              ItemSeparatorComponent={() => <View style={{ marginTop: 8 }} />}
               renderItem={({ item }) => (
-                <FeedCard key={item?._id} type={item?.type} {...item} />
+                <FeedCard
+                  key={item?._id}
+                  item={item}
+                  cardType="primary"
+                  feedType={item.type}
+                />
               )}
               showsVerticalScrollIndicator={false}
               maxToRenderPerBatch={2}
diff --git a/packages/app/modules/user/hooks/useProfile.ts b/packages/app/modules/user/hooks/useProfile.ts
index 938b2a0e4..88057499e 100644
--- a/packages/app/modules/user/hooks/useProfile.ts
+++ b/packages/app/modules/user/hooks/useProfile.ts
@@ -1,4 +1,4 @@
-import { useFetchUserFavorites } from 'app/hooks/favorites';
+import { useFetchUserFavorites } from 'app/modules/feed';
 import { useUserPacks } from 'app/modules/pack';
 import { useUserTrips } from 'app/hooks/singletrips';
 import { useAuthUser, useMatchesCurrentUser } from 'app/modules/auth';
diff --git a/packages/ui/src/Details/Details.tsx b/packages/ui/src/Details/Details.tsx
new file mode 100644
index 000000000..34b772ce8
--- /dev/null
+++ b/packages/ui/src/Details/Details.tsx
@@ -0,0 +1,49 @@
+import React, { type FC, type ReactNode } from 'react';
+import { ListItem, type ListItemProps, YGroup, Text, useTheme } from 'tamagui';
+
+interface DetailsItem extends ListItemProps {
+  key: string | number;
+  label: ReactNode;
+  value: ReactNode;
+}
+interface DetailsProps {
+  items: DetailsItem[];
+}
+export const Details: FC<DetailsProps> = ({ items }) => {
+  const theme = useTheme();
+  const primaryColor = theme.primary;
+
+  return (
+    <YGroup alignSelf="center" width="100%" size="$2">
+      {items.map(({ key, label, value, ...item }) => (
+        <YGroup.Item key={key}>
+          <ListItem
+            {...item}
+            size="$2"
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              paddingLeft: 0,
+              paddingRight: 0,
+            }}
+          >
+            <Text
+              style={{
+                fontWeight: 'bold',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                textTransform: 'capitalize',
+                color: primaryColor?.val,
+                flex: 1,
+                fontSize: 14,
+              }}
+            >
+              {label}:
+            </Text>
+            <Text style={{ textAlign: 'right', fontSize: 14 }}>{value}</Text>
+          </ListItem>
+        </YGroup.Item>
+      ))}
+    </YGroup>
+  );
+};
diff --git a/packages/ui/src/Details/index.ts b/packages/ui/src/Details/index.ts
new file mode 100644
index 000000000..b358dd569
--- /dev/null
+++ b/packages/ui/src/Details/index.ts
@@ -0,0 +1 @@
+export { Details } from './Details';
diff --git a/packages/ui/src/card/Card.tsx b/packages/ui/src/card/Card.tsx
new file mode 100644
index 000000000..d06775412
--- /dev/null
+++ b/packages/ui/src/card/Card.tsx
@@ -0,0 +1,23 @@
+import React, { type FC } from 'react';
+import { type CardType, type BaseCardProps } from './model';
+import { PrimaryCard } from './PrimaryCard';
+import { SecondaryCard } from './SecondaryCard';
+import { RLink } from '..';
+
+const CardComponents = {
+  primary: PrimaryCard,
+  secondary: SecondaryCard,
+};
+
+interface CardProps extends BaseCardProps {
+  type: CardType;
+}
+export const Card: FC<CardProps> = ({ type, ...props }) => {
+  const CardComponent = CardComponents[type];
+
+  return (
+    <RLink href={props.link}>
+      <CardComponent {...props} />
+    </RLink>
+  );
+};
diff --git a/packages/ui/src/card/PrimaryCard.tsx b/packages/ui/src/card/PrimaryCard.tsx
new file mode 100644
index 000000000..d10a799fb
--- /dev/null
+++ b/packages/ui/src/card/PrimaryCard.tsx
@@ -0,0 +1,53 @@
+import React, { type FC } from 'react';
+import { type BaseCardProps } from './model';
+import { Card, useTheme, View, XStack, YStack } from 'tamagui';
+import { RText } from '@packrat/ui';
+
+interface PrimaryCardProps extends BaseCardProps {}
+
+export const PrimaryCard: FC<PrimaryCardProps> = (props) => {
+  const theme = useTheme();
+  return (
+    <Card elevate size="$4" bordered {...props}>
+      <Card.Header>
+        <XStack>
+          <View
+            style={{ width: 120, height: 120, border: '1px solid lightgray' }}
+          >
+            {props.image}
+          </View>
+          <YStack
+            style={{
+              padding: 10,
+              alignSelf: 'stretch',
+              maxWidth: 560,
+              justifyContent: 'space-between',
+            }}
+          >
+            <RText
+              style={{ fontWeight: 'bold', fontSize: 18 }}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.title}
+            </RText>
+            <RText
+              style={{ color: 'CaptionText', fontSize: 14 }}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.subtitle}
+            </RText>
+            <View>{props.actions}</View>
+          </YStack>
+        </XStack>
+      </Card.Header>
+      <View style={{ paddingLeft: 18, paddingRight: 18, maxWidth: 560 }}>
+        {props.content}
+      </View>
+      <Card.Footer padded>
+        <View>{props.footer}</View>
+      </Card.Footer>
+    </Card>
+  );
+};
diff --git a/packages/ui/src/card/SecondaryCard.tsx b/packages/ui/src/card/SecondaryCard.tsx
new file mode 100644
index 000000000..2459c44ac
--- /dev/null
+++ b/packages/ui/src/card/SecondaryCard.tsx
@@ -0,0 +1,54 @@
+import React, { type FC } from 'react';
+import { type BaseCardProps } from './model';
+import { Card, View, XStack, YStack } from 'tamagui';
+import RText from '../RText';
+
+interface SecondaryCardProps extends Omit<BaseCardProps, 'content'> {}
+
+export const SecondaryCard: FC<SecondaryCardProps> = (props) => {
+  return (
+    <Card
+      elevate
+      size="$4"
+      bordered
+      style={{ height: 120, width: 200 }}
+      {...props}
+    >
+      <Card.Background>{props.image}</Card.Background>
+      <YStack
+        style={{
+          justifyContent: 'flex-end',
+          height: '100%',
+          paddingLeft: 10,
+          paddingRight: 10,
+        }}
+      >
+        <XStack
+          style={{
+            justifyContent: 'space-between',
+            width: '100%',
+            flexDirection: 'row',
+          }}
+        >
+          <View style={{ maxWidth: 120 }}>
+            <RText
+              style={{ fontWeight: 'bold', fontSize: 16 }}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.title}
+            </RText>
+            <RText
+              style={{ color: 'CaptionText', fontSize: 12 }}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.subtitle}
+            </RText>
+          </View>
+          <View>{props.actions}</View>
+        </XStack>
+      </YStack>
+    </Card>
+  );
+};
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
new file mode 100644
index 000000000..9211d038e
--- /dev/null
+++ b/packages/ui/src/card/index.ts
@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export * from './model';
diff --git a/packages/ui/src/card/model.ts b/packages/ui/src/card/model.ts
new file mode 100644
index 000000000..ce048554f
--- /dev/null
+++ b/packages/ui/src/card/model.ts
@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+
+export type CardType = 'primary' | 'secondary';
+
+export interface BaseCardProps {
+  link: string;
+  title: ReactNode;
+  image: ReactNode;
+  subtitle: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  actions?: ReactNode;
+}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index d9932dbd9..a6dc17b74 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -78,7 +78,9 @@ export {
 
 export * from './InputText';
 export * from './form';
-
+export * from './card';
+export * from './Details';
+export { View } from 'tamagui';
 export { config } from './tamagui.config';
 // export * from 'tamagui';
 export * from '@tamagui/toast';