diff --git a/src/components/common/Select/style.ts b/src/components/common/Select/style.ts
index a6c96f96..09578a7f 100644
--- a/src/components/common/Select/style.ts
+++ b/src/components/common/Select/style.ts
@@ -38,7 +38,7 @@ const SelectTrigger = styled.button<{
     background-image: url(${arrowDown});
     transform: ${({ isOpened }) => (isOpened ? 'rotate(180deg)' : 'none')};
   }
-  @media (max-width: 765.9px) {
+  @media (max-width: 899px) {
     padding: 8px 12px;
     border-radius: 16px;
     font-size: 13px;
diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
index 4df249be..907c41fc 100644
--- a/src/views/ProjectPage/ProjectPage.tsx
+++ b/src/views/ProjectPage/ProjectPage.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
+import { useIsMobile } from '@src/hooks/useDevice';
 import {
   activeProjectCategoryList,
   activeProjectPlatformList,
@@ -19,6 +20,7 @@ function Projects() {
   const [selectedPlatform, setPlatform] = useState<ProjectPlatformType>(ProjectPlatformType.ALL);
 
   const state = useFetch(selectedCategory, selectedPlatform);
+  const isMobile = useIsMobile('899px');
 
   return (
     <PageLayout
@@ -31,7 +33,7 @@ function Projects() {
         <S.ContentWrapper>
           <RecentProjectList />
           <S.Spacing />
-          <S.SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</S.SectionTitle>
+          <S.SectionTitle>SOPT{!isMobile && '에서 진행된'} 프로젝트 둘러보기</S.SectionTitle>
           <S.FilterWrapper>
             <Select
               options={activeProjectCategoryList}
diff --git a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx b/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx
index 8b600074..1de71a5e 100644
--- a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx
+++ b/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx
@@ -3,8 +3,8 @@ import { useDeviceType, useIsDesktop, useIsMobile } from '@src/hooks/useDevice';
 import { CarouselArrowType, CarouselOverflowType } from '@src/lib/types/universal';
 
 export default function RecentProjectListCarousel({ children }: { children: JSX.Element[] }) {
-  const isDesktopSize = useIsDesktop('1239px');
-  const isMobileSize = useIsMobile('767px');
+  const isDesktopSize = useIsDesktop('1920px');
+  const isMobileSize = useIsMobile('899px');
   const deviceType = useDeviceType();
 
   const arrowType = deviceType === 'desktop' ? CarouselArrowType.External : CarouselArrowType.None;
diff --git a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
index 7728459d..04568b31 100644
--- a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
+++ b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
@@ -16,7 +16,7 @@ const GridWrapper = styled.div`
   padding: 24px;
   margin-right: 20px;
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     width: 325px;
     grid-template-areas: 'img detail' 'footer footer';
     grid-template-columns: 48px auto;
@@ -40,7 +40,7 @@ const ThumbnailImage = styled(Image)`
   border-radius: 10px;
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     width: 48px;
     height: 48px;
   }
@@ -62,7 +62,7 @@ const TextName = styled.div`
   letter-spacing: -0.48px;
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     font-size: 16px;
     letter-spacing: -0.24px;
   }
@@ -79,7 +79,7 @@ const TextSummary = styled.div`
   letter-spacing: -0.21px;
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     font-size: 13px;
     font-weight: 400;
     letter-spacing: -0.195px;
@@ -98,7 +98,7 @@ const Chip = styled.div`
   letter-spacing: -0.18px;
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     height: 26px;
     padding: 5px 8px;
     font-size: 11px;
@@ -152,7 +152,7 @@ const TryLink = styled.a`
   }
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     font-size: 14px;
     letter-spacing: -0.21px;
     border-radius: 13px;
diff --git a/src/views/ProjectPage/components/project/ProjectCard/index.tsx b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
index 7fe1835b..b1245ecd 100644
--- a/src/views/ProjectPage/components/project/ProjectCard/index.tsx
+++ b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
@@ -1,10 +1,10 @@
 import { track } from '@amplitude/analytics-browser';
-import { useIsMobile } from '@src/hooks/useDevice';
+import { useMediaQuery } from 'react-responsive';
 import { ProjectType } from '@src/lib/types/project';
 import * as S from './style';
 
 export default function ProjectCard({ project }: { project: ProjectType }) {
-  const isMobile = useIsMobile('899px');
+  const isMobile = useMediaQuery({ query: '(max-width: 899px)' });
 
   return (
     <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
index 4b331734..3f5a1c04 100644
--- a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
+++ b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
@@ -12,19 +12,17 @@ export default function ProjectCardList({ projectList }: ProjectCardList) {
   const { data, isNextPage, ref } = useInfiniteScroll(projectList);
 
   return (
-    <>
+    <S.ProjectFeed>
       <S.CardList>
         {data.map((project) => (
           <ProjectCard key={project.id} project={project} />
         ))}
       </S.CardList>
       {isNextPage && (
-        <div ref={ref}>
-          <div>
-            <OvalSpinner />
-          </div>
-        </div>
+        <S.SpinnerWrapper ref={ref}>
+          <OvalSpinner />
+        </S.SpinnerWrapper>
       )}
-    </>
+    </S.ProjectFeed>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/style.ts b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
index a236299e..b464cdac 100644
--- a/src/views/ProjectPage/components/project/ProjectCardList/style.ts
+++ b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
@@ -1,5 +1,11 @@
 import styled from '@emotion/styled';
 
+export const ProjectFeed = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+`;
+
 export const CardList = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -17,3 +23,9 @@ export const CardList = styled.div`
     width: 100%;
   }
 `;
+
+export const SpinnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
diff --git a/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/index.tsx b/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/index.tsx
new file mode 100644
index 00000000..de5fea71
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/index.tsx
@@ -0,0 +1,25 @@
+import * as S from './style';
+
+export default function ProjectCardSkeletonUI() {
+  const array = new Array(9).fill(0);
+
+  return (
+    <S.CardList>
+      {array.map((_, index) => (
+        <S.ProjectCard key={index}>
+          <S.ProjectThumbnail />
+          <S.ProjectContent>
+            <S.ProjectHeader>
+              <S.ProjectLogo />
+              <S.ProjectText>
+                <S.ProjectTitle />
+                <S.ProjectType />
+              </S.ProjectText>
+            </S.ProjectHeader>
+            <S.ProjectSummary />
+          </S.ProjectContent>
+        </S.ProjectCard>
+      ))}
+    </S.CardList>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts b/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts
new file mode 100644
index 00000000..e50bab35
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts
@@ -0,0 +1,109 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+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%;
+  }
+`;
+
+export const ProjectCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  width: 352px;
+  height: 308px;
+  padding: 14px;
+  border: 1px solid ${colors.gray700};
+  border-radius: 20px;
+
+  @media (max-width: 899px) {
+    width: 100%;
+    height: 88px;
+    padding: 0 0 10px 0;
+    border: none;
+    border-bottom: 1px solid ${colors.gray900};
+    border-radius: 0;
+  }
+`;
+
+export const ProjectContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  @media (max-width: 899px) {
+    gap: 12px;
+  }
+`;
+
+export const ProjectThumbnail = styled.div`
+  width: 324px;
+  height: 192px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+
+  @media (max-width: 899px) {
+    display: none;
+  }
+`;
+
+export const ProjectLogo = styled.div`
+  width: 40px;
+  height: 40px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+
+  @media (min-width: 900px) {
+    display: none;
+  }
+`;
+
+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`
+  width: 100px;
+  height: 28px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+`;
+
+export const ProjectType = styled.div`
+  width: 39px;
+  height: 28px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+`;
+
+export const ProjectSummary = styled.div`
+  width: 270px;
+  height: 22px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+
+  @media (max-width: 899px) {
+    width: 40%;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/ProjectList.tsx b/src/views/ProjectPage/components/project/ProjectList.tsx
index 7446a099..96e45a1c 100644
--- a/src/views/ProjectPage/components/project/ProjectList.tsx
+++ b/src/views/ProjectPage/components/project/ProjectList.tsx
@@ -2,10 +2,10 @@ import { Condition } from '@src/components/common/Condition';
 import { State } from '@src/hooks/useFetchBase/types';
 import { ProjectCategoryType, ProjectType } from '@src/lib/types/project';
 import ProjectCardList from '@src/views/ProjectPage/components/project/ProjectCardList';
+import ProjectCardSkeletonUI from '@src/views/ProjectPage/components/project/ProjectCardSkeletonUI';
 import ProjectCategoryDescription from '@src/views/ProjectPage/components/project/ProjectCategoryDescription';
 import ProjectListCount from '@src/views/ProjectPage/components/project/ProjectListCount';
 import { EmptyContent } from '../common/EmptyContent';
-import styles from './project-list.module.scss';
 import * as S from './style';
 
 interface ProjectListProp {
@@ -15,16 +15,19 @@ interface ProjectListProp {
 
 export function ProjectList({ selectedCategory, state }: ProjectListProp) {
   return (
-    <div>
+    <>
       {(() => {
         switch (state._TAG) {
           case 'IDLE':
           case 'LOADING':
             return (
-              <div>
-                <ProjectCategoryDescription selectedCategory={selectedCategory} />
-                {ProjectListSkeletonUI()}
-              </div>
+              <>
+                <S.ProjectListHeader selectedCategory={selectedCategory}>
+                  <ProjectCategoryDescription selectedCategory={selectedCategory} />
+                  <S.ProjectListCountSkeletonUI />
+                </S.ProjectListHeader>
+                <ProjectCardSkeletonUI />
+              </>
             );
           case 'ERROR':
             return <p>ERROR</p>;
@@ -32,7 +35,7 @@ export function ProjectList({ selectedCategory, state }: ProjectListProp) {
             const { data: projectList } = state;
             const listLength = projectList.length;
             return (
-              <div>
+              <>
                 <Condition statement={listLength > 0}>
                   <S.ProjectListHeader selectedCategory={selectedCategory}>
                     <ProjectCategoryDescription selectedCategory={selectedCategory} />
@@ -44,39 +47,11 @@ export function ProjectList({ selectedCategory, state }: ProjectListProp) {
                   <ProjectCategoryDescription selectedCategory={selectedCategory} />
                   <EmptyContent />
                 </Condition>
-              </div>
+              </>
             );
           }
         }
       })()}
-    </div>
-  );
-}
-
-function ProjectListSkeletonUI() {
-  const array = new Array(9).fill(undefined);
-  return (
-    <section className={styles['card-list']}>
-      {array.map((_, index) => {
-        return <CardSkeletonUI key={index} />;
-      })}
-    </section>
-  );
-}
-
-function CardSkeletonUI() {
-  return (
-    <article className={styles['skeleton']}>
-      <div className={styles['thumbnail']} />
-      <div className={styles['type-list']}>
-        <div className={styles['type']} />
-        <div className={styles['type']} />
-      </div>
-      <div className={styles['description']}>
-        <div className={styles['long-line']} />
-        <div className={styles['long-line']} />
-        <div className={styles['short-line']} />
-      </div>
-    </article>
+    </>
   );
 }
diff --git a/src/views/ProjectPage/components/project/project-list.module.scss b/src/views/ProjectPage/components/project/project-list.module.scss
deleted file mode 100644
index 38b2767a..00000000
--- a/src/views/ProjectPage/components/project/project-list.module.scss
+++ /dev/null
@@ -1,208 +0,0 @@
-@import '@src/lib/styles/mixins';
-
-.total-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-/* 
-list-container는 description, count, card-list 영역을 가짐.
-세 개의 영역 모두 65% 의 width를 가짐
-*/
-
-.list-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 1200px;
-  min-height: 1140px;
-
-  @include desktop {
-    height: 100%;
-    width: 100%;
-  }
-
-  @include mobile-tablet {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.selection-description {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 36px;
-  margin-bottom: 16px;
-
-  @include mobile {
-    flex-direction: column;
-    gap: 16px;
-    margin-top: 16px;
-    margin-bottom: 14px;
-  }
-}
-
-.category-description {
-  color: #C3C3C6;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 165%; 
-  letter-spacing: -0.27px;
-
-  @include tablet-small {
-    font-size: 14px;
-    letter-spacing: -0.21px;
-  }
-
-  @include mobile {
-    color: #F0F0F0;
-    font-size: 14px;
-    letter-spacing: -0.21px;
-    padding: 16px;
-    background-color: #202025;
-    border-radius: 16px;
-  }
-}
-
-.list-count {
-  color: #C3C3C6;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 165%; 
-  letter-spacing: -0.27px;
-
-  @include tablet-small {
-    font-size: 14px;
-    letter-spacing: -0.21px;
-  }
-
-  @include mobile {
-    font-size: 14px;  
-    letter-spacing: -0.21px;
-  }
-  
-}
-
-.card-list {
-  width: 100%;
-  display: grid;
-
-  @include desktop {
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 20px;
-  }
-
-  @include tablet-medium {
-    grid-template-columns: 1fr 1fr 1fr;
-    width: 90%;
-    gap: 20px;
-  }
-
-  @include tablet-small {
-    grid-template-columns: 1fr 1fr;
-    width: 662px;
-    gap: 20px;
-  }
-
-  @include mobile {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-  }
-}
-
-.spinner {
-  margin-top: 50px;
-}
-
-.skeleton {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  border: 1px solid #353535;
-  border-radius: 10px;
-  // background-color: white;
-
-  @include desktop {
-    width: 380px;
-    height: 468px;
-  }
-
-  @include mobile-tablet {
-    width: 328px;
-    height: 402px;
-  }
-
-  .thumbnail {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    background-color: #242424;
-    border-radius: 10px;
-
-    @include desktop {
-      width: 368px;
-      height: 208px;
-      margin: 7px;
-      padding-bottom: 5px;
-    }
-
-    @include mobile-tablet {
-      width: 316px;
-      height: 176px;
-      margin: 5px;
-      padding-bottom: 5px;
-    }
-  }
-
-  .type-list {
-    width: 95%;
-    height: 36px;
-    display: flex;
-    margin-top: 16px;
-
-    .type {
-      width: 40px;
-      background: #242424;
-      border-radius: 10px;
-    }
-    .type:first-child {
-      height: 36px;
-      margin-right: 10px;
-    }
-    .type:nth-child(2) {
-      width: 61px;
-    }
-  }
-
-  .description {
-    width: 95%;
-    height: 20%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-top: 25px;
-
-    .long-line {
-      height: 20px;
-      background: #242424;
-      border-radius: 10px;
-    }
-
-    .short-line {
-      width: 50%;
-      height: 20px;
-      background: #242424;
-      border-radius: 10px;
-    }
-  }
-}
diff --git a/src/views/ProjectPage/components/project/style.ts b/src/views/ProjectPage/components/project/style.ts
index 49967ca4..cd92b9c7 100644
--- a/src/views/ProjectPage/components/project/style.ts
+++ b/src/views/ProjectPage/components/project/style.ts
@@ -1,14 +1,24 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 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'};
+  margin-bottom: 30px;
 
   /* 모바일 뷰 */
   @media (max-width: 899px) {
     flex-direction: column;
     gap: 20px;
+    margin-bottom: 28px;
   }
 `;
+
+export const ProjectListCountSkeletonUI = styled.div`
+  width: 89px;
+  height: 23px;
+  background-color: ${colors.gray800};
+  border-radius: 8px;
+`;
diff --git a/src/views/ProjectPage/styles.ts b/src/views/ProjectPage/styles.ts
index f7b90ddd..d8a719ab 100644
--- a/src/views/ProjectPage/styles.ts
+++ b/src/views/ProjectPage/styles.ts
@@ -9,7 +9,7 @@ const SectionTitle = styled.div`
   letter-spacing: -0.56px;
   margin-bottom: 40px;
 
-  @media (max-width: 765.9px) {
+  @media (max-width: 899px) {
     font-size: 18px;
     font-weight: 700;
     letter-spacing: -0.36px;
@@ -29,27 +29,23 @@ const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  width: 1200px;
+  width: 1112px;
   padding: 100px 0;
 
   /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 1124px) {
-    width: 1080px;
-  }
-
-  @media (max-width: 1124px) and (min-width: 766px) {
-    width: 700px;
+  @media (max-width: 1279px) and (min-width: 900px) {
+    width: 732px;
   }
 
   /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
+  @media (max-width: 899px) {
     width: 360px;
   }
 `;
 
 const Spacing = styled.div`
   height: 108px;
-  @media (max-width: 765.9px) {
+  @media (max-width: 899px) {
     height: 48px;
   }
 `;
@@ -57,9 +53,10 @@ const Spacing = styled.div`
 const FilterWrapper = styled.div`
   display: flex;
   gap: 10px;
+  margin-bottom: 16px;
 
   /* 모바일 뷰 */
-  @media (max-width: 767px) {
+  @media (max-width: 899px) {
     gap: 7px;
   }
 `;