diff --git a/components/Home/helpers/add-playlist-popover.tsx b/components/Home/helpers/add-playlist-popover.tsx
index fcb84204..4a08f639 100644
--- a/components/Home/helpers/add-playlist-popover.tsx
+++ b/components/Home/helpers/add-playlist-popover.tsx
@@ -2,12 +2,13 @@ import Icon from "../../../components/Global/helpers/icon";
 import { Label } from "../../../components/Global/helpers/text";
 import { Popover, Adapt, YStack, XStack, Input, getToken, Button } from "tamagui";
 
-export default function AddPlaylistPopover() : React.JSX.Element {
+export default function AddPlaylistPopover({
+    open
+}: {
+    open: boolean
+}) : React.JSX.Element {
     return (
-        <Popover size="$5">
-        <Popover.Trigger asChild>
-            <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} />
-        </Popover.Trigger>
+        <Popover open={open} size="$5">
   
         {/* {shouldAdapt && (
           <Adapt when="sm" platform="touch">
diff --git a/components/Home/helpers/playlists.tsx b/components/Home/helpers/playlists.tsx
index 1a7bcd67..c7e2003f 100644
--- a/components/Home/helpers/playlists.tsx
+++ b/components/Home/helpers/playlists.tsx
@@ -3,13 +3,15 @@ import { useUserPlaylists } from "../../../api/queries/playlist";
 import { ItemCard } from "../../Global/components/item-card";
 import { H2 } from "../../../components/Global/helpers/text";
 import { StackParamList } from "../../../components/types";
-import React from "react";
+import React, { useState } from "react";
 import { FlatList } from "react-native";
-import { View, XStack, YStack } from "tamagui";
+import { getToken, View, XStack, YStack } from "tamagui";
 import AddPlaylistPopover from "./add-playlist-popover";
+import Icon from "@/components/Global/helpers/icon";
 
 export default function Playlists({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}) : React.JSX.Element {
 
+    const [createPlaylist, setCreatePlaylist] = useState<boolean>(false);
     const { data: playlists } = useUserPlaylists();
 
     return (
@@ -18,8 +20,8 @@ export default function Playlists({ navigation }: { navigation: NativeStackNavig
                 <H2>Your Playlists</H2>
 
                 <YStack justifyContent="center" alignContent="flex-end" marginTop={7}>
-                    {/* <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} /> */}
-                    <AddPlaylistPopover />
+                    <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} onPress={() => setCreatePlaylist(true)}/>
+                    <AddPlaylistPopover open={createPlaylist}/>
                 </YStack>
             </XStack>
             <FlatList horizontal