diff --git a/frontend/mobile/app/(app)/(tabs)/discover.tsx b/frontend/mobile/app/(app)/(tabs)/discover.tsx
index 592f2ebf3..192b275de 100644
--- a/frontend/mobile/app/(app)/(tabs)/discover.tsx
+++ b/frontend/mobile/app/(app)/(tabs)/discover.tsx
@@ -1,11 +1,11 @@
-import { Box, Text } from '@/app/(design-system)';
+import { Box, Tag, Text } from '@/app/(design-system)';
 
 const DiscoverPage = () => {
     return (
         <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Text color="aqua" variant="text-1">
-                DiscoverAA
-            </Text>
+            <Tag variant="darkRed">
+                <Text variant="body-1">Discover</Text>
+            </Tag>
         </Box>
     );
 };
diff --git a/frontend/mobile/app/(design-system)/Tag/Tag.tsx b/frontend/mobile/app/(design-system)/Tag/Tag.tsx
new file mode 100644
index 000000000..a2b6481b8
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Tag/Tag.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+    BoxProps,
+    VariantProps,
+    createBox,
+    createRestyleComponent,
+    createVariant
+} from '@shopify/restyle';
+
+import { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+
+const tagVariant = createVariant<Theme, 'tagVariants'>({
+    themeKey: 'tagVariants'
+});
+
+type TagProps = VariantProps<Theme, 'tagVariants'> &
+    BoxProps<Theme> & {
+        children?: React.ReactNode;
+    };
+
+const TagBase = createRestyleComponent<TagProps, Theme>([tagVariant], Box);
+
+export const Tag: React.FC<TagProps> = ({ variant, children, ...rest }) => {
+    return (
+        <TagBase variant={variant} {...rest}>
+            {children}
+        </TagBase>
+    );
+};
diff --git a/frontend/mobile/app/(design-system)/Tag/TagVariants.ts b/frontend/mobile/app/(design-system)/Tag/TagVariants.ts
new file mode 100644
index 000000000..90871a9e6
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Tag/TagVariants.ts
@@ -0,0 +1,42 @@
+const TagColorVariants = {
+    darkBlue: {
+        backgroundColor: 'darkBlue'
+    },
+    darkRed: {
+        backgroundColor: 'darkRed'
+    },
+    green: {
+        backgroundColor: 'green'
+    },
+    blue: {
+        backgroundColor: 'blue'
+    },
+    aqua: {
+        backgroundColor: 'aqua'
+    },
+    purple: {
+        backgroundColor: 'purple'
+    },
+    red: {
+        backgroundColor: 'red'
+    },
+    orange: {
+        backgroundColor: 'orange'
+    },
+    yellow: {
+        backgroundColor: 'yellow'
+    }
+} as const;
+
+export const TagVariants = {
+    defaults: {
+        flex: '1',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 'l',
+        paddingVertical: 'xs',
+        backgroundColor: 'aqua',
+        borderRadius: 105
+    },
+    ...TagColorVariants
+};
diff --git a/frontend/mobile/app/(design-system)/Text.tsx b/frontend/mobile/app/(design-system)/Text/Text.tsx
similarity index 72%
rename from frontend/mobile/app/(design-system)/Text.tsx
rename to frontend/mobile/app/(design-system)/Text/Text.tsx
index 23c8bc10e..3e056f4fd 100644
--- a/frontend/mobile/app/(design-system)/Text.tsx
+++ b/frontend/mobile/app/(design-system)/Text/Text.tsx
@@ -1,5 +1,5 @@
 import { createText } from '@shopify/restyle';
 
-import { Theme } from './theme';
+import { Theme } from '../theme';
 
 export const Text = createText<Theme>();
diff --git a/frontend/mobile/app/(design-system)/Text/TextVariants.ts b/frontend/mobile/app/(design-system)/Text/TextVariants.ts
new file mode 100644
index 000000000..85732329d
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Text/TextVariants.ts
@@ -0,0 +1,43 @@
+const Texts = {
+    'header-1': {
+        fontFamily: 'DMSans-Bold',
+        fontSize: 32,
+        fontStyle: 'normal',
+        fontWeight: '700',
+        lineHeight: 'normal'
+    },
+    'subheader-1': {
+        fontFamily: 'DMSans-Medium',
+        fontSize: 24,
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: 'normal',
+        color: '#000'
+    },
+    'body-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 16,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-2': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 10,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    }
+} as const;
+
+export const TextVariants = {
+    defaults: Texts['body-1'],
+    ...Texts
+};
diff --git a/frontend/mobile/app/(design-system)/TextVariants.ts b/frontend/mobile/app/(design-system)/TextVariants.ts
deleted file mode 100644
index 2f3cf8565..000000000
--- a/frontend/mobile/app/(design-system)/TextVariants.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Add actual text variants here
-const Texts = {
-    'text-1': {
-        fontSize: 20,
-        fontWeight: 'bold'
-    },
-    'text-2': {
-        fontSize: 16,
-        fontWeight: 'normal'
-    },
-    'text-3': {
-        fontSize: 14,
-        fontWeight: 'normal'
-    }
-} as const;
-
-export const TextVariants = {
-    defaults: Texts['text-1'],
-    ...Texts
-};
diff --git a/frontend/mobile/app/(design-system)/assets/DMSans-Bold.ttf b/frontend/mobile/app/(design-system)/assets/DMSans-Bold.ttf
new file mode 100644
index 000000000..4f5412dc8
Binary files /dev/null and b/frontend/mobile/app/(design-system)/assets/DMSans-Bold.ttf differ
diff --git a/frontend/mobile/app/(design-system)/assets/DMSans-Medium.ttf b/frontend/mobile/app/(design-system)/assets/DMSans-Medium.ttf
new file mode 100644
index 000000000..841d31d03
Binary files /dev/null and b/frontend/mobile/app/(design-system)/assets/DMSans-Medium.ttf differ
diff --git a/frontend/mobile/app/(design-system)/assets/DMSans-Regular.ttf b/frontend/mobile/app/(design-system)/assets/DMSans-Regular.ttf
new file mode 100644
index 000000000..07266ae18
Binary files /dev/null and b/frontend/mobile/app/(design-system)/assets/DMSans-Regular.ttf differ
diff --git a/frontend/mobile/app/(design-system)/index.ts b/frontend/mobile/app/(design-system)/index.ts
index 0b40f3cff..9d45c37d0 100644
--- a/frontend/mobile/app/(design-system)/index.ts
+++ b/frontend/mobile/app/(design-system)/index.ts
@@ -1,5 +1,6 @@
-export * from './Text';
+export * from './Text/Text';
 export * from './Box';
 export * from './theme';
 export * from './Colors';
 export * from './Spacing';
+export * from './Tag/Tag';
diff --git a/frontend/mobile/app/(design-system)/theme.ts b/frontend/mobile/app/(design-system)/theme.ts
index 9d0acae78..2a3828ce1 100644
--- a/frontend/mobile/app/(design-system)/theme.ts
+++ b/frontend/mobile/app/(design-system)/theme.ts
@@ -2,12 +2,14 @@ import { createTheme } from '@shopify/restyle';
 
 import { Colors } from './Colors';
 import { Spacing } from './Spacing';
-import { TextVariants } from './TextVariants';
+import { TagVariants } from './Tag/TagVariants';
+import { TextVariants } from './Text/TextVariants';
 
 export const theme = createTheme({
     colors: Colors,
     spacing: Spacing,
-    textVariants: TextVariants
+    textVariants: TextVariants,
+    tagVariants: TagVariants
 });
 
 export type Theme = typeof theme;