diff --git a/app/global.css b/app/global.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/app/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/app/login.tsx b/app/login.tsx
index 87241b0..7435437 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'expo-router'
 import { useEffect } from 'react'
 import { useColorScheme, View } from 'react-native'
 import { Button, Text } from 'react-native-paper'
+import './global.css'
 
 function Login() {
   const { signIn, user } = useAuth()
diff --git a/babel.config.ts b/babel.config.ts
index dd0cb76..8345280 100644
--- a/babel.config.ts
+++ b/babel.config.ts
@@ -1,6 +1,9 @@
 module.exports = function (api: { cache: (arg0: boolean) => void }) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
   }
 }
diff --git a/bun.lockb b/bun.lockb
index 10525b0..b6672db 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/metro.config.js b/metro.config.js
new file mode 100644
index 0000000..5dddcd8
--- /dev/null
+++ b/metro.config.js
@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
+
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname)
+
+module.exports = withNativeWind(config, { input: './global.css' })
diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts
new file mode 100644
index 0000000..c0d8380
--- /dev/null
+++ b/nativewind-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
\ No newline at end of file
diff --git a/package.json b/package.json
index d575459..93ffe3c 100644
--- a/package.json
+++ b/package.json
@@ -39,15 +39,17 @@
     "expo-web-browser": "~13.0.3",
     "formik": "^2.4.6",
     "i18n-js": "^4.4.3",
+    "nativewind": "^4.1.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-paper": "^5.12.3",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
+    "react-native-reanimated": "^3.16.1",
+    "react-native-safe-area-context": "^4.14.0",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.6",
+    "tailwindcss": "^3.4.14",
     "yup": "^1.4.0"
   },
   "devDependencies": {
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a32057b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/tsconfig.json b/tsconfig.json
index f40d80f..d983220 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,8 +3,17 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "app/(app)/plushtml.old"]
-}
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "app/(app)/plushtml.old",
+    "nativewind-env.d.ts"
+  ]
+}
\ No newline at end of file