diff --git a/src/assets/default.svg b/src/assets/default.svg
index e3d5fe45..a090b0f0 100644
--- a/src/assets/default.svg
+++ b/src/assets/default.svg
@@ -1,7 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="20" height="20" rx="10" fill="url(#paint0_linear_1114_17083)"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" fill="url(#paint0_linear_1114_17082)"/>
 <defs>
-<linearGradient id="paint0_linear_1114_17083" x1="4.66667" y1="3" x2="18" y2="19.3333" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_1114_17082" x1="2.66667" y1="1" x2="16" y2="17.3333" gradientUnits="userSpaceOnUse">
 <stop stop-color="#D1D5DB"/>
 <stop offset="0.667809" stop-color="#D1D5DB" stop-opacity="0.628362"/>
 <stop offset="1" stop-color="#D1D5DB" stop-opacity="0.22"/>
diff --git a/src/components/CrewItem/CrewItem.styles.ts b/src/components/CrewItem/CrewItem.styles.ts
new file mode 100644
index 00000000..ca1f381c
--- /dev/null
+++ b/src/components/CrewItem/CrewItem.styles.ts
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+import { Image } from '@components/shared/Image';
+
+export const CrewItemWrapper = styled(Flex)`
+  background-color: white;
+  padding: 12px;
+  border-radius: 8px;
+`;
+
+export const CrewProfileImage = styled(Image)`
+  border-radius: 8px;
+`;
+
+export const CrewDescription = styled(Flex)`
+  flex-grow: 1;
+`;
diff --git a/src/components/CrewItem/CrewItem.tsx b/src/components/CrewItem/CrewItem.tsx
new file mode 100644
index 00000000..abc5437a
--- /dev/null
+++ b/src/components/CrewItem/CrewItem.tsx
@@ -0,0 +1,58 @@
+import { Avatar } from '@components/Avatar';
+import { AvatarGroup } from '@components/AvatarGroup';
+import { Flex } from '@components/shared/Flex';
+import { Text } from '@components/shared/Text';
+
+import { theme } from '@styles/theme';
+
+import {
+  CrewDescription,
+  CrewItemWrapper,
+  CrewProfileImage,
+} from './CrewItem.styles';
+
+type CrewItemProps = {
+  name: string;
+  address: string;
+  imgSrc: string;
+  membersProfileImageUrls: string[];
+  memberCount: number;
+  maxMemberCount: number;
+  onClick: VoidFunction;
+};
+
+export const CrewItem = ({
+  name,
+  address,
+  imgSrc,
+  membersProfileImageUrls,
+  memberCount,
+  maxMemberCount,
+  onClick,
+}: CrewItemProps) => {
+  return (
+    <CrewItemWrapper gap={10} justify="space-between" onClick={onClick}>
+      <CrewProfileImage width="82px" src={imgSrc} alt="profile-img" />
+      <CrewDescription direction="column" gap={3}>
+        <Text size={20} ellipsis={1}>
+          {name}
+        </Text>
+        <Text size={12} ellipsis={1}>
+          {address}
+        </Text>
+        <Flex justify="space-between" align="center">
+          <AvatarGroup
+            size={30}
+            overlap={5}
+            border={`1px solid ${theme.PALETTE.GRAY_400}`}
+          >
+            {membersProfileImageUrls.slice(0, 6).map((url, index) => (
+              <Avatar key={index} src={url} />
+            ))}
+          </AvatarGroup>
+          <Text size={12}>{`${memberCount}/${maxMemberCount}`}</Text>
+        </Flex>
+      </CrewDescription>
+    </CrewItemWrapper>
+  );
+};
diff --git a/src/components/CrewItem/index.ts b/src/components/CrewItem/index.ts
new file mode 100644
index 00000000..e79a73d8
--- /dev/null
+++ b/src/components/CrewItem/index.ts
@@ -0,0 +1 @@
+export * from './CrewItem';