diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index bf278671..68f126a3 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -9,7 +9,7 @@ export function Layout({
   return <Main css={moreStyle}>{children}</Main>;
 }
 
-const Main = styled.div<{ moreStyle?: CSSProperties }>`
+const Main = styled.div<{ moreStyle?: SerializedStyles }>`
   display: flex;
   flex-direction: column;
 `;
diff --git a/src/lib/api/remote/project.ts b/src/lib/api/remote/project.ts
index 72179b43..0cc85914 100644
--- a/src/lib/api/remote/project.ts
+++ b/src/lib/api/remote/project.ts
@@ -18,9 +18,9 @@ const getProjectDetail = async (projectId: number): Promise<GetProjectDetailResp
   const { data } = await client.get(`/projects/${projectId}`);
   const dataServiceType = data.serviceType;
 
-  const serviceTypes = Array.isArray(dataServiceType) ? dataServiceType : [dataServiceType];
+  const serviceType = Array.isArray(dataServiceType) ? dataServiceType : [dataServiceType];
 
-  return { project: { ...data, serviceTypes } };
+  return { project: { ...data, serviceType } };
 };
 
 const getProjectList = async (
diff --git a/src/lib/constants/project.ts b/src/lib/constants/project.ts
index 938d7241..bc1cd2f1 100644
--- a/src/lib/constants/project.ts
+++ b/src/lib/constants/project.ts
@@ -12,9 +12,6 @@ export const projectCategoryLabel: Record<ProjectCategoryType, string> = {
   [ProjectCategoryType.APPJAM]: '앱잼',
   [ProjectCategoryType.SOPKATHON]: '솝커톤',
   [ProjectCategoryType.SOPTERM]: '솝텀',
-  [ProjectCategoryType.STUDY]: '스터디',
-  [ProjectCategoryType.JOINTSEMINAR]: '합동 세미나',
-  [ProjectCategoryType.ETC]: '기타',
 };
 
 export const projectCategoryDescription: Record<ProjectCategoryType, string> = {
@@ -25,11 +22,6 @@ export const projectCategoryDescription: Record<ProjectCategoryType, string> = {
     '무박 2일간의 해커톤을 통해 아이디어를 빠르게 프로덕트로 만들어보는 프로젝트, SOPKATHON',
   [ProjectCategoryType.SOPTERM]:
     '4개월간의 장기 협업을 통해 한 개의 온전한 프로덕트를 만드는 프로젝트, SOPT-TERM',
-  [ProjectCategoryType.STUDY]:
-    '2개월간 지식 공유를 진행하며 아이디어를 시각화 하거나 프로덕트로 만들어보는 프로젝트, 스터디',
-  [ProjectCategoryType.JOINTSEMINAR]:
-    '기획, 디자인, 개발 파트가 배운 내용을 통해 간단한 아이디어를 시각화 해보는 프로젝트, 합동 세미나',
-  [ProjectCategoryType.ETC]: '',
 };
 
 export const activeProjectPlatformList: ProjectPlatformType[] = [
diff --git a/src/lib/types/project.ts b/src/lib/types/project.ts
index a94c5525..1e2360bc 100644
--- a/src/lib/types/project.ts
+++ b/src/lib/types/project.ts
@@ -9,9 +9,6 @@ export enum ProjectCategoryType {
   APPJAM = 'APPJAM',
   SOPKATHON = 'SOPKATHON',
   SOPTERM = 'SOPTERM',
-  STUDY = 'STUDY',
-  JOINTSEMINAR = 'JOINTSEMINAR',
-  ETC = 'ETC',
 }
 
 export enum LinkType {
@@ -47,7 +44,7 @@ export interface ProjectType {
   thumbnailImage?: string;
   members: ProjectMemberType[];
   name: string;
-  serviceTypes: string[];
+  serviceType: string[];
   startAt: string;
   endAt: string;
   summary: string;
diff --git a/src/pages/project/[id]/index.tsx b/src/pages/project/[id]/index.tsx
index 9486649d..87320918 100644
--- a/src/pages/project/[id]/index.tsx
+++ b/src/pages/project/[id]/index.tsx
@@ -31,7 +31,7 @@ function ProjectDetailPage({ project }: GetProjectDetailResponse) {
     name,
     summary,
     generation,
-    serviceTypes,
+    serviceType,
     startAt,
     endAt,
     isFounding,
@@ -87,7 +87,7 @@ function ProjectDetailPage({ project }: GetProjectDetailResponse) {
                         </span>
                         <span>{generation ? generation + '기' : '-'}</span>
                         <span>
-                          {serviceTypes
+                          {serviceType
                             .map((type: string) => (type === 'WEB' ? '웹' : '앱'))
                             .join(', ')}
                         </span>
diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
index ce27ca29..4df249be 100644
--- a/src/views/ProjectPage/ProjectPage.tsx
+++ b/src/views/ProjectPage/ProjectPage.tsx
@@ -9,7 +9,7 @@ import {
   projectPlatformLabel,
 } from '@src/lib/constants/project';
 import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
-import { ProjectList } from './components';
+import { ProjectList } from '@src/views/ProjectPage/components/project/ProjectList';
 import RecentProjectList from './components/RecentProjectList';
 import useFetch from './hooks/useFetch';
 import S from './styles';
diff --git a/src/views/ProjectPage/components/index.ts b/src/views/ProjectPage/components/index.ts
index 48f56fe5..2850d477 100644
--- a/src/views/ProjectPage/components/index.ts
+++ b/src/views/ProjectPage/components/index.ts
@@ -1,3 +1,2 @@
 export * from './common/EmptyContent';
 export * from './common/OvalSpinner';
-export * from './project';
diff --git a/src/views/ProjectPage/components/project/ProjectCard.tsx b/src/views/ProjectPage/components/project/ProjectCard.tsx
deleted file mode 100644
index 53df4819..00000000
--- a/src/views/ProjectPage/components/project/ProjectCard.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { track } from '@amplitude/analytics-browser';
-import styled from '@emotion/styled';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useIsDesktop, useIsMobile, useIsTablet } from '@src/hooks/useDevice';
-import { GTM_CLASS } from '@src/lib/constants/gtmClass';
-import { LinkType, ProjectType } from '@src/lib/types/project';
-import shortid from 'shortid';
-import { ReactComponent as AppStore } from '../../assets/app-store-40x40.svg';
-import { ReactComponent as Github } from '../../assets/github-40x40.svg';
-import { ReactComponent as Instagram } from '../../assets/instagram-30x30.svg';
-import { ReactComponent as PlayStore } from '../../assets/play-store-40x40.svg';
-import { ReactComponent as Web } from '../../assets/website-40x40.svg';
-import { ReactComponent as Youtube } from '../../assets/youtube-30x30.svg';
-import styles from './project-card.module.scss';
-
-export function ProjectCard({ project }: { project: ProjectType }) {
-  return (
-    <Link href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>
-      <article className={`${styles.item} ${GTM_CLASS.projectCard}`}>
-        {RepresentativeImageRender(project.name, project.logoImage, project?.thumbnailImage)}
-        <div className={`${styles.content} ${GTM_CLASS.projectCard}`}>
-          <div className={`${styles.types} ${GTM_CLASS.projectCard}`}>
-            {ServiceTypeRender(project.serviceTypes)}
-            {GenerationRender(project?.generation)}
-          </div>
-          <div className={`${styles.text} ${GTM_CLASS.projectCard}`}>
-            {TitleRender(project.name)}
-            {SummaryRender(project.summary)}
-          </div>
-          <div className={`${styles.links} ${GTM_CLASS.projectCard}`}>
-            {project.link
-              ?.filter((project, index) => project?.title?.length > 0 && index <= 3)
-              .map(({ title, url }) => {
-                return <div key={shortid.generate()}>{LinkRender(title, url)}</div>;
-              })}
-          </div>
-        </div>
-      </article>
-    </Link>
-  );
-}
-
-function RepresentativeImageRender(name: string, logoImage: string, thumbnailImage?: string) {
-  const isDesktop = useIsDesktop();
-  const isTablet = useIsTablet();
-  const isMobile = useIsMobile();
-
-  return (
-    <div className={styles['image-wrapper']}>
-      {isDesktop && ProjectCardDesktopImage(name, logoImage, thumbnailImage)}
-      {isTablet && ProjectCardMobileImage(name, logoImage, thumbnailImage)}
-      {isMobile && ProjectCardMobileImage(name, logoImage, thumbnailImage)}
-    </div>
-  );
-}
-
-function ProjectCardMobileImage(name: string, logoImage: string, thumbnailImage?: string) {
-  const isCardThumbnail = thumbnailImage && thumbnailImage?.length > 0;
-  return (
-    <>
-      {isCardThumbnail && (
-        <StyledThumbnail
-          className={`${GTM_CLASS.projectCard}`}
-          src={thumbnailImage}
-          alt={`${name} 프로젝트 썸네일`}
-          fill
-          sizes="100%"
-        />
-      )}
-      {!isCardThumbnail && (
-        <Image
-          className={`${GTM_CLASS.projectCard}`}
-          src={logoImage}
-          width={100}
-          height={100}
-          alt={`${name} 프로젝트 로고`}
-        />
-      )}
-    </>
-  );
-}
-
-const StyledThumbnail = styled(Image)`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-
-function ProjectCardDesktopImage(name: string, logoImage: string, thumbnailImage?: string) {
-  const isCardThumbnail = thumbnailImage && thumbnailImage?.length > 0;
-  return (
-    <>
-      {isCardThumbnail && (
-        <Image
-          className={`${GTM_CLASS.projectCard}`}
-          src={thumbnailImage}
-          width={368}
-          height={208}
-          alt={`${name} 프로젝트 썸네일`}
-        />
-      )}
-      {!isCardThumbnail && (
-        <Image
-          className={`${GTM_CLASS.projectCard}`}
-          src={logoImage}
-          width={100}
-          height={100}
-          alt={`${name} 프로젝트 로고`}
-        />
-      )}
-    </>
-  );
-}
-
-function ServiceTypeRender(serviceTypes: string[]) {
-  const convertEngToKorean = (text: string) => {
-    switch (text) {
-      case 'APP':
-        return '앱';
-      case 'WEB':
-        return '웹';
-      default:
-        throw new Error('앱 또는 웹 타입이 아닙니다');
-    }
-  };
-
-  return serviceTypes?.map((type) => {
-    return <div key={shortid.generate()}>{convertEngToKorean(type)}</div>;
-  });
-}
-
-function GenerationRender(generation?: number) {
-  return generation ? <div>{generation}기</div> : <></>;
-}
-
-function TitleRender(text: string) {
-  const titleWithoutParentheses = text.replace(/ *\([^)]*\) */g, '');
-  if (titleWithoutParentheses.length > 12) {
-    return (
-      <h5 className={`${GTM_CLASS.projectCard}`}>{titleWithoutParentheses.slice(0, 12) + '...'}</h5>
-    );
-  }
-  return <h5 className={`${GTM_CLASS.projectCard}`}>{titleWithoutParentheses}</h5>;
-}
-
-function SummaryRender(text: string) {
-  return text.length > 20 ? (
-    <p className={`${GTM_CLASS.projectCard}`}>{text.slice(0, 20) + '...'} </p>
-  ) : (
-    <p className={`${GTM_CLASS.projectCard}`}>{text}</p>
-  );
-}
-
-function LinkRender(link: LinkType, url: string) {
-  return (
-    <div
-      className={styles['icon-wrapper']}
-      onClick={(e) => {
-        window.open(url);
-        e.stopPropagation();
-      }}
-    >
-      {(() => {
-        switch (link) {
-          case LinkType.웹사이트:
-            return <Web />;
-          case LinkType['앱 스토어']:
-            return <AppStore />;
-          case LinkType['구글 플레이스토어']:
-            return <PlayStore />;
-          case LinkType.Github:
-            return <Github />;
-          case LinkType.instagram:
-            return <Instagram />;
-          case LinkType.발표영상:
-          case LinkType['기타 관련자료']:
-            return <Youtube />;
-        }
-      })()}
-    </div>
-  );
-}
diff --git a/src/views/ProjectPage/components/project/ProjectCard/index.tsx b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
new file mode 100644
index 00000000..7fe1835b
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
@@ -0,0 +1,50 @@
+import { track } from '@amplitude/analytics-browser';
+import { useIsMobile } from '@src/hooks/useDevice';
+import { ProjectType } from '@src/lib/types/project';
+import * as S from './style';
+
+export default function ProjectCard({ project }: { project: ProjectType }) {
+  const isMobile = useIsMobile('899px');
+
+  return (
+    <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>
+      {!isMobile && (
+        <S.ProjectThumbnail
+          src={project.thumbnailImage ?? project.logoImage}
+          alt="프로젝트 썸네일"
+          width={324}
+          height={192}
+          loading="lazy"
+          placeholder="blur"
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
+        />
+      )}
+      <S.ProjectContent>
+        <S.ProjectHeader>
+          {isMobile && (
+            <S.ProjectThumbnail
+              src={project.logoImage}
+              alt="프로젝트 로고"
+              width={40}
+              height={40}
+              loading="lazy"
+              placeholder="blur"
+              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
+            />
+          )}
+          <S.ProjectText>
+            <S.ProjectTitle>{project.name}</S.ProjectTitle>
+            {project.serviceType.map((type, index) => (
+              <S.ProjectType key={type}>
+                <span>{type}</span>
+                {project.serviceType.length - 1 !== index && <S.Divider>∙</S.Divider>}
+              </S.ProjectType>
+            ))}
+          </S.ProjectText>
+        </S.ProjectHeader>
+        <S.ProjectSummary>{project.summary}</S.ProjectSummary>
+      </S.ProjectContent>
+      {/* TODO: 서비스 이용 가능 및 창업 정보와 멤버 정보 추가 필요  */}
+    </S.ProjectCard>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectCard/style.ts b/src/views/ProjectPage/components/project/ProjectCard/style.ts
new file mode 100644
index 00000000..6114f00d
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCard/style.ts
@@ -0,0 +1,112 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export const ProjectCard = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  width: 352px;
+  /* height: 345px; */
+  padding: 14px;
+  border: 1px solid ${colors.gray700};
+  border-radius: 20px;
+
+  cursor: pointer;
+
+  @media (max-width: 899px) {
+    width: 100%;
+    padding: 0 0 10px 0;
+    border: none;
+    border-bottom: 1px solid ${colors.gray900};
+    border-radius: 0;
+  }
+`;
+
+export const ProjectThumbnail = styled(Image)`
+  border-radius: 8px;
+
+  object-fit: cover;
+`;
+
+export const ProjectContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  @media (max-width: 899px) {
+    gap: 12px;
+  }
+`;
+
+export const ProjectHeader = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+export const ProjectText = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const ProjectTitle = styled.div`
+  color: ${colors.gray10};
+
+  /* Heading/6_B */
+  font-family: SUIT;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 155.556% */
+  letter-spacing: -0.36px;
+`;
+
+export const ProjectType = styled.div`
+  color: ${colors.gray400};
+
+  /* Label/3_SB */
+  font-family: SUIT;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: -0.24px;
+`;
+
+export const Divider = styled.span`
+  padding: 0 2px 0 2px;
+`;
+
+export const ProjectSummary = styled.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+
+  height: 44px;
+  color: ${colors.gray50};
+
+  /* Body/3_R */
+  font-family: SUIT;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
+  letter-spacing: -0.21px;
+
+  @media (max-width: 899px) {
+    height: auto;
+    color: ${colors.gray30};
+
+    /* Body/4_R */
+    font-family: SUIT;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 153.846% */
+    letter-spacing: -0.195px;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
new file mode 100644
index 00000000..4b331734
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
@@ -0,0 +1,30 @@
+import { ProjectType } from '@src/lib/types/project';
+import { OvalSpinner } from '@src/views/ProjectPage/components/common/OvalSpinner';
+import ProjectCard from '@src/views/ProjectPage/components/project/ProjectCard';
+import { useInfiniteScroll } from '@src/views/ProjectPage/hooks/useInfiniteScroll';
+import * as S from './style';
+
+interface ProjectCardList {
+  projectList: ProjectType[];
+}
+
+export default function ProjectCardList({ projectList }: ProjectCardList) {
+  const { data, isNextPage, ref } = useInfiniteScroll(projectList);
+
+  return (
+    <>
+      <S.CardList>
+        {data.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
+      </S.CardList>
+      {isNextPage && (
+        <div ref={ref}>
+          <div>
+            <OvalSpinner />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/style.ts b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
new file mode 100644
index 00000000..a236299e
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export const CardList = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 50px 28px;
+  width: 1112px;
+
+  @media (max-width: 1279px) and (min-width: 900px) {
+    grid-template-columns: 1fr 1fr;
+    width: 732px;
+  }
+
+  @media (max-width: 899px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    width: 100%;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/ProjectCategoryDescription/index.tsx b/src/views/ProjectPage/components/project/ProjectCategoryDescription/index.tsx
new file mode 100644
index 00000000..563fe4a2
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCategoryDescription/index.tsx
@@ -0,0 +1,21 @@
+import { projectCategoryDescription } from '@src/lib/constants/project';
+import { ProjectCategoryType } from '@src/lib/types/project';
+import * as S from './style';
+
+export interface ProjectCategoryDescriptionProps {
+  selectedCategory: ProjectCategoryType;
+}
+
+export default function ProjectCategoryDescription({
+  selectedCategory,
+}: ProjectCategoryDescriptionProps) {
+  if (selectedCategory === ProjectCategoryType.ALL) {
+    return <></>;
+  }
+
+  return (
+    <S.Description selectedCategory={selectedCategory}>
+      {projectCategoryDescription[selectedCategory]}
+    </S.Description>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectCategoryDescription/style.ts b/src/views/ProjectPage/components/project/ProjectCategoryDescription/style.ts
new file mode 100644
index 00000000..cc10a940
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCategoryDescription/style.ts
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { ProjectCategoryDescriptionProps } from '@src/views/ProjectPage/components/project/ProjectCategoryDescription';
+
+export const Description = styled.div<ProjectCategoryDescriptionProps>`
+  color: ${colors.gray100};
+
+  /* Body/1_Medium_18 */
+  font-family: SUIT;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 165%; /* 29.7px */
+  letter-spacing: -0.27px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    padding: 16px;
+    border-radius: 12px;
+    background: ${colors.gray800};
+
+    color: ${colors.gray30};
+
+    /* Body/3_Medium_14 */
+    font-family: SUIT;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 165%; /* 23.1px */
+    letter-spacing: -0.21px;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/ProjectEnrollSection.tsx b/src/views/ProjectPage/components/project/ProjectEnrollSection.tsx
deleted file mode 100644
index 8619bcf5..00000000
--- a/src/views/ProjectPage/components/project/ProjectEnrollSection.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ReactComponent as RightArrow } from '@src/assets/icons/arrow_right_24x24.svg';
-import styles from './project-enroll.module.scss';
-
-export function ProjectEnrollSection() {
-  const handleProjectEnroll = (e: React.MouseEvent) => {
-    window.open('https://playground.sopt.org/projects');
-    e.stopPropagation();
-  };
-
-  return (
-    <section className={styles.enroll}>
-      <p>혹시 SOPT 회원으로 진행한 프로젝트가 있다면?</p>
-      <div className={styles.content} onClick={handleProjectEnroll}>
-        <span>프로젝트 올리러 가기</span>
-        <RightArrow />
-      </div>
-    </section>
-  );
-}
diff --git a/src/views/ProjectPage/components/project/ProjectList.tsx b/src/views/ProjectPage/components/project/ProjectList.tsx
index d9e26b57..7446a099 100644
--- a/src/views/ProjectPage/components/project/ProjectList.tsx
+++ b/src/views/ProjectPage/components/project/ProjectList.tsx
@@ -1,13 +1,12 @@
 import { Condition } from '@src/components/common/Condition';
 import { State } from '@src/hooks/useFetchBase/types';
-import { projectCategoryDescription } from '@src/lib/constants/project';
 import { ProjectCategoryType, ProjectType } from '@src/lib/types/project';
-import cc from 'classcat';
-import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
+import ProjectCardList from '@src/views/ProjectPage/components/project/ProjectCardList';
+import ProjectCategoryDescription from '@src/views/ProjectPage/components/project/ProjectCategoryDescription';
+import ProjectListCount from '@src/views/ProjectPage/components/project/ProjectListCount';
 import { EmptyContent } from '../common/EmptyContent';
-import { OvalSpinner } from '../common/OvalSpinner';
-import { ProjectCard, ProjectEnrollSection } from '../project';
 import styles from './project-list.module.scss';
+import * as S from './style';
 
 interface ProjectListProp {
   state: State<ProjectType[]>;
@@ -16,18 +15,15 @@ interface ProjectListProp {
 
 export function ProjectList({ selectedCategory, state }: ProjectListProp) {
   return (
-    <div className={cc([styles['total-container']])}>
+    <div>
       {(() => {
         switch (state._TAG) {
           case 'IDLE':
           case 'LOADING':
             return (
-              <div className={styles['list-container']}>
-                <div className={styles['selection-description']}>
-                  {ProjectCategoryDescription(selectedCategory)}
-                </div>
+              <div>
+                <ProjectCategoryDescription selectedCategory={selectedCategory} />
                 {ProjectListSkeletonUI()}
-                <ProjectEnrollSection />
               </div>
             );
           case 'ERROR':
@@ -36,19 +32,18 @@ export function ProjectList({ selectedCategory, state }: ProjectListProp) {
             const { data: projectList } = state;
             const listLength = projectList.length;
             return (
-              <div className={styles['list-container']}>
+              <div>
                 <Condition statement={listLength > 0}>
-                  <div className={styles['selection-description']}>
-                    {ProjectCategoryDescription(selectedCategory)}
-                    {ProjectListCount(listLength)}
-                  </div>
-                  {ProjectCardList(projectList)}
+                  <S.ProjectListHeader selectedCategory={selectedCategory}>
+                    <ProjectCategoryDescription selectedCategory={selectedCategory} />
+                    <ProjectListCount count={listLength} />
+                  </S.ProjectListHeader>
+                  <ProjectCardList projectList={projectList} />
                 </Condition>
                 <Condition statement={listLength === 0}>
-                  {ProjectCategoryDescription(selectedCategory)}
+                  <ProjectCategoryDescription selectedCategory={selectedCategory} />
                   <EmptyContent />
                 </Condition>
-                <ProjectEnrollSection />
               </div>
             );
           }
@@ -58,37 +53,6 @@ export function ProjectList({ selectedCategory, state }: ProjectListProp) {
   );
 }
 
-function ProjectCardList(list: ProjectType[]) {
-  const { data, isNextPage, ref } = useInfiniteScroll(list);
-
-  return (
-    <>
-      <section className={styles['card-list']}>
-        {data.map((project, index) => (
-          <ProjectCard key={index} project={project} />
-        ))}
-      </section>
-      {isNextPage && (
-        <div className={styles['observered']} ref={ref}>
-          <div className={styles['spinner']}>
-            <OvalSpinner />
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-function ProjectListCount(count: number) {
-  return <div className={styles['list-count']}>{count}개의 프로젝트</div>;
-}
-
-function ProjectCategoryDescription(category: ProjectCategoryType) {
-  const description = projectCategoryDescription[category];
-  if (description === '') return <p />;
-  return <p className={styles['category-description']}>{description}</p>;
-}
-
 function ProjectListSkeletonUI() {
   const array = new Array(9).fill(undefined);
   return (
diff --git a/src/views/ProjectPage/components/project/ProjectListCount/index.tsx b/src/views/ProjectPage/components/project/ProjectListCount/index.tsx
new file mode 100644
index 00000000..95385416
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectListCount/index.tsx
@@ -0,0 +1,16 @@
+import { useMediaQuery } from 'react-responsive';
+import * as S from './style';
+
+interface ProjectListCountProps {
+  count: number;
+}
+
+export default function ProjectListCount({ count }: ProjectListCountProps) {
+  const isTablet = useMediaQuery({ query: '(min-width: 900px) and (max-width: 1279px)' });
+
+  return (
+    <S.Count>
+      {count}개{!isTablet && '의 프로젝트'}
+    </S.Count>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectListCount/style.ts b/src/views/ProjectPage/components/project/ProjectListCount/style.ts
new file mode 100644
index 00000000..62c8b632
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectListCount/style.ts
@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const Count = styled.div`
+  color: ${colors.gray100};
+
+  /* Body/1_Medium_18 */
+  font-family: SUIT;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 165%; /* 29.7px */
+  letter-spacing: -0.27px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    /* Body/3_Medium_14 */
+    font-family: SUIT;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 165%; /* 23.1px */
+    letter-spacing: -0.21px;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/index.ts b/src/views/ProjectPage/components/project/index.ts
deleted file mode 100644
index b6364bc9..00000000
--- a/src/views/ProjectPage/components/project/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './ProjectCard';
-export * from './ProjectEnrollSection';
-export * from './ProjectList';
diff --git a/src/views/ProjectPage/components/project/project-card.module.scss b/src/views/ProjectPage/components/project/project-card.module.scss
deleted file mode 100644
index b45ecbbf..00000000
--- a/src/views/ProjectPage/components/project/project-card.module.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-@import '@src/lib/styles/mixins';
-
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  border: 1px solid #353535;
-  border-radius: 10px;
-  cursor: pointer;
-
-  @include desktop {
-    width: 380px;
-    height: 468px;
-  }
-
-  @include mobile-tablet {
-    width: 328px;
-    height: 402px;
-  }
-
-  .image-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    background-color: #141414;
-    border-radius: 5px;
-    overflow: hidden;
-
-    @include desktop {
-      width: 368px;
-      height: 270px;
-      margin: 7px;
-      padding-bottom: 5px;
-
-      img {
-        border-radius: 10px;
-      }
-    }
-
-    @include mobile-tablet {
-      width: 316px;
-      height: 235px;
-      margin: 5px;
-      padding-bottom: 5px;
-
-      img {
-        border-radius: 10px;
-      }
-    }
-  }
-
-  .content {
-    width: 90%;
-    height: 268px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-
-    .types {
-      display: flex;
-      justify-content: flex-start;
-
-      & > div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 60px;
-        height: 32px;
-        padding: 10px 10px;
-
-        font-size: 18px;
-
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        border-radius: 10px;
-        color: #cccccc;
-
-        margin-right: 8px;
-      }
-    }
-
-    .text {
-      width: 348px;
-      height: 52px;
-
-      @include mobile-tablet {
-        width: 288px;
-        height: 48px;
-      }
-
-      /* title */
-      & > h5 {
-        font-style: normal;
-        font-size: 26px;
-        font-weight: 700;
-
-        @include mobile-tablet {
-          font-style: normal;
-          font-size: 20px;
-          font-weight: 700;
-        }
-      }
-
-      /* summary */
-      & > p {
-        font-style: normal;
-        font-size: 18px;
-        line-height: 26px;
-        margin-top: 10px;
-        color: #8e8e8e;
-
-        @include mobile-tablet {
-          font-style: normal;
-          font-size: 15px;
-          line-height: 24px;
-        }
-      }
-    }
-
-    .links {
-      display: flex;
-      height: 50px;
-
-      .icon-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 50px;
-        height: 50px;
-
-        background: #242424;
-        border-radius: 5px;
-        margin-right: 10px;
-      }
-    }
-  }
-}
diff --git a/src/views/ProjectPage/components/project/project-enroll.module.scss b/src/views/ProjectPage/components/project/project-enroll.module.scss
deleted file mode 100644
index 95e20281..00000000
--- a/src/views/ProjectPage/components/project/project-enroll.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '@src/lib/styles/mixins';
-
-.enroll {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: rgba(255, 255, 255, 0.5);
-  font-style: normal;
-
-  .content {
-    width: 60%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    padding-top: 5px;
-    cursor: pointer;
-  }
-
-  @include desktop {
-    height: 402px;
-    p {
-      font-size: 22px;
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.5);
-      padding-bottom: 10px;
-    }
-
-    span {
-      font-size: 22px;
-      font-weight: 700;
-      color: rgba(255, 255, 255, 0.5);
-    }
-  }
-
-  @include mobile-tablet {
-    height: 402px;
-
-    p {
-      font-size: 15px;
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.5);
-      padding-bottom: 10px;
-    }
-
-    span {
-      font-size: 15px;
-      font-weight: 700;
-      color: rgba(255, 255, 255, 0.5);
-    }
-  }
-}
diff --git a/src/views/ProjectPage/components/project/style.ts b/src/views/ProjectPage/components/project/style.ts
new file mode 100644
index 00000000..49967ca4
--- /dev/null
+++ b/src/views/ProjectPage/components/project/style.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { ProjectCategoryType } from '@src/lib/types/project';
+
+export const ProjectListHeader = styled.div<{ selectedCategory: ProjectCategoryType }>`
+  display: flex;
+  justify-content: ${({ selectedCategory }) =>
+    selectedCategory === ProjectCategoryType.ALL ? 'end' : 'space-between'};
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+`;