diff --git a/src/components/home/projectCardLists/ProjectCardLists.styled.ts b/src/components/home/projectCardLists/ProjectCardLists.styled.ts
index ee62421a..125daad5 100644
--- a/src/components/home/projectCardLists/ProjectCardLists.styled.ts
+++ b/src/components/home/projectCardLists/ProjectCardLists.styled.ts
@@ -47,14 +47,14 @@ export const Wrapper = styled.div<{ $flex: Display }>`
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     grid-template-columns: ${({ $flex }) =>
-      $flex ? '' : 'repeat(auto-fit, minmax(40%, 1fr))'};
+      $flex === 'grid' && 'repeat(auto-fit, minmax(40%, 1fr))'};
     gap: 2rem;
   }
 
   @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 100%;
     grid-template-columns: ${({ $flex }) =>
-      $flex ? '' : 'repeat(auto-fit, minmax(50%, 1fr))'};
+      $flex === 'grid' && 'repeat(auto-fit, minmax(50%, 1fr))'};
     gap: 1rem;
   }
 `;
diff --git a/src/pages/customerService/faq/FAQ.styled.ts b/src/pages/customerService/faq/FAQ.styled.ts
index 0571e9f8..2efc6015 100644
--- a/src/pages/customerService/faq/FAQ.styled.ts
+++ b/src/pages/customerService/faq/FAQ.styled.ts
@@ -19,3 +19,24 @@ export const Wrapper = styled.div`
 `;
 
 export const ToggleWrapper = styled.div``;
+
+export const ShowMoreFAQWrapper = styled.div``;
+
+export const ShowMoreFAQ = styled.button`
+  width: 100%;
+  padding: 1.2rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: bold;
+  font-size: 1rem;
+
+  svg {
+    width: 1rem;
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.color.lightgrey};
+  }
+`;
diff --git a/src/pages/customerService/faq/FAQ.tsx b/src/pages/customerService/faq/FAQ.tsx
index 3fdefe30..aa043ef7 100644
--- a/src/pages/customerService/faq/FAQ.tsx
+++ b/src/pages/customerService/faq/FAQ.tsx
@@ -7,10 +7,12 @@ import CustomerServiceHeader from '../../../components/customerService/CustomerS
 import FAQContent from '../../../components/customerService/faq/FAQContent';
 import NoResult from '../../../components/common/noResult/NoResult';
 import ContentBorder from '../../../components/common/contentBorder/ContentBorder';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 
 export default function FAQ() {
   const [keyword, setKeyword] = useState<SearchKeyword>({ keyword: '' });
   const [value, setValue] = useState<string>('');
+  const [showFAQ, setShowFAQ] = useState<number>(10);
   const { faqData, isLoading } = useGetFAQ(keyword);
 
   const handleGetKeyword = (keyword: string) => {
@@ -38,15 +40,29 @@ export default function FAQ() {
       <S.Container>
         <S.Wrapper>
           {faqData.length > 0 ? (
-            faqData.map((list) => (
-              <S.ToggleWrapper key={list.id}>
-                <FAQContent list={list} />
-                <ContentBorder />
-              </S.ToggleWrapper>
-            ))
+            faqData
+              .filter((_, index) => index < showFAQ)
+              .map((list) => (
+                <S.ToggleWrapper key={list.id}>
+                  <FAQContent list={list} />
+                  <ContentBorder />
+                </S.ToggleWrapper>
+              ))
           ) : (
             <NoResult height='20rem' />
           )}
+          {faqData.length > showFAQ && (
+            <>
+              <S.ShowMoreFAQ
+                type='button'
+                onClick={() => setShowFAQ((prev) => prev + 10)}
+              >
+                더보기
+                <ChevronDownIcon />
+              </S.ShowMoreFAQ>
+              <ContentBorder />
+            </>
+          )}
         </S.Wrapper>
       </S.Container>
     </>
diff --git a/src/pages/login/Login.styled.ts b/src/pages/login/Login.styled.ts
index cd2be669..35799996 100644
--- a/src/pages/login/Login.styled.ts
+++ b/src/pages/login/Login.styled.ts
@@ -6,7 +6,7 @@ export const Container = styled.div`
   width: 100%;
   height: 100vh;
   max-width: ${({ theme }) => theme.layout.width.desktop};
-  min-width: 310px;
+  min-width: 22rem;
   margin: 0 auto;
   flex-direction: column;
   align-items: center;
@@ -26,20 +26,22 @@ export const Container = styled.div`
   }
 
   button {
-    max-width: 310px;
+    max-width: 22rem;
     width: 100%;
     padding: 0.8rem 0.625rem;
     font-weight: 600;
   }
 `;
 
+export const LogoH1 = styled.h1``;
+
 export const MoveHomeLink = styled(Link)`
   padding-bottom: 2rem;
 `;
 
 export const InputContainer = styled.div`
   display: flex;
-  min-width: 310px;
+  min-width: 22rem;
   gap: 0.6rem;
 
   button {
@@ -51,7 +53,7 @@ export const InputContainer = styled.div`
 `;
 
 export const InputWrapper = styled.div`
-  max-width: 310px;
+  max-width: 22rem;
   width: inherit;
   margin-bottom: 1.875rem;
   position: relative;
@@ -69,7 +71,7 @@ export const ErrorMessage = styled.span<{ message?: string }>`
 
 export const WrapperPassword = styled.div`
   width: 100%;
-  max-width: 310px;
+  max-width: 22rem;
   display: flex;
   justify-content: space-between;
   font-size: 0.8rem;