diff --git a/apps/mobile/app/(tabs)/account.tsx b/apps/mobile/app/(tabs)/account.tsx
index 333f987..f9d5488 100644
--- a/apps/mobile/app/(tabs)/account.tsx
+++ b/apps/mobile/app/(tabs)/account.tsx
@@ -1,5 +1,4 @@
-import { Text } from 'react-native';
-
+import { Text } from '../components/ui/Text';
 import ScreenLayout from '../components/layout/ScreenLayout';
 
 export default function AccountScreen() {
diff --git a/apps/mobile/app/(tabs)/search/_layout.tsx b/apps/mobile/app/(tabs)/search/_layout.tsx
index 209a22e..e224f40 100644
--- a/apps/mobile/app/(tabs)/search/_layout.tsx
+++ b/apps/mobile/app/(tabs)/search/_layout.tsx
@@ -1,4 +1,5 @@
-import { ScrollView, Text, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 import Searchbar from './Searchbar';
 import ScreenLayout from '../../components/layout/ScreenLayout';
diff --git a/apps/mobile/app/(tabs)/settings.tsx b/apps/mobile/app/(tabs)/settings.tsx
index e24fc0b..851d4bb 100644
--- a/apps/mobile/app/(tabs)/settings.tsx
+++ b/apps/mobile/app/(tabs)/settings.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { Text } from '../components/ui/Text';
 
 import ScreenLayout from '../components/layout/ScreenLayout';
 
diff --git a/apps/mobile/app/[...missing].tsx b/apps/mobile/app/[...missing].tsx
index d0daa41..66c6bc6 100644
--- a/apps/mobile/app/[...missing].tsx
+++ b/apps/mobile/app/[...missing].tsx
@@ -1,6 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { View } from 'react-native';
-import { Text } from  './components/ui/Text';
+import { Text } from './components/ui/Text';
 
 export default function NotFoundScreen() {
   return (
diff --git a/apps/mobile/app/components/item/item.tsx b/apps/mobile/app/components/item/item.tsx
index dda93a8..ce69095 100644
--- a/apps/mobile/app/components/item/item.tsx
+++ b/apps/mobile/app/components/item/item.tsx
@@ -1,4 +1,5 @@
-import { Image, Text, View } from 'react-native';
+import { Image, View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 import { TMDB_POSTER_PATH } from '../../constants/General';
 
diff --git a/apps/mobile/app/components/layout/ScreenLayout.tsx b/apps/mobile/app/components/layout/ScreenLayout.tsx
index 48cc4ae..f67f0dd 100644
--- a/apps/mobile/app/components/layout/ScreenLayout.tsx
+++ b/apps/mobile/app/components/layout/ScreenLayout.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { Text } from '../../components/ui/Text';
 
 type Props = {
   title?: React.ReactNode | string;
diff --git a/apps/mobile/app/components/ui/Text.tsx b/apps/mobile/app/components/ui/Text.tsx
index 725b7ad..1a83774 100644
--- a/apps/mobile/app/components/ui/Text.tsx
+++ b/apps/mobile/app/components/ui/Text.tsx
@@ -1,9 +1,17 @@
-import { TextProps, Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
 import { cva } from 'class-variance-authority';
+import { Text as RNText, TextProps } from 'react-native';
 
-const textVariants = cva('font-sans text-white');
+import { cn } from '../../lib/utils';
 
-export const Text = ({ className, ...props }: TextProps) => {
-  return <RNText className={cn(textVariants(), className)} {...props} />;
-};
+const textVariants = cva('text-white');
+
+export function Text({ className, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn(className, textVariants(), {
+        'font-sans': !className?.includes('font-'),
+      })}
+      {...props}
+    />
+  );
+}
diff --git a/apps/mobile/app/lib/utils.ts b/apps/mobile/app/lib/utils.ts
index 365058c..1396c24 100644
--- a/apps/mobile/app/lib/utils.ts
+++ b/apps/mobile/app/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
+import { clsx, ClassValue } from 'clsx';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
diff --git a/apps/mobile/metro.config.js b/apps/mobile/metro.config.js
index 30cf87c..251d86f 100644
--- a/apps/mobile/metro.config.js
+++ b/apps/mobile/metro.config.js
@@ -59,7 +59,7 @@ const customConfig = {
   },
   resolver: {
     assetExts: assetExts.filter((ext) => ext !== 'svg'),
-    sourceExts: [...sourceExts, 'svg'],
+    sourceExts: [...sourceExts, 'svg', 'mjs'],
     blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
     // unstable_enableSymlinks: true,
     // unstable_enablePackageExports: true,
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index cd7a254..6e2b30a 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -17,8 +17,8 @@
     "@testing-library/jest-native": "*",
     "@testing-library/react-native": "*",
     "@types/react": "*",
-    "class-variance-authority": "*",
-    "clsx": "*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "eslint-plugin-react": "*",
     "eslint-plugin-react-hooks": "*",
     "expo": "*",
@@ -46,8 +46,8 @@
     "react-native-svg-transformer": "*",
     "react-native-web": "^0.19.10",
     "react-test-renderer": "*",
-    "tailwind-merge": "*",
-    "tailwindcss": "*",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "3.3.2",
     "typescript": "*"
   },
   "scripts": {
@@ -69,6 +69,7 @@
     "jest": "^29.4.1",
     "jest-expo": "~49.0.0",
     "pod-install": "^0.1.39",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.2.2"
   }
diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts
index c3a411a..d75a07b 100644
--- a/apps/mobile/tailwind.config.ts
+++ b/apps/mobile/tailwind.config.ts
@@ -19,7 +19,7 @@ export default {
             semibold: ['OpenSansSemiBold'],
             bold: ['OpenSansBold'],
             extrabold: ['OpenSansExtra'],
-          }
+          },
         },
       },
     },
diff --git a/package.json b/package.json
index 15abd5b..6c98728 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,6 @@
     "typescript": "~5.2.2"
   },
   "dependencies": {
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
     "@expo/metro-config": "~0.10.7",
     "expo": "49.0.16",
     "expo-splash-screen": "~0.20.5",
@@ -61,8 +59,6 @@
     "react-native-svg": "13.9.0",
     "react-native-svg-transformer": "1.3.0",
     "react-native-web": "~0.19.9",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "3.3.2",
     "tslib": "^2.3.0"
   },
   "pnpm": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbe5349..63d3266 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -209,6 +209,12 @@ importers:
       '@types/react':
         specifier: '*'
         version: 18.2.14
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.0
+      clsx:
+        specifier: ^2.1.0
+        version: 2.1.0
       eslint-plugin-react:
         specifier: '*'
         version: 7.32.2(eslint@8.56.0)
@@ -290,12 +296,19 @@ importers:
       react-test-renderer:
         specifier: '*'
         version: 18.2.0(react@18.2.0)
+      tailwind-merge:
+        specifier: ^2.2.1
+        version: 2.2.1
       tailwindcss:
         specifier: 3.3.2
         version: 3.3.2(ts-node@10.9.1)
       typescript:
         specifier: '*'
         version: 5.2.2
+    devDependencies:
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.11
+        version: 0.5.11(prettier@3.2.4)
 
 packages:
 
@@ -5830,6 +5843,12 @@ packages:
   /cjs-module-lexer@1.2.3:
     resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
 
+  /class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+    dependencies:
+      clsx: 2.0.0
+    dev: false
+
   /clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -5897,6 +5916,16 @@ packages:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
     engines: {node: '>=0.8'}
 
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /clsx@2.1.0:
+    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -12036,6 +12065,58 @@ packages:
       fast-diff: 1.3.0
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.11(prettier@3.2.4):
+    resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.4
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -13555,6 +13636,12 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /tailwind-merge@2.2.1:
+    resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==}
+    dependencies:
+      '@babel/runtime': 7.23.9
+    dev: false
+
   /tailwindcss@3.3.2(ts-node@10.9.1):
     resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
     engines: {node: '>=14.0.0'}