diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 97bb5fc..465f803 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,6 +1,72 @@
-import "@/global.css";
+import { tabs } from "@/constants/data";
+import clsx from "clsx";
 import { Tabs } from "expo-router";
+import { Image, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-export default function RootLayout() {
-  return <Tabs screenOptions={{ headerShown: false }} />;
-}
+import { COLORS, COMPONENTS } from "@/constants/theme";
+
+const tabBar = COMPONENTS.tabBar;
+
+const TabIcon = ({ focused, icon }: TabIconProps) => {
+  return (
+    <View className="tabs-icon">
+      <View className={clsx("tabs-pill", focused && "tabs-active")}>
+        <Image source={icon} resizeMode="contain" className="tabs-glyph" />
+      </View>
+    </View>
+  );
+};
+
+const TabsLayout = () => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          position: "absolute",
+          bottom: Math.max(insets.bottom, tabBar.horizontalInset),
+          height: tabBar.height,
+          marginHorizontal: tabBar.horizontalInset,
+          borderRadius: tabBar.radius,
+          backgroundColor: COLORS.primary,
+          borderTopWidth: 0,
+          elevation: 0,
+        },
+        tabBarItemStyle: {
+          paddingVertical: tabBar.height / 2 - tabBar.iconFrame / 1.6,
+        },
+        tabBarIconStyle: {
+          width: tabBar.iconFrame,
+          height: tabBar.iconFrame,
+          alignItems: "center",
+        },
+      }}
+    >
+      {tabs.map((item) => (
+        <Tabs.Screen
+          key={item.name}
+          name={item.name}
+          options={{
+            title: item.title,
+            tabBarIcon: ({ focused }) => (
+              <TabIcon focused={focused} icon={item.icon} />
+            ),
+          }}
+        />
+      ))}
+
+      <Tabs.Screen
+        name="subscriptions/[id]"
+        options={{
+          href: null,
+        }}
+      />
+    </Tabs>
+  );
+};
+
+export default TabsLayout;
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index c7752ad..67e9bda 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,10 +1,14 @@
 import "@/global.css";
 import { Link } from "expo-router";
-import { Text, View } from "react-native";
+import { styled } from "nativewind";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 export default function App() {
   return (
-    <View className="flex-1 items-center justify-center bg-background">
+    <SafeAreaView className="flex-1 bg-background p-5">
       <Text className="text-xl font-bold text-success">
         Welcome to Nativewind!
       </Text>
@@ -23,11 +27,11 @@ export default function App() {
 
       {/* Subscription Examples */}
       <Link
-        href="/subscriptions/claude-ai"
+        href={{ pathname: "/subscriptions/[id]", params: { id: "claude-ai" } }}
         className="bg-accent text-white text-xl p-3 rounded-md m-5"
       >
         Claude Max Subscription
       </Link>
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/app/(tabs)/insights.tsx b/app/(tabs)/insights.tsx
index c003366..2e5d760 100644
--- a/app/(tabs)/insights.tsx
+++ b/app/(tabs)/insights.tsx
@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Insights = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Insights</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index 917f56e..80f616a 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Settings = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Settings</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 
diff --git a/app/(tabs)/subscriptions.tsx b/app/(tabs)/subscriptions.tsx
index 82b7c39..4c8e2a1 100644
--- a/app/(tabs)/subscriptions.tsx
+++ b/app/(tabs)/subscriptions.tsx
@@ -1,11 +1,15 @@
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeAreaView);
 
 const Subscriptions = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Subscriptions</Text>
-    </View>
+    </SafeAreaView>
   );
 };
 
diff --git a/app/(tabs)/subscriptions/[id].tsx b/app/subscriptions/[id].tsx
similarity index 100%
rename from app/(tabs)/subscriptions/[id].tsx
rename to app/subscriptions/[id].tsx
diff --git a/assets/expo.icon/Assets/expo-symbol 2.svg b/assets/expo.icon/Assets/expo-symbol 2.svg
new file mode 100644
index 0000000..51d3676
--- /dev/null
+++ b/assets/expo.icon/Assets/expo-symbol 2.svg	
@@ -0,0 +1,3 @@
+<svg width="652" height="606" viewBox="0 0 652 606" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M353.554 0H298.446C273.006 0 249.684 14.6347 237.962 37.9539L4.37994 502.646C-1.04325 513.435 -1.45067 526.178 3.2716 537.313L22.6123 582.918C34.6475 611.297 72.5404 614.156 88.4414 587.885L309.863 222.063C313.34 216.317 319.439 212.826 326 212.826C332.561 212.826 338.659 216.317 342.137 222.063L563.559 587.885C579.46 614.156 617.352 611.297 629.388 582.918L648.728 537.313C653.451 526.178 653.043 513.435 647.62 502.646L414.038 37.9539C402.316 14.6347 378.994 0 353.554 0Z" fill="white"/>
+</svg>
diff --git a/assets/expo.icon/Assets/grid.png b/assets/expo.icon/Assets/grid.png
new file mode 100644
index 0000000..eefea24
Binary files /dev/null and b/assets/expo.icon/Assets/grid.png differ
diff --git a/assets/expo.icon/icon.json b/assets/expo.icon/icon.json
new file mode 100644
index 0000000..7a2c33c
--- /dev/null
+++ b/assets/expo.icon/icon.json
@@ -0,0 +1,40 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.47843,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "image-name" : "expo-symbol 2.svg",
+          "name" : "expo-symbol 2",
+          "position" : {
+            "scale" : 1,
+            "translation-in-points" : [
+              1.1008400065293245e-05,
+              -16.046875
+            ]
+          }
+        },
+        {
+          "image-name" : "grid.png",
+          "name" : "grid"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}
\ No newline at end of file
diff --git a/assets/fonts/PlusJakartaSans-Bold.ttf b/assets/fonts/PlusJakartaSans-Bold.ttf
new file mode 100644
index 0000000..0ff3da5
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Bold.ttf differ
diff --git a/assets/fonts/PlusJakartaSans-ExtraBold.ttf b/assets/fonts/PlusJakartaSans-ExtraBold.ttf
new file mode 100644
index 0000000..d22fa69
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-ExtraBold.ttf differ
diff --git a/assets/fonts/PlusJakartaSans-Light.ttf b/assets/fonts/PlusJakartaSans-Light.ttf
new file mode 100644
index 0000000..2faaa67
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Light.ttf differ
diff --git a/assets/fonts/PlusJakartaSans-Medium.ttf b/assets/fonts/PlusJakartaSans-Medium.ttf
new file mode 100644
index 0000000..f72e9c8
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Medium.ttf differ
diff --git a/assets/fonts/PlusJakartaSans-Regular.ttf b/assets/fonts/PlusJakartaSans-Regular.ttf
new file mode 100644
index 0000000..a68ad8d
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-Regular.ttf differ
diff --git a/assets/fonts/PlusJakartaSans-SemiBold.ttf b/assets/fonts/PlusJakartaSans-SemiBold.ttf
new file mode 100644
index 0000000..e675450
Binary files /dev/null and b/assets/fonts/PlusJakartaSans-SemiBold.ttf differ
diff --git a/assets/icons/activity.png b/assets/icons/activity.png
new file mode 100644
index 0000000..7d5ac44
Binary files /dev/null and b/assets/icons/activity.png differ
diff --git a/assets/icons/add.png b/assets/icons/add.png
new file mode 100644
index 0000000..b13baea
Binary files /dev/null and b/assets/icons/add.png differ
diff --git a/assets/icons/adobe.png b/assets/icons/adobe.png
new file mode 100644
index 0000000..4e7dbac
Binary files /dev/null and b/assets/icons/adobe.png differ
diff --git a/assets/icons/back.png b/assets/icons/back.png
new file mode 100644
index 0000000..01c9de4
Binary files /dev/null and b/assets/icons/back.png differ
diff --git a/assets/icons/canva.png b/assets/icons/canva.png
new file mode 100644
index 0000000..4062f0b
Binary files /dev/null and b/assets/icons/canva.png differ
diff --git a/assets/icons/claude.png b/assets/icons/claude.png
new file mode 100644
index 0000000..f3a08b1
Binary files /dev/null and b/assets/icons/claude.png differ
diff --git a/assets/icons/dropbox.png b/assets/icons/dropbox.png
new file mode 100644
index 0000000..80623b7
Binary files /dev/null and b/assets/icons/dropbox.png differ
diff --git a/assets/icons/figma.png b/assets/icons/figma.png
new file mode 100644
index 0000000..7f74f8c
Binary files /dev/null and b/assets/icons/figma.png differ
diff --git a/assets/icons/github.png b/assets/icons/github.png
new file mode 100644
index 0000000..9ab430e
Binary files /dev/null and b/assets/icons/github.png differ
diff --git a/assets/icons/home.png b/assets/icons/home.png
new file mode 100644
index 0000000..e565dac
Binary files /dev/null and b/assets/icons/home.png differ
diff --git a/assets/icons/logo.png b/assets/icons/logo.png
new file mode 100644
index 0000000..b6db5d5
Binary files /dev/null and b/assets/icons/logo.png differ
diff --git a/assets/icons/medium.png b/assets/icons/medium.png
new file mode 100644
index 0000000..b0915c6
Binary files /dev/null and b/assets/icons/medium.png differ
diff --git a/assets/icons/menu.png b/assets/icons/menu.png
new file mode 100644
index 0000000..bc7157c
Binary files /dev/null and b/assets/icons/menu.png differ
diff --git a/assets/icons/netflix.png b/assets/icons/netflix.png
new file mode 100644
index 0000000..21504ea
Binary files /dev/null and b/assets/icons/netflix.png differ
diff --git a/assets/icons/notion.png b/assets/icons/notion.png
new file mode 100644
index 0000000..b3c2195
Binary files /dev/null and b/assets/icons/notion.png differ
diff --git a/assets/icons/openai.png b/assets/icons/openai.png
new file mode 100644
index 0000000..d04446b
Binary files /dev/null and b/assets/icons/openai.png differ
diff --git a/assets/icons/plus.png b/assets/icons/plus.png
new file mode 100644
index 0000000..b13baea
Binary files /dev/null and b/assets/icons/plus.png differ
diff --git a/assets/icons/setting.png b/assets/icons/setting.png
new file mode 100644
index 0000000..bd7d6a2
Binary files /dev/null and b/assets/icons/setting.png differ
diff --git a/assets/icons/spotify.png b/assets/icons/spotify.png
new file mode 100644
index 0000000..0fa0215
Binary files /dev/null and b/assets/icons/spotify.png differ
diff --git a/assets/icons/wallet.png b/assets/icons/wallet.png
new file mode 100644
index 0000000..8e36172
Binary files /dev/null and b/assets/icons/wallet.png differ
diff --git a/assets/images/avatar.png b/assets/images/avatar.png
new file mode 100644
index 0000000..f841c71
Binary files /dev/null and b/assets/images/avatar.png differ
diff --git a/assets/images/expo-badge-white.png b/assets/images/expo-badge-white.png
new file mode 100644
index 0000000..2863067
Binary files /dev/null and b/assets/images/expo-badge-white.png differ
diff --git a/assets/images/expo-badge.png b/assets/images/expo-badge.png
new file mode 100644
index 0000000..5d5c5bb
Binary files /dev/null and b/assets/images/expo-badge.png differ
diff --git a/assets/images/expo-logo.png b/assets/images/expo-logo.png
new file mode 100644
index 0000000..6b1642a
Binary files /dev/null and b/assets/images/expo-logo.png differ
diff --git a/assets/images/icon.png b/assets/images/icon.png
index 7165a53..67c777a 100644
Binary files a/assets/images/icon.png and b/assets/images/icon.png differ
diff --git a/assets/images/logo-glow.png b/assets/images/logo-glow.png
new file mode 100644
index 0000000..edc99be
Binary files /dev/null and b/assets/images/logo-glow.png differ
diff --git a/assets/images/partial-react-logo.png b/assets/images/partial-react-logo.png
deleted file mode 100644
index 66fd957..0000000
Binary files a/assets/images/partial-react-logo.png and /dev/null differ
diff --git a/assets/images/splash-icon.png b/assets/images/splash-icon.png
index 03d6f6b..6b1642a 100644
Binary files a/assets/images/splash-icon.png and b/assets/images/splash-icon.png differ
diff --git a/assets/images/splash-pattern.png b/assets/images/splash-pattern.png
new file mode 100644
index 0000000..03c846d
Binary files /dev/null and b/assets/images/splash-pattern.png differ
diff --git a/assets/images/tabIcons/explore.png b/assets/images/tabIcons/explore.png
new file mode 100644
index 0000000..73d8258
Binary files /dev/null and b/assets/images/tabIcons/explore.png differ
diff --git a/assets/images/tabIcons/explore@2x.png b/assets/images/tabIcons/explore@2x.png
new file mode 100644
index 0000000..21b9bd2
Binary files /dev/null and b/assets/images/tabIcons/explore@2x.png differ
diff --git a/assets/images/tabIcons/explore@3x.png b/assets/images/tabIcons/explore@3x.png
new file mode 100644
index 0000000..422202d
Binary files /dev/null and b/assets/images/tabIcons/explore@3x.png differ
diff --git a/assets/images/tabIcons/home.png b/assets/images/tabIcons/home.png
new file mode 100644
index 0000000..ad5699c
Binary files /dev/null and b/assets/images/tabIcons/home.png differ
diff --git a/assets/images/tabIcons/home@2x.png b/assets/images/tabIcons/home@2x.png
new file mode 100644
index 0000000..22a1f2c
Binary files /dev/null and b/assets/images/tabIcons/home@2x.png differ
diff --git a/assets/images/tabIcons/home@3x.png b/assets/images/tabIcons/home@3x.png
new file mode 100644
index 0000000..f5d1f9a
Binary files /dev/null and b/assets/images/tabIcons/home@3x.png differ
diff --git a/assets/images/tutorial-web.png b/assets/images/tutorial-web.png
new file mode 100644
index 0000000..e4a8c58
Binary files /dev/null and b/assets/images/tutorial-web.png differ
diff --git a/constants/data.ts b/constants/data.ts
new file mode 100644
index 0000000..70fa413
--- /dev/null
+++ b/constants/data.ts
@@ -0,0 +1,8 @@
+import icons from "./icons";
+
+export const tabs = [
+  { name: "index", title: "Home", icon: icons.home },
+  { name: "subscriptions", title: "Subscriptions", icon: icons.wallet },
+  { name: "insights", title: "Insights", icon: icons.activity },
+  { name: "settings", title: "Settings", icon: icons.setting },
+];
diff --git a/constants/icons.ts b/constants/icons.ts
new file mode 100644
index 0000000..cfe9525
--- /dev/null
+++ b/constants/icons.ts
@@ -0,0 +1,66 @@
+import activity from "@/assets/icons/activity.png";
+import add from "@/assets/icons/add.png";
+import adobe from "@/assets/icons/adobe.png";
+import back from "@/assets/icons/back.png";
+import canva from "@/assets/icons/canva.png";
+import claude from "@/assets/icons/claude.png";
+import dropbox from "@/assets/icons/dropbox.png";
+import figma from "@/assets/icons/figma.png";
+import github from "@/assets/icons/github.png";
+import home from "@/assets/icons/home.png";
+import logo from "@/assets/icons/logo.png";
+import medium from "@/assets/icons/medium.png";
+import menu from "@/assets/icons/menu.png";
+import netflix from "@/assets/icons/netflix.png";
+import notion from "@/assets/icons/notion.png";
+import openai from "@/assets/icons/openai.png";
+import plus from "@/assets/icons/plus.png";
+import setting from "@/assets/icons/setting.png";
+import spotify from "@/assets/icons/spotify.png";
+import wallet from "@/assets/icons/wallet.png";
+
+export {
+    activity,
+    add,
+    adobe,
+    back,
+    canva,
+    claude,
+    dropbox,
+    figma,
+    github,
+    home,
+    logo,
+    medium,
+    menu,
+    netflix,
+    notion,
+    openai,
+    plus,
+    setting,
+    spotify,
+    wallet
+};
+
+export default {
+  activity,
+  add,
+  adobe,
+  back,
+  canva,
+  claude,
+  dropbox,
+  figma,
+  github,
+  home,
+  logo,
+  medium,
+  menu,
+  netflix,
+  notion,
+  openai,
+  plus,
+  setting,
+  spotify,
+  wallet,
+};
diff --git a/constants/theme.ts b/constants/theme.ts
new file mode 100644
index 0000000..e9e804f
--- /dev/null
+++ b/constants/theme.ts
@@ -0,0 +1,52 @@
+
+export const COLORS = {
+  background: "#fff9e3",
+  foreground: "#081126",
+  card: "#fff8e7",
+  muted: "#f6eecf",
+  mutedForeground: "rgba(0, 0, 0, 0.6)",
+  primary: "#081126",
+  accent: "#ea7a53",
+  border: "rgba(0, 0, 0, 0.1)",
+  success: "#16a34a",
+  destructive: "#dc2626",
+  subscription: "#8fd1bd",
+} as const;
+
+export const SPACING = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  18: 72,
+  20: 80,
+  24: 96,
+  30: 120,
+} as const;
+
+export const COMPONENTS = {
+  tabBar: {
+    height: SPACING[18],
+    horizontalInset: SPACING[5],
+    radius: SPACING[8],
+    iconFrame: SPACING[12],
+    itemPaddingVertical: SPACING[2],
+  },
+} as const;
+
+export const theme = {
+  colors: COLORS,
+  spacing: SPACING,
+  components: COMPONENTS,
+} as const;
diff --git a/image.d.ts b/image.d.ts
new file mode 100644
index 0000000..bb75dcc
--- /dev/null
+++ b/image.d.ts
@@ -0,0 +1,24 @@
+declare module "*.png" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.jpeg" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.gif" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: any;
+  export default value;
+}
diff --git a/package-lock.json b/package-lock.json
index 5c4f4e5..fe31480 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
+        "clsx": "^2.1.1",
         "expo": "~54.0.34",
         "expo-constants": "~18.0.13",
         "expo-font": "~14.0.11",
@@ -5647,6 +5648,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index 8be0b84..54b450d 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "clsx": "^2.1.1",
     "expo": "~54.0.34",
     "expo-constants": "~18.0.13",
     "expo-font": "~14.0.11",
diff --git a/type.d.ts b/type.d.ts
new file mode 100644
index 0000000..58c2ad7
--- /dev/null
+++ b/type.d.ts
@@ -0,0 +1,8 @@
+import { ImageSourcePropType } from "react-native";
+
+declare global {
+  interface TabIconProps {
+    focused: boolean;
+    icon: ImageSourcePropType;
+  }
+}