diff --git a/apps/amethyst/app/(tabs)/_layout.tsx b/apps/amethyst/app/(tabs)/_layout.tsx
index b1b0e14..f96b237 100644
--- a/apps/amethyst/app/(tabs)/_layout.tsx
+++ b/apps/amethyst/app/(tabs)/_layout.tsx
@@ -24,7 +24,7 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
-        title: "Tab One",
+        title: "Home",
         tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         // Disable the static render of the header on web
         // to prevent a hydration error in
diff --git a/apps/amethyst/app/(tabs)/index.tsx b/apps/amethyst/app/(tabs)/index.tsx
index 4aa4ed6..3c20d4c 100644
--- a/apps/amethyst/app/(tabs)/index.tsx
+++ b/apps/amethyst/app/(tabs)/index.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, ScrollView, View } from "react-native";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { CardHeader, CardTitle } from "../../components/ui/card";
 import { Text } from "@/components/ui/text";
 import { useStore } from "@/stores/mainStore";
 import AuthOptions from "../auth/options";
 
-import { Response } from "@atproto/api/src/client/types/app/bsky/actor/getProfile";
 import { Stack } from "expo-router";
 import ActorPlaysView from "@/components/play/actorPlaysView";
 
@@ -14,26 +13,10 @@ const GITHUB_AVATAR_URI =
   "https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
 
 export default function Screen() {
-  const [profile, setProfile] = React.useState<Response | null>(null);
   const j = useStore((state) => state.status);
   // @me
   const agent = useStore((state) => state.pdsAgent);
-  const isReady = useStore((state) => state.isAgentReady);
-  React.useEffect(() => {
-    if (agent) {
-      agent
-        .getProfile({ actor: agent.did ?? "teal.fm" })
-        .then((profile) => {
-          console.log(profile);
-          return setProfile(profile);
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    } else {
-      console.log("No agent");
-    }
-  }, [isReady, agent]);
+  const profile = useStore((state) => state.profiles[agent?.did ?? ""]);
 
   if (j !== "loggedIn") {
     return <AuthOptions />;
@@ -49,7 +32,7 @@ export default function Screen() {
   }
 
   return (
-    <View className="flex-1 justify-start items-start gap-5 p-6 bg-background">
+    <ScrollView className="flex-1 justify-start items-start gap-5 p-6 bg-background">
       <Stack.Screen
         options={{
           title: "Home",
@@ -60,30 +43,30 @@ export default function Screen() {
       <CardHeader className="items-start pb-0">
         <Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
           <AvatarImage
-            source={{ uri: profile?.data.avatar ?? GITHUB_AVATAR_URI }}
+            source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
           />
           <AvatarFallback>
             <Text>
-              {profile?.data.displayName?.substring(0, 1) ?? " Richard"}
+              {profile.bsky?.displayName?.substring(0, 1) ?? " Richard"}
             </Text>
           </AvatarFallback>
         </Avatar>
         <View className="px-3" />
         <CardTitle className="text-center">
-          {profile?.data.displayName ?? " Richard"}
+          {profile.bsky?.displayName ?? " Richard"}
         </CardTitle>
         {profile
-          ? profile.data?.description?.split("\n").map((str, i) => (
+          ? profile.bsky?.description?.split("\n").map((str, i) => (
               <Text className="text-start self-start place-self-start" key={i}>
                 {str}
               </Text>
             )) || "A very mysterious person"
           : "Loading..."}
       </CardHeader>
-      <View className="max-w-xl w-full gap-2 pl-6">
+      <View className="max-w-xl w-full gap-2 pl-6 pt-6">
         <Text className="text-left text-3xl font-serif">Your Stamps</Text>
-        <ActorPlaysView repo={profile.data.did} />
+        <ActorPlaysView repo={agent?.did} />
       </View>
-    </View>
+    </ScrollView>
   );
 }
diff --git a/apps/amethyst/components/play/actorPlaysView.tsx b/apps/amethyst/components/play/actorPlaysView.tsx
index ad8c2b6..2de3483 100644
--- a/apps/amethyst/components/play/actorPlaysView.tsx
+++ b/apps/amethyst/components/play/actorPlaysView.tsx
@@ -1,10 +1,10 @@
 import { useStore } from "@/stores/mainStore";
 import { Record as Play } from "@teal/lexicons/src/types/fm/teal/alpha/feed/play";
 import { useEffect, useState } from "react";
-import { View, Text, ScrollView } from "react-native";
+import { Text, ScrollView } from "react-native";
 import PlayView from "./playView";
 interface ActorPlaysViewProps {
-  repo: string;
+  repo: string | undefined;
 }
 interface PlayWrapper {
   cid: string;
@@ -39,7 +39,7 @@ const ActorPlaysView = ({ repo }: ActorPlaysViewProps) => {
   return (
     <ScrollView className="w-full *:gap-4">
       {play.map((p) => (
-        <PlayView play={p.value} />
+        <PlayView key={p.uri} play={p.value} />
       ))}
     </ScrollView>
   );
diff --git a/apps/amethyst/global.css b/apps/amethyst/global.css
index 1a96253..1c067aa 100644
--- a/apps/amethyst/global.css
+++ b/apps/amethyst/global.css
@@ -62,3 +62,23 @@
 .var-font-soft {
   font-variation-settings: "SOFT" 100;
 }
+
+@supports not selector(::-webkit-scrollbar) {
+  scrollbar-color: rgba(0, 0, 0, 0.8) transparent;
+  scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+::-webkit-scrollbar-thumb {
+  background-color: darkslategray;
+  outline: 1px solid slategrey;
+  border-radius: 99px;
+}
+::webkit-scrollbar-thumb:hover {
+  background-color: slategray;
+}