diff --git a/apps/web/src/components/ContextMenu/ContextMenu.tsx b/apps/web/src/components/ContextMenu/ContextMenu.tsx
index 84430483..11e34a28 100644
--- a/apps/web/src/components/ContextMenu/ContextMenu.tsx
+++ b/apps/web/src/components/ContextMenu/ContextMenu.tsx
@@ -1,11 +1,149 @@
+import { Folder2, MusicNoteBeamed } from "@styled-icons/bootstrap";
 import { EllipsisHorizontal } from "@styled-icons/ionicons-sharp";
+import { NestedMenus, StatefulMenu } from "baseui/menu";
+import { StatefulPopover } from "baseui/popover";
 
-function ContextMenu() {
+export type ContextMenuProps = {
+  file: {
+    id: string;
+    name: string;
+    type: string;
+  };
+};
+
+function ContextMenu(props: ContextMenuProps) {
+  const { file } = props;
   return (
     <>
-      <div className="text-[var(--color-text)] cursor-pointer">
-        <EllipsisHorizontal size={24} />
-      </div>
+      <StatefulPopover
+        autoFocus={false}
+        content={({ close }) => (
+          <div className="border-[var(--color-border)] w-[240px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
+            <div
+              className="h-[54px] flex flex-row items-center pl-[5px] pr-[5px]"
+              style={{
+                borderBottom: "1px solid var(--color-border)",
+              }}
+            >
+              <div className="h-[43px] flex items-center justify-center ml-[10px] mr-[10px] text-[var(--color-text)]">
+                {file.type == "folder" && (
+                  <div>
+                    <Folder2 size={20} />
+                  </div>
+                )}
+                {file.type !== "folder" && (
+                  <div>
+                    <MusicNoteBeamed size={20} />
+                  </div>
+                )}
+              </div>
+              <div className="text-[var(--color-text)] whitespace-nowrap text-ellipsis overflow-hidden">
+                {file.name}
+              </div>
+            </div>
+            <NestedMenus>
+              <StatefulMenu
+                items={[
+                  {
+                    id: "0",
+                    label: "Play",
+                  },
+                  {
+                    id: "1",
+                    label: "Play Next",
+                  },
+                  {
+                    id: "2",
+                    label: "Add to Playlist",
+                  },
+                  {
+                    id: "3",
+                    label: "Play Last",
+                  },
+                  {
+                    id: "4",
+                    label: "Add Shuffled",
+                  },
+                ]}
+                onItemSelect={({ item }) => {
+                  console.log(`Selected item: ${item.label}`);
+                  close();
+                }}
+                overrides={{
+                  List: {
+                    style: {
+                      boxShadow: "none",
+                      backgroundColor: "var(--color-background)",
+                    },
+                  },
+                  ListItem: {
+                    style: {
+                      backgroundColor: "var(--color-background)",
+                      color: "var(--color-text)",
+                      ":hover": {
+                        backgroundColor: "var(--color-menu-hover)",
+                      },
+                    },
+                  },
+                  Option: {
+                    props: {
+                      getChildMenu: (item: { label: string }) => {
+                        if (item.label === "Add to Playlist") {
+                          return (
+                            <div className="border-[var(--color-border)] w-[205px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
+                              <StatefulMenu
+                                items={{
+                                  __ungrouped: [
+                                    {
+                                      label: "Create new playlist",
+                                    },
+                                  ],
+                                }}
+                                overrides={{
+                                  List: {
+                                    style: {
+                                      boxShadow: "none",
+                                      backgroundColor:
+                                        "var(--color-background)",
+                                    },
+                                  },
+                                  ListItem: {
+                                    style: {
+                                      backgroundColor:
+                                        "var(--color-background)",
+                                      color: "var(--color-text)",
+                                      ":hover": {
+                                        backgroundColor:
+                                          "var(--color-menu-hover)",
+                                      },
+                                    },
+                                  },
+                                }}
+                              />
+                            </div>
+                          );
+                        }
+                        return null;
+                      },
+                    },
+                  },
+                }}
+              />
+            </NestedMenus>
+          </div>
+        )}
+        overrides={{
+          Inner: {
+            style: {
+              backgroundColor: "var(--color-background)",
+            },
+          },
+        }}
+      >
+        <div className="text-[var(--color-text)] cursor-pointer">
+          <EllipsisHorizontal size={24} />
+        </div>
+      </StatefulPopover>
     </>
   );
 }
diff --git a/apps/web/src/pages/dropbox/Dropbox.tsx b/apps/web/src/pages/dropbox/Dropbox.tsx
index cb6d2971..23d244ed 100644
--- a/apps/web/src/pages/dropbox/Dropbox.tsx
+++ b/apps/web/src/pages/dropbox/Dropbox.tsx
@@ -70,7 +70,15 @@ const Dropbox = (props: DropboxProps) => {
     }),
     columnHelper.accessor("name", {
       header: "",
-      cell: () => <ContextMenu />,
+      cell: (info) => (
+        <ContextMenu
+          file={{
+            id: info.row.original.id,
+            name: info.row.original.name,
+            type: info.row.original.tag,
+          }}
+        />
+      ),
     }),
   ];
 
diff --git a/apps/web/src/pages/googledrive/GoogleDrive.tsx b/apps/web/src/pages/googledrive/GoogleDrive.tsx
index d9422607..124635f8 100644
--- a/apps/web/src/pages/googledrive/GoogleDrive.tsx
+++ b/apps/web/src/pages/googledrive/GoogleDrive.tsx
@@ -57,7 +57,15 @@ const GoogleDrive = (props: GoogleDriveProps) => {
     }),
     columnHelper.accessor("name", {
       header: "",
-      cell: () => <ContextMenu />,
+      cell: (info) => (
+        <ContextMenu
+          file={{
+            id: info.row.original.id,
+            name: info.row.original.name,
+            type: info.row.original.tag,
+          }}
+        />
+      ),
     }),
   ];