diff --git a/src/apis/users/getMyClub.ts b/src/apis/users/getMyClub.ts
new file mode 100644
index 00000000..fec30387
--- /dev/null
+++ b/src/apis/users/getMyClub.ts
@@ -0,0 +1,20 @@
+import { END_POINTS } from '@/constants/api';
+
+import { axiosClient } from '../axiosClient';
+
+interface getMyClub {
+  id: string;
+}
+interface Club {
+  //추후 수정 필요
+  id: string;
+  src: string;
+}
+
+const getMyClub = async ({ id }: getMyClub) => {
+  const { data } = await axiosClient.get<Club[]>(END_POINTS.MY_CLUB, { params: { id } });
+
+  return data;
+};
+
+export default getMyClub;
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 554c2e7f..1aa2f924 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -5,6 +5,7 @@ const NETWORK_TIMEOUT = 10000;
 const END_POINTS = {
   KAKAO_LOGIN: '/login/kakao',
   REGISTER: '/users',
+  MY_CLUB: '/myclub', // API 명세서 나올시, 수정 필요
 };
 
 export { SPACECLUB_BASE_URL, NETWORK_TIMEOUT, END_POINTS };
diff --git a/src/mocks/users.ts b/src/mocks/users.ts
index ab513ae9..b2a13cd1 100644
--- a/src/mocks/users.ts
+++ b/src/mocks/users.ts
@@ -8,6 +8,21 @@ interface member {
 
 const members: member[] = [];
 
+const club = [
+  {
+    id: 1,
+    src: 'https://picsum.photos/200/301',
+  },
+  {
+    id: 2,
+    src: 'https://picsum.photos/200/302',
+  },
+  {
+    id: 3,
+    src: 'https://picsum.photos/200/303',
+  },
+];
+
 export const userHandlers = [
   http.post(END_POINTS.REGISTER, async ({ request }) => {
     const reader = request.body?.getReader();
@@ -26,4 +41,13 @@ export const userHandlers = [
 
     return HttpResponse.json({ status: 201 });
   }),
+
+  http.get(END_POINTS.MY_CLUB, async ({ request }) => {
+    const url = new URL(request.url);
+
+    const userId = url.searchParams.get('id');
+    console.log(userId);
+
+    return HttpResponse.json(club, { status: 201 });
+  }),
 ];
diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
deleted file mode 100644
index 193bee20..00000000
--- a/src/pages/Layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-const Layout = () => {
-  return (
-    <div>
-      <Outlet />
-    </div>
-  );
-};
-
-export default Layout;
diff --git a/src/pages/Layout/Layout.style.ts b/src/pages/Layout/Layout.style.ts
new file mode 100644
index 00000000..838434b5
--- /dev/null
+++ b/src/pages/Layout/Layout.style.ts
@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const Content = styled.div`
+  flex-grow: 1;
+  margin: 0 8rem;
+`;
diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx
new file mode 100644
index 00000000..fe4e7611
--- /dev/null
+++ b/src/pages/Layout/Layout.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+
+import { Container, Content } from './Layout.style';
+import SideNav from './SideNav';
+
+const Layout = () => {
+  return (
+    <Container>
+      <SideNav />
+      <Content>
+        <Outlet />
+      </Content>
+    </Container>
+  );
+};
+
+export default Layout;
diff --git a/src/pages/Layout/SideNav.style.ts b/src/pages/Layout/SideNav.style.ts
new file mode 100644
index 00000000..b0918cc6
--- /dev/null
+++ b/src/pages/Layout/SideNav.style.ts
@@ -0,0 +1,37 @@
+import Theme from '@/styles/Theme';
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: fixed;
+  width: 7rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  box-sizing: border-box;
+  background: ${Theme.color.logo_2};
+  color: ${Theme.color.gray};
+`;
+
+export const AvatarGroup = styled.div`
+  overflow: auto;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+
+  &:first-child {
+    padding-top: 1rem;
+  }
+`;
+export const iconStyle = css`
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+`;
diff --git a/src/pages/Layout/SideNav.tsx b/src/pages/Layout/SideNav.tsx
new file mode 100644
index 00000000..830c9a0f
--- /dev/null
+++ b/src/pages/Layout/SideNav.tsx
@@ -0,0 +1,36 @@
+import getMyClub from '@/apis/users/getMyClub';
+import Avatar from '@/components/common/Avatar/Avatar';
+
+import { FaBell, FaHome, FaPlusCircle } from 'react-icons/fa';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { AvatarGroup, Container, iconStyle } from './SideNav.style';
+
+const SideNav = () => {
+  const { data: clubs } = useQuery(['myclubs', 'userid'], () => getMyClub({ id: '1' }), {
+    refetchInterval: false,
+  }); //userid에 받는 방식 고려 후, 리팩토링
+  const navigate = useNavigate();
+
+  return (
+    <Container>
+      <AvatarGroup>
+        {clubs?.map((club) => (
+          <Link to={`/club/home/${club.id}`}>
+            <Avatar key={club.id} avatarShape="normal" profileImageSrc={club.src}></Avatar>
+          </Link>
+        ))}
+      </AvatarGroup>
+      <FaPlusCircle className={iconStyle} onClick={() => navigate('/club/create')} />
+      <FaHome className={iconStyle} onClick={() => navigate('/')} />
+      <FaBell className={iconStyle} onClick={() => alert('알림페이지 준비 중')} />
+      <Link to={`/profile`}>
+        <Avatar avatarShape="rectangle" />
+      </Link>
+    </Container>
+  );
+};
+
+export default SideNav;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 63a25abc..e0fd654f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import App from '@/App';
-import Layout from '@/pages/Layout';
+import Layout from '@/pages/Layout/Layout';
 import LoginPage from '@/pages/LoginPage/LoginPage';
 import MainPage from '@/pages/MainPage';
 import NotFoundPage from '@/pages/NotFoundPage';
diff --git a/src/styles/Theme.ts b/src/styles/Theme.ts
index eb5f2129..1cb9e1a1 100644
--- a/src/styles/Theme.ts
+++ b/src/styles/Theme.ts
@@ -10,7 +10,8 @@ const color = {
   gray: '#d9d9d9',
   indigo: '#003949',
   logoTextColor: '#fafafa',
-  lineColor: '#3D186C',
+  lineColor: '#261359',
+  logo_2: 'linear-gradient(175deg, #031f2b -19.45%, #486282 55.68%, #9458b5 117.93%)',
 } as const;
 
 const componentStyle = {