diff --git a/client/src/components/diagram/ErrorBubble.tsx b/client/src/components/diagram/ErrorBubble.tsx
new file mode 100644
index 0000000..7258b37
--- /dev/null
+++ b/client/src/components/diagram/ErrorBubble.tsx
@@ -0,0 +1,19 @@
+import Bubble from '@components/todos/Bubble';
+import { ReactElement } from 'react';
+import Text from '@components/Text';
+import Image from '@components/Image';
+import Error from '@images/Error.svg';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { red } = PRIMARY_COLORS;
+
+const ErrorBubble = ({ text }: { text: string }): ReactElement => {
+  return (
+    <Bubble backgroundColor={red}>
+      <Image src={Error} />
+      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+    </Bubble>
+  );
+};
+
+export default ErrorBubble;
diff --git a/client/src/components/diagram/WarningBubble.tsx b/client/src/components/diagram/WarningBubble.tsx
new file mode 100644
index 0000000..942c090
--- /dev/null
+++ b/client/src/components/diagram/WarningBubble.tsx
@@ -0,0 +1,19 @@
+import Bubble from '@components/todos/Bubble';
+import { ReactElement } from 'react';
+import Text from '@components/Text';
+import Image from '@components/Image';
+import Warning from '@images/Warning.svg';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { yellow } = PRIMARY_COLORS;
+
+const WarningBubble = ({ text }: { text: string }): ReactElement => {
+  return (
+    <Bubble backgroundColor={yellow}>
+      <Image src={Warning} />
+      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+    </Bubble>
+  );
+};
+
+export default WarningBubble;
diff --git a/client/src/components/todos/Bubble.tsx b/client/src/components/todos/Bubble.tsx
new file mode 100644
index 0000000..afa82c5
--- /dev/null
+++ b/client/src/components/todos/Bubble.tsx
@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { white, gray } = PRIMARY_COLORS;
+
+const Wrapper = styled.div<{ color?: string; backgroundColor?: string }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: max-content;
+  border-radius: 8px;
+  padding-block: 12px;
+  padding-inline: 12px;
+  color: ${(props) => props.color ?? white};
+  background-color: ${(props) => props.backgroundColor ?? gray};
+  gap: 10px;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 100%;
+    top: 50%;
+    transform: translate(0, -50%);
+    border-top: 7px solid transparent;
+    border-right: 8.5px solid ${(props) => props.backgroundColor ?? gray};
+    border-bottom: 7px solid transparent;
+    border-left: 0px solid transparent;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  }
+`;
+
+const Bubble = ({
+  children,
+  color,
+  backgroundColor,
+}: {
+  children: ReactNode;
+  color?: string;
+  backgroundColor?: string;
+}): ReactElement => {
+  return (
+    <Wrapper color={color} backgroundColor={backgroundColor}>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default Bubble;
diff --git a/client/src/images/Error.svg b/client/src/images/Error.svg
new file mode 100644
index 0000000..971ef43
--- /dev/null
+++ b/client/src/images/Error.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="3" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.41446 21.6887C5.63341 20.9077 5.63341 19.6414 6.41446 18.8603L18.7575 6.51732C19.5385 5.73627 20.8048 5.73627 21.5859 6.51732C22.3669 7.29836 22.3669 8.56469 21.5859 9.34574L9.24288 21.6888C8.46184 22.4698 7.19551 22.4698 6.41446 21.6887Z" fill="#FE654F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5858 21.4829C20.8048 22.2639 19.5385 22.2639 18.7574 21.4829L6.41441 9.13987C5.63336 8.35882 5.63336 7.09249 6.41441 6.31145C7.19546 5.5304 8.46179 5.5304 9.24284 6.31145L21.5858 18.6545C22.3669 19.4355 22.3669 20.7018 21.5858 21.4829Z" fill="#FE654F"/>
+</svg>
diff --git a/client/src/images/Warning.svg b/client/src/images/Warning.svg
new file mode 100644
index 0000000..7e5d243
--- /dev/null
+++ b/client/src/images/Warning.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="28" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1274 0.999985C14.8972 -0.333348 16.8217 -0.333349 17.5915 0.999984L31.4479 25C32.2177 26.3333 31.2554 28 29.7158 28H2.00301C0.463409 28 -0.498842 26.3333 0.270958 25L14.1274 0.999985Z" fill="white"/>
+<path d="M14.0255 8.99313C13.9361 7.92021 14.7828 7.00002 15.8594 7.00004V7.00004C16.936 7.00006 17.7827 7.92023 17.6933 8.99313L16.9424 18.0035C16.8955 18.5668 16.4246 19.0001 15.8594 19.0001V19.0001C15.2941 19.0001 14.8233 18.5668 14.7763 18.0035L14.0255 8.99313Z" fill="#FEA34F"/>
+<circle cx="15.8594" cy="23" r="2" fill="#FEA34F"/>
+</svg>