diff --git a/modules/index/index.message.tsx b/modules/index/index.message.tsx
index 867220b4..055f637c 100644
--- a/modules/index/index.message.tsx
+++ b/modules/index/index.message.tsx
@@ -1,3 +1,6 @@
+// deno-lint-ignore-file no-explicit-any
+import { useState } from "preact/hooks";
+
 export function Message(
   props: {
     id: string;
@@ -8,6 +11,32 @@ export function Message(
     idx: number;
   },
 ) {
+  const [show, setShow] = useState<any>(false);
+
+  function handleClick(id: string) {
+    setShow(!show);
+  }
+
+  function handleForward(id: string): void {
+    throw new Error("Function not implemented.");
+  }
+
+  function handleDelete(id: string): void {
+    throw new Error("Function not implemented.");
+  }
+
+  function handlePin(id: string): void {
+    throw new Error("Function not implemented.");
+  }
+
+  function handleReplyPrivately(id: string): void {
+    throw new Error("Function not implemented.");
+  }
+
+  function handleReply(id: string): void {
+    throw new Error("Function not implemented.");
+  }
+
   return (
     <li
       key={props.idx}
@@ -27,10 +56,10 @@ export function Message(
         : <div class={`w-8 min-w-8 block`}></div>}
 
       <div
-        class={`bg-gray-900 ps-3 pt-2 pe-3 pb-2 border border-gray-800 rounded-lg flex flex-col gap-1`}
+        class={`relative bg-gray-900 ps-3 pt-2 pe-3 pb-2 border border-gray-800 flex flex-col gap-1 rounded-lg`}
       >
         <div
-          class={`flex items-center justify-between gap-3 text-gray-500 font-light text-xs`}
+          class={`select-none flex items-center justify-between gap-3 text-gray-500 font-light text-xs`}
         >
           <div class={`inline-flex items-center gap-x-1`}>
             <span class={"grow"}>
@@ -41,13 +70,17 @@ export function Message(
             </span>
           </div>
           <svg
-            class="w-4 h-4"
+            class="w-4 h-4 cursor-pointer"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             width="12"
             height="12"
             fill="none"
             viewBox="0 0 24 24"
+            onClick={(e) => {
+              e.preventDefault();
+              handleClick(props.id);
+            }}
           >
             <path
               stroke="currentColor"
@@ -61,6 +94,42 @@ export function Message(
         <span>
           {props.msg}
         </span>
+        <div
+          class={`absolute ${
+            show ? "" : "hidden"
+          } select-none flex flex-col justify-end text-xs mt-6 right-[-4rem] w-10/12 z-10 bg-black border-t border-r border-l border-b rounded-md`}
+        >
+          <div
+            class={`border-b p-3 cursor-pointer`}
+            onClick={() => handleReply(props.id)}
+          >
+            Reply
+          </div>
+          <div
+            class={`border-b p-3 cursor-pointer`}
+            onClick={() => handleReplyPrivately(props.id)}
+          >
+            Reply Privately
+          </div>
+          <div
+            class={`border-b p-3 cursor-pointer`}
+            onClick={() => handlePin(props.id)}
+          >
+            Pin
+          </div>
+          <div
+            class={`border-b p-3 cursor-pointer`}
+            onClick={() => handleDelete(props.id)}
+          >
+            Delete
+          </div>
+          <div
+            class={`p-3 cursor-pointer`}
+            onClick={() => handleForward(props.id)}
+          >
+            Forward
+          </div>
+        </div>
       </div>
     </li>
   );