diff --git a/src/app/(main)/account/page.js b/src/app/(main)/account/page.js
index b586a32..feaff07 100644
--- a/src/app/(main)/account/page.js
+++ b/src/app/(main)/account/page.js
@@ -12,13 +12,14 @@ import { AccountProfile } from '@/components/account/account-profile';
 import { AccountProfileDetails } from '@/components/account/account-profile-details';
 import { useEffect, useState } from 'react';
 import axiosInterceptorInstance from '../../../../axios/axiosInterceptorInstance';
+import { useRecoilState } from 'recoil';
+import { UserState } from '@/utils/recoil/atoms';
 
 const Account = () => {
-	const [username, setUsername] = useState('');
+	const [user, setUser] = useRecoilState(UserState);
 	const [clubData, setClubData] = useState(null);
 
 	useEffect(() => {
-		setUsername(localStorage.getItem('username'));
 		axiosInterceptorInstance
 			.get(`/club/my`)
 			.then((res) => {
@@ -57,7 +58,7 @@ const Account = () => {
 							<Typography variant="h4">
 								<b style={{ color: '#80A4FF' }}>
 									{'[ '}
-									{username ? username : '동아리'}
+									{user.name ? user.name : '동아리'}
 									{' ]  '}
 								</b>
 								정보 수정
diff --git a/src/components/common/side-nav.js b/src/components/common/side-nav.js
index d74d5ce..ced01ff 100644
--- a/src/components/common/side-nav.js
+++ b/src/components/common/side-nav.js
@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import LogoutIcon from '@mui/icons-material/Logout';
diff --git a/src/layouts/mainLayout.js b/src/layouts/mainLayout.js
index 91d2b31..b600aed 100644
--- a/src/layouts/mainLayout.js
+++ b/src/layouts/mainLayout.js
@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import { styled } from '@mui/material/styles';