diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 5bfbf222..fff1d895 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -13,6 +13,7 @@ import { AgreementModal } from "./Modals/AgreementModal";
 import { CoinbaseModal } from "./Modals/CoinbaseModal";
 import { CommunityModal } from "./Modals/CommunityModal";
 import { EditModal } from "./Modals/EditModal";
+import { LeavingModal } from "./Modals/LeavingModal";
 import { LogoutModal } from "./Modals/LogoutModal";
 import { ProfileFoundModal } from "./Modals/ProfileFoundModal";
 import { ProfileModal } from "./Modals/ProfileModal";
@@ -38,6 +39,7 @@ function Modals() {
       <AgreementModal />
       <ProfileFoundModal />
       <UserCreationStartModal />
+      <LeavingModal />
     </>
   );
 }
diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx
index 8d7f2f5f..a0d57735 100644
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx
@@ -68,14 +68,7 @@ export function ChatCreation({
       if (identity) {
         const newGroup = group.slice();
         newGroup.push(bufToHex(identity.publicKey));
-        group.length > 1
-          ? createGroupChat(newGroup)
-          : setChannel({
-              id: newGroup[0],
-              name: newGroup[0],
-              type: "dm",
-              description: `Chatkey: ${newGroup[0]} `,
-            });
+        createGroupChat(newGroup);
         setChatState(ChatState.ChatBody);
       }
     },
diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx
index 2593d4bb..25dfe24a 100644
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx
@@ -7,11 +7,13 @@ import { useNarrow } from "../../contexts/narrowProvider";
 import { ChannelData } from "../../models/ChannelData";
 import { AddMemberIconSvg } from "../Icons/AddMemberIcon";
 import { CheckSvg } from "../Icons/CheckIcon";
+import { DeleteIcon } from "../Icons/DeleteIcon";
 import { EditSvg } from "../Icons/EditIcon";
 import { LeftIconSvg } from "../Icons/LeftIcon";
 import { MembersSmallSvg } from "../Icons/MembersSmallIcon";
 import { MuteSvg } from "../Icons/MuteIcon";
 import { EditModalName } from "../Modals/EditModal";
+import { LeavingModalName } from "../Modals/LeavingModal";
 
 import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu";
 
@@ -29,8 +31,9 @@ export const ChannelMenu = ({
   setEditGroup,
 }: ChannelMenuProps) => {
   const narrow = useNarrow();
-  const { clearNotifications, removeChannel } = useMessengerContext();
+  const { clearNotifications } = useMessengerContext();
   const { setModal } = useModal(EditModalName);
+  const { setModal: setLeavingModal } = useModal(LeavingModalName);
 
   return (
     <DropdownMenu closeMenu={setShowChannelMenu}>
@@ -83,12 +86,19 @@ export const ChannelMenu = ({
           {" "}
           <MenuItem
             onClick={() => {
-              removeChannel(channel.id);
+              setLeavingModal(true);
               setShowChannelMenu(false);
             }}
           >
-            <LeftIconSvg width={16} height={16} />
-            <MenuText>Leave Group</MenuText>
+            {channel.type === "group" && (
+              <LeftIconSvg width={16} height={16} className="red" />
+            )}
+            {channel.type === "dm" && (
+              <DeleteIcon width={16} height={16} className="red" />
+            )}
+            <MenuText className="red">
+              {channel.type === "group" ? "Leave Group" : "Delete Chat"}
+            </MenuText>
           </MenuItem>
         </MenuSection>
       )}
diff --git a/packages/react-chat/src/components/Icons/CheckIcon.tsx b/packages/react-chat/src/components/Icons/CheckIcon.tsx
index 1feca904..d6da69d7 100644
--- a/packages/react-chat/src/components/Icons/CheckIcon.tsx
+++ b/packages/react-chat/src/components/Icons/CheckIcon.tsx
@@ -33,10 +33,6 @@ export const CheckIcon = () => {
 const Icon = styled.svg`
   fill: ${({ theme }) => theme.tertiary};
 
-  &:hover {
-    fill: ${({ theme }) => theme.bodyBackgroundColor};
-  }
-
   &.green {
     fill: ${({ theme }) => theme.greenColor};
   }
diff --git a/packages/react-chat/src/components/Icons/DeleteIcon.tsx b/packages/react-chat/src/components/Icons/DeleteIcon.tsx
new file mode 100644
index 00000000..f1ab68e0
--- /dev/null
+++ b/packages/react-chat/src/components/Icons/DeleteIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+type DeleteIconProps = {
+  width: number;
+  height: number;
+  className?: string;
+};
+
+export const DeleteIcon = ({ width, height, className }: DeleteIconProps) => {
+  return (
+    <Icon
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.26191 1.5C5.47293 1.5 4.83333 2.13959 4.83333 2.92857C4.83333 3.33621 4.50288 3.66667 4.09524 3.66667H2C1.72386 3.66667 1.5 3.89052 1.5 4.16667C1.5 4.44281 1.72386 4.66667 2 4.66667H2.49251C2.66109 4.66667 2.80314 4.79253 2.82342 4.95989L3.71566 12.3209C3.87795 13.6597 5.0143 14.6667 6.36295 14.6667H9.63705C10.9857 14.6667 12.1221 13.6597 12.2843 12.3209L13.1766 4.95989C13.1969 4.79253 13.3389 4.66667 13.5075 4.66667H14C14.2761 4.66667 14.5 4.44281 14.5 4.16667C14.5 3.89052 14.2761 3.66667 14 3.66667H11.9048C11.4971 3.66667 11.1667 3.33621 11.1667 2.92857C11.1667 2.13959 10.5271 1.5 9.7381 1.5L6.26191 1.5ZM9.80586 3.66667C10.0501 3.66667 10.2156 3.40724 10.1826 3.16524C10.1721 3.08786 10.1667 3.00885 10.1667 2.92857C10.1667 2.69188 9.97479 2.5 9.7381 2.5L6.2619 2.5C6.02521 2.5 5.83333 2.69188 5.83333 2.92857C5.83333 3.00885 5.82789 3.08786 5.81736 3.16524C5.78441 3.40725 5.9499 3.66667 6.19414 3.66667L9.80586 3.66667ZM11.9048 4.66667C12.0643 4.66667 12.1879 4.80617 12.1687 4.96453L11.2916 12.2006C11.1902 13.0373 10.48 13.6667 9.63705 13.6667H6.36295C5.52004 13.6667 4.80983 13.0373 4.7084 12.2006L3.8313 4.96453C3.81211 4.80616 3.93572 4.66667 4.09524 4.66667L11.9048 4.66667Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg`
+  fill: ${({ theme }) => theme.tertiary};
+
+  &.red {
+    fill: ${({ theme }) => theme.redColor};
+  }
+`;
diff --git a/packages/react-chat/src/components/Icons/LeftIcon.tsx b/packages/react-chat/src/components/Icons/LeftIcon.tsx
index b7e8d9df..1eab4dfe 100644
--- a/packages/react-chat/src/components/Icons/LeftIcon.tsx
+++ b/packages/react-chat/src/components/Icons/LeftIcon.tsx
@@ -27,4 +27,8 @@ const Icon = styled.svg`
   &.black {
     fill: ${({ theme }) => theme.primary};
   }
+
+  &.red {
+    fill: ${({ theme }) => theme.redColor};
+  }
 `;
diff --git a/packages/react-chat/src/components/Modals/LeavingModal.tsx b/packages/react-chat/src/components/Modals/LeavingModal.tsx
new file mode 100644
index 00000000..16a02c12
--- /dev/null
+++ b/packages/react-chat/src/components/Modals/LeavingModal.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+import { useMessengerContext } from "../../contexts/messengerProvider";
+import { useModal } from "../../contexts/modalProvider";
+import { ButtonNo } from "../Buttons/buttonStyle";
+
+import { Modal } from "./Modal";
+import { ButtonSection, Heading, Section, Text } from "./ModalStyle";
+
+export const LeavingModalName = "LeavingModal";
+
+export const LeavingModal = () => {
+  const { setModal } = useModal(LeavingModalName);
+  const { activeChannel, removeChannel } = useMessengerContext();
+
+  if (activeChannel)
+    return (
+      <Modal name={LeavingModalName}>
+        <Section>
+          <Heading>
+            {activeChannel.type === "dm" ? "Delete chat" : "Leave group"}
+          </Heading>
+        </Section>
+        <Section>
+          <Text>
+            Are you sure you want to{" "}
+            {activeChannel.type === "dm"
+              ? "delete this chat"
+              : "leave this group"}
+            ?
+          </Text>
+        </Section>
+        <ButtonSection>
+          <ButtonNo
+            onClick={() => {
+              removeChannel(activeChannel.id);
+              setModal(false);
+            }}
+          >
+            {activeChannel.type === "dm" ? "Delete" : "Leave"}
+          </ButtonNo>
+        </ButtonSection>
+      </Modal>
+    );
+  else {
+    return null;
+  }
+};
diff --git a/packages/react-chat/src/hooks/messenger/useGroupChats.ts b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
index f6819765..54373ac3 100644
--- a/packages/react-chat/src/hooks/messenger/useGroupChats.ts
+++ b/packages/react-chat/src/hooks/messenger/useGroupChats.ts
@@ -36,13 +36,21 @@ export function useGroupChats(
         const members = chat.members
           .map((member) => member.id)
           .map(contactFromId);
-        const channel: ChannelData = {
-          id: chat.chatId,
-          name: chat.name ?? chat.chatId.slice(0, 10),
-          type: "group",
-          description: `${chat.members.length} members`,
-          members: members,
-        };
+        const channel: ChannelData =
+          chat.members.length > 2
+            ? {
+                id: chat.chatId,
+                name: chat.name ?? chat.chatId.slice(0, 10),
+                type: "group",
+                description: `${chat.members.length} members`,
+                members: members,
+              }
+            : {
+                id: chat.chatId,
+                name: chat.members[0].id,
+                type: "dm",
+                description: `Chatkey: ${chat.members[0].id}`,
+              };
         setChannels((prev) => {
           return { ...prev, [channel.id]: channel };
         });