diff --git a/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts b/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts
new file mode 100644
index 00000000..2899c22e
--- /dev/null
+++ b/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts
@@ -0,0 +1,37 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const ContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 15rem;
+  height: 4rem;
+`;
+
+const LogoCircleStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: linear-gradient(
+    139deg,
+    #012a36 10.1%,
+    rgba(50, 51, 96, 0.78) 46.84%,
+    rgba(113, 42, 124, 0.51) 69.53%,
+    rgba(0, 221, 49, 0.15) 88.79%
+  );
+  overflow: visible;
+  cursor: pointer;
+`;
+
+const LogoTextStyled = styled.div`
+  color: ${Theme.color.logoTextColor};
+  font-family: 'LogoFont';
+  font-size: x-large;
+  text-shadow: 0.2rem 0.2rem 0.2rem rgba(50, 51, 96, 0.78);
+`;
+
+export { ContainerStyled, LogoCircleStyled, LogoTextStyled };
diff --git a/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx b/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx
new file mode 100644
index 00000000..44d810f7
--- /dev/null
+++ b/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx
@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ContainerStyled, LogoCircleStyled, LogoTextStyled } from './SpaceClubHomeLogo.style';
+
+const SpaceClubHomeLogo = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ContainerStyled onClick={() => navigate('/')}>
+      <LogoCircleStyled>
+        <LogoTextStyled>Space_Club</LogoTextStyled>
+      </LogoCircleStyled>
+    </ContainerStyled>
+  );
+};
+
+export default SpaceClubHomeLogo;
diff --git a/src/styles/Theme.ts b/src/styles/Theme.ts
index db48eb40..16cd8ea4 100644
--- a/src/styles/Theme.ts
+++ b/src/styles/Theme.ts
@@ -8,6 +8,7 @@ const color = {
   black: '#000000',
   gray: '#d9d9d9',
   indigo: '#003949',
+  logoTextColor: '#fafafa',
 } as const;
 
 const componentStyle = {