diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts
index 65d5b4ff..2c4818de 100644
--- a/src/components/common/header/Header.styled.ts
+++ b/src/components/common/header/Header.styled.ts
@@ -17,6 +17,11 @@ export const HeaderContainer = styled.div`
       width: 70px;
       height: 70px;
     }
+
+    @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+      width: 50px;
+      height: 50px;
+    }
   }
 
   .panel {
@@ -67,4 +72,7 @@ export const HeaderContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 10px 60px;
   }
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 10px 16px;
+  }
 `;
diff --git a/src/components/common/layout/Layout.styled.ts b/src/components/common/layout/Layout.styled.ts
index 68b62fd6..474f8335 100644
--- a/src/components/common/layout/Layout.styled.ts
+++ b/src/components/common/layout/Layout.styled.ts
@@ -9,4 +9,8 @@ export const LayoutContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0 60px;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0;
+  }
 `;
diff --git a/src/components/home/projectCardLists/cardList/CardList.styled.ts b/src/components/home/projectCardLists/cardList/CardList.styled.ts
index 5d97e134..02a2f4a4 100644
--- a/src/components/home/projectCardLists/cardList/CardList.styled.ts
+++ b/src/components/home/projectCardLists/cardList/CardList.styled.ts
@@ -4,7 +4,7 @@ export const Container = styled.article`
   position: relative;
   cursor: pointer;
   width: 100%;
-  min-width: 19rem;
+  min-width: 15rem;
   height: 22rem;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 2rem;
diff --git a/src/components/home/projectStats/ProjectStats.styled.ts b/src/components/home/projectStats/ProjectStats.styled.ts
index ce11efe7..32078e2b 100644
--- a/src/components/home/projectStats/ProjectStats.styled.ts
+++ b/src/components/home/projectStats/ProjectStats.styled.ts
@@ -6,20 +6,23 @@ export const Container = styled.section`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 3rem 0;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 2rem 0;
+  }
 `;
 export const Wrapper = styled.div`
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+  justify-content: space-evenly;
 
   @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} {
+    grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+    gap: 1rem;
     padding: 0;
   }
 `;
diff --git a/src/components/home/projectStats/projectStat/ProjectStat.styled.ts b/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
index 7808ddd5..032cef94 100644
--- a/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
+++ b/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
@@ -2,15 +2,18 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
-  justify-content: center;
-  flex: 1;
-  padding-left: 1.25rem;
+  padding-left: 2rem;
   align-items: center;
   gap: 1rem;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    justify-content: start;
-    padding-left: 2rem;
+    gap: 0.5rem;
+  }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding-left: 1rem;
+    gap: 0.3rem;
+    align-items: start;
   }
 `;
 
@@ -24,7 +27,7 @@ export const Border = styled.div`
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
-    height: 2rem;
+    width: 0.1rem;
   }
 `;
 
diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts
index fc471940..e885261e 100644
--- a/src/pages/home/Home.styled.ts
+++ b/src/pages/home/Home.styled.ts
@@ -3,3 +3,9 @@ import styled from 'styled-components';
 export const Container = styled.main`
   width: 100%;
 `;
+
+export const Wrapper = styled.div`
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0 20px;
+  }
+`;
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 15655dc5..03605a45 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -9,9 +9,11 @@ const Home = () => {
   return (
     <S.Container>
       <Banner />
-      <ProjectStats />
-      <SearchFiltering />
-      <ProjectCardLists />
+      <S.Wrapper>
+        <ProjectStats />
+        <SearchFiltering />
+        <ProjectCardLists />
+      </S.Wrapper>
       <ReactQueryDevtools initialIsOpen={false} />
     </S.Container>
   );