diff --git a/enjoy/src/i18n/en.json b/enjoy/src/i18n/en.json
index 6f9ab3b2..69fccef2 100644
--- a/enjoy/src/i18n/en.json
+++ b/enjoy/src/i18n/en.json
@@ -153,6 +153,7 @@
   "autoScroll": "auto scroll",
   "detail": "detail",
   "remove": "remove",
+  "share": "share",
   "loadMore": "Load more",
   "databaseError": "Failed to connect to database {{url}}",
   "somethingWentWrong": "Something went wrong",
diff --git a/enjoy/src/i18n/zh-CN.json b/enjoy/src/i18n/zh-CN.json
index 86e6bc6e..6870f263 100644
--- a/enjoy/src/i18n/zh-CN.json
+++ b/enjoy/src/i18n/zh-CN.json
@@ -153,6 +153,7 @@
   "autoScroll": "自动滚动",
   "detail": "详情",
   "remove": "删除",
+  "share": "分享",
   "loadMore": "加载更多",
   "databaseError": "数据库错误 {{url}}",
   "somethingWentWrong": "出错了",
diff --git a/enjoy/src/renderer/components/recordings/recording-card.tsx b/enjoy/src/renderer/components/recordings/recording-card.tsx
index cc49067c..0cc60e92 100644
--- a/enjoy/src/renderer/components/recordings/recording-card.tsx
+++ b/enjoy/src/renderer/components/recordings/recording-card.tsx
@@ -1,9 +1,6 @@
 import { useState, useContext } from "react";
 import { AppSettingsProviderContext } from "@/renderer/context";
-import {
-  RecordingPlayer,
-  PronunciationAssessmentScoreIcon,
-} from "@renderer/components";
+import { RecordingPlayer } from "@renderer/components";
 import {
   AlertDialog,
   AlertDialogHeader,
@@ -19,9 +16,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@renderer/components/ui";
-import { MoreHorizontalIcon, Trash2Icon, InfoIcon } from "lucide-react";
-import { formatDateTime , secondsToTimestamp } from "@renderer/lib/utils";
-import { useLongPress } from "@uidotdev/usehooks";
+import { ChevronDownIcon, Trash2Icon, InfoIcon, Share2Icon } from "lucide-react";
+import { formatDateTime, secondsToTimestamp } from "@renderer/lib/utils";
 import { t } from "i18next";
 
 export const RecordingCard = (props: {
@@ -30,45 +26,19 @@ export const RecordingCard = (props: {
   onSelect?: () => void;
 }) => {
   const { recording, id, onSelect } = props;
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const [isPlaying, setIsPlaying] = useState(false);
 
-  const longPressAttrs = useLongPress(
-    () => {
-      setIsMenuOpen(true);
-    },
-    {
-      onFinish: () => {},
-      onCancel: () => {},
-      threshold: 400,
-    }
-  );
-
   const handleDelete = () => {
     EnjoyApp.recordings.destroy(recording.id);
   };
 
   return (
-    <div
-      id={id}
-      className={`flex items-center justify-end p-4 transition-all ${
-        isMenuOpen ? "bg-sky-500/20" : ""
-      }`}
-    >
-      <DropdownMenu
-        open={isMenuOpen}
-        onOpenChange={(value) => setIsMenuOpen(value)}
-      >
-        <div {...longPressAttrs} className="w-full">
-          <div className="flex items-center space-x-2 justify-start px-2 mb-1">
-            <DropdownMenuTrigger>
-              <MoreHorizontalIcon className="w-4 h-4 text-muted-foreground hidden" />
-            </DropdownMenuTrigger>
-          </div>
-
-          <div className="bg-white rounded-lg py-2 px-4 mb-2 relative">
+    <div id={id} className="flex items-center justify-end px-4 transition-all">
+      <DropdownMenu>
+        <div className="w-full">
+          <div className="bg-white rounded-lg py-2 px-4 relative mb-1">
             <div className="flex items-center justify-end space-x-2">
               <span className="text-xs text-muted-foreground">
                 {secondsToTimestamp(recording.duration / 1000)}
@@ -81,7 +51,7 @@ export const RecordingCard = (props: {
               setIsPlaying={setIsPlaying}
             />
 
-            <div className="flex items-center justify-between space-x-2">
+            <div className="flex items-center justify-end space-x-2">
               <Button
                 onClick={onSelect}
                 variant="ghost"
@@ -104,22 +74,19 @@ export const RecordingCard = (props: {
                     `}
                 />
               </Button>
-
-              <span className="text-xs text-muted-foreground">
-                {formatDateTime(recording.createdAt)}
-              </span>
+              <DropdownMenuTrigger>
+                <ChevronDownIcon className="w-4 h-4 text-muted-foreground" />
+              </DropdownMenuTrigger>
             </div>
           </div>
+          <div className="flex justify-end">
+            <span className="text-xs text-muted-foreground">
+              {formatDateTime(recording.createdAt)}
+            </span>
+          </div>
         </div>
 
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={onSelect}>
-            <span className="mr-auto capitalize">{t("detail")}</span>
-            <InfoIcon className="w-4 h-4" />
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
           <DropdownMenuItem onClick={() => setIsDeleteDialogOpen(true)}>
             <span className="mr-auto text-destructive capitalize">
               {t("delete")}
diff --git a/enjoy/src/renderer/components/recordings/recordings-list.tsx b/enjoy/src/renderer/components/recordings/recordings-list.tsx
index a6d51156..f3dca534 100644
--- a/enjoy/src/renderer/components/recordings/recordings-list.tsx
+++ b/enjoy/src/renderer/components/recordings/recordings-list.tsx
@@ -156,7 +156,7 @@ export const RecordingsList = (props: {
           </div>
         )}
 
-        <div className="flex flex-col-reverse">
+        <div className="flex flex-col-reverse space-y-4">
           <div className="w-full h-24"></div>
           {recordings.map((recording) => (
             <RecordingCard