diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index fe479aa..c8d49e8 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -11,7 +11,7 @@
   background-color: var(--bg-200);
   z-index: var(--z-index-header);
 
-  header {
+  & > div {
     display: flex;
     margin: 0 auto;
     justify-content: space-between;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 914cb0f..fa41dc4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,8 +2,8 @@ import styles from "./Header.module.css";
 
 export default function Header() {
   return (
-    <div className={styles.headerWrapper}>
-      <header>
+    <header className={styles.headerWrapper}>
+      <div>
         <a
           href="http://www.dalestudy.com"
           aria-label="홈페이지로 이동"
@@ -12,7 +12,7 @@ export default function Header() {
           <img src="/logo-icon.svg" alt="로고 아이콘"></img>
           <span>달레 스터디</span>
         </a>
-      </header>
-    </div>
+      </div>
+    </header>
   );
 }
diff --git a/src/pages/Certificate/Certificate.module.css b/src/pages/Certificate/Certificate.module.css
index 48717f1..01d4439 100644
--- a/src/pages/Certificate/Certificate.module.css
+++ b/src/pages/Certificate/Certificate.module.css
@@ -1,61 +1,71 @@
-.certificate {
-  /* 컴포넌트가 헤더에 가려져서 임의로 지정했으니 컴포넌트 개발자가 설계에 맞게 수정해주시면 됩니다  */
-  margin-top: 100px;
+/* NOTE print 기능은 certificate에서 사용하기에 현재 css파일에서 다룬다 */
+@media print {
+  @page {
+    margin: 0;
+    padding: 0;
+  }
 
-  & > section {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  h1,
+  header,
+  footer {
+    display: none !important;
+  }
 
-    & > div {
-      padding: 16px 0 70px 0;
-      width: 822px;
-      min-width: 822px;
-    }
+  main {
+    margin-top: 0px !important;
+    height: 100%;
   }
 
-  & > div,
-  h1,
-  footer,
-  .buttons {
-    @media print {
-      display: none;
-    }
+  section {
+    margin-top: 0px !important;
+    padding-bottom: 0px !important;
   }
+}
 
-  @media print {
-    margin-top: 200px;
+.certificate {
+  margin-top: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > section {
+    width: 100%;
+    max-width: 900px;
+    padding: 0 0 60px;
+
+    @media (max-width: 768px) {
+      padding: 0 32px 40px;
+    }
   }
 }
 
 .content {
-  margin-top: 30px;
+  position: relative;
+  margin-top: 15px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   height: 575px;
   min-height: 575px;
-  border: 16px solid var(--bg-400);
-  padding: 15px;
-}
+  border: 5px solid var(--bg-400);
 
-.contentSide {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
+  @media (min-width: 768px) {
+    margin-top: 30px;
+    border-width: 16px;
+  }
 
-.reverse {
-  transform: rotate(180deg);
+  @media print {
+    border-width: 16px;
+  }
 }
 
 .description {
-  margin-top: 35px;
+  margin-top: 54px;
   display: flex;
   align-items: center;
   flex-direction: column;
 
   & > h2 {
-    font-size: 20px;
+    font-size: 14px;
     line-height: 15px;
     color: var(--bg-400);
     font-weight: var(--font-weight-bold);
@@ -63,15 +73,15 @@
   }
 
   & > h3 {
-    font-size: 20px;
+    font-size: 14px;
     line-height: 25px;
     font-weight: var(--font-weight-regular);
     margin-top: 10px;
   }
 
   & > h4 {
-    font-size: 40px;
-    line-height: 50px;
+    font-size: 32px;
+    line-height: 40px;
     font-weight: var(--font-weight-bold);
     color: var(--bg-400);
     margin-top: 35px;
@@ -79,44 +89,219 @@
 
   & > p {
     margin: 30px 0 0;
-    font-size: 18px;
+    font-size: 11px;
+    line-height: 18px;
     text-align: center;
     white-space: pre;
   }
 
   & > .signature {
+    width: 88px;
+    height: 25px;
+
     margin-top: 45px;
     padding-bottom: 4px;
     border-bottom: 1px solid var(--bg-400);
   }
 
   & > h5 {
-    font-size: 18px;
+    font-size: 15px;
     color: var(--bg-400);
     line-height: 26px;
   }
 
   & > span {
-    font-size: 14px;
+    font-size: 12px;
     margin-top: 5px;
   }
+
+  @media (min-width: 768px) {
+    & > h2 {
+      font-size: 20px;
+    }
+
+    & > h3 {
+      font-size: 20px;
+      line-height: 18px;
+    }
+
+    & > h4 {
+      font-size: 40px;
+      line-height: 50px;
+    }
+
+    & > p {
+      font-size: 18px;
+    }
+
+    & > .signature {
+      width: 116px;
+      height: 33px;
+    }
+
+    & > h5 {
+      font-size: 18px;
+    }
+
+    & > span {
+      font-size: 14px;
+    }
+  }
+
+  @media print {
+    & > h2 {
+      font-size: 20px;
+    }
+
+    & > h3 {
+      font-size: 20px;
+      line-height: 18px;
+    }
+
+    & > h4 {
+      font-size: 40px;
+      line-height: 50px;
+    }
+
+    & > p {
+      font-size: 18px;
+    }
+
+    & > .signature {
+      width: 116px;
+      height: 33px;
+    }
+
+    & > h5 {
+      font-size: 18px;
+    }
+
+    & > span {
+      font-size: 14px;
+    }
+  }
+}
+
+.cornerAccent {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+
+  @media (min-width: 768px) {
+    width: 84px;
+    height: 84px;
+  }
+
+  @media print {
+    width: 84px;
+    height: 84px;
+  }
+}
+
+.top {
+  top: 6px;
+
+  @media (min-width: 768px) {
+    top: 15px;
+  }
+}
+
+.left {
+  left: 6px;
+
+  @media (min-width: 768px) {
+    left: 15px;
+  }
+}
+
+.right {
+  right: 6px;
+
+  @media (min-width: 768px) {
+    right: 15px;
+  }
+}
+
+.bottom {
+  bottom: 6px;
+
+  @media (min-width: 768px) {
+    bottom: 15px;
+  }
 }
 
 .buttons {
   margin-top: 15px;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   & a {
-    max-height: 60px;
-    height: 60px;
-    font-size: 20px;
+    flex: 1;
+    max-height: 45px;
+    height: 45px;
+    font-size: 15px;
+  }
+
+  & > a {
+    display: none;
   }
 
   & > div {
+    flex: 1;
     display: flex;
-    column-gap: 15px;
+    column-gap: 10px;
+
+    & > button {
+      max-height: 45px;
+      height: 45px;
+      font-size: 15px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    margin-top: 20px;
+
+    & a {
+      flex: none;
+      max-height: 60px;
+      height: 60px;
+      font-size: 20px;
+    }
+
+    & > a {
+      display: inline-flex;
+    }
+
+    & > div {
+      flex: none;
+      column-gap: 15px;
+
+      & > button {
+        max-height: 60px;
+        height: 60px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.mobileButtonWrapper {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+
+  @media print {
+    display: none;
   }
 }
 
diff --git a/src/pages/Certificate/Certificate.test.tsx b/src/pages/Certificate/Certificate.test.tsx
index 298119a..9ce0f14 100644
--- a/src/pages/Certificate/Certificate.test.tsx
+++ b/src/pages/Certificate/Certificate.test.tsx
@@ -189,10 +189,12 @@ test("render learderboard link", () => {
   location.href = new URL(`?member=test1`, location.href).toString();
   render(<Certificate />);
 
-  const leaderboardLink = screen.getByRole("link", {
+  const linkList = screen.getAllByRole("link", {
     name: "리더보드로 돌아가기",
   });
-  expect(leaderboardLink).toHaveAttribute("href", `/`);
+  expect(linkList).toHaveLength(2);
+  expect(linkList[0]).toHaveAttribute("href", `/`);
+  expect(linkList[1]).toHaveAttribute("href", `/`);
 });
 
 test("render print button", () => {
diff --git a/src/pages/Certificate/Certificate.tsx b/src/pages/Certificate/Certificate.tsx
index 543ef95..cfc4e4d 100644
--- a/src/pages/Certificate/Certificate.tsx
+++ b/src/pages/Certificate/Certificate.tsx
@@ -33,7 +33,7 @@ export default function Certificate() {
             <div>
               <h1>수료증</h1>
               <section className={styles.serverErrorWrapper}>
-                <ServerError />;
+                <ServerError />
               </section>
             </div>
           </section>
@@ -70,70 +70,69 @@ export default function Certificate() {
     <Layout>
       <main className={styles.certificate}>
         <section>
-          <div>
-            <h1>수료증</h1>
-            <section className={styles.content}>
-              {/* TODO Icon component 구현시 className에 style값만 추가할 것*/}
-              <div className={styles.contentSide}>
-                <img
-                  src="/top-left-corner-accent.svg"
-                  alt="좌상단 모서리 테두리"
-                />
-                <img
-                  src="/bottom-left-corner-accent.svg"
-                  alt="좌하단 모서리 테두리"
-                />
-              </div>
-
-              <div className={styles.description}>
-                <img src="/logo-in-certificate.svg" alt="수료증 로고"></img>
-                <h2>CERTIFICATE OF ACHIEVEMENT</h2>
-                <h3>DaleStudy</h3>
-                <h4>{member.name}</h4>
-
-                <p>{`For successfully completing ${member.solvedProblems.length === 75 ? "all" : member.solvedProblems.length} problems\nin the LeetCode Blind 75 and contributing\nto knowledge sharing in the ${member.currentCohort}${cohortSuffix?.[member.currentCohort ?? 0] ?? "th"} DaleStudy.`}</p>
-
-                <img className={styles.signature} src={Signature} alt="서명" />
-                <h5>Dale Seo</h5>
-                <span>DaleStudy Organizer</span>
-              </div>
-
-              <div className={styles.contentSide}>
-                <img
-                  src="/top-right-corner-accent.svg"
-                  alt="우상단 모서리 테두리"
-                />
-                <img
-                  src="/bottom-right-corner-accent.svg"
-                  alt="우하단 모서리 테두리"
-                />
-              </div>
-            </section>
-
-            <section className={styles.buttons}>
-              <Link variant="secondaryButton" href="/">
-                리더보드로 돌아가기
-              </Link>
+          <h1>수료증</h1>
 
-              <div>
-                <Button
-                  variant="primary"
-                  size="large"
-                  onClick={() => window.print()}
-                >
-                  출력
-                </Button>
-
-                <Link
-                  variant="primaryButton"
-                  href={linkedInURL}
-                  target="_blank"
-                >
-                  링크드인 공유
-                </Link>
-              </div>
-            </section>
+          <div className={styles.mobileButtonWrapper}>
+            <Link variant="secondaryButton" href="/">
+              리더보드로 돌아가기
+            </Link>
           </div>
+
+          <section className={styles.content}>
+            <div className={styles.description}>
+              <img src="/logo-in-certificate.svg" alt="수료증 로고"></img>
+              <h2>CERTIFICATE OF ACHIEVEMENT</h2>
+              <h3>DaleStudy</h3>
+              <h4>{member.name}</h4>
+
+              <p>{`For successfully completing ${member.solvedProblems.length === 75 ? "all" : member.solvedProblems.length} problems\nin the LeetCode Blind 75 and contributing\nto knowledge sharing in the ${member.currentCohort}${cohortSuffix?.[member.currentCohort ?? 0] ?? "th"} DaleStudy.`}</p>
+
+              <img className={styles.signature} src={Signature} alt="서명" />
+              <h5>Dale Seo</h5>
+              <span>DaleStudy Organizer</span>
+            </div>
+
+            <img
+              className={`${styles.cornerAccent} ${styles.top} ${styles.left}`}
+              src="/top-left-corner-accent.svg"
+              alt="좌상단 모서리 테두리"
+            />
+            <img
+              className={`${styles.cornerAccent} ${styles.bottom} ${styles.left}`}
+              src="/bottom-left-corner-accent.svg"
+              alt="좌하단 모서리 테두리"
+            />
+            <img
+              className={`${styles.cornerAccent} ${styles.top} ${styles.right}`}
+              src="/top-right-corner-accent.svg"
+              alt="우상단 모서리 테두리"
+            />
+            <img
+              className={`${styles.cornerAccent} ${styles.bottom} ${styles.right}`}
+              src="/bottom-right-corner-accent.svg"
+              alt="우하단 모서리 테두리"
+            />
+          </section>
+
+          <section className={styles.buttons}>
+            <Link variant="secondaryButton" href="/">
+              리더보드로 돌아가기
+            </Link>
+
+            <div>
+              <Button
+                variant="primary"
+                size="large"
+                onClick={() => window.print()}
+              >
+                출력
+              </Button>
+
+              <Link variant="primaryButton" href={linkedInURL} target="_blank">
+                링크드인 공유
+              </Link>
+            </div>
+          </section>
         </section>
       </main>
     </Layout>