diff --git a/src/entities/user/hooks/useSignUpForm.ts b/src/entities/user/hooks/useSignUpForm.ts
index 0e16de7..06e97ee 100644
--- a/src/entities/user/hooks/useSignUpForm.ts
+++ b/src/entities/user/hooks/useSignUpForm.ts
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { useSignUp } from "@entities/user/hooks/useSignUp";
 
+import { useAuthStore } from "@shared/stores/authStore";
 import type { UserExperience, UserRole } from "@shared/types/user";
 
 // 반환 타입 정의
@@ -19,8 +20,10 @@ interface UseSignUpFormReturn {
 
 export function useSignUpForm(): UseSignUpFormReturn {
   const { signUp } = useSignUp();
+  const { user } = useAuthStore();
+  const defaultName = user?.displayName || "";
 
-  const [name, setName] = useState("");
+  const [name, setName] = useState(defaultName);
   const [userRole, setUserRole] = useState("");
   const [experience, setExperience] = useState("");
   const [introduceMyself, setIntroduceMyself] = useState("");
diff --git a/src/entities/user/ui/UserInfoForm.tsx b/src/entities/user/ui/UserInfoForm.tsx
index c2591fe..7342684 100644
--- a/src/entities/user/ui/UserInfoForm.tsx
+++ b/src/entities/user/ui/UserInfoForm.tsx
@@ -14,6 +14,8 @@ import { type JSX } from "react";
 import { useSignUpForm } from "@entities/user/hooks/useSignUpForm";
 import SubmitButton from "@entities/user/ui/SubmitButton";
 
+// import { useAuthStore } from "@shared/stores/authStore";
+
 const UserInfoForm = (): JSX.Element => {
   const {
     name,
@@ -31,13 +33,12 @@ const UserInfoForm = (): JSX.Element => {
       {/* 이름 입력 */}
       <FormControl error={errors.name} variant="outlined" fullWidth>
         <StyledTextField
-          label="🙋 이름 *"
+          label="🙋 닉네임 *"
           variant="outlined"
           value={name}
           onChange={(e) => handleChange("name")(e.target.value)}
           error={errors.name}
           onFocus={() => errors.name && handleChange("name")(name)}
-          placeholder="이름"
           InputLabelProps={{ shrink: true }}
         />
         {errors.name && <ErrorText>이름을 입력해주세요.</ErrorText>}
diff --git a/src/entities/user/ui/user-profile/EmptyProjectCard.tsx b/src/entities/user/ui/user-profile/EmptyProjectCard.tsx
new file mode 100644
index 0000000..d6afdc4
--- /dev/null
+++ b/src/entities/user/ui/user-profile/EmptyProjectCard.tsx
@@ -0,0 +1,98 @@
+import {
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Divider,
+  styled,
+} from "@mui/material";
+import type { JSX } from "react";
+
+import NavigateButton from "@shared/ui/NavigateButton";
+
+interface EmptyProjectCardProps {
+  message: string;
+}
+
+const EmptyProjectCard = ({ message }: EmptyProjectCardProps): JSX.Element => (
+  <StyledCard>
+    <StyledCardContent>
+      <Box
+        flex={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        minHeight={60}
+      >
+        <Typography variant="body1" color="text.secondary" align="center">
+          {message}
+        </Typography>
+      </Box>
+      <StyledDivider />
+      <Box
+        flex={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        minHeight={80}
+        gap={2}
+      >
+        <NavigateButton to="/project">프로젝트 찾기</NavigateButton>
+        <NavigateButton to="/project/insert">프로젝트 등록</NavigateButton>
+      </Box>
+    </StyledCardContent>
+  </StyledCard>
+);
+
+export default EmptyProjectCard;
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  height: "auto",
+  minHeight: 180,
+  maxWidth: 320,
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(1.5, 1.5, 1.5, 1.5),
+
+  "&:hover": {
+    transform: "translateY(-0.4rem)",
+    boxShadow:
+      "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    borderColor: theme.palette.primary.light,
+  },
+
+  [theme.breakpoints.up("sm")]: {
+    flex: 1,
+    maxWidth: 340,
+    "&:hover": {
+      transform: "translateY(-0.6rem)",
+    },
+  },
+
+  [theme.breakpoints.up("md")]: {
+    maxWidth: 360,
+    maxHeight: 320,
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  padding: theme.spacing(2),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+    padding: theme.spacing(2.5),
+  },
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: `${theme.spacing(0.8)} 0`,
+  backgroundColor: theme.palette.divider,
+}));
diff --git a/src/entities/user/ui/user-profile/ProjectTabPanel.tsx b/src/entities/user/ui/user-profile/ProjectTabPanel.tsx
new file mode 100644
index 0000000..211e191
--- /dev/null
+++ b/src/entities/user/ui/user-profile/ProjectTabPanel.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import ProjectCard from "@shared/ui/ProjectCard";
+
+import EmptyProjectCard from "./EmptyProjectCard";
+
+interface ProjectTabPanelProps {
+  projects: ProjectListRes[];
+  emptyMessage: string;
+}
+
+const ProjectTabPanel = ({
+  projects,
+  emptyMessage,
+}: ProjectTabPanelProps): JSX.Element =>
+  projects && projects.length > 0 ? (
+    <Box
+      display="grid"
+      gridTemplateColumns={{
+        xs: "1fr",
+        sm: "repeat(2, 1fr)",
+        md: "repeat(3, 1fr)",
+      }}
+      gap={2}
+    >
+      {projects.slice(0, 3).map((project) => (
+        <ProjectCard key={project.id} project={project} simple />
+      ))}
+    </Box>
+  ) : (
+    <EmptyProjectCard message={emptyMessage} />
+  );
+
+export default ProjectTabPanel;
diff --git a/src/entities/user/ui/user-profile/TapWithBadge.tsx b/src/entities/user/ui/user-profile/TapWithBadge.tsx
new file mode 100644
index 0000000..c43cbfe
--- /dev/null
+++ b/src/entities/user/ui/user-profile/TapWithBadge.tsx
@@ -0,0 +1,37 @@
+import { Badge } from "@mui/material";
+import type { JSX } from "react";
+
+interface TabWithBadgeProps {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+  ProfileTabChip: any;
+}
+
+const TabWithBadge = ({
+  label,
+  count,
+  active,
+  onClick,
+  ProfileTabChip,
+}: TabWithBadgeProps): JSX.Element => (
+  <Badge
+    badgeContent={count}
+    color={active ? "primary" : "secondary"}
+    anchorOrigin={{ vertical: "top", horizontal: "right" }}
+    overlap="rectangular"
+    sx={{
+      "& .MuiBadge-badge": {
+        fontSize: "1.1rem",
+        fontWeight: 700,
+        minWidth: 24,
+        height: 24,
+      },
+    }}
+  >
+    <ProfileTabChip label={label} active={active} clickable onClick={onClick} />
+  </Badge>
+);
+
+export default TabWithBadge;
diff --git a/src/entities/user/ui/user-profile/UserProfileCard.tsx b/src/entities/user/ui/user-profile/UserProfileCard.tsx
new file mode 100644
index 0000000..71ec1b7
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileCard.tsx
@@ -0,0 +1,145 @@
+import SettingsIcon from "@mui/icons-material/Settings";
+import {
+  Box,
+  Avatar,
+  Typography,
+  Card,
+  CardContent,
+  IconButton,
+  Divider,
+} from "@mui/material";
+import { styled as muiStyled } from "@mui/material/styles";
+import type { JSX } from "react";
+
+import TabWithBadge from "./TapWithBadge";
+
+// Chip 컴포넌트는 상위에서 import해서 prop으로 넘겨야 함
+
+interface UserProfileCardProps {
+  userProfile: any;
+  PROFILE_TABS: { label: string; color: string }[];
+  likeProjects: any[];
+  appliedProjects: any[];
+  tab: number;
+  setTab: (idx: number) => void;
+  ProfileTabChip: any;
+}
+
+const userRoleMap: Record<string, string> = {
+  frontend: "프론트엔드",
+  backend: "백엔드",
+  fullstack: "풀스택",
+  designer: "디자이너",
+  pm: "PM",
+};
+const experienceMap: Record<string, string> = {
+  junior: "주니어 (3년 이하)",
+  mid: "미들 (3년 이상 10년 이하)",
+  senior: "시니어 (10년 이상)",
+};
+
+const UserProfileCard = ({
+  userProfile,
+  PROFILE_TABS,
+  likeProjects,
+  appliedProjects,
+  tab,
+  setTab,
+  ProfileTabChip,
+}: UserProfileCardProps): JSX.Element => {
+  return (
+    <ProfileCard>
+      <ProfileCardContent>
+        <ProfileCardHeader>
+          <IconButton size="small" aria-label="프로필 수정">
+            <SettingsIcon />
+          </IconButton>
+        </ProfileCardHeader>
+        <ProfileMainRow>
+          <ProfileAvatar src={userProfile.avatar} />
+          <ProfileInfoCol>
+            <Typography variant="h5" fontWeight={700}>
+              {userProfile.name}
+            </Typography>
+            <Typography>
+              {userRoleMap[userProfile.userRole] || userProfile.userRole}
+            </Typography>
+            <Typography>
+              {experienceMap[userProfile.experience] || userProfile.experience}
+            </Typography>
+          </ProfileInfoCol>
+        </ProfileMainRow>
+        <Box mt={2} width="100%">
+          <Typography>{userProfile.introduceMyself}</Typography>
+        </Box>
+        <Divider sx={{ my: 2 }} />
+        <ProfileEmail>{userProfile.email}</ProfileEmail>
+        <Box mt={2} display="flex" gap={1} justifyContent="center">
+          {PROFILE_TABS.map((tabInfo, idx) => (
+            <TabWithBadge
+              key={tabInfo.label}
+              label={tabInfo.label}
+              count={
+                idx === 0
+                  ? likeProjects?.length || 0
+                  : appliedProjects?.length || 0
+              }
+              active={tab === idx}
+              onClick={() => setTab(idx)}
+              ProfileTabChip={ProfileTabChip}
+            />
+          ))}
+        </Box>
+      </ProfileCardContent>
+    </ProfileCard>
+  );
+};
+
+export default UserProfileCard;
+
+// 스타일 컴포넌트 재사용
+const ProfileCard = muiStyled(Card)(({ theme }) => ({
+  minWidth: 280,
+  maxWidth: 320,
+  borderRadius: 12,
+  boxShadow: theme.shadows[2],
+  position: "relative",
+  padding: 0,
+}));
+const ProfileCardContent = muiStyled(CardContent)(({ theme }) => ({
+  padding: theme.spacing(3),
+  paddingBottom: "16px",
+  "&:last-child": {
+    paddingBottom: "16px",
+  },
+}));
+const ProfileCardHeader = muiStyled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  marginBottom: 8,
+  minHeight: 32,
+});
+const ProfileMainRow = muiStyled(Box)({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 16,
+});
+const ProfileAvatar = muiStyled(Avatar)({
+  width: 100,
+  height: 100,
+  marginBottom: 0,
+});
+const ProfileInfoCol = muiStyled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+const ProfileEmail = muiStyled(Typography)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: "0.95rem",
+  fontStyle: "italic",
+  fontWeight: 400,
+  marginTop: theme.spacing(1),
+}));
diff --git a/src/entities/user/ui/user-profile/UserProfileHeader.tsx b/src/entities/user/ui/user-profile/UserProfileHeader.tsx
new file mode 100644
index 0000000..270fb21
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileHeader.tsx
@@ -0,0 +1,49 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface UserProfileHeaderProps {
+  title?: string;
+  backText?: string;
+  backTo?: string;
+}
+
+const UserProfileHeader = ({
+  title = "마이페이지",
+  backText = "홈으로 돌아가기",
+  backTo = "/",
+}: UserProfileHeaderProps): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <HeadBox>
+      <ClickSpan onClick={() => navigate(backTo)}>
+        <ArrowBackIcon fontSize="small" />
+        {backText}
+      </ClickSpan>
+      <span>/</span>
+      <TitleSpan>{title}</TitleSpan>
+    </HeadBox>
+  );
+};
+
+export default UserProfileHeader;
+
+const HeadBox = styled(Box)`
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  font-size: 14px;
+  gap: 8px;
+`;
+const ClickSpan = styled("span")`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+`;
+const TitleSpan = styled("span")`
+  font-size: 14px;
+  /* 필요시 font-weight, color 등 추가 */
+`;
diff --git a/src/entities/user/ui/user-profile/UserProfileProjectList.tsx b/src/entities/user/ui/user-profile/UserProfileProjectList.tsx
new file mode 100644
index 0000000..2fad7f8
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileProjectList.tsx
@@ -0,0 +1,46 @@
+import { Box, Tabs, Tab } from "@mui/material";
+import type { JSX } from "react";
+
+import ProjectTabPanel from "@entities/user/ui/user-profile/ProjectTabPanel";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+interface UserProfileProjectListProps {
+  PROFILE_TABS: { label: string; color: string }[];
+  tab: number;
+  setTab: (idx: number) => void;
+  likeProjects: ProjectListRes[];
+  appliedProjects: ProjectListRes[];
+}
+
+const UserProfileProjectList = ({
+  PROFILE_TABS,
+  tab,
+  setTab,
+  likeProjects,
+  appliedProjects,
+}: UserProfileProjectListProps): JSX.Element => {
+  return (
+    <Box flex={1}>
+      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 3 }}>
+        {PROFILE_TABS.map((tabInfo, _idx) => (
+          <Tab key={tabInfo.label} label={tabInfo.label} />
+        ))}
+      </Tabs>
+      {tab === 0 && (
+        <ProjectTabPanel
+          projects={likeProjects}
+          emptyMessage="아직 관심 프로젝트가 없습니다."
+        />
+      )}
+      {tab === 1 && (
+        <ProjectTabPanel
+          projects={appliedProjects}
+          emptyMessage="아직 지원한 프로젝트가 없습니다."
+        />
+      )}
+    </Box>
+  );
+};
+
+export default UserProfileProjectList;
diff --git a/src/pages/user-profile/ui/UserProfilePage.tsx b/src/pages/user-profile/ui/UserProfilePage.tsx
index 5051e5a..232e6b7 100644
--- a/src/pages/user-profile/ui/UserProfilePage.tsx
+++ b/src/pages/user-profile/ui/UserProfilePage.tsx
@@ -1,19 +1,29 @@
-import { Box, Avatar, Typography, Paper, Container } from "@mui/material";
+import { Box, Container, Chip as MuiChip } from "@mui/material";
+import { styled as muiStyled } from "@mui/material/styles";
 import type { JSX } from "react";
+import { useState } from "react";
 
 import { useUserProfile } from "@features/auth/hooks/useUserProfile";
 
 import { useProjectsByIds } from "@entities/projects/hook/useProjectsByIds";
-import ProjectCard from "@entities/projects/ui/projects-card/ProjectCard";
+import UserProfileCard from "@entities/user/ui/user-profile/UserProfileCard";
+import UserProfileHeader from "@entities/user/ui/user-profile/UserProfileHeader";
+import UserProfileProjectList from "@entities/user/ui/user-profile/UserProfileProjectList";
 
 import { useAuthStore } from "@shared/stores/authStore";
 
+// 탭 이름 상수 배열
+const PROFILE_TABS = [
+  { label: "관심있는 프로젝트", color: "primary" },
+  { label: "지원한 프로젝트", color: "secondary" },
+];
+
 const UserProfilePage = (): JSX.Element => {
   const { user } = useAuthStore();
   const uid = user?.uid;
   const { data: userProfile } = useUserProfile(uid ?? "");
 
-  // 좋아요/지원한 프로젝트 id 배열
+  // 관심있는/지원한 프로젝트 id 배열
   const likeIds = userProfile?.likeProjects ?? [];
   const appliedIds = userProfile?.appliedProjects ?? [];
 
@@ -23,98 +33,66 @@ const UserProfilePage = (): JSX.Element => {
   console.log(likeProjects);
   console.log(appliedProjects);
 
+  const [tab, setTab] = useState(0);
   if (!userProfile) {
     return <div>UserProfilePage</div>;
   }
 
   return (
-    <Container
-      maxWidth="lg"
-      sx={{
-        py: { xs: 2, sm: 4, md: 6 },
-        backgroundColor: (theme) => theme.palette.background.default,
-        height: "100dvh",
-      }}
-    >
-      {/* 프로필 헤더 + 자기소개 */}
-      <Box
-        display="flex"
-        flexDirection={{ xs: "column", md: "row" }}
-        gap={3}
-        mb={3}
-      >
-        <Paper elevation={2} sx={{ p: 3, flex: 1 }}>
-          <Box display="flex" alignItems="center" gap={3}>
-            <Avatar src={userProfile.avatar} sx={{ width: 80, height: 80 }} />
-            <Box>
-              <Typography variant="h5" fontWeight={700}>
-                {userProfile.name}
-              </Typography>
-              <Typography color="text.secondary">
-                {userProfile.email}
-              </Typography>
-              <Typography>역할: {userProfile.userRole}</Typography>
-              <Typography>경력: {userProfile.experience}</Typography>
-            </Box>
-          </Box>
-        </Paper>
-        <Paper elevation={1} sx={{ p: 2, flex: 1 }}>
-          <Typography variant="subtitle1" fontWeight={600} mb={1}>
-            자기소개
-          </Typography>
-          <Typography>{userProfile.introduceMyself}</Typography>
-        </Paper>
-      </Box>
-
-      {/* 좋아요한 프로젝트 */}
-      <Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
-        <Box flex={1}>
-          <Typography variant="h6" mb={2}>
-            좋아요한 프로젝트
-          </Typography>
-          <Box
-            sx={{
-              maxHeight: 580,
-              overflowY: "auto",
-              display: "flex",
-              flexDirection: "column",
-              gap: 2,
-              backgroundColor: (theme) => theme.palette.background.default,
-              borderRadius: 2,
-              p: 2,
-            }}
-          >
-            {likeProjects?.map((project) => (
-              <ProjectCard key={project.id} project={project} simple />
-            ))}
-          </Box>
-        </Box>
-
-        {/* 지원한 프로젝트 */}
-        <Box flex={1}>
-          <Typography variant="h6" mb={2}>
-            지원한 프로젝트
-          </Typography>
-          <Box
-            sx={{
-              maxHeight: 580,
-              overflowY: "auto",
-              display: "flex",
-              flexDirection: "column",
-              gap: 2,
-              backgroundColor: (theme) => theme.palette.background.default,
-              borderRadius: 2,
-              p: 2,
-            }}
-          >
-            {appliedProjects?.map((project) => (
-              <ProjectCard key={project.id} project={project} simple />
-            ))}
-          </Box>
-        </Box>
+    <MainContainer maxWidth="lg">
+      <UserProfileHeader />
+      <Box display="flex" gap={4}>
+        {/* 왼쪽 프로필 사이드바 */}
+        <UserProfileCard
+          userProfile={userProfile}
+          PROFILE_TABS={PROFILE_TABS}
+          likeProjects={likeProjects ?? []}
+          appliedProjects={appliedProjects ?? []}
+          tab={tab}
+          setTab={setTab}
+          ProfileTabChip={ProfileTabChip}
+        />
+        {/* 오른쪽 메인: 탭 + 프로젝트 카드 */}
+        <UserProfileProjectList
+          PROFILE_TABS={PROFILE_TABS}
+          tab={tab}
+          setTab={setTab}
+          likeProjects={likeProjects ?? []}
+          appliedProjects={appliedProjects ?? []}
+        />
       </Box>
-    </Container>
+    </MainContainer>
   );
 };
 
 export default UserProfilePage;
+
+const MainContainer = muiStyled(Container)(({ theme }) => ({
+  paddingBottom: theme.spacing(2),
+  [theme.breakpoints.up("sm")]: {
+    paddingBottom: theme.spacing(4),
+  },
+  [theme.breakpoints.up("md")]: {
+    paddingBottom: theme.spacing(6),
+  },
+  backgroundColor: theme.palette.background.default,
+  minHeight: "100dvh",
+}));
+
+// 커스텀 Chip: 액티브일 때만 border, 글씨색 파란색, 배경은 그대로
+const ProfileTabChip = muiStyled(MuiChip, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{
+  active?: boolean;
+}>(({ theme, active }) => ({
+  borderColor: active ? theme.palette.primary.main : theme.palette.divider,
+  color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+  backgroundColor: theme.palette.background.paper,
+  fontWeight: 600,
+  fontSize: "0.98rem",
+  borderWidth: 1,
+  borderStyle: "solid",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
diff --git a/src/shared/ui/NavigateButton.tsx b/src/shared/ui/NavigateButton.tsx
new file mode 100644
index 0000000..48ef59b
--- /dev/null
+++ b/src/shared/ui/NavigateButton.tsx
@@ -0,0 +1,47 @@
+import { Button, styled } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface NavigateButtonProps {
+  to: string;
+  children: React.ReactNode;
+  sx?: any;
+}
+
+const NavigateButton = ({
+  to,
+  children,
+  sx,
+}: NavigateButtonProps): JSX.Element => {
+  const navigate = useNavigate();
+  const handleClick = (): void => {
+    navigate(to);
+  };
+  return (
+    <StyledButton
+      variant="contained"
+      color="primary"
+      onClick={handleClick}
+      sx={sx}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+export default NavigateButton;
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  borderRadius: theme.spacing(0.8),
+  boxShadow: "none",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    transform: "translateY(-0.1rem)",
+    boxShadow: "0 4px 8px -2px rgba(37, 99, 235, 0.3)",
+  },
+  "&:active": {
+    transform: "translateY(0)",
+  },
+}));
diff --git a/src/shared/ui/ProjectCard.tsx b/src/shared/ui/ProjectCard.tsx
new file mode 100644
index 0000000..5b68c63
--- /dev/null
+++ b/src/shared/ui/ProjectCard.tsx
@@ -0,0 +1,283 @@
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import LocationPinIcon from "@mui/icons-material/LocationPin";
+import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
+import {
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+  Stack,
+  styled,
+  Typography,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import type { JSX } from "react";
+import { memo } from "react";
+import { Link } from "react-router-dom";
+
+import { type ProjectListRes } from "@shared/types/project";
+import DragScrollContainer from "@shared/ui/DragScrollContainer";
+import UserProfileAvatar from "@shared/ui/user/UserProfileAvatar";
+import UserProfileWithNamePosition from "@shared/ui/user/UserProfileWithNamePosition";
+
+// 여러곳에서 사용될 것 같아서 shared로 빼놓음 (현재 경로 @shared/ui/ProjectCard.tsx)
+// 기존 entities/projects/ui/projects-card/ProjectCard.tsx 는 사용하시는 분들 오류가 있을 것 같아 파일 삭제하지 않음
+// 해당 경로로 import 하고 계신분들은 확인하시고 경로수정 확인 바래요!
+
+interface ProjectCardProps {
+  project: ProjectListRes;
+  simple?: boolean;
+  sx?: any;
+}
+
+const ProjectCard = ({
+  project,
+  simple = false,
+  sx,
+}: ProjectCardProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.up("sm"));
+
+  return (
+    <StyledCard sx={{ ...(simple && { minHeight: 260 }), ...sx }}>
+      <StyledCardContent>
+        <ProjectHeader>
+          <StatusChip label={project.status} color="primary" size="small" />
+        </ProjectHeader>
+
+        <ContentSection>
+          <ProjectTitle variant="h5" fontWeight={700}>
+            {project.title}
+          </ProjectTitle>
+          {!simple && (
+            <>
+              <OneLineInfo variant="body1" color="primary" fontWeight={600}>
+                {project.oneLineInfo}
+              </OneLineInfo>
+              <SimpleInfo variant="body2" color="text.secondary">
+                {project.simpleInfo}
+              </SimpleInfo>
+            </>
+          )}
+        </ContentSection>
+        <Stack flexDirection={"row"} gap={"0.8rem"} alignItems={"flex-start"}>
+          {isMobile ? (
+            <UserProfileAvatar
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              avatar={project.projectOwner.avatar}
+              flexDirection="row"
+            />
+          ) : (
+            <UserProfileWithNamePosition
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              flexDirection="row"
+            />
+          )}
+        </Stack>
+        {!simple && (
+          <DragScrollContainer>
+            {project.techStack.map((stack, index) => (
+              <TechChip key={index} label={stack} size="small" />
+            ))}
+          </DragScrollContainer>
+        )}
+
+        {!simple && (
+          <ProjectDetails>
+            <DetailItem>
+              <PeopleAltIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.teamSize}명
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <AccessTimeIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.expectedPeriod}
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <LocationPinIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                온라인
+              </Typography>
+            </DetailItem>
+          </ProjectDetails>
+        )}
+
+        <StyledDivider />
+
+        <FooterSection>
+          <Typography variant="body1" color="textPrimary">
+            <TextHighlight>{project.applicants.length}명</TextHighlight> 지원
+          </Typography>
+          <StyledLink to={`/project/${project.id}`}>
+            <ActionButton variant="contained" color="primary" size="medium">
+              자세히 보기
+            </ActionButton>
+          </StyledLink>
+        </FooterSection>
+      </StyledCardContent>
+    </StyledCard>
+  );
+};
+
+export default memo(ProjectCard);
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  height: "100%",
+  flex: 1,
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  border: `1px solid ${theme.palette.divider}`,
+
+  "&:hover": {
+    transform: "translateY(-0.4rem)",
+    boxShadow:
+      "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    borderColor: theme.palette.primary.light,
+  },
+
+  [theme.breakpoints.up("sm")]: {
+    flex: 1,
+    "&:hover": {
+      transform: "translateY(-0.6rem)",
+    },
+  },
+
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "48rem",
+    maxHeight: "54rem",
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const ProjectHeader = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+}));
+
+const StatusChip = styled(Chip)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+
+  "&:hover": {
+    backgroundColor: theme.palette.primary.dark,
+  },
+}));
+
+const ContentSection = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.8),
+}));
+
+const ProjectTitle = styled(Typography)(({ theme }) => ({
+  lineHeight: 1.3,
+  letterSpacing: "-0.015em",
+  color: theme.palette.text.primary,
+}));
+
+const OneLineInfo = styled(Typography)(() => ({
+  lineHeight: 1.4,
+  fontWeight: 600,
+}));
+
+const SimpleInfo = styled(Typography)(() => ({
+  lineHeight: 1.5,
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+}));
+
+const TechChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  border: `1px solid ${theme.palette.divider}`,
+  fontWeight: 500,
+  fontSize: "1.1rem",
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+
+  [theme.breakpoints.up("sm")]: {
+    fontSize: "1.2rem",
+  },
+}));
+
+const ProjectDetails = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: theme.spacing(1.6),
+  marginTop: theme.spacing(0.8),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const DetailItem = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(0.6),
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: `${theme.spacing(0.8)} 0`,
+  backgroundColor: theme.palette.divider,
+}));
+
+const FooterSection = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginTop: "auto",
+  gap: theme.spacing(1.2),
+}));
+
+const StyledLink = styled(Link)(() => ({
+  textDecoration: "none",
+  flexShrink: 0,
+}));
+
+const ActionButton = styled(Button)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  borderRadius: theme.spacing(0.8),
+  boxShadow: "none",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+
+  "&:hover": {
+    transform: "translateY(-0.1rem)",
+    boxShadow: "0 4px 8px -2px rgba(37, 99, 235, 0.3)",
+  },
+
+  "&:active": {
+    transform: "translateY(0)",
+  },
+}));
+
+const TextHighlight = styled("span")(({ theme }) => ({
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+}));
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
index fdf07c9..228a4cb 100644
--- a/src/widgets/Header/Header.tsx
+++ b/src/widgets/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, styled } from "@mui/material";
+import { Box, styled, Avatar, Button } from "@mui/material";
 import type { JSX } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -13,15 +13,32 @@ const Header = (): JSX.Element => {
 
   return (
     <HeaderContainer>
-      <h1>Project Jam</h1>
-      <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
-        {user && (
-          <button type="button" onClick={() => navigate("/profile")}>
-            내 프로필
-          </button>
+      <LogoBox onClick={() => navigate("/")}>
+        {/* 로고 이미지가 있으면 아래 img src 수정 */}
+        {/* <img src="/logo.svg" alt="로고" style={{ height: 32, marginRight: 8 }} /> */}
+        <span style={{ fontWeight: 700, fontSize: "2rem" }}>프로젝트 잼</span>
+      </LogoBox>
+      <NavBox>
+        <NavButton onClick={() => navigate("/project")}>
+          프로젝트 찾기
+        </NavButton>
+        <NavButton onClick={() => navigate("/project/insert")}>
+          프로젝트 등록
+        </NavButton>
+        {user ? (
+          <>
+            <Avatar
+              src={user.photoURL || ""}
+              alt={user.displayName || "profile"}
+              sx={{ width: 36, height: 36, cursor: "pointer", ml: 2 }}
+              onClick={() => navigate("/profile")}
+            />
+            <LogoutButton />
+          </>
+        ) : (
+          <LoginButton />
         )}
-        {user ? <LogoutButton /> : <LoginButton />}
-      </div>
+      </NavBox>
     </HeaderContainer>
   );
 };
@@ -34,4 +51,28 @@ const HeaderContainer = styled(Box)({
   alignItems: "center",
   padding: "0 2rem",
   backgroundColor: "#f5f5f5",
+  height: "64px",
+});
+
+const LogoBox = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+});
+
+const NavBox = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: "1.5rem",
+});
+
+const NavButton = styled(Button)({
+  background: "none",
+  color: "#3b36f4",
+  fontWeight: 600,
+  fontSize: "1.1rem",
+  boxShadow: "none",
+  "&:hover": {
+    background: "rgba(59,54,244,0.08)",
+  },
 });