diff --git a/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts b/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts
index 9c25368c..9d1be0e5 100644
--- a/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts
+++ b/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts
@@ -33,7 +33,7 @@ export const FormError = styled.p`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: 115%;
+  left: 5px;
   white-space: nowrap;
 `;
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 3113736d..7030a91d 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -23,7 +23,7 @@ function Header() {
 
   return (
     <S.HeaderContainer>
-      <Link to={ROUTES.home}>
+      <Link to={ROUTES.main}>
         <img src={Mainlogo} alt='logo' />
       </Link>
       <nav className='auth'>
diff --git a/src/components/common/page/notFoundPage/NotFoundPage.styled.ts b/src/components/common/page/notFoundPage/NotFoundPage.styled.ts
deleted file mode 100644
index 27844ab5..00000000
--- a/src/components/common/page/notFoundPage/NotFoundPage.styled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-import notFoundImg from '../../../../assets/notFoundImg.svg';
-
-export const Container = styled.div`
-  width: 100vw;
-  height: 100vh;
-  background-image: url(${notFoundImg});
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  position: relative;
-`;
-
-export const BackButton = styled.button`
-  position: absolute;
-  bottom: 15%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  padding: 10px 20px;
-  font-size: 1rem;
-  font-weight: 500;
-  color: white;
-  background-color: #3e404d;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  &:hover {
-    background-color: #0056b3;
-  }
-`;
diff --git a/src/components/common/page/notFoundPage/NotFoundPage.tsx b/src/components/common/page/notFoundPage/NotFoundPage.tsx
deleted file mode 100644
index 6b8d85d6..00000000
--- a/src/components/common/page/notFoundPage/NotFoundPage.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import * as S from './NotFoundPage.styled';
-
-const NotFoundPage = () => {
-  const navigate = useNavigate();
-
-  const handleBack = () => {
-    navigate(-1);
-  };
-  return (
-    <S.Container>
-      <S.BackButton onClick={handleBack}>뒤로 가기</S.BackButton>
-    </S.Container>
-  );
-};
-
-export default NotFoundPage;
diff --git a/src/components/mypage/myProfile/NoMyInfo.styled.ts b/src/components/mypage/myProfile/NoMyInfo.styled.ts
new file mode 100644
index 00000000..175659a8
--- /dev/null
+++ b/src/components/mypage/myProfile/NoMyInfo.styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    color: #ccc;
+  }
+
+  span {
+    font-size: 1.1rem;
+    color: $ccc;
+    margin-top: 1rem;
+  }
+`;
diff --git a/src/components/mypage/myProfile/NoMyInfo.tsx b/src/components/mypage/myProfile/NoMyInfo.tsx
new file mode 100644
index 00000000..bd0e0a9b
--- /dev/null
+++ b/src/components/mypage/myProfile/NoMyInfo.tsx
@@ -0,0 +1,13 @@
+import * as S from './NoMyInfo.styled';
+import { IdentificationIcon } from '@heroicons/react/24/outline';
+
+const NoMyInfo = () => {
+  return (
+    <S.Container>
+      <IdentificationIcon />
+      <span>유저 정보를 불러올 수 없습니다.</span>
+    </S.Container>
+  );
+};
+
+export default NoMyInfo;
diff --git a/src/components/mypage/myProfile/myProfile.tsx b/src/components/mypage/myProfile/myProfile.tsx
index 89492d53..a482847a 100644
--- a/src/components/mypage/myProfile/myProfile.tsx
+++ b/src/components/mypage/myProfile/myProfile.tsx
@@ -26,6 +26,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import Modal from '../../common/modal/Modal';
 import { useModal } from '../../../hooks/useModal';
 import Spinner from '../Spinner';
+import NoMyInfo from './NoMyInfo';
 
 const profileSchema = z.object({
   nickname: z
@@ -147,7 +148,7 @@ const MyProfile = () => {
   }
 
   if (!myData) {
-    return <div>유저 정보를 불러 올 수 없습니다.</div>;
+    return <NoMyInfo />;
   }
 
   return (
diff --git a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts b/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts
index 58bb3687..b3681717 100644
--- a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts
+++ b/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts
@@ -66,7 +66,7 @@ export const InputInfoStyle = styled.input<{ type?: string }>`
           height: 15px;
           cursor: pointer;
           padding-left: 10px;
-          margin-left: 10px;
+          margin-left: 5px;
         `;
     }
   }}
@@ -77,7 +77,7 @@ export const FormError = styled.p`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: 115%;
+  left: 5px;
   white-space: nowrap;
 `;
diff --git a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts
index a4d42bee..7ec4c008 100644
--- a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts
+++ b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const InfoRow = styled.div`
   align-items: center;
   gap: 10px;
-  margin-bottom: 17px;
+  margin-bottom: 1.8rem;
   display: flex;
 
   label {
diff --git a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts
index bc2afc5c..6b6f2993 100644
--- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts
+++ b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts
@@ -6,11 +6,11 @@ export const CategoryContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-top: 5px;
+  margin-top: -20px;
   padding: 3px 0;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
-  margin-bottom: 3px;
+  margin-bottom: 20px;
 `;
 
 export const CategoryItem = styled.div<{ isSelected: boolean }>`
diff --git a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts b/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts
index 97adcdce..726a10ae 100644
--- a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts
+++ b/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts
@@ -7,11 +7,11 @@ export const CategoryContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-top: 5px;
+  margin-top: -20px;
   padding: 3px 0;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
-  margin-bottom: 3px;
+  margin-bottom: 15px;
 `;
 
 export const PositionButtonFeat = styled(PositionButton)<{
@@ -44,7 +44,8 @@ export const PositionButtonFeat = styled(PositionButton)<{
 `;
 
 export const FormError = styled.p`
-  margin-top: 1px;
+  margin-top: -15px;
+  margin-bottom: 20px;
   font-size: 0.9rem;
   color: ${({ theme }) => theme.color.red};
   top: 100%;
diff --git a/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts b/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts
index d99491dc..8a8a763b 100644
--- a/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts
+++ b/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts
@@ -13,12 +13,12 @@ export const SectionInput = styled.div`
 
 export const InfoRow = styled.div`
   display: flex;
-  align-items: flex-start;
-  margin-bottom: 20px;
+  align-items: center;
+  margin-bottom: 1rem;
 
   img {
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border: 1px solid ${({ theme }) => theme.color.border};
     border-radius: ${({ theme }) => theme.borderRadius.primary};
     margin-bottom: 5px;
@@ -26,7 +26,6 @@ export const InfoRow = styled.div`
   }
 
   @media (max-width: 1024px) {
-    align-items: flex-start;
     margin-bottom: 15px;
   }
 `;
@@ -113,7 +112,7 @@ export const BeginnerIcon = styled.img`
   border-radius: 50%;
   border: 1px solid ${({ theme }) => theme.color.border};
   background-color: #fff;
-  padding: 5px;
+  padding: 3px;
   object-fit: contain;
   margin-bottom: 15px;
 
@@ -127,8 +126,7 @@ export const BeginnerIcon = styled.img`
 export const BeginnerText = styled.p`
   font-size: 1rem;
   font-weight: bold;
-  color: #000;
+  color: #3e5879;
   flex: 0.8;
   text-align: left;
-  margin-top: 20px;
 `;
diff --git a/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx b/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx
index 557b4f20..dad4caa3 100644
--- a/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx
+++ b/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx
@@ -18,7 +18,9 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
     <S.SectionInput>
       <S.InfoRow>
         {data.isBeginner && <S.BeginnerIcon src={beginner} alt='초보자 환영' />}
-        {data.isBeginner && <S.BeginnerText>초보 환영</S.BeginnerText>}
+        {data.isBeginner && (
+          <S.BeginnerText>새싹 멤버(초보)도 환영해요!</S.BeginnerText>
+        )}
       </S.InfoRow>
 
       {PROJECT_DATA_GET.map((input, index) => (
@@ -46,7 +48,7 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
         <S.InfoLabel>사용 언어</S.InfoLabel>
         <S.SkillTagContainer>
           {data.ProjectSkillTag.map((skillTag) => (
-            <S.SkillTagImage>
+            <S.SkillTagImage key={skillTag.SkillTag.id}>
               <img
                 key={skillTag.SkillTag.id}
                 src={skillTag.SkillTag.img}
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 5e92e496..6f58504a 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -26,7 +26,9 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     },
     onSuccess: () => {
       handleModalOpen(MODAL_MESSAGE.signUpSuccess);
-      navigate(ROUTES.login);
+      setTimeout(() => {
+        navigate(ROUTES.login);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.signUpFail);
@@ -41,9 +43,11 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     mutationFn: async ({ email, newPassword }) => {
       await postResetPassword({ email, newPassword });
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       handleModalOpen(MODAL_MESSAGE.changePasswordSuccess);
-      navigate(ROUTES.login);
+      setTimeout(() => {
+        navigate(ROUTES.login);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.changePasswordFail);
@@ -61,11 +65,13 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
       const userData = response.user;
       return { accessToken, refreshToken, userData };
     },
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
       const { accessToken, refreshToken, userData } = data;
       handleModalOpen(MODAL_MESSAGE.loginSuccess);
-      storeLogin(accessToken, refreshToken, userData);
-      navigate(ROUTES.home);
+      setTimeout(() => {
+        storeLogin(accessToken, refreshToken, userData);
+        navigate(ROUTES.main);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.loginFail);
@@ -92,7 +98,9 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     storeLogout();
     queryClient.removeQueries({ queryKey: myInfoKey.myProfile });
     handleModalOpen(MODAL_MESSAGE.logout);
-    navigate(ROUTES.home);
+    setTimeout(() => {
+      navigate(ROUTES.main);
+    }, 1000);
   };
 
   return { userSignup, resetPassword, userLogin, userLogout };
diff --git a/src/pages/apply/Apply.styled.ts b/src/pages/apply/Apply.styled.ts
index b7996d32..b4420dd3 100644
--- a/src/pages/apply/Apply.styled.ts
+++ b/src/pages/apply/Apply.styled.ts
@@ -36,6 +36,7 @@ export const Section = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  margin-bottom: 1.5rem;
 `;
 
 export const Label = styled.label`
diff --git a/src/pages/changePassword/ChangePassword.tsx b/src/pages/changePassword/ChangePassword.tsx
index 9595ada6..ac53afd4 100644
--- a/src/pages/changePassword/ChangePassword.tsx
+++ b/src/pages/changePassword/ChangePassword.tsx
@@ -95,7 +95,7 @@ const ChangePassword = () => {
   return (
     <S.Container>
       <h1 className='logo'>
-        <Link to={ROUTES.home}>
+        <Link to={ROUTES.main}>
           <img src={Mainlogo} alt='logo' />
         </Link>
       </h1>
diff --git a/src/pages/createProject/CreateProject.styled.ts b/src/pages/createProject/CreateProject.styled.ts
index 70025cdd..c2324642 100644
--- a/src/pages/createProject/CreateProject.styled.ts
+++ b/src/pages/createProject/CreateProject.styled.ts
@@ -38,7 +38,7 @@ export const SectionTitle = styled.label`
 `;
 
 export const Section = styled.div`
-  margin-bottom: 30px;
+  margin-bottom: 2.7rem;
 `;
 
 export const SectionInput = styled.div`
@@ -60,6 +60,7 @@ export const SubmitButton = styled.button`
   font-weight: bold;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   cursor: pointer;
+  margin-top: 3.5rem;
 
   &:hover {
     background-color: #0056b3;
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index e942cf75..12761f66 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -49,7 +49,7 @@ const Login = () => {
   return (
     <S.Container>
       <h1 className='logo'>
-        <Link to={ROUTES.home}>
+        <Link to={ROUTES.main}>
           <img src={Mainlogo} alt='logo' />
         </Link>
       </h1>
diff --git a/src/pages/projectDetail/ProjectDetail.styled.ts b/src/pages/projectDetail/ProjectDetail.styled.ts
index c528a206..4bf2c787 100644
--- a/src/pages/projectDetail/ProjectDetail.styled.ts
+++ b/src/pages/projectDetail/ProjectDetail.styled.ts
@@ -18,9 +18,10 @@ export const Header = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-size: 36px;
+  font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 0.8rem;
+  margin-top: 1rem;
 
   @media (max-width: 870px) {
     font-size: 28px;
@@ -34,7 +35,8 @@ export const ProfileContainer = styled.div`
 `;
 
 export const ProfileImageContainer = styled.div`
-  margin-right: 15px;
+  padding-right: 15px;
+  cursor: pointer;
 `;
 
 export const UserInfo = styled.div`
@@ -49,8 +51,9 @@ export const UserInfo = styled.div`
 `;
 
 export const UserName = styled.div`
-  font-size: 21px;
+  font-size: ${({ theme }) => theme.heading['small'].fontSize};
   font-weight: bold;
+  cursor: pointer;
 
   @media (max-width: 870px) {
     font-size: 18px;
@@ -58,11 +61,11 @@ export const UserName = styled.div`
 `;
 
 export const PostDate = styled.div`
-  font-size: ${({ theme }) => theme.heading.semiSmall};
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.deepGrey};
 
   @media (max-width: 870px) {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
   }
 `;
 
@@ -70,7 +73,7 @@ export const ViewCount = styled.div`
   display: flex;
   gap: 5px;
   text-align: center;
-  font-size: ${({ theme }) => theme.heading.semiSmall};
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.deepGrey};
 
   svg {
@@ -91,7 +94,7 @@ export const ViewCount = styled.div`
 `;
 
 export const Content = styled.div`
-  margin-top: 20px;
+  margin-top: 3.5rem;
   margin-bottom: 60px;
 `;
 
@@ -118,7 +121,7 @@ export const Value = styled.span`
 `;
 
 export const ProjectDescription = styled.div`
-  margin-top: 30px;
+  margin-top: 4rem;
 `;
 
 export const SectionTitle = styled.h3`
@@ -134,9 +137,17 @@ export const Description = styled.div`
 `;
 
 export const ApplyButtonContainer = styled.div`
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: 50px;
   margin-bottom: 50px;
+
+  button {
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 0.8rem 1.8rem;
+  }
 `;
 
 export const ActionButton = styled(Button)`
diff --git a/src/pages/projectDetail/ProjectDetail.tsx b/src/pages/projectDetail/ProjectDetail.tsx
index f13c2102..4cf570ba 100644
--- a/src/pages/projectDetail/ProjectDetail.tsx
+++ b/src/pages/projectDetail/ProjectDetail.tsx
@@ -9,40 +9,49 @@ import Avatar from '../../components/common/avatar/Avatar';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import useAuthStore from '../../store/authStore';
 import { ROUTES } from '../../constants/routes';
+import { useModal } from '../../hooks/useModal';
+import Modal from '../../components/common/modal/Modal';
 
 const ProjectDetail = () => {
   const { projectId } = useParams();
   const id = Number(projectId);
   const navigate = useNavigate();
   const { data, isLoading, isFetching } = useGetProjectData(id);
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
   const { userData } = useAuthStore((state) => state);
 
+  if (isLoading) return <div>Loading...</div>;
+  if (isFetching) return <div>isFetching...</div>;
   if (!data) {
     return <div>데이터가 없습니다.</div>;
   }
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isFetching) return <div>isFetching...</div>;
-
   const handleApplyClick = () => {
     if (userData?.id === data.User.id) {
-      alert('본인의 프로젝트는 지원할 수 없습니다.');
+      handleModalOpen('본인의 프로젝트는 지원할 수 없습니다.');
       return;
     } else {
       navigate(`${ROUTES.apply}/${id}`);
     }
   };
 
+  const handleMovetoUserPage = () => {
+    const userId = data.User.id;
+    navigate(`/user/${userId}`);
+  };
+
   return (
     <S.Container>
       <S.Header>
         <S.Title>{data.title}</S.Title>
         <S.ProfileContainer>
-          <S.ProfileImageContainer>
-            <Avatar size='3.3rem' image={data.User.profileImg} />
+          <S.ProfileImageContainer onClick={handleMovetoUserPage}>
+            <Avatar size='2.5rem' image={data.User.profileImg} />
           </S.ProfileImageContainer>
           <S.UserInfo>
-            <S.UserName>{data.User.nickname}</S.UserName>
+            <S.UserName onClick={handleMovetoUserPage}>
+              {data.User.nickname}
+            </S.UserName>
             <S.PostDate>{formatDate(data.recruitmentEndDate)}</S.PostDate>
             <S.ViewCount>
               <EyeIcon />
@@ -71,6 +80,9 @@ const ProjectDetail = () => {
       </S.ApplyButtonContainer>
 
       <hr></hr>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
     </S.Container>
   );
 };
diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 8c0eeb9b..2b7cc3d5 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -114,7 +114,7 @@ const Register = () => {
   return (
     <S.Container>
       <h1 className='logo'>
-        <Link to={ROUTES.home}>
+        <Link to={ROUTES.main}>
           <img src={Mainlogo} alt='logo' />
         </Link>
       </h1>
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 087fb90b..447a11d5 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -15,7 +15,7 @@ const Register = lazy(() => import('../pages/register/Register'));
 const ChangePassword = lazy(
   () => import('../pages/changePassword/ChangePassword')
 );
-const Main = lazy(() => import('../pages/main/Main'));
+// const Main = lazy(() => import('../pages/main/Main'));
 const Layout = lazy(() => import('../components/common/layout/Layout'));
 const Home = lazy(() => import('../pages/home/Home'));
 const MyPage = lazy(() => import('../pages/mypage/MyPage'));
@@ -65,18 +65,18 @@ const AppRoutes = () => {
   const { isLoggedIn } = useAuthStore();
 
   const routeList = [
-    {
-      path: ROUTES.main,
-      element: <Main />,
-    },
+    // {
+    //   path: ROUTES.main,
+    //   element: <Main />,
+    // },
     {
       path: ROUTES.login,
-      element: isLoggedIn ? <Navigate to={ROUTES.home} replace /> : <Login />,
+      element: isLoggedIn ? <Navigate to={ROUTES.main} replace /> : <Login />,
     },
     {
       path: ROUTES.signup,
       element: isLoggedIn ? (
-        <Navigate to={ROUTES.home} replace />
+        <Navigate to={ROUTES.main} replace />
       ) : (
         <Register />
       ),
@@ -86,7 +86,7 @@ const AppRoutes = () => {
       element: <ChangePassword />,
     },
     {
-      path: ROUTES.home,
+      path: ROUTES.main,
       element: (
         <Layout>
           <Home />
@@ -116,9 +116,11 @@ const AppRoutes = () => {
     {
       path: `${ROUTES.projectDetail}/:projectId`,
       element: (
-        <Layout>
-          <ProjectDetail />
-        </Layout>
+        <Suspense fallback={<LoadingSpinner />}>
+          <Layout>
+            <ProjectDetail />
+          </Layout>
+        </Suspense>
       ),
     },
     {