diff --git a/src/components/common/ProtectRoute.tsx b/src/components/common/ProtectRoute.tsx
index 7ccb9a0e..9cd173e8 100644
--- a/src/components/common/ProtectRoute.tsx
+++ b/src/components/common/ProtectRoute.tsx
@@ -6,7 +6,7 @@ interface ProtectRouteProps extends PropsWithChildren {
 }
 
 const ProtectRoute = ({ children, redirectUrl }: ProtectRouteProps) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   if (!isLoggedIn) {
     alert('로그인이 필요한 서비스입니다.');
diff --git a/src/components/common/avatar/Avatar.styled.ts b/src/components/common/avatar/Avatar.styled.ts
index b730cfcf..38938e57 100644
--- a/src/components/common/avatar/Avatar.styled.ts
+++ b/src/components/common/avatar/Avatar.styled.ts
@@ -1,21 +1,16 @@
 import styled from 'styled-components';
 import { AvatarProps } from './Avatar';
 
-interface AvatarContainerProps extends Omit<AvatarProps, 'image'> {
-  $isMainLogo?: boolean;
-}
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
+export const AvatarContainer = styled.div<Omit<AvatarProps, 'image'>>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')};
-  border: ${({ $isMainLogo, theme }) =>
-    $isMainLogo ? 'none' : `1px solid ${theme.color.border}`};
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.color.border};
 
   .avatar {
     width: 100%;
     height: 100%;
-    border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')};
+    border-radius: 50%;
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
diff --git a/src/components/common/avatar/Avatar.tsx b/src/components/common/avatar/Avatar.tsx
index 3935ffa4..1ecaa38b 100644
--- a/src/components/common/avatar/Avatar.tsx
+++ b/src/components/common/avatar/Avatar.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import * as S from './Avatar.styled';
 import defaultImg from '../../../assets/defaultImg.png';
-import MainLogo from '../../../assets/mainlogo.svg';
 
 export interface AvatarProps {
   size: string;
@@ -9,11 +8,10 @@ export interface AvatarProps {
 }
 
 function Avatar({ size, image }: AvatarProps) {
-  const isMainLogo = image === MainLogo;
   const releasedImg =
     typeof image === 'string' && image.trim() ? image : defaultImg;
   return (
-    <S.AvatarContainer size={size} $isMainLogo={isMainLogo}>
+    <S.AvatarContainer size={size}>
       {typeof image === 'string' || !image ? (
         <img className='avatar' src={releasedImg} alt='Avatar' />
       ) : (
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 7030a91d..0b0085ac 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -16,7 +16,7 @@ import Modal from '../modal/Modal';
 function Header() {
   const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
   const { userLogout } = useAuth(handleModalOpen);
-  const { isLoggedIn } = useAuthStore((state) => state);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const { myData, isLoading } = useMyProfileInfo();
 
   const profileImg = myData?.profileImg || DefaultImg;
diff --git a/src/components/common/sidebar/Sidebar.styled.ts b/src/components/common/sidebar/Sidebar.styled.ts
index 8fa769f3..3cd47911 100644
--- a/src/components/common/sidebar/Sidebar.styled.ts
+++ b/src/components/common/sidebar/Sidebar.styled.ts
@@ -12,6 +12,17 @@ export const Container = styled.div`
   padding-bottom: 1rem;
 `;
 
+export const LogoContainer = styled.div`
+  width: 110px;
+  height: 110px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`;
+
 export const AvartarContainer = styled.div`
   width: 100%;
   display: flex;
diff --git a/src/components/common/sidebar/Sidebar.tsx b/src/components/common/sidebar/Sidebar.tsx
index bc86a3cb..45531a60 100644
--- a/src/components/common/sidebar/Sidebar.tsx
+++ b/src/components/common/sidebar/Sidebar.tsx
@@ -1,9 +1,10 @@
 import { NavLink, useLocation } from 'react-router-dom';
 import Avatar from '../avatar/Avatar';
 import * as S from './Sidebar.styled';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import EditMyProfileImg from './editMyProfileImg/EditMyProfileImg';
 import useAuthStore from '../../../store/authStore';
+import MainLogo from '../../../assets/mainlogo.svg';
 
 interface MenuItem {
   label: string;
@@ -18,7 +19,7 @@ interface SidebarProps {
 }
 
 const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
-  const { isLoggedIn } = useAuthStore((state) => state);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const location = useLocation();
   const isUserPage = location.pathname.includes('/user');
   const isManagePage = location.pathname.includes('/manage');
@@ -27,27 +28,20 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
 
   const getActiveIndex = useCallback(() => {
     const currentPath = location.pathname;
-    const matchedIndex = menuItems.findIndex(
-      (item) => currentPath === item.path
-    );
-    return matchedIndex !== -1 ? matchedIndex : 0;
+    return menuItems.findIndex((item) => currentPath === item.path) ?? 0;
   }, [location.pathname, menuItems]);
 
-  const [activeIndex, setActiveIndex] = useState<number>(getActiveIndex);
-
-  useEffect(() => {
-    setActiveIndex(getActiveIndex());
-  }, [location.pathname, menuItems, getActiveIndex]);
-
-  const handleClick = (index: number) => {
-    setActiveIndex(index);
-  };
-
   return (
     <S.Container>
       <S.AvartarContainer>
         <S.AvartarWrapper>
-          <Avatar size='120px' image={profileImage} />
+          {profileImage === MainLogo ? (
+            <S.LogoContainer>
+              <img src={MainLogo} alt='main logo' />
+            </S.LogoContainer>
+          ) : (
+            <Avatar size='120px' image={profileImage} />
+          )}
           {isMyProfile && <EditMyProfileImg />}
         </S.AvartarWrapper>
         <span>{nickname ? nickname : ''}</span>
@@ -55,10 +49,7 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
       <S.MenuList>
         {menuItems.map(({ label, path, icon }, index) => (
           <NavLink key={path} to={path}>
-            <S.MenuItem
-              $isActive={activeIndex === index}
-              onClick={() => handleClick(index)}
-            >
+            <S.MenuItem $isActive={getActiveIndex() === index}>
               {icon && <S.IconWrapper>{icon}</S.IconWrapper>}
               {label}
             </S.MenuItem>
diff --git a/src/constants/modalMessage.ts b/src/constants/modalMessage.ts
index fa62db29..5e5fcdf6 100644
--- a/src/constants/modalMessage.ts
+++ b/src/constants/modalMessage.ts
@@ -15,7 +15,7 @@ export const MODAL_MESSAGE = {
   myProfileSuccess: '프로필 수정이 완료되었습니다.',
   myProfileFail: '프로필 수정에 실패했습니다.',
   profileImgSuccess: '프로필 이미지가 업로드 되었습니다.',
-  profileImgFail: '이미지는 5MB 이하, .png.jpg.jpeg.svg 형식만 가능합니다.',
+  profileImgFail: '이미지는 5MB 이하, .png.jpg.jpeg 형식만 가능합니다.',
   ModifyProjectSuccess: '공고 수정이 정상적으로 완료 되었습니다.',
   ModifyProjectFail: '공고 수정을 실패 했습니다.',
   createProjectSuccess: '공고 생성을 완료 했습니다.',
diff --git a/src/hooks/useMyInfo.ts b/src/hooks/useMyInfo.ts
index 4c2c4db3..bc2f0584 100644
--- a/src/hooks/useMyInfo.ts
+++ b/src/hooks/useMyInfo.ts
@@ -19,7 +19,7 @@ import {
 import { MODAL_MESSAGE } from '../constants/modalMessage';
 
 export const useMyProfileInfo = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserInfo>({
     queryKey: myInfoKey.myProfile,
@@ -84,7 +84,7 @@ export const useUploadProfileImg = (
 };
 
 export const useMyJoinedProjectList = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<MyJoinedProjectList>({
     queryKey: ProjectListKey.myJoinedList,
@@ -96,7 +96,7 @@ export const useMyJoinedProjectList = () => {
 };
 
 export const useMyAppliedStatusList = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<MyAppliedProjectStatusList>({
     queryKey: ProjectListKey.myAppliedStatusList,
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
index 1b26f449..7d5919f6 100644
--- a/src/hooks/useUserInfo.ts
+++ b/src/hooks/useUserInfo.ts
@@ -6,7 +6,7 @@ import useAuthStore from '../store/authStore';
 import { UserJoinedProjectList } from '../models/userProject';
 
 export const useUserProfileInfo = (id: number) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserInfo>({
     queryKey: [userInfoKey.userProfile, id],
@@ -19,7 +19,7 @@ export const useUserProfileInfo = (id: number) => {
 };
 
 export const useUserJoinedProjectList = (id: number) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserJoinedProjectList>({
     queryKey: [userInfoKey.userJoinedList, id],
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 6ccae09c..dcc93313 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -59,7 +59,7 @@ const ModifyProject = lazy(
 );
 
 const AppRoutes = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const routeList = [
     // {