diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
index 9677adce..8ef51cb2 100644
--- a/apps/expo/src/app/index.tsx
+++ b/apps/expo/src/app/index.tsx
@@ -1,114 +1,57 @@
-import { Button, ScrollView, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Link, Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import { Loader2 } from "lucide-react-native";
 
 import { patientIdAtom } from "~/components/forms/welcome-form";
-import { initialSteps, stepsAtom } from "~/components/ui/steps";
-import { api } from "~/utils/api";
-import { clearAll } from "~/utils/atom-with-mmkv";
+import SvgComponent from "~/components/ui/home-svg";
+import { Button } from "~/components/ui/rn-ui/components/ui/button";
 
 const Index = () => {
-  const [patientId, setPatientId] = useAtom(patientIdAtom);
-  const [steps, setSteps] = useAtom(stepsAtom);
-
-  const { data, isLoading, isError, error } =
-    api.patient.searchPatients.useQuery({ query: {} });
-
-  if (isLoading) {
-    return (
-      <View className="mb-36 flex-1 items-center justify-center bg-white">
-        <Loader2
-          size={48}
-          color="black"
-          strokeWidth={2}
-          className="animate-spin"
-        />
-      </View>
-    );
-  }
-
-  if (isError) {
-    return <Text>Error: {error.message}</Text>;
-  }
-
-  const patients = data?.entry?.map((entry) => entry.resource) ?? [];
+  const [, setPatientId] = useAtom(patientIdAtom);
+  const router = useRouter();
 
   return (
-    <SafeAreaView className="bg-purple-700">
+    <SafeAreaView className="flex-1 bg-white">
       {/* Changes page title visible on the header */}
-      <Stack.Screen options={{ title: "Home Page" }} />
-      <View className="h-full w-full p-4">
-        <Text className="pb-2 text-center text-5xl font-bold text-white">
-          Create <Text className="text-pink-400">T3</Text> Turbo
-        </Text>
-
-        <ScrollView>
-          <Text className="text-xl font-bold">All Patients:</Text>
-          {patients.length > 0 ? (
-            patients.map((patient) => (
-              <View key={patient?.id} className="m-2 rounded-lg border p-2">
-                <Text>ID: {patient?.id}</Text>
-                <Text>Given Name: {patient?.name?.[0]?.given}</Text>
-                <Text>Family Name: {patient?.name?.[0]?.family}</Text>
-                {/* Include more patient details as needed */}
-              </View>
-            ))
-          ) : (
-            <Text>No patients found.</Text>
-          )}
-        </ScrollView>
-
-        <Button
-          title="Clear MMKV storage (Need to refresh)"
-          onPress={() => clearAll()}
-          color="#1d4ed8"
-        />
-        <Text className="text-xl font-bold">{`PatientId: ${patientId}`}</Text>
-        <Button
-          title="Get patientId from MMKV with Jotai"
-          onPress={() => console.log(patientId)}
-          color="#1d4ed8"
-        />
-        <Button
-          title="Set patientId on MMKV with Jotai"
-          onPress={() => setPatientId("e7836251cbed4bd5bb2d792bc02893fd")}
-          // onPress={() => setPatientId("7d1cdb7eb3ea46109a40189c8db8986d")}
-          color="#1d4ed8"
-        />
-
-        <Button
-          title="Get steps from MMKV with Jotai"
-          onPress={() => console.log(steps)}
-          color="#1d4ed8"
-        />
-        <Button
-          title="Set steps on MMKV with Jotai"
-          onPress={() => setSteps(initialSteps)}
-          color="#1d4ed8"
-        />
-
-        <Link href="/onboarding/">
-          <View className="p-4">
-            <Text className="text-xl">Onboarding</Text>
-          </View>
-        </Link>
-        <Link href="/onboarding/overview">
-          <View className="p-4">
-            <Text className="text-xl">Overview</Text>
+      <Stack.Screen options={{ title: "Home Page", headerShown: false }} />
+      <View className="h-full w-full flex-1 flex-col justify-between">
+        <View className="px-6 py-32">
+          <Text className="pb-4 text-center text-5xl font-semibold text-black">
+            Hello there!
+          </Text>
+          <Text className="pb-4 text-center text-2xl text-black">
+            Ready to get your life back?
+          </Text>
+
+          <View className="pt-8">
+            <View className="px-6 pb-6">
+              <Button
+                onPress={() => {
+                  // use the demo patient Donna Lewis as the existing patient
+                  setPatientId("e7836251cbed4bd5bb2d792bc02893fd");
+                  router.replace("/portal/(tabs)/");
+                }}
+                textClass="text-center"
+              >
+                I am an existing patient
+              </Button>
+            </View>
+
+            <View className="px-6 pb-6">
+              <Button
+                onPress={() => router.replace("/onboarding/")}
+                textClass="text-center"
+              >
+                I am a new patient
+              </Button>
+            </View>
           </View>
-        </Link>
-        <Link href="/onboarding/confirmation">
-          <View className="p-4">
-            <Text className="text-xl">Confirmation</Text>
-          </View>
-        </Link>
-        <Link href="/portal/(tabs)">
-          <View className="p-4">
-            <Text className="text-xl">Portal</Text>
-          </View>
-        </Link>
+        </View>
+
+        <View className="flex-1 items-center justify-center">
+          <SvgComponent />
+        </View>
       </View>
     </SafeAreaView>
   );
diff --git a/apps/expo/src/components/ui/home-svg.tsx b/apps/expo/src/components/ui/home-svg.tsx
new file mode 100644
index 00000000..10c96c07
--- /dev/null
+++ b/apps/expo/src/components/ui/home-svg.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import type { SvgProps } from "react-native-svg";
+import Svg, { Path } from "react-native-svg";
+
+const SvgComponent = (props: SvgProps) => (
+  <Svg width={692.68} height={520.455} {...props}>
+    <Path
+      fill="#3f3d56"
+      d="M0 518.718c0 .872.7 1.571 1.571 1.571H691.11c.872 0 1.571-.7 1.571-1.57 0-.872-.7-1.572-1.57-1.572H1.57c-.871 0-1.571.7-1.571 1.571Z"
+    />
+    <Path
+      fill="#2f2e41"
+      d="M304.293 474.426h30.425l3.575 16s23 27-3 27-70 8-70-2 32-16 32-16l7-25ZM495.518 398.068l-.573-30.42 15.93-3.876s26.562-23.504 27.051 2.491 9.317 69.837-.681 70.026-16.6-31.693-16.6-31.693l-25.127-6.528Z"
+    />
+    <Path
+      fill="#ffb6b6"
+      d="m405.212 58.98 6.207 22.965-27.93 14.275-10.55-30.412 32.273-6.827z"
+    />
+    <Path
+      fill="#ffb6b6"
+      d="M386.956 5.875c18.057 0 32.696 14.638 32.696 32.696s-14.639 32.696-32.696 32.696-32.697-14.639-32.697-32.696S368.9 5.875 386.956 5.875ZM424.403 205.065a23.095 23.095 0 0 1 7.587-7.84l17.846-34.176 16.014 8.967-19.827 33.702a23.094 23.094 0 0 1-3.427 10.354c-4.78 7.898-12.725 11.832-17.75 8.792s-5.223-11.905-.443-19.8Z"
+    />
+    <Path
+      fill="#2f2e41"
+      d="m365.293 204.426 47.865-.315s21.768 40-2.232 81l-4 84 100-5V400.4s-130 17.712-135 7.712-15-72.428-15-72.428l-10.098 17.77-9.902 128.658h-30.917l-6.803-139 59.72-111 6.367-27.685Z"
+    />
+    <Path
+      fill="#3b82f6"
+      d="m376.684 77.762 36.633-2.442 13.432 41.517-13.432 87.92-50.065 8.547-10.99-91.582 24.422-43.96z"
+    />
+    <Path
+      fill="#3b82f6"
+      d="m414.39 81.426-3.515 40.296 32.97 19.537-12.552 45.167 24.762 13.446s25.643-47.623 20.759-63.497-62.425-54.95-62.425-54.95Z"
+    />
+    <Path
+      d="M405.327 117.213s.392 71.433-15.821 73.323-27.49-2.646-27.49-2.646"
+      opacity={0.1}
+    />
+    <Path
+      fill="#ffb6b6"
+      d="M299.11 150.778a23.095 23.095 0 0 1 10.37 3.393l38.539 1.094-1.057 18.323-38.98-3.084a23.094 23.094 0 0 1-10.81 1.45c-9.193-.843-16.207-6.266-15.67-12.115s8.42-9.905 17.608-9.061Z"
+    />
+    <Path
+      fill="#3b82f6"
+      d="m319.111 173.474-.407-.159 5.195-21.387 34.026-.177 6.36-52.698c1.246-10.334 10.036-18.127 20.445-18.127a20.63 20.63 0 0 1 15.34 6.847 20.602 20.602 0 0 1 5.135 15.973c-3.888 35.565-11.122 78.652-23.508 81.956-2.355.628-5.113.902-8.136.902-20.417 0-52.88-12.52-54.45-13.13Z"
+    />
+    <Path
+      fill="#2f2e41"
+      d="M367.962 21.603c-2.345 4.055-4.784 8.218-8.494 11.08-3.71 2.86-9.05 4.132-13.135 1.839-4.015-2.254-5.743-7.487-4.754-11.984s4.242-8.233 8.07-10.79 8.233-4.092 12.583-5.6c6.649-2.304 13.347-4.62 20.311-5.62 18.999-2.73 39.18 5.294 51.118 20.323 5.637 7.095 9.433 15.444 13.172 23.7 3.057 6.747 6.181 13.854 5.64 21.242-.396 5.417-2.648 11.35.268 15.932 1.469 2.308 3.975 3.707 6.008 5.538s3.702 4.67 2.698 7.215c-1.027 2.605-4.265 3.544-5.992 5.748-2.961 3.777-.438 9.303 2.546 13.062s6.647 7.974 5.703 12.68c-.68 3.394-3.764 5.922-7.098 6.855s-6.89.538-10.294-.09c-16.64-3.074-32.195-11.74-43.566-24.272s-18.488-28.854-19.935-45.713c-.636-7.423-.212-14.962-1.675-22.267-1.462-7.306-5.25-14.66-11.914-17.993"
+    />
+  </Svg>
+);
+export default SvgComponent;