diff --git a/src/components/Exhibition/Menu/Multiplay.tsx b/src/components/Exhibition/Menu/Multiplay.tsx
index e6fd1c4..c2b0248 100644
--- a/src/components/Exhibition/Menu/Multiplay.tsx
+++ b/src/components/Exhibition/Menu/Multiplay.tsx
@@ -38,7 +38,7 @@ export const Multiplay: React.FC<
   ReturnType<typeof useMultiplay> & {
     onClose: () => void;
   }
-> = ({ join, leave, onClose, players }) => {
+> = ({ alreadyJoinRequested, join, leave, onClose, players }) => {
   const [groupId, setGroupId] = useState("");
 
   const handleChangeInput = useCallback(
@@ -49,12 +49,16 @@ export const Multiplay: React.FC<
   );
 
   const handleClickJoinButton = useCallback(() => {
+    if (alreadyJoinRequested) {
+      return;
+    }
+
     join(groupId ? groupId : undefined);
-  }, [groupId, join]);
+  }, [alreadyJoinRequested, groupId, join]);
 
   return (
     <ExhibitionPopup label="みんなでトリップする" onClose={onClose} small>
-      <div className="flex flex-col h-full w-full">
+      <div className="flex flex-col w-full h-full">
         <div css={description}>
           友達と一緒にトリップしたいときは夢番地を入力してトリップしよう！入力せずにトリップするとランダムな夢番地に繋がるよ
         </div>
@@ -70,7 +74,7 @@ export const Multiplay: React.FC<
         />
         {!players && (
           <div
-            className="bg-blue-400 bold cursor-pointer mt-auto text-center"
+            className="mt-auto text-center bg-blue-400 cursor-pointer bold"
             css={connectButton}
             onClick={handleClickJoinButton}
           >
@@ -79,7 +83,7 @@ export const Multiplay: React.FC<
         )}
         {!!players && (
           <div
-            className="bg-red-400 bold cursor-pointer mt-auto text-center"
+            className="mt-auto text-center bg-red-400 cursor-pointer bold"
             css={connectButton}
             onClick={leave}
           >
diff --git a/src/hooks/exhibition/useMultuplay.ts b/src/hooks/exhibition/useMultuplay.ts
index 812de38..95b017d 100644
--- a/src/hooks/exhibition/useMultuplay.ts
+++ b/src/hooks/exhibition/useMultuplay.ts
@@ -44,6 +44,7 @@ export const useMultiplay = () => {
   > | null>(null);
   const [lastUpdate, setLastUpdate] = useState<UpdatePayload | null>(null);
   const [socket, setSocket] = useState(createSocket());
+  const [alreadyJoinRequested, setAlreadyJoinRequested] = useState(false);
 
   //
 
@@ -63,6 +64,7 @@ export const useMultiplay = () => {
 
   const join = useCallback(
     (payload?: string) => {
+      setAlreadyJoinRequested(true);
       socket.connect();
       socket.emit("join", payload);
       GA.multiplay("join");
@@ -95,6 +97,7 @@ export const useMultiplay = () => {
   );
 
   const handleSocketDisconnect = useCallback(() => {
+    setAlreadyJoinRequested(false);
     setPlayers(null);
     GA.multiplay("leave");
   }, []);
@@ -180,6 +183,7 @@ export const useMultiplay = () => {
   //
 
   return {
+    alreadyJoinRequested,
     join,
     leave: handleLeave,
     players,