diff --git a/src/assets/icons/arrow-left-gray.svg b/src/assets/icons/arrow-left-gray.svg
new file mode 100644
index 00000000..4f61fa3c
--- /dev/null
+++ b/src/assets/icons/arrow-left-gray.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4628 17.4702C13.1699 17.7631 12.6951 17.7631 12.4022 17.4702L5.53036 10.5984C5.38971 10.4577 5.31069 10.2669 5.31069 10.068C5.31069 9.86911 5.38971 9.67834 5.53036 9.53769L12.4022 2.66588C12.6951 2.37299 13.1699 2.37299 13.4628 2.66588C13.7557 2.95878 13.7557 3.43365 13.4628 3.72654L7.12135 10.068L13.4628 16.4095C13.7557 16.7024 13.7557 17.1773 13.4628 17.4702Z" fill="#A4A1AA"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg
new file mode 100644
index 00000000..39da8073
--- /dev/null
+++ b/src/assets/icons/arrow-left.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.4629 17.4702C13.1701 17.7631 12.6952 17.7631 12.4023 17.4702L5.53048 10.5984C5.38983 10.4577 5.31081 10.2669 5.31081 10.068C5.31081 9.86911 5.38983 9.67834 5.53048 9.53769L12.4023 2.66588C12.6952 2.37299 13.1701 2.37299 13.4629 2.66588C13.7558 2.95878 13.7558 3.43365 13.4629 3.72654L7.12147 10.068L13.4629 16.4095C13.7558 16.7024 13.7558 17.1773 13.4629 17.4702Z"
+    fill="#111322"
+  />
+</svg>
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
new file mode 100644
index 00000000..620f1b37
--- /dev/null
+++ b/src/assets/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.46967 17.4702C6.76256 17.7631 7.23744 17.7631 7.53033 17.4702L14.4021 10.5984C14.5428 10.4577 14.6218 10.2669 14.6218 10.068C14.6218 9.86911 14.5428 9.67834 14.4021 9.53769L7.53033 2.66588C7.23744 2.37299 6.76256 2.37299 6.46967 2.66588C6.17678 2.95878 6.17678 3.43365 6.46967 3.72654L12.8111 10.068L6.46967 16.4095C6.17678 16.7024 6.17678 17.1773 6.46967 17.4702Z" fill="#111322"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
new file mode 100644
index 00000000..fa396dc3
--- /dev/null
+++ b/src/components/common/Pagination.tsx
@@ -0,0 +1,78 @@
+import ArrowLeft from '@/assets/icons/arrow-left.svg';
+import ArrowLeftGray from '@/assets/icons/arrow-left-gray.svg';
+import ArrowRight from '@/assets/icons/arrow-right.svg';
+
+interface Props {
+  totalPages: number;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export default function Pagination({
+  totalPages,
+  currentPage,
+  setCurrentPage,
+}: Props) {
+  const handleClick = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const range = (start: number, end: number) => {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  };
+
+  let start = 1;
+  let end = 7;
+
+  if (currentPage > 4) {
+    start = currentPage - 3;
+    end = currentPage + 3;
+  }
+
+  if (end > totalPages) {
+    end = totalPages;
+    start = Math.max(end - 6, 1);
+  }
+
+  const pageNumbers = range(start, end);
+
+  return (
+    <div className="flex items-center justify-center gap-20 py-12">
+      {/* 왼쪽 화살표 */}
+      {totalPages > 7 && (
+        <button type="button" onClick={() => handleClick(1)}>
+          <img
+            src={currentPage === 1 ? ArrowLeftGray : ArrowLeft}
+            alt="이전"
+            className="size-20"
+          />
+        </button>
+      )}
+
+      {/* 페이지 버튼들 */}
+      <div className="flex gap-4 md:gap-2">
+        {pageNumbers.map((page) => (
+          <button
+            key={page}
+            type="button"
+            onClick={() => handleClick(page)}
+            className={`flex size-32 items-center justify-center rounded-sm text-caption md:size-40 md:text-body2 ${
+              currentPage === page
+                ? 'bg-red-30 text-white'
+                : 'bg-white text-black'
+            }`}
+          >
+            {page}
+          </button>
+        ))}
+      </div>
+
+      {/* 오른쪽 화살표 */}
+      {totalPages > 7 && currentPage < totalPages && (
+        <button type="button" onClick={() => handleClick(totalPages)}>
+          <img src={ArrowRight} alt="다음" className="size-20" />
+        </button>
+      )}
+    </div>
+  );
+}