diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts b/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts
new file mode 100644
index 00000000..50d83819
--- /dev/null
+++ b/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { EmptyLoadingPageProps } from './EmptyLoadingPage';
+
+export const Container = styled.div<EmptyLoadingPageProps>`
+  width: 100%;
+  height: ${({ height }) => height};
+
+  @media screen ${({ theme }) => theme.mediaQuery.tablet} {
+    height: ${({ tHeight }) => tHeight};
+  }
+
+  @media screen ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ mHeight }) => mHeight};
+  }
+`;
diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx b/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx
new file mode 100644
index 00000000..a7e4afb4
--- /dev/null
+++ b/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx
@@ -0,0 +1,21 @@
+import * as S from './EmptyLoadingPage.styled';
+
+export interface EmptyLoadingPageProps {
+  height: string;
+  tHeight: string;
+  mHeight: string;
+}
+
+export default function EmptyLoadingPage({
+  height,
+  tHeight,
+  mHeight,
+}: EmptyLoadingPageProps) {
+  return (
+    <S.Container
+      height={height}
+      tHeight={tHeight}
+      mHeight={mHeight}
+    ></S.Container>
+  );
+}
diff --git a/src/components/common/page/noResultPage/NoResultPage.styled.ts b/src/components/common/noResultPage/NoResultPage.styled.ts
similarity index 67%
rename from src/components/common/page/noResultPage/NoResultPage.styled.ts
rename to src/components/common/noResultPage/NoResultPage.styled.ts
index 92134405..12cc247a 100644
--- a/src/components/common/page/noResultPage/NoResultPage.styled.ts
+++ b/src/components/common/noResultPage/NoResultPage.styled.ts
@@ -7,6 +7,10 @@ export const Container = styled.div<Pick<NoResultPageProps, 'height'>>`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ height }) => `calc(${height}*0.5)`};
+  }
 `;
 
 export const Wrapper = styled.div`
@@ -20,4 +24,8 @@ export const Wrapper = styled.div`
 
 export const Title = styled.span`
   font-size: 1.5rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 1rem;
+  }
 `;
diff --git a/src/components/common/page/noResultPage/NoResultPage.tsx b/src/components/common/noResultPage/NoResultPage.tsx
similarity index 100%
rename from src/components/common/page/noResultPage/NoResultPage.tsx
rename to src/components/common/noResultPage/NoResultPage.tsx
diff --git a/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.styled.ts b/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.styled.ts
deleted file mode 100644
index 385fc001..00000000
--- a/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.styled.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { EmptyLoadingPageProps } from './EmptyLoadingPage';
-
-export const Container = styled.div<Pick<EmptyLoadingPageProps, 'height'>>`
-  width: 100%;
-  height: ${({ height }) => height};
-`;
diff --git a/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.tsx b/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.tsx
deleted file mode 100644
index ece7a1d9..00000000
--- a/src/components/common/page/emptyLoadingPage/EmptyLoadingPage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as S from './EmptyLoadingPage.styled';
-
-export interface EmptyLoadingPageProps {
-  height: string;
-}
-
-export default function EmptyLoadingPage({ height }: EmptyLoadingPageProps) {
-  return <S.Container height={height}></S.Container>;
-}
diff --git a/src/components/common/skillTagBox/SkillTagBox.styled.ts b/src/components/common/skillTagBox/SkillTagBox.styled.ts
index 83e6f9b3..abec4fd1 100644
--- a/src/components/common/skillTagBox/SkillTagBox.styled.ts
+++ b/src/components/common/skillTagBox/SkillTagBox.styled.ts
@@ -4,9 +4,18 @@ import { SkillTagBoxProps } from './SkillTagBox';
 export const Container = styled.div<Pick<SkillTagBoxProps, 'width'>>`
   width: ${({ width }) => width};
   border: 1px solid ${({ theme }) => theme.color.border};
-  border-radius: 3rem;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
   background-color: ${({ theme }) => theme.color.white};
   padding: 2rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 1.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    border-radius: ${({ theme }) => theme.borderRadius.primary};
+    padding: 1rem;
+  }
 `;
 
 export const Wrapper = styled.div`
@@ -45,8 +54,36 @@ export const ResetButton = styled.button`
     transform: scale(1.1);
     transition: all 100ms ease-in;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.4rem;
+    gap: 0.4rem;
+    svg {
+      width: 0.9rem;
+    }
+    &:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0.2rem;
+    gap: 0.2rem;
+    svg {
+      width: 0.8rem;
+    }
+  }
 `;
 
 export const ResetSpan = styled.span`
   font-size: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.9rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 0.7rem;
+  }
 `;
diff --git a/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts b/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts
index ae9a3b34..3ac8507c 100644
--- a/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts
+++ b/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts
@@ -14,10 +14,26 @@ export const Wrapper = styled.div<{ $select: boolean }>`
   align-items: center;
   gap: 0.5rem;
   transition: all 200ms ease-in;
+  cursor: pointer;
 
   &:hover {
-    cursor: pointer;
     transform: scale(1.1);
     transition: all 100ms ease-in-out;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.4rem;
+    gap: 0.4rem;
+    font-size: 0.9rem;
+    &:hover {
+      transform: none;
+      transition: none;
+    }
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0.2rem;
+    gap: 0.2rem;
+    font-size: 0.8rem;
+  }
 `;
diff --git a/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts b/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts
index f0483ce1..1cf75bba 100644
--- a/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts
+++ b/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts
@@ -11,4 +11,12 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
   border-radius: 50%;
   border: 1px solid
     ${({ theme, $select }) => ($select ? 'none' : theme.color.border)};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 2rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 1.8rem;
+  }
 `;
diff --git a/src/components/home/banner/Banner.styled.ts b/src/components/home/banner/Banner.styled.ts
index 68a10ac3..d3ae704a 100644
--- a/src/components/home/banner/Banner.styled.ts
+++ b/src/components/home/banner/Banner.styled.ts
@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
-export const Container = styled.section`
-  margin-top: 2rem;
-`;
+export const Container = styled.section``;
 
 export const BannerImg = styled.img`
   width: 100%;
diff --git a/src/components/home/projectCardLists/ProjectCardLists.styled.ts b/src/components/home/projectCardLists/ProjectCardLists.styled.ts
index 90d295e4..2dbbf70e 100644
--- a/src/components/home/projectCardLists/ProjectCardLists.styled.ts
+++ b/src/components/home/projectCardLists/ProjectCardLists.styled.ts
@@ -4,16 +4,44 @@ export const Container = styled.section`
   width: 100%;
 `;
 
+export const CardListTitleWrapper = styled.div``;
+
+export const CardListTitle = styled.h1`
+  padding: 6rem 0 2rem 0;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 4rem 0 2rem 0;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 2rem 0 2rem 0;
+    font-size: 1.5rem;
+  }
+`;
+
 export const Wrapper = styled.div<{ $flex: boolean }>`
   width: 100%;
   display: ${({ $flex }) => ($flex ? 'flex' : 'grid')};
-  grid-template-columns: ${({ $flex }) => ($flex ? '' : 'repeat(3, 1fr)')};
+  grid-template-columns: ${({ $flex }) =>
+    $flex ? '' : 'repeat(auto-fit, minmax(30%, auto))'};
   place-items: ${({ $flex }) => ($flex ? '' : 'center')};
+  /* justify-content: space-evenly; */
   gap: 3rem;
-`;
 
-export const CardListTitleWrapper = styled.div``;
+  a {
+    width: 100%;
+  }
 
-export const CardListTitle = styled.h1`
-  padding: 4rem 0 2rem 0;
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    grid-template-columns: ${({ $flex }) =>
+      $flex ? '' : 'repeat(auto-fit, minmax(40%, auto))'};
+    gap: 2rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 100%;
+    grid-template-columns: ${({ $flex }) =>
+      $flex ? '' : 'repeat(auto-fit, minmax(50%, auto))'};
+    gap: 1rem;
+  }
 `;
diff --git a/src/components/home/projectCardLists/ProjectCardLists.tsx b/src/components/home/projectCardLists/ProjectCardLists.tsx
index d33b568a..882d0c4c 100644
--- a/src/components/home/projectCardLists/ProjectCardLists.tsx
+++ b/src/components/home/projectCardLists/ProjectCardLists.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useProjectCardListData } from '../../../hooks/useProjectCardListData';
-import EmptyLoadingPage from '../../common/page/emptyLoadingPage/EmptyLoadingPage';
-import NoResultPage from '../../common/page/noResultPage/NoResultPage';
+import EmptyLoadingPage from '../../common/emptyLoadingPage/EmptyLoadingPage';
+import NoResultPage from '../../common/noResultPage/NoResultPage';
 import CardList from './cardList/CardList';
 import Pagination from './pagination/Pagination';
 import * as S from './ProjectCardLists.styled';
@@ -11,6 +11,7 @@ import { ROUTES } from '../../../constants/routes';
 export default function ProjectCardLists() {
   const { projectListsData, isLoading } = useProjectCardListData();
   const [isFlex, setIsFlex] = useState(false);
+
   useEffect(() => {
     if (projectListsData && Boolean(projectListsData.projects.length)) {
       setIsFlex(false);
@@ -19,7 +20,10 @@ export default function ProjectCardLists() {
     setIsFlex(true);
   }, [projectListsData]);
 
-  if (isLoading) return <EmptyLoadingPage height='115.2rem' />;
+  if (isLoading)
+    return (
+      <EmptyLoadingPage height='115.2rem' tHeight='142rem' mHeight='275rem' />
+    );
 
   return (
     <S.Container>
diff --git a/src/components/home/projectCardLists/cardList/CardList.styled.ts b/src/components/home/projectCardLists/cardList/CardList.styled.ts
index 506b76dd..5d97e134 100644
--- a/src/components/home/projectCardLists/cardList/CardList.styled.ts
+++ b/src/components/home/projectCardLists/cardList/CardList.styled.ts
@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const Container = styled.article`
   position: relative;
   cursor: pointer;
-  width: 22.4rem;
+  width: 100%;
+  min-width: 19rem;
   height: 22rem;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 2rem;
@@ -12,6 +13,12 @@ export const Container = styled.article`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 1.5rem;
+    gap: 0.5rem;
+    height: 18rem;
+  }
 `;
 
 export const Deadline = styled.div`
@@ -60,22 +67,16 @@ export const TagWrapper = styled.div<{ $positionPadding?: boolean }>`
   z-index: 10;
 `;
 
-export const EllipsisIcon = styled.button<{ $hiddenIcon: boolean }>`
+export const EllipsisIconButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 2rem;
   padding-left: 0.8rem;
-  cursor: pointer;
-  z-index: ${({ $hiddenIcon }) => ($hiddenIcon ? '0' : '100')};
-
-  &:hover {
-    transform: scale(1.3);
-    transition: all 200ms ease-in;
-    opacity: 0;
-  }
+  font-size: 0.7rem;
 `;
 
+export const MoreSpan = styled.span``;
+
 export const InfoWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -103,6 +104,10 @@ export const StatusWrapper = styled.div`
 
 export const BeginnerImg = styled.img`
   width: 2rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 1.5rem;
+  }
 `;
 
 export const ViewWrapper = styled.div`
@@ -113,9 +118,20 @@ export const ViewWrapper = styled.div`
     width: 1.3rem;
     color: #5f5f5f;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    svg {
+      width: 1rem;
+    }
+  }
 `;
 
 export const ViewCount = styled.span`
   flex-direction: row;
   color: #5f5f5f;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    align-items: end;
+    font-size: 0.9rem;
+  }
 `;
diff --git a/src/components/home/projectCardLists/cardList/CardList.tsx b/src/components/home/projectCardLists/cardList/CardList.tsx
index 6fc1f6c0..d39308d4 100644
--- a/src/components/home/projectCardLists/cardList/CardList.tsx
+++ b/src/components/home/projectCardLists/cardList/CardList.tsx
@@ -3,28 +3,19 @@ import SkillTagImg from '../../../common/skillTagBox/skillTag/skillTagImg/SkillT
 import * as S from './CardList.styled';
 import beginner from '../../../../assets/beginner.svg';
 import Avatar from '../../../common/avatar/Avatar';
-import { EllipsisHorizontalIcon, EyeIcon } from '@heroicons/react/24/outline';
+import { EyeIcon } from '@heroicons/react/24/outline';
 import type { ProjectList } from '../../../../models/mainProjectLists';
 import { formatDate } from '../../../../util/formatDate';
-import { useState } from 'react';
 
 interface CardListProps {
   list: ProjectList;
 }
 
 export default function CardList({ list }: CardListProps) {
-  const listPositionTag = list.positionTags.slice(0, 3);
-  const listSkillTag = list.skillTags.slice(0, 6);
-  const [isShowTag, setIsShowTag] = useState({ position: false, skill: false });
-
-  const handlePositionTag = (state: boolean) => {
-    setIsShowTag((prev) => ({ ...prev, position: state }));
-  };
-
-  const handleSkillTag = (state: boolean) => {
-    setIsShowTag((prev) => ({ ...prev, skill: state }));
-  };
-
+  const listPositionTag = list.positionTags.slice(0, 2);
+  const listSkillTag = list.skillTags.slice(0, 4);
+  const othersPosition = list.positionTags.length - 2;
+  const othersSkill = list.skillTags.length - 4;
   return (
     <S.Container>
       <S.Deadline>마감일: {formatDate(list.recruitmentEndDate)}</S.Deadline>
@@ -36,21 +27,8 @@ export default function CardList({ list }: CardListProps) {
             listPositionTag.map((tag) => (
               <PositionButton position={tag.name} key={tag.id} />
             ))}
-          {isShowTag.position && Boolean(list.positionTags.length) && (
-            <S.TagWrapper $positionPadding={isShowTag.position}>
-              {list.positionTags.map((tag) => (
-                <PositionButton position={tag.name} key={tag.id} />
-              ))}
-            </S.TagWrapper>
-          )}
           {list.positionTags.length > listPositionTag.length && (
-            <S.EllipsisIcon
-              $hiddenIcon={isShowTag.position || isShowTag.skill}
-              onMouseOver={() => handlePositionTag(true)}
-              onMouseOut={() => handlePositionTag(false)}
-            >
-              <EllipsisHorizontalIcon />
-            </S.EllipsisIcon>
+            <S.EllipsisIconButton>+{othersPosition}</S.EllipsisIconButton>
           )}
         </S.TagsWrapper>
       </S.PositionWrapper>
@@ -59,21 +37,8 @@ export default function CardList({ list }: CardListProps) {
           listSkillTag.map((tag) => (
             <SkillTagImg image={tag.img} key={tag.id} skillTag={tag.name} />
           ))}
-        {isShowTag.skill && Boolean(list.skillTags.length) && (
-          <S.TagWrapper>
-            {list.skillTags.map((tag) => (
-              <SkillTagImg image={tag.img} key={tag.id} skillTag={tag.name} />
-            ))}
-          </S.TagWrapper>
-        )}
         {list.skillTags.length > listSkillTag.length && (
-          <S.EllipsisIcon
-            $hiddenIcon={isShowTag.position || isShowTag.skill}
-            onMouseOver={() => handleSkillTag(true)}
-            onMouseOut={() => handleSkillTag(false)}
-          >
-            <EllipsisHorizontalIcon />
-          </S.EllipsisIcon>
+          <S.EllipsisIconButton>+{othersSkill}</S.EllipsisIconButton>
         )}
       </S.TagsWrapper>
       <S.InfoWrapper>
diff --git a/src/components/home/projectCardLists/pagination/Pagination.styled.ts b/src/components/home/projectCardLists/pagination/Pagination.styled.ts
index 1a17006a..cfc5685d 100644
--- a/src/components/home/projectCardLists/pagination/Pagination.styled.ts
+++ b/src/components/home/projectCardLists/pagination/Pagination.styled.ts
@@ -8,11 +8,19 @@ export const Container = styled.nav`
 
 export const Wrapper = styled.div`
   display: flex;
+  align-items: center;
   gap: 1rem;
 
   svg {
     width: 1.5rem;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    gap: 0.8rem;
+    svg {
+      width: 1rem;
+    }
+  }
 `;
 
 export const PaginationWrapper = styled.div``;
@@ -29,6 +37,12 @@ export const Pagination = styled.button<{ $select: boolean }>`
   background-color: ${({ $select, theme }) =>
     $select ? theme.color.navy : 'initial'};
   color: ${({ $select, theme }) => ($select ? theme.color.white : 'initial')};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+  }
 `;
 
 export const PaginationButton = styled.button``;
@@ -36,4 +50,8 @@ export const PaginationButton = styled.button``;
 export const PaginationDoubleButton = styled.button`
   font-size: 1.1rem;
   font-weight: 500;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 1rem;
+  }
 `;
diff --git a/src/components/home/projectCardLists/pagination/Pagination.tsx b/src/components/home/projectCardLists/pagination/Pagination.tsx
index 424963a8..299dc52c 100644
--- a/src/components/home/projectCardLists/pagination/Pagination.tsx
+++ b/src/components/home/projectCardLists/pagination/Pagination.tsx
@@ -42,39 +42,19 @@ export default function Pagination() {
     handleUpdateFilters('page', Number(dataId));
   };
 
-  type Action = 'pagePrev' | 'pageFirst' | 'pageEnd' | 'pageNext';
-  const handleChevronClick = (action: Action) => {
-    switch (action) {
-      case 'pagePrev':
-        handleUpdateFilters('page', currentPage - 1);
-        break;
-      case 'pageFirst':
-        handleUpdateFilters('page', 1);
-        break;
-      case 'pageEnd':
-        handleUpdateFilters('page', lastPage);
-        break;
-      case 'pageNext':
-        handleUpdateFilters('page', currentPage + 1);
-        break;
-      default:
-        break;
-    }
-  };
-
   return (
     <S.Container>
       <S.Wrapper onClick={handleMovePaginationClick}>
         {currentPage !== 1 && (
           <>
             <S.PaginationButton
-              onClick={() => handleUpdateFilters('page', lastPage)}
+              onClick={() => handleUpdateFilters('page', currentPage - 1)}
             >
               <ChevronLeftIcon />
             </S.PaginationButton>
             <S.PaginationDoubleButton
               className='doubleButton'
-              onClick={() => handleChevronClick('pageFirst')}
+              onClick={() => handleUpdateFilters('page', 1)}
             >
               1
             </S.PaginationDoubleButton>
@@ -96,11 +76,13 @@ export default function Pagination() {
             <EllipsisHorizontalIcon />
             <S.PaginationDoubleButton
               className='doubleButton'
-              onClick={() => handleChevronClick('pageEnd')}
+              onClick={() => handleUpdateFilters('page', lastPage)}
             >
               {lastPage}
             </S.PaginationDoubleButton>
-            <S.PaginationButton onClick={() => handleChevronClick('pageNext')}>
+            <S.PaginationButton
+              onClick={() => handleUpdateFilters('page', currentPage + 1)}
+            >
               <ChevronRightIcon />
             </S.PaginationButton>
           </>
diff --git a/src/components/home/projectStats/ProjectStats.styled.ts b/src/components/home/projectStats/ProjectStats.styled.ts
index df391b32..ce11efe7 100644
--- a/src/components/home/projectStats/ProjectStats.styled.ts
+++ b/src/components/home/projectStats/ProjectStats.styled.ts
@@ -1,13 +1,25 @@
 import styled from 'styled-components';
 
 export const Container = styled.section`
-  display: flex;
   padding: 8rem 0;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 3rem 0;
+  }
 `;
 export const Wrapper = styled.div`
   width: 100%;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 7.25rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(40%, auto));
+    padding: 0 4rem;
+    gap: 1rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0;
+  }
 `;
diff --git a/src/components/home/projectStats/projectStat/ProjectStat.styled.ts b/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
index 9b190efc..7808ddd5 100644
--- a/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
+++ b/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
@@ -1,18 +1,31 @@
 import styled from 'styled-components';
 
-export const Container = styled.section`
+export const Container = styled.div`
   display: flex;
   justify-content: center;
   flex: 1;
   padding-left: 1.25rem;
   align-items: center;
   gap: 1rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    justify-content: start;
+    padding-left: 2rem;
+  }
 `;
 
 export const Border = styled.div`
   width: 0.3rem;
   height: 4rem;
   background-color: ${({ theme }) => theme.color.navy};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    height: 3rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    height: 2rem;
+  }
 `;
 
 export const StatWrapper = styled.div``;
@@ -20,9 +33,24 @@ export const StatWrapper = styled.div``;
 export const StatNumber = styled.div`
   font-size: 2rem;
   font-weight: bold;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 1.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 1rem;
+  }
 `;
 
 export const StatTitle = styled.div`
   font-size: 1.25rem;
   font-weight: 500;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 1rem;
+  }
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    font-size: 0.8rem;
+  }
 `;
diff --git a/src/components/home/searchFiltering/SearchFiltering.styled.ts b/src/components/home/searchFiltering/SearchFiltering.styled.ts
index 01f47866..22899963 100644
--- a/src/components/home/searchFiltering/SearchFiltering.styled.ts
+++ b/src/components/home/searchFiltering/SearchFiltering.styled.ts
@@ -6,5 +6,15 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  position: relative;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 1.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    gap: 1rem;
+  }
 `;
diff --git a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
index 7d63ea25..1637e778 100644
--- a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
+++ b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
@@ -1,10 +1,9 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  width: 60vw;
+  width: 100%;
   display: flex;
   gap: 1rem;
-  position: relative;
   z-index: 1000;
 
   > * {
@@ -20,9 +19,21 @@ export const Container = styled.div`
   svg {
     width: 1rem;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(45%, auto));
+    gap: 0.5rem;
+    > * {
+      width: 100%;
+      height: 2rem;
+    }
+  }
 `;
 
-export const SkillTagButtonWrapper = styled.div``;
+export const SkillTagButtonWrapper = styled.div`
+  z-index: 1000;
+`;
 
 export const SkillTagButton = styled.button`
   border-radius: 1.5rem;
@@ -39,7 +50,11 @@ export const SkillTagBoxWrapper = styled.div`
   height: 100%;
   border: none;
   position: absolute;
-  top: 110%;
+  top: 3rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    top: 2.5rem;
+  }
 `;
 
 export const BeginnerButtonWrapper = styled.div<{ $toggle: boolean | null }>`
@@ -58,6 +73,10 @@ export const BeginnerButton = styled.button<{ $toggle: boolean | null }>`
   padding: 0 1.5rem;
   color: ${({ theme, $toggle }) => ($toggle ? theme.color.navy : 'initial')};
   font-weight: ${({ $toggle }) => ($toggle ? 'bold' : 'initial')};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0 1rem;
+  }
 `;
 
 export const BeginnerImg = styled.img``;
diff --git a/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx b/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx
index 479f1d80..0a4baee4 100644
--- a/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx
+++ b/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx
@@ -47,7 +47,7 @@ export default function FilteringContents() {
         {skillTagButtonToggle && (
           <S.SkillTagBoxWrapper onClick={handleSkillTagFilterClick}>
             <SkillTagBox
-              width='130%'
+              width='100%'
               onHandleSkillTagReset={handleSkillTagReset}
               isMain={true}
             />
diff --git a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
index 1380857a..042a2913 100644
--- a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
+++ b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
@@ -35,6 +35,10 @@ export const SelectWrapper = styled.div`
   cursor: pointer;
   overflow: hidden;
   background-color: ${({ theme }) => theme.color.white};
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    top: 2.2rem;
+  }
 `;
 
 export const SelectButton = styled.button`
diff --git a/src/components/home/searchFiltering/search/Search.styled.ts b/src/components/home/searchFiltering/search/Search.styled.ts
index 9f2710a8..32f0966d 100644
--- a/src/components/home/searchFiltering/search/Search.styled.ts
+++ b/src/components/home/searchFiltering/search/Search.styled.ts
@@ -7,6 +7,14 @@ export const Container = styled.div`
   flex-direction: row;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 1.5rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 50vw;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0.4rem 0;
+  }
 `;
 
 export const Wrapper = styled.div`
@@ -20,6 +28,10 @@ export const SearchForm = styled.form`
   display: flex;
   justify-content: space-between;
   padding: 0 1.2rem;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0 1rem;
+  }
 `;
 
 export const SearchInput = styled.input`
@@ -35,4 +47,10 @@ export const SearchButton = styled.button`
   svg {
     width: 1.6rem;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    svg {
+      width: 1.2rem;
+    }
+  }
 `;
diff --git a/public/data/count.json b/src/mock/mockCount.json
similarity index 100%
rename from public/data/count.json
rename to src/mock/mockCount.json
diff --git a/public/data/method.json b/src/mock/mockMethod.json
similarity index 100%
rename from public/data/method.json
rename to src/mock/mockMethod.json
diff --git a/public/data/position.json b/src/mock/mockPosition.json
similarity index 100%
rename from public/data/position.json
rename to src/mock/mockPosition.json
diff --git a/public/data/project.json b/src/mock/mockProject.json
similarity index 100%
rename from public/data/project.json
rename to src/mock/mockProject.json
diff --git a/public/data/skill.json b/src/mock/mockSkill.json
similarity index 100%
rename from public/data/skill.json
rename to src/mock/mockSkill.json
diff --git a/src/mock/projectLists.ts b/src/mock/projectLists.ts
index 30a52759..394b7cf6 100644
--- a/src/mock/projectLists.ts
+++ b/src/mock/projectLists.ts
@@ -1,6 +1,6 @@
 import { HttpResponse, http } from 'msw';
-import count from '../../public/data/count.json';
-import project from '../../public/data/project.json';
+import count from './mockCount.json';
+import project from './mockProject.json';
 
 export const fetchProjectLists = http.get(
   `${import.meta.env.VITE_API_BASE_URL}/project`,
diff --git a/src/mock/projectSearchFiltering.ts b/src/mock/projectSearchFiltering.ts
index f016b047..e97bda84 100644
--- a/src/mock/projectSearchFiltering.ts
+++ b/src/mock/projectSearchFiltering.ts
@@ -1,7 +1,7 @@
 import { HttpResponse, http } from 'msw';
-import skill from '../../public/data/skill.json';
-import position from '../../public/data/position.json';
-import method from '../../public/data/method.json';
+import skill from './mockSkill.json';
+import position from './mockPosition.json';
+import method from './mockMethod.json';
 
 export const fetchSkillTag = http.get(
   `${import.meta.env.VITE_API_BASE_URL}/skill-tag`,
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 26b49043..493d04d9 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -116,7 +116,7 @@ export const defaultTheme: Theme = {
   },
   mediaQuery: {
     mobile: '(max-width: 768px)',
-    tablet: '(max-width: 1024px)',
-    desktop: '(min-width: 1025px)',
+    tablet: '(max-width: 1023px)',
+    desktop: '(min-width: 1024px)',
   },
 };