diff --git a/apps/web/src/components/ContextMenu/ContextMenu.tsx b/apps/web/src/components/ContextMenu/ContextMenu.tsx
new file mode 100644
index 00000000..84430483
--- /dev/null
+++ b/apps/web/src/components/ContextMenu/ContextMenu.tsx
@@ -0,0 +1,13 @@
+import { EllipsisHorizontal } from "@styled-icons/ionicons-sharp";
+
+function ContextMenu() {
+  return (
+    <>
+      <div className="text-[var(--color-text)] cursor-pointer">
+        <EllipsisHorizontal size={24} />
+      </div>
+    </>
+  );
+}
+
+export default ContextMenu;
diff --git a/apps/web/src/components/ContextMenu/index.tsx b/apps/web/src/components/ContextMenu/index.tsx
new file mode 100644
index 00000000..1cff37db
--- /dev/null
+++ b/apps/web/src/components/ContextMenu/index.tsx
@@ -0,0 +1,3 @@
+import ContextMenu from "./ContextMenu";
+
+export default ContextMenu;
diff --git a/apps/web/src/components/Table/Table.tsx b/apps/web/src/components/Table/Table.tsx
index ed645f43..bc2e4ec1 100644
--- a/apps/web/src/components/Table/Table.tsx
+++ b/apps/web/src/components/Table/Table.tsx
@@ -37,7 +37,7 @@ const Table: FC<TableProps> = ({ columns, files }) => {
   });
 
   return (
-    <table className="mt-[0px] w-full">
+    <table className="mt-[0px] w-[770px]">
       <thead>
         {table.getHeaderGroups().map((headerGroup) => (
           <tr
diff --git a/apps/web/src/pages/dropbox/Dropbox.tsx b/apps/web/src/pages/dropbox/Dropbox.tsx
index 2c4ba595..cb6d2971 100644
--- a/apps/web/src/pages/dropbox/Dropbox.tsx
+++ b/apps/web/src/pages/dropbox/Dropbox.tsx
@@ -5,6 +5,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { Breadcrumbs } from "baseui/breadcrumbs";
 import { HeadingMedium } from "baseui/typography";
 import ContentLoader from "react-content-loader";
+import ContextMenu from "../../components/ContextMenu";
 import Table from "../../components/Table";
 import { useFilesQuery } from "../../hooks/useDropbox";
 import Main from "../../layouts/Main";
@@ -67,6 +68,10 @@ const Dropbox = (props: DropboxProps) => {
         </>
       ),
     }),
+    columnHelper.accessor("name", {
+      header: "",
+      cell: () => <ContextMenu />,
+    }),
   ];
 
   return (
diff --git a/apps/web/src/pages/dropbox/styles.tsx b/apps/web/src/pages/dropbox/styles.tsx
index 08f0870a..e61d8d3e 100644
--- a/apps/web/src/pages/dropbox/styles.tsx
+++ b/apps/web/src/pages/dropbox/styles.tsx
@@ -5,8 +5,6 @@ export const Directory = styled(Link)`
   color: var(--color-text) !important;
   margin-left: 10px;
   text-decoration: none;
-  width: calc(100vw - 500px);
-  max-width: calc(100vw - 500px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -20,8 +18,6 @@ export const AudioFile = styled.div`
   color: var(--color-text) !important;
   margin-left: 10px;
   text-decoration: none;
-  width: calc(100vw - 500px);
-  max-width: calc(100vw - 500px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/apps/web/src/pages/googledrive/GoogleDrive.tsx b/apps/web/src/pages/googledrive/GoogleDrive.tsx
index 8af8607e..d9422607 100644
--- a/apps/web/src/pages/googledrive/GoogleDrive.tsx
+++ b/apps/web/src/pages/googledrive/GoogleDrive.tsx
@@ -5,6 +5,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { Breadcrumbs } from "baseui/breadcrumbs";
 import { HeadingMedium } from "baseui/typography";
 import ContentLoader from "react-content-loader";
+import ContextMenu from "../../components/ContextMenu";
 import Table from "../../components/Table";
 import { useFilesQuery } from "../../hooks/useGoogleDrive";
 import Main from "../../layouts/Main";
@@ -42,7 +43,7 @@ const GoogleDrive = (props: GoogleDriveProps) => {
     columnHelper.accessor("name", {
       header: "",
       cell: (info) => (
-        <>
+        <div>
           {info.row.original.tag === "folder" && (
             <Directory to={`/googledrive/${info.row.original.id}`}>
               {info.row.original.name}
@@ -51,9 +52,13 @@ const GoogleDrive = (props: GoogleDriveProps) => {
           {info.row.original.tag === "file" && (
             <AudioFile>{info.row.original.name}</AudioFile>
           )}
-        </>
+        </div>
       ),
     }),
+    columnHelper.accessor("name", {
+      header: "",
+      cell: () => <ContextMenu />,
+    }),
   ];
 
   return (
diff --git a/apps/web/src/pages/googledrive/styles.tsx b/apps/web/src/pages/googledrive/styles.tsx
index a2468e02..fd7c24a5 100644
--- a/apps/web/src/pages/googledrive/styles.tsx
+++ b/apps/web/src/pages/googledrive/styles.tsx
@@ -5,8 +5,6 @@ export const Directory = styled(Link)`
   color: var(--color-text) !important;
   margin-left: 10px;
   text-decoration: none;
-  width: calc(100vw - 500px);
-  max-width: calc(100vw - 500px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -20,8 +18,6 @@ export const AudioFile = styled.div`
   color: var(--color-text) !important;
   margin-left: 10px;
   text-decoration: none;
-  width: calc(100vw - 500px);
-  max-width: calc(100vw - 500px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;