diff --git a/client/src/assets/icons/messageIcon.svg b/client/src/assets/icons/messageIcon.svg
new file mode 100644
index 00000000..bce658ce
--- /dev/null
+++ b/client/src/assets/icons/messageIcon.svg
@@ -0,0 +1,2 @@
+<!--mage:message-dots-fill-->
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#a0d911" d="M20.605 4.17a4.67 4.67 0 0 0-3.33-1.38H6.705a4.71 4.71 0 0 0-4.71 4.72v6.6a4.71 4.71 0 0 0 4.71 4.72h2.33l1.95 1.94c.127.143.284.255.46.33c.175.072.361.11.55.11q.286-.004.55-.11a1.6 1.6 0 0 0 .44-.31l2-2h2.33a4.7 4.7 0 0 0 3.33-1.38a4.8 4.8 0 0 0 1-1.53c.234-.575.357-1.19.36-1.81v-6.6a4.67 4.67 0 0 0-1.4-3.3m-13.24 8.17a1.66 1.66 0 1 1 1.66-1.66a1.67 1.67 0 0 1-1.66 1.66m4.63 0a1.66 1.66 0 1 1 0-3.32a1.66 1.66 0 0 1 0 3.32m4.62 0a1.66 1.66 0 1 1 1.66-1.66a1.67 1.67 0 0 1-1.66 1.66"/></svg>
diff --git a/client/src/pixi/World.tsx b/client/src/pixi/World.tsx
index 296d5a74..ce721fa9 100644
--- a/client/src/pixi/World.tsx
+++ b/client/src/pixi/World.tsx
@@ -3,6 +3,7 @@ import Rectangle from "./components/Rectangle";
 import "@pixi/events";
 import { DisplayPosition, Position } from "./Position";
 import React from "react";
+import Message from "./components/Message";
 
 interface Props {
   userPosition: Position;
@@ -55,6 +56,14 @@ const World: React.FC<Props> = ({ userPosition, userDisplayPosition }) => {
         width={100}
         height={100}
       />
+      <Message
+        messageText={"メッセージ".repeat(20)}
+        displayPosition={{ left: 100, top: 100 }}
+        user={{
+          name: "ikura-hamu",
+          iconUrl: "https://q.trap.jp/api/v3/public/icon/ikura-hamu",
+        }}
+      />
     </Container>
   );
 };
diff --git a/client/src/pixi/components/Message.tsx b/client/src/pixi/components/Message.tsx
new file mode 100644
index 00000000..a628f3ad
--- /dev/null
+++ b/client/src/pixi/components/Message.tsx
@@ -0,0 +1,113 @@
+import { Container, Graphics, Sprite, Text } from "@pixi/react";
+import messageIcon from "/src/assets/icons/messageIcon.svg";
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import { Graphics as PIXIGraphics, TextStyle } from "pixi.js";
+import PIXI from "pixi.js";
+import { DisplayPosition } from "../Position";
+import { themeColors } from "../theme";
+
+const messageIconSize = 30;
+
+interface MessageBubbleProps {
+  width: number;
+  height: number;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = (props) => {
+  const draw = useCallback(
+    (g: PIXIGraphics) => {
+      g.clear();
+      g.lineStyle(2, 0x000000);
+      g.beginFill(themeColors.backgroundPrimary);
+      g.drawRoundedRect(0, 0, props.width, props.height, 10);
+      g.endFill();
+    },
+    [props],
+  );
+  return <Graphics draw={draw} />;
+};
+
+interface Props {
+  messageText: string;
+  displayPosition: DisplayPosition;
+  user: {
+    name: string;
+    iconUrl: string;
+  };
+}
+
+const userNameTextStyle = new TextStyle({ fontSize: 14, fill: "black" });
+const messageTextStyle = new TextStyle({
+  fontSize: 16,
+  fill: "black",
+  wordWrap: true,
+  wordWrapWidth: 180,
+  breakWords: true,
+});
+
+const Message: React.FC<Props> = ({ messageText, displayPosition, user }) => {
+  const [showMessage, setShowMessage] = useState(false);
+  const textRef = useRef<PIXI.Text>(null);
+  const [bubbleSize, setBubbleSize] = useState({ width: 200, height: 100 });
+
+  const handleMouseOver = useCallback(() => setShowMessage(true), []);
+  const handleMouseOut = useCallback(() => setShowMessage(false), []);
+
+  useEffect(() => {
+    if (!showMessage) return;
+    if (textRef.current) {
+      const { width, height } = textRef.current;
+      setBubbleSize({
+        width: width + 20,
+        height: height + 20,
+      });
+    }
+  }, [showMessage]);
+
+  const iconImageSrc = showMessage ? user.iconUrl : messageIcon;
+
+  return (
+    <Container
+      x={displayPosition.left}
+      y={displayPosition.top}
+      interactive
+      mouseout={handleMouseOut}
+      mouseover={handleMouseOver}
+    >
+      <Sprite
+        image={iconImageSrc}
+        x={0}
+        y={0}
+        width={messageIconSize}
+        height={messageIconSize}
+        interactive={true}
+      />
+      {showMessage && (
+        <>
+          <Text
+            text={user.name}
+            x={messageIconSize + 10}
+            y={messageIconSize - 10}
+            anchor={{ x: 0, y: 1 }}
+            style={userNameTextStyle}
+          />
+          <Container x={0} y={messageIconSize}>
+            <MessageBubble
+              width={bubbleSize.width}
+              height={bubbleSize.height}
+            />
+            <Text
+              ref={textRef}
+              text={messageText}
+              x={10}
+              y={10}
+              style={messageTextStyle}
+            />
+          </Container>
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default Message;
diff --git a/client/src/pixi/theme.ts b/client/src/pixi/theme.ts
new file mode 100644
index 00000000..7652acc1
--- /dev/null
+++ b/client/src/pixi/theme.ts
@@ -0,0 +1,31 @@
+// @ts-expect-error tailwind config
+import tailwindConfig from "../../tailwind.config";
+
+const { colors } = tailwindConfig.theme.extend;
+
+type ThemeColors = Record<
+  | "backgroundPrimary"
+  | "backgroundSecondary"
+  | "backgroundTertiary"
+  | "textPrimary"
+  | "textSecondary"
+  | "textTertiary"
+  | "accentPrimary"
+  | "accentSecondary"
+  | "accentTertiary"
+  | "accentHover",
+  string
+>;
+
+export const themeColors: ThemeColors = {
+  backgroundPrimary: colors["background-primary"],
+  backgroundSecondary: colors["background-secondary"],
+  backgroundTertiary: colors["background-tertiary"],
+  textPrimary: colors["text-primary"],
+  textSecondary: colors["text-secondary"],
+  textTertiary: colors["text-tertiary"],
+  accentPrimary: colors["accent-primary"],
+  accentSecondary: colors["accent-secondary"],
+  accentTertiary: colors["accent-tertiary"],
+  accentHover: colors["accent-hover"],
+};