diff --git a/src/components/manageProjects/Card.styled.ts b/src/components/manageProjects/Card.styled.ts
index c04279b2..f22e8d7f 100644
--- a/src/components/manageProjects/Card.styled.ts
+++ b/src/components/manageProjects/Card.styled.ts
@@ -5,7 +5,7 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   justify-content: start;
   align-items: start;
-  width: 21rem;
+  width: 100%;
   height: 15rem;
   padding: 1.5rem 1.25rem;
   border: 1px solid ${({ theme }) => theme.color.border};
@@ -23,7 +23,6 @@ export const CardWrapper = styled.div`
     background-color: ${({ theme }) => theme.color.grey};
   }
   @media ${({ theme }) => theme.mediaQuery.tablet} {
-    width: 19rem;
     height: 14rem;
   }
 `;
diff --git a/src/components/manageProjects/CardList.styled.ts b/src/components/manageProjects/CardList.styled.ts
index f968346f..06a37e19 100644
--- a/src/components/manageProjects/CardList.styled.ts
+++ b/src/components/manageProjects/CardList.styled.ts
@@ -1,15 +1,20 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const CardListWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: start;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
   gap: 20px;
 `;
 
+export const MoveProjectLink = styled(Link)`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
 export const CreateButton = styled.button`
-  width: 21rem;
+  width: 100%;
   height: 15rem;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.large};
@@ -31,7 +36,6 @@ export const CreateButton = styled.button`
   }
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
-    width: 19rem;
     height: 14rem;
     font-size: ${({ theme }) => theme.heading.small.fontSize};
     img {
diff --git a/src/components/manageProjects/CardList.tsx b/src/components/manageProjects/CardList.tsx
index fb69745c..2f3936fc 100644
--- a/src/components/manageProjects/CardList.tsx
+++ b/src/components/manageProjects/CardList.tsx
@@ -4,7 +4,6 @@ import type { ManagedProject } from '../../models/manageMyProject';
 import Card from './Card';
 import CreateButton from '../../assets/createProjectButton.svg';
 import { ROUTES } from '../../constants/routes';
-import { Link } from 'react-router-dom';
 
 interface CardListProps {
   projects: ManagedProject[];
@@ -13,16 +12,19 @@ interface CardListProps {
 function CardList({ projects }: CardListProps) {
   return (
     <S.CardListWrapper>
-      <Link to={ROUTES.createProject}>
+      <S.MoveProjectLink to={ROUTES.createProject}>
         <S.CreateButton>
           <img src={CreateButton} />새 프로젝트 추가
         </S.CreateButton>
-      </Link>
+      </S.MoveProjectLink>
 
       {projects?.map((data) => (
-        <Link key={data.id} to={`${ROUTES.manageProjectsRoot}/${data.id}`}>
+        <S.MoveProjectLink
+          key={data.id}
+          to={`${ROUTES.manageProjectsRoot}/${data.id}`}
+        >
           <Card project={data} />
-        </Link>
+        </S.MoveProjectLink>
       ))}
     </S.CardListWrapper>
   );