diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 634d4d2bb9..09db2e5c76 100644
--- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -562,7 +562,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   display: block;
 }
 
-.emotion-465 {
+.emotion-468 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -570,7 +570,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-466 {
+.emotion-469 {
   border-style: solid;
   border-color: #DEE2E5;
   border-width: 1px;
@@ -580,7 +580,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   width: 100%;
 }
 
-.emotion-469 {
+.emotion-472 {
   margin-bottom: 32px;
 }
 
@@ -2241,6 +2241,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
                           </span>
                         </a>
                       </li>
+                      <li
+                        class="nk-menu-item emotion-12"
+                      >
+                        <a
+                          aria-current="false"
+                          class="emotion-13"
+                          data-testid="buttonLink"
+                          href="/components/pagination"
+                        >
+                          <span
+                            class="emotion-14"
+                          >
+                            Pagination
+                          </span>
+                        </a>
+                      </li>
                       <li
                         class="nk-menu-item emotion-12"
                       >
@@ -3153,11 +3169,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </div>
               </ul>
               <div
-                class="emotion-465"
+                class="emotion-468"
               >
                 <hr
                   aria-hidden="true"
-                  class="emotion-466"
+                  class="emotion-469"
                   data-testid="divider"
                 />
               </div>
@@ -3178,7 +3194,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
             />
           </nav>
           <div
-            class="emotion-469"
+            class="emotion-472"
           />
         </div>
       </div>
@@ -3867,7 +3883,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   display: block;
 }
 
-.emotion-463 {
+.emotion-466 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -3875,7 +3891,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-464 {
+.emotion-467 {
   border-style: solid;
   border-color: #DEE2E5;
   border-width: 1px;
@@ -3886,57 +3902,57 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-465 {
+  .emotion-468 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-465 {
+  .emotion-468 {
     display: block;
   }
 }
 
-.emotion-467 {
+.emotion-470 {
   margin-bottom: 32px;
 }
 
-.emotion-468 {
+.emotion-471 {
   margin-inline: 32px;
   margin-block: 24px;
 }
 
-.emotion-469 {
+.emotion-472 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-470 {
+.emotion-473 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 24px;
 }
 
-.emotion-471 {
+.emotion-474 {
   margin: 0;
   color: #2E3F54;
   font-family: "Poppins",sans-serif;
@@ -3946,11 +3962,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
   letter-spacing: 0;
 }
 
-.emotion-471 svg {
+.emotion-474 svg {
   fill: #2E3F54;
 }
 
-.emotion-472 {
+.emotion-475 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -3960,7 +3976,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-472 {
+  .emotion-475 {
     transition-property: fill;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
@@ -3968,26 +3984,26 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-472 {
+  .emotion-475 {
     transition-property: fill;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-472.emotion-472 {
+.emotion-475.emotion-475 {
   width: 24px;
   height: 24px;
 }
 
-.emotion-475 {
+.emotion-478 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 44px;
 }
 
-.emotion-476 {
+.emotion-479 {
   display: block;
   color: #2E3F54;
   font-family: "Poppins",sans-serif;
@@ -4001,23 +4017,23 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding-block-start: 8px;
 }
 
-.emotion-476 svg {
+.emotion-479 svg {
   fill: #2E3F54;
 }
 
-.emotion-476::before {
+.emotion-479::before {
   content: '';
   margin-bottom: -0.403em;
   display: block;
 }
 
-.emotion-476::after {
+.emotion-479::after {
   content: '';
   margin-top: -0.4em;
   display: block;
 }
 
-.emotion-477 {
+.emotion-480 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4029,7 +4045,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   cursor: pointer;
 }
 
-.emotion-478 {
+.emotion-481 {
   position: relative;
   display: inline-block;
   -webkit-align-self: start;
@@ -4043,11 +4059,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-right: 12px;
 }
 
-.emotion-478 * {
+.emotion-481 * {
   box-sizing: border-box;
 }
 
-.emotion-479 {
+.emotion-482 {
   position: absolute;
   top: 50%;
   left: calc((16px / 2) + 4px);
@@ -4062,36 +4078,36 @@ exports[`Sidebar renders correctly when closed 1`] = `
   transform: translate3d(calc(40px / -2), calc(40px / -2), 0);
 }
 
-.emotion-479:disabled {
+.emotion-482:disabled {
   opacity: 0;
 }
 
-.emotion-479:hover:active:not(:disabled) {
+.emotion-482:hover:active:not(:disabled) {
   opacity: 0.4;
 }
 
-.emotion-479:valid:hover:not(:disabled) {
+.emotion-482:valid:hover:not(:disabled) {
   background-color: #00601A;
   opacity: 0.2;
 }
 
-.emotion-479:valid:hover:active:not(:disabled) {
+.emotion-482:valid:hover:active:not(:disabled) {
   background-color: #00601A;
   opacity: 0.4;
 }
 
-.emotion-479:invalid:hover:not(:disabled) {
+.emotion-482:invalid:hover:not(:disabled) {
   background-color: #A90000;
   opacity: 0.2;
 }
 
-.emotion-479:invalid:hover:active:not(:disabled) {
+.emotion-482:invalid:hover:active:not(:disabled) {
   background-color: #A90000;
   opacity: 0.4;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-479 {
+  .emotion-482 {
     transition-property: inset,opacity;
     transition-duration: 200ms,200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
@@ -4099,14 +4115,14 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-479 {
+  .emotion-482 {
     transition-property: inset,opacity;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-480 {
+.emotion-483 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4129,15 +4145,15 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding-inline: 4px;
 }
 
-.emotion-480:checked:not(:disabled) {
+.emotion-483:checked:not(:disabled) {
   background-color: #3358CC;
 }
 
-.emotion-480:disabled {
+.emotion-483:disabled {
   background-color: #DEE2E5;
 }
 
-.emotion-480:focus-visible:not(:disabled) {
+.emotion-483:focus-visible:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -4146,13 +4162,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:focus-visible:not(:disabled) {
+    .emotion-483:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-480:checked:focus-visible:not(:disabled) {
+.emotion-483:checked:focus-visible:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -4162,13 +4178,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:checked:focus-visible:not(:disabled) {
+    .emotion-483:checked:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-480:checked:focus-visible:hover:not(:disabled) {
+.emotion-483:checked:focus-visible:hover:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -4178,13 +4194,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:checked:focus-visible:hover:not(:disabled) {
+    .emotion-483:checked:focus-visible:hover:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-481 {
+.emotion-484 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -4193,7 +4209,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   place-items: center;
 }
 
-.emotion-482 {
+.emotion-485 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4205,22 +4221,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-482 svg {
+.emotion-485 svg {
   fill: #FFFFFF;
 }
 
-.emotion-482:disabled svg {
+.emotion-485:disabled svg {
   fill: #C0C7CC;
 }
 
-.emotion-482 svg {
+.emotion-485 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-483 {
+.emotion-486 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4232,22 +4248,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-483 svg {
+.emotion-486 svg {
   fill: #FFFFFF;
 }
 
-.emotion-483:disabled svg {
+.emotion-486:disabled svg {
   fill: #C0C7CC;
 }
 
-.emotion-483 svg {
+.emotion-486 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-484 {
+.emotion-487 {
   background-color: #FFFFFF;
   border-radius: 50%;
   width: 16px;
@@ -4261,12 +4277,12 @@ exports[`Sidebar renders correctly when closed 1`] = `
   place-items: center;
 }
 
-.emotion-484 svg {
+.emotion-487 svg {
   fill: #09111C;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-484 {
+  .emotion-487 {
     transition-property: inset;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
@@ -4274,14 +4290,14 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-484 {
+  .emotion-487 {
     transition-property: inset;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 }
 
-.emotion-485 {
+.emotion-488 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4291,7 +4307,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   cursor: inherit;
 }
 
-.emotion-486 {
+.emotion-489 {
   color: #2E3F54;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
@@ -4301,17 +4317,17 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding: 0.5px 0px;
 }
 
-.emotion-486:disabled {
+.emotion-489:disabled {
   color: #C0C7CC;
 }
 
-.emotion-486::before {
+.emotion-489::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-486::after {
+.emotion-489::after {
   content: '';
   margin-top: -0.409em;
   display: block;
@@ -6074,6 +6090,23 @@ exports[`Sidebar renders correctly when closed 1`] = `
                                 </span>
                               </a>
                             </li>
+                            <li
+                              class="nk-menu-item emotion-10"
+                            >
+                              <a
+                                aria-current="false"
+                                class="emotion-11"
+                                data-testid="buttonLink"
+                                href="/components/pagination"
+                                tabindex="-1"
+                              >
+                                <span
+                                  class="emotion-12"
+                                >
+                                  Pagination
+                                </span>
+                              </a>
+                            </li>
                             <li
                               class="nk-menu-item emotion-10"
                             >
@@ -7032,11 +7065,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
                       </div>
                     </ul>
                     <div
-                      class="emotion-463"
+                      class="emotion-466"
                     >
                       <hr
                         aria-hidden="true"
-                        class="emotion-464"
+                        class="emotion-467"
                         data-testid="divider"
                       />
                     </div>
@@ -7044,7 +7077,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </nav>
               </div>
               <div
-                class="emotion-465"
+                class="emotion-468"
               >
                 <nav
                   aria-label="menu-sidebar"
@@ -7057,28 +7090,28 @@ exports[`Sidebar renders correctly when closed 1`] = `
                   />
                 </nav>
                 <div
-                  class="emotion-467"
+                  class="emotion-470"
                 />
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <a
-                  class="emotion-469"
+                  class="emotion-472"
                   href="https://github.com/newscorp-ghfb/newskit"
                   tabindex="-1"
                 >
                   <div
-                    class="emotion-470"
+                    class="emotion-473"
                   >
                     <p
-                      class="emotion-471"
+                      class="emotion-474"
                     >
                       Github
                     </p>
                     <svg
                       aria-hidden="true"
-                      class="emotion-472 emotion-473"
+                      class="emotion-475 emotion-476"
                       fill="currentColor"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -7096,46 +7129,46 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </a>
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <div
-                  class="emotion-475"
+                  class="emotion-478"
                 >
                   <label
-                    class="emotion-476"
+                    class="emotion-479"
                     for="dark-theme-switch"
                   >
                     Dark theme
                   </label>
                   <label
-                    class="emotion-477"
+                    class="emotion-480"
                   >
                     <div
-                      class="emotion-478"
+                      class="emotion-481"
                       role="presentation"
                     >
                       <div
-                        class="emotion-479"
+                        class="emotion-482"
                         data-testid="checkbox-feedback"
                       />
                       <div
-                        class="emotion-480"
+                        class="emotion-483"
                       >
                         <div
-                          class="emotion-481"
+                          class="emotion-484"
                         >
                           <div
-                            class="emotion-482"
+                            class="emotion-485"
                           />
                           <div
-                            class="emotion-483"
+                            class="emotion-486"
                           />
                           <div
-                            class="emotion-484"
+                            class="emotion-487"
                           />
                         </div>
                         <input
-                          class="emotion-485"
+                          class="emotion-488"
                           data-testid="checkbox-input"
                           id="dark-theme-switch"
                           role="switch"
@@ -7145,7 +7178,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                       </div>
                     </div>
                     <span
-                      class="emotion-486"
+                      class="emotion-489"
                     >
                        
                     </span>
@@ -7728,7 +7761,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   display: block;
 }
 
-.emotion-465 {
+.emotion-468 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -7736,7 +7769,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-466 {
+.emotion-469 {
   border-style: solid;
   border-color: #DEE2E5;
   border-width: 1px;
@@ -7746,7 +7779,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   width: 100%;
 }
 
-.emotion-469 {
+.emotion-472 {
   margin-bottom: 32px;
 }
 
@@ -9411,6 +9444,22 @@ exports[`Sidebar renders correctly when open 1`] = `
                           </span>
                         </a>
                       </li>
+                      <li
+                        class="nk-menu-item emotion-12"
+                      >
+                        <a
+                          aria-current="false"
+                          class="emotion-13"
+                          data-testid="buttonLink"
+                          href="/components/pagination"
+                        >
+                          <span
+                            class="emotion-14"
+                          >
+                            Pagination
+                          </span>
+                        </a>
+                      </li>
                       <li
                         class="nk-menu-item emotion-12"
                       >
@@ -10323,11 +10372,11 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </div>
               </ul>
               <div
-                class="emotion-465"
+                class="emotion-468"
               >
                 <hr
                   aria-hidden="true"
-                  class="emotion-466"
+                  class="emotion-469"
                   data-testid="divider"
                 />
               </div>
@@ -10348,7 +10397,7 @@ exports[`Sidebar renders correctly when open 1`] = `
             />
           </nav>
           <div
-            class="emotion-469"
+            class="emotion-472"
           />
         </div>
       </div>
@@ -11036,7 +11085,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   display: block;
 }
 
-.emotion-463 {
+.emotion-466 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -11044,7 +11093,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-464 {
+.emotion-467 {
   border-style: solid;
   border-color: #DEE2E5;
   border-width: 1px;
@@ -11055,57 +11104,57 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-465 {
+  .emotion-468 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-465 {
+  .emotion-468 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-465 {
+  .emotion-468 {
     display: block;
   }
 }
 
-.emotion-467 {
+.emotion-470 {
   margin-bottom: 32px;
 }
 
-.emotion-468 {
+.emotion-471 {
   margin-inline: 32px;
   margin-block: 24px;
 }
 
-.emotion-469 {
+.emotion-472 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-470 {
+.emotion-473 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 24px;
 }
 
-.emotion-471 {
+.emotion-474 {
   margin: 0;
   color: #2E3F54;
   font-family: "Poppins",sans-serif;
@@ -11115,11 +11164,11 @@ exports[`Sidebar renders correctly when open 1`] = `
   letter-spacing: 0;
 }
 
-.emotion-471 svg {
+.emotion-474 svg {
   fill: #2E3F54;
 }
 
-.emotion-472 {
+.emotion-475 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -11129,7 +11178,7 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-472 {
+  .emotion-475 {
     transition-property: fill;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
@@ -11137,26 +11186,26 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-472 {
+  .emotion-475 {
     transition-property: fill;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-472.emotion-472 {
+.emotion-475.emotion-475 {
   width: 24px;
   height: 24px;
 }
 
-.emotion-475 {
+.emotion-478 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 44px;
 }
 
-.emotion-476 {
+.emotion-479 {
   display: block;
   color: #2E3F54;
   font-family: "Poppins",sans-serif;
@@ -11170,23 +11219,23 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding-block-start: 8px;
 }
 
-.emotion-476 svg {
+.emotion-479 svg {
   fill: #2E3F54;
 }
 
-.emotion-476::before {
+.emotion-479::before {
   content: '';
   margin-bottom: -0.403em;
   display: block;
 }
 
-.emotion-476::after {
+.emotion-479::after {
   content: '';
   margin-top: -0.4em;
   display: block;
 }
 
-.emotion-477 {
+.emotion-480 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11198,7 +11247,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   cursor: pointer;
 }
 
-.emotion-478 {
+.emotion-481 {
   position: relative;
   display: inline-block;
   -webkit-align-self: start;
@@ -11212,11 +11261,11 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-right: 12px;
 }
 
-.emotion-478 * {
+.emotion-481 * {
   box-sizing: border-box;
 }
 
-.emotion-479 {
+.emotion-482 {
   position: absolute;
   top: 50%;
   left: calc((16px / 2) + 4px);
@@ -11231,36 +11280,36 @@ exports[`Sidebar renders correctly when open 1`] = `
   transform: translate3d(calc(40px / -2), calc(40px / -2), 0);
 }
 
-.emotion-479:disabled {
+.emotion-482:disabled {
   opacity: 0;
 }
 
-.emotion-479:hover:active:not(:disabled) {
+.emotion-482:hover:active:not(:disabled) {
   opacity: 0.4;
 }
 
-.emotion-479:valid:hover:not(:disabled) {
+.emotion-482:valid:hover:not(:disabled) {
   background-color: #00601A;
   opacity: 0.2;
 }
 
-.emotion-479:valid:hover:active:not(:disabled) {
+.emotion-482:valid:hover:active:not(:disabled) {
   background-color: #00601A;
   opacity: 0.4;
 }
 
-.emotion-479:invalid:hover:not(:disabled) {
+.emotion-482:invalid:hover:not(:disabled) {
   background-color: #A90000;
   opacity: 0.2;
 }
 
-.emotion-479:invalid:hover:active:not(:disabled) {
+.emotion-482:invalid:hover:active:not(:disabled) {
   background-color: #A90000;
   opacity: 0.4;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-479 {
+  .emotion-482 {
     transition-property: inset,opacity;
     transition-duration: 200ms,200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
@@ -11268,14 +11317,14 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-479 {
+  .emotion-482 {
     transition-property: inset,opacity;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-480 {
+.emotion-483 {
   position: absolute;
   top: 0;
   left: 0;
@@ -11298,15 +11347,15 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding-inline: 4px;
 }
 
-.emotion-480:checked:not(:disabled) {
+.emotion-483:checked:not(:disabled) {
   background-color: #3358CC;
 }
 
-.emotion-480:disabled {
+.emotion-483:disabled {
   background-color: #DEE2E5;
 }
 
-.emotion-480:focus-visible:not(:disabled) {
+.emotion-483:focus-visible:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -11315,13 +11364,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:focus-visible:not(:disabled) {
+    .emotion-483:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-480:checked:focus-visible:not(:disabled) {
+.emotion-483:checked:focus-visible:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -11331,13 +11380,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:checked:focus-visible:not(:disabled) {
+    .emotion-483:checked:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-480:checked:focus-visible:hover:not(:disabled) {
+.emotion-483:checked:focus-visible:hover:not(:disabled) {
   outline-color: #3768FB;
   outline-style: solid;
   outline-width: 2px;
@@ -11347,13 +11396,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-480:checked:focus-visible:hover:not(:disabled) {
+    .emotion-483:checked:focus-visible:hover:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-481 {
+.emotion-484 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -11362,7 +11411,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   place-items: center;
 }
 
-.emotion-482 {
+.emotion-485 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11374,22 +11423,22 @@ exports[`Sidebar renders correctly when open 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-482 svg {
+.emotion-485 svg {
   fill: #FFFFFF;
 }
 
-.emotion-482:disabled svg {
+.emotion-485:disabled svg {
   fill: #C0C7CC;
 }
 
-.emotion-482 svg {
+.emotion-485 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-483 {
+.emotion-486 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11401,22 +11450,22 @@ exports[`Sidebar renders correctly when open 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-483 svg {
+.emotion-486 svg {
   fill: #FFFFFF;
 }
 
-.emotion-483:disabled svg {
+.emotion-486:disabled svg {
   fill: #C0C7CC;
 }
 
-.emotion-483 svg {
+.emotion-486 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-484 {
+.emotion-487 {
   background-color: #FFFFFF;
   border-radius: 50%;
   width: 16px;
@@ -11430,12 +11479,12 @@ exports[`Sidebar renders correctly when open 1`] = `
   place-items: center;
 }
 
-.emotion-484 svg {
+.emotion-487 svg {
   fill: #09111C;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-484 {
+  .emotion-487 {
     transition-property: inset;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
@@ -11443,14 +11492,14 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-484 {
+  .emotion-487 {
     transition-property: inset;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 }
 
-.emotion-485 {
+.emotion-488 {
   position: absolute;
   top: 0;
   left: 0;
@@ -11460,7 +11509,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   cursor: inherit;
 }
 
-.emotion-486 {
+.emotion-489 {
   color: #2E3F54;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
@@ -11470,17 +11519,17 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding: 0.5px 0px;
 }
 
-.emotion-486:disabled {
+.emotion-489:disabled {
   color: #C0C7CC;
 }
 
-.emotion-486::before {
+.emotion-489::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-486::after {
+.emotion-489::after {
   content: '';
   margin-top: -0.409em;
   display: block;
@@ -13162,6 +13211,22 @@ exports[`Sidebar renders correctly when open 1`] = `
                                 </span>
                               </a>
                             </li>
+                            <li
+                              class="nk-menu-item emotion-10"
+                            >
+                              <a
+                                aria-current="false"
+                                class="emotion-11"
+                                data-testid="buttonLink"
+                                href="/components/pagination"
+                              >
+                                <span
+                                  class="emotion-12"
+                                >
+                                  Pagination
+                                </span>
+                              </a>
+                            </li>
                             <li
                               class="nk-menu-item emotion-10"
                             >
@@ -14074,11 +14139,11 @@ exports[`Sidebar renders correctly when open 1`] = `
                       </div>
                     </ul>
                     <div
-                      class="emotion-463"
+                      class="emotion-466"
                     >
                       <hr
                         aria-hidden="true"
-                        class="emotion-464"
+                        class="emotion-467"
                         data-testid="divider"
                       />
                     </div>
@@ -14086,7 +14151,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </nav>
               </div>
               <div
-                class="emotion-465"
+                class="emotion-468"
               >
                 <nav
                   aria-label="menu-sidebar"
@@ -14099,27 +14164,27 @@ exports[`Sidebar renders correctly when open 1`] = `
                   />
                 </nav>
                 <div
-                  class="emotion-467"
+                  class="emotion-470"
                 />
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <a
-                  class="emotion-469"
+                  class="emotion-472"
                   href="https://github.com/newscorp-ghfb/newskit"
                 >
                   <div
-                    class="emotion-470"
+                    class="emotion-473"
                   >
                     <p
-                      class="emotion-471"
+                      class="emotion-474"
                     >
                       Github
                     </p>
                     <svg
                       aria-hidden="true"
-                      class="emotion-472 emotion-473"
+                      class="emotion-475 emotion-476"
                       fill="currentColor"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -14137,46 +14202,46 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </a>
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <div
-                  class="emotion-475"
+                  class="emotion-478"
                 >
                   <label
-                    class="emotion-476"
+                    class="emotion-479"
                     for="dark-theme-switch"
                   >
                     Dark theme
                   </label>
                   <label
-                    class="emotion-477"
+                    class="emotion-480"
                   >
                     <div
-                      class="emotion-478"
+                      class="emotion-481"
                       role="presentation"
                     >
                       <div
-                        class="emotion-479"
+                        class="emotion-482"
                         data-testid="checkbox-feedback"
                       />
                       <div
-                        class="emotion-480"
+                        class="emotion-483"
                       >
                         <div
-                          class="emotion-481"
+                          class="emotion-484"
                         >
                           <div
-                            class="emotion-482"
+                            class="emotion-485"
                           />
                           <div
-                            class="emotion-483"
+                            class="emotion-486"
                           />
                           <div
-                            class="emotion-484"
+                            class="emotion-487"
                           />
                         </div>
                         <input
-                          class="emotion-485"
+                          class="emotion-488"
                           data-testid="checkbox-input"
                           id="dark-theme-switch"
                           role="switch"
@@ -14185,7 +14250,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                       </div>
                     </div>
                     <span
-                      class="emotion-486"
+                      class="emotion-489"
                     >
                        
                     </span>
diff --git a/site/pages/components/pagination.tsx b/site/pages/components/pagination.tsx
new file mode 100644
index 0000000000..dd4b17ceaa
--- /dev/null
+++ b/site/pages/components/pagination.tsx
@@ -0,0 +1,484 @@
+import React from 'react';
+import {Info as FilledInfo} from '@emotion-icons/material/Info';
+import {InlineMessage, LinkInline, UnorderedList, toNewsKitIcon} from 'newskit';
+import {InlineCode} from '../../components/markdown-elements';
+import {ComponentPageTemplate} from '../../templates/component-page-template';
+import {LayoutProps} from '../../components/layout';
+import {MetaStatus} from '../../components/meta/types';
+import {getIllustrationComponent} from '../../components/illustrations/illustration-loader';
+import {UsageKind} from '../../components/usage-card';
+import {IconFilledCircle} from '../../components/icons';
+import {Link} from '../../components/link';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
+import {OverridesRowsProps} from '../../components/component-api';
+
+const IconFilledInfo = toNewsKitIcon(FilledInfo);
+
+const infoIcon = (
+  <IconFilledInfo
+    overrides={{
+      size: 'iconSize020',
+    }}
+  />
+);
+
+const PaginationComponent = (layoutProps: LayoutProps) => (
+  <ComponentPageTemplate
+    headTags={{
+      title: 'Pagination',
+      description: 'Pagination lets users navigate through multiple pages.',
+    }}
+    layoutProps={layoutProps}
+    pageIntroduction={{
+      type: 'Navigation',
+      name: 'Pagination',
+      hero: {
+        illustration: 'components/pagination/hero',
+      },
+      introduction: 'Pagination lets users navigate through multiple pages.',
+    }}
+    componentDefaultsKey="pagination"
+    meta={{
+      status: MetaStatus.Supported,
+      introduced: 'v7.1.0',
+      storybookId: 'components-pagination--story-default',
+      codeUrl: '',
+      figmaUrl:
+        'https://www.figma.com/file/MkU4xtY2yPcCpfhzQCuSnK/v5.0-%F0%9F%9F%A2-NewsKit-component-library?node-id=13255%3A179266&t=YHF77CaB2nhMe5VH-0',
+    }}
+    anatomy={{
+      introduction:
+        'The pagination contains 3 required elements and 5 optional elements.',
+      rows: [
+        {
+          name: 'Pagination',
+          description: 'Combines pagination items',
+          component: ['Unordered List'],
+        },
+        {
+          name: 'FirstItem',
+          description: 'Link to first item',
+          component: ['Button'],
+          optional: true,
+        },
+        {
+          name: 'PreviousItem',
+          description: 'Link to previous item',
+          component: ['Button'],
+        },
+        {
+          name: 'Boundaries',
+          description:
+            'Items to the left and right of the sibling pagination items',
+          component: ['Button'],
+          optional: true,
+        },
+        {
+          name: 'Truncation',
+          description:
+            'Icon applied when there are more items than the width allows',
+          component: ['Icon'],
+          optional: true,
+        },
+        {
+          name: 'Siblings',
+          description:
+            'Items to the left and right of the selected pagination item',
+          component: ['Button'],
+          optional: true,
+        },
+        {
+          name: 'NextItem',
+          description: 'Link to next item',
+          component: ['Button'],
+        },
+        {
+          name: 'LastItem',
+          description: 'Link to last item',
+          component: ['Button'],
+          optional: true,
+        },
+      ],
+      media: getIllustrationComponent('components/pagination/anatomy'),
+    }}
+    options={{
+      introduction:
+        'The pagination has options that can be used to provide an appropriate experience for different use cases.',
+      cards: [
+        {
+          title: 'First and last pagination item',
+          description: 'Links to the first and last item.',
+          media: getIllustrationComponent(
+            'components/pagination/options/firstlast',
+          ),
+        },
+        {
+          title: 'Truncation',
+          description:
+            'Truncation can be applied when there are more items than the width allows. Ellipsis are used to indicate additional items. Double truncation is applied when the current item is separated from both the first and last item.',
+          media: getIllustrationComponent(
+            'components/pagination/options/truncation',
+          ),
+        },
+        {
+          title: 'Siblings',
+          description: 'The main pagination items.',
+          media: getIllustrationComponent(
+            'components/pagination/options/siblings',
+          ),
+        },
+        {
+          title: 'Boundaries',
+          description:
+            'Pagination items to the left and right of the siblings.',
+          media: getIllustrationComponent(
+            'components/pagination/options/boundaries',
+          ),
+        },
+        {
+          title: 'Size',
+          description:
+            'There are three sizes of pagination: small, medium, and large. The default is medium.',
+          media: getIllustrationComponent('components/pagination/options/size'),
+        },
+      ],
+    }}
+    states={{
+      introduction: 'Pagination has the following states:',
+      layout: '2-span',
+      cards: [
+        {
+          title: 'Base',
+          description:
+            'The default style before the user interacts with the pagination.',
+          media: getIllustrationComponent('components/pagination/states/base'),
+        },
+        {
+          title: 'Focus',
+          description:
+            'Communicates that a user has highlighted a pagination item (e.g. via keyboard or voice).',
+          media: getIllustrationComponent('components/pagination/states/focus'),
+        },
+        {
+          title: 'Hover',
+          description:
+            'The pagination item changes style to let the user know it’s interactive.',
+          media: getIllustrationComponent('components/pagination/states/hover'),
+        },
+        {
+          title: 'Active',
+          description:
+            'The pagination item changes style to provide feedback to the user that it has been interacted with.',
+          media: getIllustrationComponent(
+            'components/pagination/states/active',
+          ),
+        },
+        {
+          title: 'Selected',
+          description:
+            'The pagination item changes style to let the user know it is the current item that has been selected.',
+          media: getIllustrationComponent(
+            'components/pagination/states/selected',
+          ),
+        },
+        {
+          title: 'Disabled',
+          description:
+            'Communicates that a pagination item exists, but isn’t available in that scenario. Applies when the user has reached the first or last pagination item.',
+          media: getIllustrationComponent(
+            'components/pagination/states/disabled',
+          ),
+        },
+      ],
+    }}
+    usage={{
+      introduction:
+        'The following guidance describes how and when to appropriately use the pagination component.',
+      layout: '2-span',
+      cards: [
+        {
+          title: 'Use pagination when there are more than 25 results',
+          description:
+            'This helps reduce cognitive load as the user is not overwhelmed with information.',
+          kind: UsageKind.DO,
+          media: getIllustrationComponent('components/pagination/usage/do-01'),
+        },
+        {
+          title: 'Don’t split pagination over multiple lines',
+          description:
+            'This can make pagination difficult for users to understand.',
+          kind: UsageKind.DONT,
+          media: getIllustrationComponent('components/pagination/usage/do-02'),
+        },
+        {
+          title: 'Do position pagination in a consistent place on each page',
+          description:
+            'Pagination should appear in close proximity to the content, typically beneath the search results or listing.',
+          kind: UsageKind.DO,
+          media: getIllustrationComponent('components/pagination/usage/do-03'),
+        },
+      ],
+    }}
+    accessibility={{
+      introduction: (
+        <>
+          The Pagination has the following accessibility considerations:
+          <br />
+          <br />
+          <UnorderedList
+            markerAlign="start"
+            listItemMarker={IconFilledCircle}
+            overrides={{
+              content: {
+                typographyPreset: 'editorialParagraph030',
+              },
+              marginBlockStart: 'space050',
+              marginBlockEnd: 'space090',
+              spaceStack: 'space060',
+            }}
+          >
+            <>
+              Pagination is structured using an unordered list. The nav element
+              is labeled ‘pagination’, making it a navigation landmark so that
+              it is easy to locate using assistive tools.
+            </>
+          </UnorderedList>
+        </>
+      ),
+      focusOrder: {
+        title: 'Focus order',
+        tableRows: [
+          {
+            order: 1,
+            element: 'Pagination item',
+            role: 'Focusses to the first pagination item',
+          },
+          {
+            order: 2,
+            element: 'Pagination item',
+            role: 'Focusses to the next pagination item',
+          },
+        ],
+      },
+      interaction: {
+        title: 'Keyboard interactions',
+        tableRows: [
+          {
+            command: ['Tab'],
+            description:
+              'When focus is outside the pagination, moves focus to the first pagination item. If focus is on a pagination item, moves focus to the next item',
+          },
+          {
+            command: ['Space or Enter'],
+            description: 'Activates the pagination item',
+          },
+        ],
+      },
+      aria: {
+        title: 'WAI-ARIA',
+        tableRows: [
+          {
+            element: 'nav',
+            attribute: 'aria-label',
+            value: 'pagination',
+            description:
+              'Describes the type of navigation provided in the nav element as pagination.',
+          },
+          {
+            element: 'link',
+            attribute: 'aria-label',
+            value: 'go to previous / next page',
+            description: (
+              <>
+                Used to inform the assistive technology user what has been
+                indicated via styling. Indicates the link points to the previous
+                page
+              </>
+            ),
+          },
+          {
+            element: 'link',
+            attribute: 'aria-label',
+            value: 'go to page [number]',
+            description: 'Indicates the link points to a page number',
+          },
+          {
+            element: 'link',
+            attribute: 'aria-current',
+            value: 'page',
+            description: 'Indicates the current page',
+          },
+          {
+            element: 'link',
+            attribute: 'aria-disabled',
+            value: 'true',
+            description: 'Indicates a disabled link',
+          },
+        ],
+      },
+    }}
+    componentAPI={{
+      components: [
+        {
+          title: 'Pagination',
+          summary: 'Container component, holds React content for its children',
+          propsRows: [
+            {
+              name: 'totalItems',
+              type: 'number',
+              description: 'Total number of items',
+              required: true,
+            },
+            {
+              name: 'pageSize',
+              type: 'number',
+              description: 'Number of items per page',
+              required: true,
+            },
+            {
+              name: 'page',
+              type: 'number',
+              description:
+                'Latest selected page if wishing to control that state externally. If omitted, we will keep track of that for you',
+              required: false,
+            },
+            {
+              name: 'defaultPage',
+              type: 'number',
+              default: '1',
+              description: 'Initial selected page (static value)',
+              required: false,
+            },
+            {
+              name: 'buildHref',
+              type: '(number) => string',
+              description: (
+                <>
+                  Normally required but not if onPageChange is set.Template to
+                  build href for every link{' '}
+                  <InlineCode>(number) ⇒ string</InlineCode>
+                </>
+              ),
+              required: false,
+            },
+            {
+              name: 'onPageChange',
+              type: '(number) => void',
+              default: 'void',
+              description:
+                'Action that occurs after a pagination item is clicked on to change page',
+              required: false,
+            },
+            {
+              name: 'size',
+              type: ['small', 'medium', 'large'],
+              default: 'medium',
+              description: 'Defines the size of the pagination item',
+              required: false,
+            },
+          ],
+          propsFooter: (
+            <InlineMessage
+              icon={infoIcon}
+              role="region"
+              aria-label="pagination info"
+              overrides={{
+                marginBlockStart: 'space030',
+              }}
+            >
+              Please refer to the{' '}
+              <LinkInline href="/components/button/#component-api">
+                IconButton
+              </LinkInline>{' '}
+              for props and overrides for PaginationFirstItem,
+              PaginationLastItem, PaginationNextItem and PaginationPreviousItem.
+              <br />
+              <br />
+              From the Pagination props, it is possible to calculate the
+              lastPage. This is something we do in the PaginationProviderContext
+              that child components of Pagination can access. If using a custom
+              input component, lastPage can be used to validate that an input
+              page number is within a valid range.{' '}
+              <Link
+                href="https://storybook.newskit.co.uk/?path=/docs/components-pagination--story-default"
+                target="_blank"
+              >
+                See Storybook examples
+              </Link>{' '}
+              for how to use the usePaginationContext hook in your custom
+              components.
+            </InlineMessage>
+          ),
+          overridesRows: [
+            {
+              attribute: 'stylePreset',
+              type: 'MQ<string>',
+              description:
+                'If provided, overrides the stylePreset of the pagination',
+            },
+            ...(commonLogicalProps() as OverridesRowsProps[]),
+          ],
+        },
+        {
+          title: 'Pagination items',
+          summary: 'Show pagination item links with numbers.',
+          propsRows: [
+            {
+              name: 'truncation',
+              type: 'boolean',
+              default: 'true',
+              description: 'Show truncation',
+              required: false,
+            },
+            {
+              name: 'siblings',
+              type: 'number',
+              default: '3',
+              description:
+                'Number of siblings on left/right side of current page',
+              required: false,
+            },
+            {
+              name: 'boundaries',
+              type: 'number',
+              default: '1',
+              description: 'Number of elements on left/right edges',
+              required: false,
+            },
+            {
+              name: 'eventContext',
+              type: 'object',
+              description:
+                'Allows users to add extra event data to click events.',
+              required: false,
+            },
+            {
+              name: 'eventOriginator',
+              type: 'string',
+              default: 'pagination-link',
+              description:
+                'Allows users to add an event originator custom name.	',
+              required: false,
+            },
+          ],
+
+          overridesRows: [
+            {
+              attribute: 'stylePreset',
+              type: 'MQ<string>',
+              default: 'paginationItem',
+              description:
+                'If provided, this overrides the pagination item styling.',
+            },
+            ...(commonLogicalProps() as OverridesRowsProps[]),
+          ],
+        },
+      ],
+    }}
+    related={{
+      related: ['Unordered List', 'Button', 'Icon'],
+    }}
+  />
+);
+
+export default PaginationComponent;
diff --git a/site/public/static/illustrations/components/pagination/anatomy.svg b/site/public/static/illustrations/components/pagination/anatomy.svg
new file mode 100644
index 0000000000..e24bc0ff6b
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/anatomy.svg
@@ -0,0 +1,78 @@
+<svg id="nksvg" width="1490" height="883" viewBox="0 0 1490 883" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3295_104994)">
+<rect width="1490" height="883" fill="white"/>
+<rect width="1490" height="883" fill="var(--color-illustrationBackground010)"/>
+<path d="M1283.72 424.45L1281.33 426.835L1289.08 434.6L1281.33 442.365L1283.72 444.75L1293.87 434.6L1283.72 424.45Z" fill="var(--color-illustrationPalette030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1393.87 434.6L1386.1 426.835L1388.49 424.45L1398.64 434.6L1388.49 444.75L1386.1 442.365L1393.87 434.6ZM1407.1 424.45H1403.71V444.75H1407.1V424.45Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M1166.63 445.3V443.412C1168.15 442.217 1169.58 441.012 1170.92 439.796C1172.28 438.559 1173.49 437.343 1174.54 436.148C1175.6 434.953 1176.43 433.78 1177.03 432.628C1177.65 431.476 1177.96 430.367 1177.96 429.3C1177.96 428.511 1177.82 427.775 1177.54 427.092C1177.29 426.409 1176.86 425.865 1176.26 425.46C1175.67 425.033 1174.86 424.82 1173.83 424.82C1172.85 424.82 1172.03 425.044 1171.37 425.492C1170.71 425.919 1170.2 426.495 1169.86 427.22C1169.54 427.945 1169.38 428.724 1169.38 429.556H1166.79C1166.79 428.084 1167.1 426.825 1167.72 425.78C1168.34 424.713 1169.18 423.903 1170.25 423.348C1171.31 422.793 1172.52 422.516 1173.86 422.516C1175.85 422.516 1177.47 423.081 1178.73 424.212C1180.01 425.321 1180.65 426.985 1180.65 429.204C1180.65 430.527 1180.32 431.839 1179.66 433.14C1178.99 434.42 1178.15 435.668 1177.13 436.884C1176.1 438.079 1175 439.199 1173.83 440.244C1172.68 441.289 1171.6 442.228 1170.6 443.06H1181.42V445.3H1166.63Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M1187.5 445.3V425.908L1183.89 426.708V424.852L1188.4 422.9H1190.22V445.3H1187.5Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M1051.52 445.3V443.412C1053.04 442.217 1054.47 441.012 1055.81 439.796C1057.18 438.559 1058.38 437.343 1059.43 436.148C1060.49 434.953 1061.32 433.78 1061.92 432.628C1062.54 431.476 1062.85 430.367 1062.85 429.3C1062.85 428.511 1062.71 427.775 1062.43 427.092C1062.18 426.409 1061.75 425.865 1061.15 425.46C1060.56 425.033 1059.75 424.82 1058.72 424.82C1057.74 424.82 1056.92 425.044 1056.26 425.492C1055.6 425.919 1055.1 426.495 1054.75 427.22C1054.43 427.945 1054.27 428.724 1054.27 429.556H1051.68C1051.68 428.084 1051.99 426.825 1052.61 425.78C1053.23 424.713 1054.07 423.903 1055.14 423.348C1056.2 422.793 1057.41 422.516 1058.75 422.516C1060.74 422.516 1062.36 423.081 1063.62 424.212C1064.9 425.321 1065.54 426.985 1065.54 429.204C1065.54 430.527 1065.21 431.839 1064.55 433.14C1063.88 434.42 1063.04 435.668 1062.02 436.884C1060.99 438.079 1059.9 439.199 1058.72 440.244C1057.57 441.289 1056.49 442.228 1055.49 443.06H1066.31V445.3H1051.52Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M1078.61 445.684C1076.63 445.684 1074.91 445.204 1073.46 444.244C1072.03 443.263 1070.93 441.908 1070.16 440.18C1069.39 438.431 1069.01 436.404 1069.01 434.1C1069.01 431.796 1069.39 429.78 1070.16 428.052C1070.93 426.303 1072.03 424.948 1073.46 423.988C1074.91 423.007 1076.63 422.516 1078.61 422.516C1080.59 422.516 1082.3 423.007 1083.73 423.988C1085.16 424.948 1086.26 426.303 1087.03 428.052C1087.79 429.78 1088.18 431.796 1088.18 434.1C1088.18 436.404 1087.79 438.431 1087.03 440.18C1086.26 441.908 1085.16 443.263 1083.73 444.244C1082.3 445.204 1080.59 445.684 1078.61 445.684ZM1078.61 443.316C1079.91 443.316 1081.07 442.953 1082.1 442.228C1083.14 441.481 1083.95 440.425 1084.53 439.06C1085.13 437.673 1085.43 436.02 1085.43 434.1C1085.43 432.18 1085.13 430.537 1084.53 429.172C1083.95 427.807 1083.14 426.761 1082.1 426.036C1081.07 425.289 1079.91 424.916 1078.61 424.916C1077.29 424.916 1076.11 425.289 1075.09 426.036C1074.07 426.761 1073.26 427.807 1072.66 429.172C1072.06 430.537 1071.76 432.18 1071.76 434.1C1071.76 436.02 1072.06 437.673 1072.66 439.06C1073.26 440.425 1074.07 441.481 1075.09 442.228C1076.11 442.953 1077.29 443.316 1078.61 443.316Z" fill="var(--color-illustrationPalette030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M970.75 434.217C968.889 434.217 967.367 435.739 967.367 437.6C967.367 439.461 968.889 440.983 970.75 440.983C972.611 440.983 974.133 439.461 974.133 437.6C974.133 435.739 972.611 434.217 970.75 434.217ZM950.45 434.217C948.589 434.217 947.067 435.739 947.067 437.6C947.067 439.461 948.589 440.984 950.45 440.984C952.311 440.984 953.833 439.461 953.833 437.6C953.833 435.739 952.311 434.217 950.45 434.217ZM957.217 437.6C957.217 435.739 958.739 434.217 960.6 434.217C962.461 434.217 963.983 435.739 963.983 437.6C963.983 439.461 962.461 440.983 960.6 440.983C958.739 440.983 957.217 439.461 957.217 437.6Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M845.52 445.3V425.908L841.904 426.708V424.852L846.416 422.9H848.24V445.3H845.52Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M855.176 445.3V425.908L851.56 426.708V424.852L856.072 422.9H857.896V445.3H855.176Z" fill="var(--color-illustrationPalette030)"/>
+<rect x="701" y="395" width="81.2" height="81.2" rx="20" fill="var(--color-illustrationPalette030)"/>
+<path d="M729.333 446.6V428.872L725.653 429.736V426.6L731.061 424.2H733.589V446.6H729.333Z" fill="var(--color-illustrationPalette010)"/>
+<path d="M747.116 446.984C745.047 446.984 743.276 446.504 741.804 445.544C740.332 444.563 739.191 443.208 738.38 441.48C737.591 439.731 737.196 437.704 737.196 435.4C737.196 433.117 737.591 431.101 738.38 429.352C739.191 427.603 740.332 426.248 741.804 425.288C743.276 424.307 745.047 423.816 747.116 423.816C749.186 423.816 750.956 424.307 752.428 425.288C753.9 426.248 755.031 427.603 755.82 429.352C756.631 431.101 757.036 433.117 757.036 435.4C757.036 437.704 756.631 439.731 755.82 441.48C755.031 443.208 753.9 444.563 752.428 445.544C750.956 446.504 749.186 446.984 747.116 446.984ZM747.116 443.304C748.802 443.304 750.178 442.6 751.244 441.192C752.311 439.784 752.844 437.853 752.844 435.4C752.844 432.947 752.311 431.016 751.244 429.608C750.178 428.2 748.802 427.496 747.116 427.496C745.41 427.496 744.023 428.2 742.956 429.608C741.911 431.016 741.388 432.947 741.388 435.4C741.388 437.853 741.911 439.784 742.956 441.192C744.023 442.6 745.41 443.304 747.116 443.304Z" fill="var(--color-illustrationPalette010)"/>
+<path d="M632.282 445.684C630.874 445.684 629.669 445.407 628.666 444.852C627.663 444.297 626.863 443.561 626.266 442.644C625.69 441.705 625.338 440.671 625.21 439.54H627.706C627.919 440.756 628.431 441.695 629.242 442.356C630.053 443.017 631.077 443.348 632.314 443.348C634.021 443.348 635.439 442.559 636.57 440.98C637.701 439.38 638.309 436.895 638.394 433.524C637.882 434.527 637.061 435.401 635.93 436.148C634.821 436.873 633.477 437.236 631.898 437.236C630.639 437.236 629.445 436.937 628.314 436.34C627.183 435.743 626.266 434.911 625.562 433.844C624.858 432.756 624.506 431.487 624.506 430.036C624.506 428.777 624.815 427.572 625.434 426.42C626.074 425.268 626.97 424.329 628.122 423.604C629.274 422.879 630.65 422.516 632.25 422.516C633.871 422.516 635.237 422.825 636.346 423.444C637.455 424.041 638.341 424.852 639.002 425.876C639.685 426.9 640.175 428.052 640.474 429.332C640.794 430.591 640.954 431.881 640.954 433.204C640.954 435.679 640.613 437.855 639.93 439.732C639.247 441.588 638.255 443.049 636.954 444.116C635.674 445.161 634.117 445.684 632.282 445.684ZM632.442 434.9C633.445 434.9 634.341 434.676 635.13 434.228C635.919 433.759 636.549 433.14 637.018 432.372C637.487 431.604 637.722 430.772 637.722 429.876C637.722 428.916 637.487 428.063 637.018 427.316C636.549 426.548 635.919 425.951 635.13 425.524C634.341 425.097 633.445 424.884 632.442 424.884C631.439 424.884 630.543 425.097 629.754 425.524C628.965 425.951 628.346 426.548 627.898 427.316C627.45 428.063 627.226 428.927 627.226 429.908C627.226 431.423 627.717 432.639 628.698 433.556C629.701 434.452 630.949 434.9 632.442 434.9Z" fill="var(--color-illustrationPalette030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M530.75 432.217C528.889 432.217 527.367 433.739 527.367 435.6C527.367 437.461 528.889 438.983 530.75 438.983C532.611 438.983 534.133 437.461 534.133 435.6C534.133 433.739 532.611 432.217 530.75 432.217ZM510.45 432.217C508.589 432.217 507.067 433.739 507.067 435.6C507.067 437.461 508.589 438.984 510.45 438.984C512.311 438.984 513.833 437.461 513.833 435.6C513.833 433.739 512.311 432.217 510.45 432.217ZM517.217 435.6C517.217 433.739 518.739 432.217 520.6 432.217C522.461 432.217 523.983 433.739 523.983 435.6C523.983 437.461 522.461 438.983 520.6 438.983C518.739 438.983 517.217 437.461 517.217 435.6Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M415.538 445.684C414.108 445.684 412.818 445.428 411.666 444.916C410.514 444.383 409.586 443.593 408.882 442.548C408.199 441.503 407.836 440.201 407.794 438.644H410.514C410.535 439.924 410.983 441.033 411.858 441.972C412.732 442.889 413.959 443.348 415.538 443.348C417.116 443.348 418.3 442.911 419.09 442.036C419.9 441.161 420.306 440.105 420.306 438.868C420.306 437.823 420.05 436.969 419.538 436.308C419.047 435.647 418.375 435.156 417.522 434.836C416.69 434.516 415.772 434.356 414.77 434.356H413.106V432.084H414.77C416.22 432.084 417.351 431.753 418.162 431.092C418.994 430.431 419.41 429.503 419.41 428.308C419.41 427.305 419.079 426.484 418.418 425.844C417.778 425.183 416.818 424.852 415.538 424.852C414.3 424.852 413.308 425.225 412.562 425.972C411.815 426.697 411.399 427.615 411.314 428.724H408.594C408.658 427.508 408.978 426.431 409.554 425.492C410.151 424.553 410.962 423.828 411.986 423.316C413.01 422.783 414.194 422.516 415.538 422.516C416.988 422.516 418.194 422.772 419.154 423.284C420.135 423.796 420.871 424.479 421.362 425.332C421.874 426.185 422.13 427.124 422.13 428.148C422.13 429.279 421.82 430.313 421.202 431.252C420.583 432.169 419.655 432.788 418.418 433.108C419.74 433.385 420.839 434.015 421.714 434.996C422.588 435.977 423.026 437.268 423.026 438.868C423.026 440.105 422.738 441.247 422.162 442.292C421.607 443.316 420.775 444.137 419.666 444.756C418.556 445.375 417.18 445.684 415.538 445.684Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M299.46 445.3V443.412C300.974 442.217 302.404 441.012 303.748 439.796C305.113 438.559 306.318 437.343 307.364 436.148C308.43 434.953 309.262 433.78 309.86 432.628C310.478 431.476 310.788 430.367 310.788 429.3C310.788 428.511 310.649 427.775 310.372 427.092C310.116 426.409 309.689 425.865 309.092 425.46C308.494 425.033 307.684 424.82 306.66 424.82C305.678 424.82 304.857 425.044 304.196 425.492C303.534 425.919 303.033 426.495 302.692 427.22C302.372 427.945 302.212 428.724 302.212 429.556H299.62C299.62 428.084 299.929 426.825 300.548 425.78C301.166 424.713 302.009 423.903 303.076 423.348C304.142 422.793 305.348 422.516 306.692 422.516C308.676 422.516 310.297 423.081 311.556 424.212C312.836 425.321 313.476 426.985 313.476 429.204C313.476 430.527 313.145 431.839 312.484 433.14C311.822 434.42 310.98 435.668 309.956 436.884C308.932 438.079 307.833 439.199 306.66 440.244C305.508 441.289 304.43 442.228 303.428 443.06H314.244V445.3H299.46Z" fill="var(--color-illustrationPalette030)"/>
+<path d="M203.369 426.835L200.983 424.45L190.833 434.6L200.983 444.75L203.369 442.365L195.621 434.6L203.369 426.835Z" fill="var(--color-illustrationPalette030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.4864 424.45H78.103V444.75H81.4864V424.45ZM91.332 434.6L99.0967 442.365L96.7114 444.75L86.5615 434.6L96.7114 424.45L99.0967 426.835L91.332 434.6Z" fill="var(--color-illustrationPalette030)"/>
+<circle cx="88.5" cy="523.5" r="3.5" fill="#577FFB"/>
+<circle cx="89" cy="711" r="18" fill="#577FFB"/>
+<path d="M90 527H88V694H90V527Z" fill="#577FFB"/>
+<path d="M85.032 714.744C85.3947 714.456 85.56 714.323 85.528 714.344C86.5733 713.48 87.3947 712.771 87.992 712.216C88.6 711.661 89.112 711.08 89.528 710.472C89.944 709.864 90.152 709.272 90.152 708.696C90.152 708.259 90.0507 707.917 89.848 707.672C89.6453 707.427 89.3413 707.304 88.936 707.304C88.5307 707.304 88.2107 707.459 87.976 707.768C87.752 708.067 87.64 708.493 87.64 709.048H85C85.0213 708.141 85.2133 707.384 85.576 706.776C85.9493 706.168 86.4347 705.72 87.032 705.432C87.64 705.144 88.312 705 89.048 705C90.3173 705 91.272 705.325 91.912 705.976C92.5627 706.627 92.888 707.475 92.888 708.52C92.888 709.661 92.4987 710.723 91.72 711.704C90.9413 712.675 89.9493 713.624 88.744 714.552H93.064V716.776H85.032V714.744Z" fill="white"/>
+<circle cx="198" cy="523.5" r="3.5" fill="#577FFB"/>
+<path d="M199 527H197V694H199V527Z" fill="#577FFB"/>
+<circle cx="198" cy="711" r="18" fill="#577FFB"/>
+<path d="M194.08 708.568C194.123 707.427 194.496 706.547 195.2 705.928C195.904 705.309 196.859 705 198.064 705C198.864 705 199.547 705.139 200.112 705.416C200.688 705.693 201.12 706.072 201.408 706.552C201.707 707.032 201.856 707.571 201.856 708.168C201.856 708.872 201.68 709.448 201.328 709.896C200.976 710.333 200.565 710.632 200.096 710.792V710.856C200.704 711.059 201.184 711.395 201.536 711.864C201.888 712.333 202.064 712.936 202.064 713.672C202.064 714.333 201.909 714.92 201.6 715.432C201.301 715.933 200.859 716.328 200.272 716.616C199.696 716.904 199.008 717.048 198.208 717.048C196.928 717.048 195.904 716.733 195.136 716.104C194.379 715.475 193.979 714.525 193.936 713.256H196.592C196.603 713.725 196.736 714.099 196.992 714.376C197.248 714.643 197.621 714.776 198.112 714.776C198.528 714.776 198.848 714.659 199.072 714.424C199.307 714.179 199.424 713.859 199.424 713.464C199.424 712.952 199.259 712.584 198.928 712.36C198.608 712.125 198.091 712.008 197.376 712.008H196.864V709.784H197.376C197.92 709.784 198.357 709.693 198.688 709.512C199.029 709.32 199.2 708.984 199.2 708.504C199.2 708.12 199.093 707.821 198.88 707.608C198.667 707.395 198.373 707.288 198 707.288C197.595 707.288 197.291 707.411 197.088 707.656C196.896 707.901 196.784 708.205 196.752 708.568H194.08Z" fill="white"/>
+<path d="M362 541H360V694H362V541Z" fill="#577FFB"/>
+<circle cx="361" cy="711" r="18" fill="#577FFB"/>
+<path d="M356.877 714.26V712.328L361.301 706H363.975V712.188H365.123V714.26H363.975V716.08H361.581V714.26H356.877ZM361.749 708.632L359.397 712.188H361.749V708.632Z" fill="white"/>
+<circle cx="521" cy="523.5" r="3.5" fill="#577FFB"/>
+<circle cx="521" cy="711" r="18" fill="#577FFB"/>
+<path d="M522 527H520V694H522V527Z" fill="#577FFB"/>
+<path d="M524.464 707.4H519.472V709.608C519.685 709.373 519.984 709.181 520.368 709.032C520.752 708.883 521.168 708.808 521.616 708.808C522.416 708.808 523.077 708.989 523.6 709.352C524.133 709.715 524.523 710.184 524.768 710.76C525.013 711.336 525.136 711.96 525.136 712.632C525.136 713.88 524.784 714.872 524.08 715.608C523.376 716.333 522.384 716.696 521.104 716.696C520.251 716.696 519.509 716.552 518.88 716.264C518.251 715.965 517.765 715.555 517.424 715.032C517.083 714.509 516.896 713.907 516.864 713.224H519.536C519.6 713.555 519.755 713.832 520 714.056C520.245 714.269 520.581 714.376 521.008 714.376C521.509 714.376 521.883 714.216 522.128 713.896C522.373 713.576 522.496 713.149 522.496 712.616C522.496 712.093 522.368 711.693 522.112 711.416C521.856 711.139 521.483 711 520.992 711C520.629 711 520.331 711.091 520.096 711.272C519.861 711.443 519.707 711.672 519.632 711.96H516.992V705H524.464V707.4Z" fill="white"/>
+<circle cx="961" cy="523.5" r="3.5" fill="#577FFB"/>
+<path d="M743 541H741V694H743V541Z" fill="#577FFB"/>
+<path d="M962 527H960V694H962V527Z" fill="#577FFB"/>
+<circle cx="961" cy="711" r="18" fill="#577FFB"/>
+<path d="M964.464 707.4H959.472V709.608C959.685 709.373 959.984 709.181 960.368 709.032C960.752 708.883 961.168 708.808 961.616 708.808C962.416 708.808 963.077 708.989 963.6 709.352C964.133 709.715 964.523 710.184 964.768 710.76C965.013 711.336 965.136 711.96 965.136 712.632C965.136 713.88 964.784 714.872 964.08 715.608C963.376 716.333 962.384 716.696 961.104 716.696C960.251 716.696 959.509 716.552 958.88 716.264C958.251 715.965 957.765 715.555 957.424 715.032C957.083 714.509 956.896 713.907 956.864 713.224H959.536C959.6 713.555 959.755 713.832 960 714.056C960.245 714.269 960.581 714.376 961.008 714.376C961.509 714.376 961.883 714.216 962.128 713.896C962.373 713.576 962.496 713.149 962.496 712.616C962.496 712.093 962.368 711.693 962.112 711.416C961.856 711.139 961.483 711 960.992 711C960.629 711 960.331 711.091 960.096 711.272C959.861 711.443 959.707 711.672 959.632 711.96H956.992V705H964.464V707.4Z" fill="white"/>
+<circle cx="742" cy="711" r="18" fill="#577FFB"/>
+<path d="M743.155 708.968C743.08 708.623 742.95 708.366 742.763 708.198C742.576 708.021 742.31 707.932 741.965 707.932C741.433 707.932 741.05 708.165 740.817 708.632C740.584 709.089 740.462 709.817 740.453 710.816C740.658 710.489 740.952 710.233 741.335 710.046C741.727 709.859 742.156 709.766 742.623 709.766C743.538 709.766 744.27 710.055 744.821 710.634C745.381 711.213 745.661 712.02 745.661 713.056C745.661 713.737 745.521 714.335 745.241 714.848C744.97 715.361 744.569 715.763 744.037 716.052C743.514 716.341 742.894 716.486 742.175 716.486C740.738 716.486 739.739 716.038 739.179 715.142C738.619 714.237 738.339 712.939 738.339 711.25C738.339 709.477 738.633 708.161 739.221 707.302C739.818 706.434 740.77 706 742.077 706C742.777 706 743.365 706.14 743.841 706.42C744.326 706.691 744.69 707.05 744.933 707.498C745.185 707.946 745.334 708.436 745.381 708.968H743.155ZM742.049 711.656C741.648 711.656 741.312 711.777 741.041 712.02C740.78 712.253 740.649 712.589 740.649 713.028C740.649 713.476 740.77 713.826 741.013 714.078C741.265 714.33 741.62 714.456 742.077 714.456C742.488 714.456 742.81 714.335 743.043 714.092C743.286 713.84 743.407 713.499 743.407 713.07C743.407 712.631 743.29 712.286 743.057 712.034C742.824 711.782 742.488 711.656 742.049 711.656Z" fill="white"/>
+<path d="M1120 541H1118V694H1120V541Z" fill="#577FFB"/>
+<circle cx="1118" cy="711" r="18" fill="#577FFB"/>
+<path d="M1113.88 714.26V712.328L1118.3 706H1120.97V712.188H1122.12V714.26H1120.97V716.08H1118.58V714.26H1113.88ZM1118.75 708.632L1116.4 712.188H1118.75V708.632Z" fill="white"/>
+<circle cx="1288" cy="523.5" r="3.5" fill="#577FFB"/>
+<path d="M1288 527H1286V694H1288V527Z" fill="#577FFB"/>
+<circle cx="1287" cy="711" r="18" fill="#577FFB"/>
+<path d="M1291.15 707.778L1287.64 716.206H1285.19L1288.75 708.044H1284.39V706H1291.15V707.778Z" fill="white"/>
+<circle cx="1397" cy="523.5" r="3.5" fill="#577FFB"/>
+<path d="M1398 527H1396V694H1398V527Z" fill="#577FFB"/>
+<circle cx="1397" cy="711" r="18" fill="#577FFB"/>
+<path d="M1394.46 710.648C1393.45 710.115 1392.95 709.277 1392.95 708.136C1392.95 707.56 1393.1 707.037 1393.4 706.568C1393.7 706.088 1394.15 705.709 1394.76 705.432C1395.37 705.144 1396.11 705 1397 705C1397.89 705 1398.63 705.144 1399.22 705.432C1399.83 705.709 1400.29 706.088 1400.58 706.568C1400.88 707.037 1401.03 707.56 1401.03 708.136C1401.03 708.712 1400.89 709.213 1400.62 709.64C1400.35 710.067 1399.99 710.403 1399.53 710.648C1400.1 710.925 1400.55 711.309 1400.86 711.8C1401.17 712.28 1401.32 712.845 1401.32 713.496C1401.32 714.253 1401.13 714.909 1400.74 715.464C1400.36 716.008 1399.84 716.424 1399.18 716.712C1398.53 717 1397.8 717.144 1397 717.144C1396.2 717.144 1395.47 717 1394.81 716.712C1394.16 716.424 1393.64 716.008 1393.26 715.464C1392.87 714.909 1392.68 714.253 1392.68 713.496C1392.68 712.835 1392.83 712.264 1393.14 711.784C1393.45 711.293 1393.89 710.915 1394.46 710.648ZM1398.38 708.552C1398.38 708.115 1398.25 707.779 1397.99 707.544C1397.75 707.299 1397.42 707.176 1397 707.176C1396.58 707.176 1396.25 707.299 1395.99 707.544C1395.75 707.789 1395.62 708.131 1395.62 708.568C1395.62 708.984 1395.75 709.315 1396.01 709.56C1396.26 709.795 1396.59 709.912 1397 709.912C1397.41 709.912 1397.74 709.789 1397.99 709.544C1398.25 709.299 1398.38 708.968 1398.38 708.552ZM1397 711.832C1396.5 711.832 1396.09 711.971 1395.78 712.248C1395.47 712.515 1395.32 712.888 1395.32 713.368C1395.32 713.816 1395.47 714.184 1395.77 714.472C1396.08 714.76 1396.49 714.904 1397 714.904C1397.51 714.904 1397.91 714.76 1398.2 714.472C1398.5 714.184 1398.65 713.816 1398.65 713.368C1398.65 712.899 1398.49 712.525 1398.18 712.248C1397.89 711.971 1397.49 711.832 1397 711.832Z" fill="white"/>
+<rect x="724.784" y="143" width="32.432" height="34" rx="16.216" fill="#577FFB"/>
+<path d="M740 177H742V343H740V177Z" fill="#577FFB"/>
+<path d="M738.784 156.704V154.16H743.216V165.84H740.368V156.704H738.784Z" fill="white"/>
+<rect x="47" y="341" width="2" height="20" rx="1" fill="#577FFB"/>
+<path d="M744.5 341H48V343H744.5V341Z" fill="#577FFB"/>
+<path d="M744.5 341H1441V343H744.5V341Z" fill="#577FFB"/>
+<rect x="1440" y="341" width="2" height="20" rx="1" fill="#577FFB"/>
+<rect x="1028" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+<path d="M1218 539H1029V541H1218V539Z" fill="#577FFB"/>
+<rect x="1217" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+<rect x="266" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+<path d="M456 539H267V541H456V539Z" fill="#577FFB"/>
+<rect x="455" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+<rect x="591" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+<path d="M891 539H592V541H891V539Z" fill="#577FFB"/>
+<rect x="890" y="521" width="2" height="20" rx="1" fill="#577FFB"/>
+</g>
+<defs>
+<clipPath id="clip0_3295_104994">
+<rect width="1490" height="883" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/hero.svg b/site/public/static/illustrations/components/pagination/hero.svg
new file mode 100644
index 0000000000..5c4dd1b0e5
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/hero.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3285_104267)">
+<rect width="1490" height="838" fill="var(--color-illustrationBackground020)"/>
+<rect x="182" y="288" width="1126" height="262" rx="131" fill="var(--color-illustrationInterface020)"/>
+<circle cx="328.022" cy="419.022" r="76.0222" fill="var(--color-illustrationPalette040)"/>
+<circle cx="536.022" cy="419.022" r="76.0222" fill="var(--color-illustrationPalette040)"/>
+<path d="M744.216 494.773C786.202 494.773 820.238 460.737 820.238 418.751C820.238 376.765 786.202 342.729 744.216 342.729C702.23 342.729 668.194 376.765 668.194 418.751C668.194 460.737 702.23 494.773 744.216 494.773Z" fill="#577FFB"/>
+<path d="M725.886 492.549C731.756 494.002 737.896 494.773 744.216 494.773C786.202 494.773 820.238 460.737 820.238 418.751C820.238 376.765 786.202 342.729 744.216 342.729C709.804 342.729 680.732 365.593 671.364 396.959C690.667 417.057 698.667 438.188 705.51 456.262C711.175 471.226 716.048 484.095 725.886 492.549Z" fill="#446BE4"/>
+<path d="M728.219 344.415C733.377 343.31 738.729 342.729 744.216 342.729C786.202 342.729 820.238 376.765 820.238 418.751C820.238 428.245 818.498 437.332 815.319 445.712C794.909 444.415 777.804 439.525 777.189 439.303C763.725 434.448 758.873 418.373 753.801 401.568C750.903 391.964 747.932 382.121 743.24 373.997C737.298 363.709 731.907 354.025 728.219 344.415Z" fill="#577FFB"/>
+<circle cx="744.216" cy="418.751" r="91.0561" stroke="#577FFB" stroke-width="7.38997"/>
+<circle cx="952.022" cy="419.022" r="76.0222" fill="var(--color-illustrationPalette040)"/>
+<circle cx="1160.02" cy="419.022" r="76.0222" fill="var(--color-illustrationPalette040)"/>
+<path d="M355.008 386.087L344.922 376L302 418.922L344.922 461.844L355.008 451.757L322.245 418.922L355.008 386.087Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M1133.99 386.087L1144.08 376L1187 418.922L1144.08 461.844L1133.99 451.757L1166.76 418.922L1133.99 386.087Z" fill="var(--color-illustrationBackground010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3285_104267">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/options/boundaries.svg b/site/public/static/illustrations/components/pagination/options/boundaries.svg
new file mode 100644
index 0000000000..f94a05de00
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/options/boundaries.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108257)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M892.367 425.412C887.404 425.412 883.344 429.472 883.344 434.434C883.344 439.397 887.404 443.457 892.367 443.457C897.329 443.457 901.389 439.397 901.389 434.434C901.389 429.472 897.329 425.412 892.367 425.412Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M946.5 425.412C941.538 425.412 937.478 429.472 937.478 434.434C937.478 439.397 941.538 443.457 946.5 443.457C951.462 443.457 955.522 439.397 955.522 434.434C955.522 429.472 951.462 425.412 946.5 425.412Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M919.433 425.412C914.471 425.412 910.411 429.472 910.411 434.434C910.411 439.397 914.471 443.457 919.433 443.457C924.396 443.457 928.456 439.397 928.456 434.434C928.456 429.472 924.396 425.412 919.433 425.412Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M363.3 457.09C371.108 450.34 377.249 444.809 381.722 440.498C386.277 436.106 390.059 431.552 393.068 426.834C396.077 422.117 397.582 417.4 397.582 412.682C397.582 407.802 396.403 403.98 394.044 401.214C391.767 398.449 388.147 397.066 383.186 397.066C378.387 397.066 374.646 398.612 371.962 401.702C369.359 404.712 367.977 408.778 367.814 413.902H354.394C354.638 404.63 357.403 397.554 362.69 392.674C368.058 387.713 374.849 385.232 383.064 385.232C391.929 385.232 398.843 387.672 403.804 392.552C408.847 397.432 411.368 403.939 411.368 412.072C411.368 417.928 409.863 423.581 406.854 429.03C403.926 434.398 400.388 439.238 396.24 443.548C392.173 447.778 386.968 452.698 380.624 458.31L375.134 463.19H413.808V474.78H354.516V464.654L363.3 457.09Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M523.357 409.022C523.845 401.458 526.733 395.562 532.019 391.332C537.387 387.103 544.219 384.988 552.515 384.988C558.209 384.988 563.129 386.005 567.277 388.038C571.425 390.072 574.557 392.837 576.671 396.334C578.786 399.832 579.843 403.776 579.843 408.168C579.843 413.211 578.501 417.522 575.817 421.1C573.133 424.679 569.921 427.078 566.179 428.298V428.786C570.978 430.25 574.719 432.934 577.403 436.838C580.087 440.661 581.429 445.582 581.429 451.6C581.429 456.399 580.331 460.669 578.135 464.41C575.939 468.152 572.686 471.12 568.375 473.316C564.065 475.431 558.9 476.488 552.881 476.488C544.097 476.488 536.859 474.252 531.165 469.778C525.553 465.224 522.544 458.717 522.137 450.258H535.557C535.883 454.569 537.55 458.107 540.559 460.872C543.569 463.556 547.635 464.898 552.759 464.898C557.721 464.898 561.543 463.556 564.227 460.872C566.911 458.107 568.253 454.569 568.253 450.258C568.253 444.565 566.423 440.539 562.763 438.18C559.185 435.74 553.654 434.52 546.171 434.52H542.999V423.052H546.293C552.881 422.971 557.883 421.873 561.299 419.758C564.797 417.644 566.545 414.309 566.545 409.754C566.545 405.85 565.285 402.76 562.763 400.482C560.242 398.124 556.663 396.944 552.027 396.944C547.473 396.944 543.935 398.124 541.413 400.482C538.892 402.76 537.387 405.606 536.899 409.022H523.357Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M691.617 457.456V446.964L732.609 388.16H749.445V445.378H760.791V457.456H749.445V476H735.781V457.456H691.617ZM736.391 402.312L707.599 445.378H736.391V402.312Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1108.24 410.68C1107.34 406.939 1105.72 404.133 1103.36 402.262C1101 400.392 1097.71 399.456 1093.48 399.456C1087.05 399.456 1082.25 401.937 1079.08 406.898C1075.91 411.778 1074.24 419.912 1074.08 431.298C1076.19 427.72 1079.28 424.954 1083.35 423.002C1087.42 421.05 1091.81 420.074 1096.53 420.074C1101.9 420.074 1106.61 421.254 1110.68 423.612C1114.83 425.89 1118.04 429.224 1120.32 433.616C1122.68 438.008 1123.86 443.254 1123.86 449.354C1123.86 455.048 1122.72 460.131 1120.44 464.604C1118.24 469.078 1114.95 472.616 1110.56 475.218C1106.17 477.74 1100.88 479 1094.7 479C1086.32 479 1079.73 477.17 1074.93 473.51C1070.22 469.769 1066.88 464.523 1064.93 457.772C1063.06 451.022 1062.12 442.604 1062.12 432.518C1062.12 402.75 1072.62 387.866 1093.6 387.866C1101.73 387.866 1108.12 390.062 1112.75 394.454C1117.47 398.846 1120.24 404.255 1121.05 410.68H1108.24ZM1093.48 431.786C1088.52 431.786 1084.29 433.291 1080.79 436.3C1077.37 439.228 1075.67 443.498 1075.67 449.11C1075.67 454.722 1077.25 459.196 1080.42 462.53C1083.68 465.784 1088.19 467.41 1093.97 467.41C1099.09 467.41 1103.12 465.824 1106.04 462.652C1109.05 459.48 1110.56 455.251 1110.56 449.964C1110.56 444.434 1109.09 440.042 1106.17 436.788C1103.32 433.454 1099.09 431.786 1093.48 431.786Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1291.78 400.798L1257.87 479H1243.84L1278.12 402.262H1232.98V390.428H1291.78V400.798Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1415.16 432.518C1406.7 428.288 1402.47 421.619 1402.47 412.51C1402.47 408.118 1403.57 404.092 1405.77 400.432C1407.96 396.772 1411.26 393.884 1415.65 391.77C1420.04 389.574 1425.41 388.476 1431.75 388.476C1438.01 388.476 1443.34 389.574 1447.73 391.77C1452.21 393.884 1455.54 396.772 1457.74 400.432C1459.93 404.092 1461.03 408.118 1461.03 412.51C1461.03 417.064 1459.85 421.09 1457.49 424.588C1455.22 428.004 1452.17 430.647 1448.34 432.518C1452.98 434.226 1456.64 437.032 1459.32 440.936C1462.01 444.758 1463.35 449.272 1463.35 454.478C1463.35 459.764 1462.01 464.441 1459.32 468.508C1456.64 472.574 1452.9 475.706 1448.1 477.902C1443.3 480.098 1437.85 481.196 1431.75 481.196C1425.65 481.196 1420.2 480.098 1415.4 477.902C1410.69 475.706 1406.99 472.574 1404.3 468.508C1401.62 464.441 1400.28 459.764 1400.28 454.478C1400.28 449.191 1401.62 444.636 1404.3 440.814C1406.99 436.991 1410.61 434.226 1415.16 432.518ZM1447.73 414.218C1447.73 409.663 1446.31 406.166 1443.46 403.726C1440.62 401.286 1436.71 400.066 1431.75 400.066C1426.87 400.066 1423.01 401.286 1420.16 403.726C1417.32 406.166 1415.89 409.704 1415.89 414.34C1415.89 418.406 1417.36 421.741 1420.28 424.344C1423.29 426.865 1427.12 428.126 1431.75 428.126C1436.39 428.126 1440.21 426.824 1443.22 424.222C1446.23 421.619 1447.73 418.284 1447.73 414.218ZM1431.75 438.618C1426.38 438.618 1421.99 439.96 1418.58 442.644C1415.24 445.246 1413.57 449.028 1413.57 453.99C1413.57 458.626 1415.2 462.408 1418.45 465.336C1421.71 468.182 1426.14 469.606 1431.75 469.606C1437.28 469.606 1441.63 468.142 1444.81 465.214C1448.06 462.286 1449.69 458.544 1449.69 453.99C1449.69 449.11 1448.02 445.328 1444.68 442.644C1441.43 439.96 1437.12 438.618 1431.75 438.618Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M233.43 393.07L221.36 381L170 432.36L221.36 483.721L233.43 471.651L194.225 432.36L233.43 393.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M290 345V303C290 298.582 293.582 295 298 295H815C819.418 295 823 298.582 823 303V345" stroke="#577FFB" stroke-width="4"/>
+</g>
+<defs>
+<clipPath id="clip0_3223_108257">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/options/firstlast.svg b/site/public/static/illustrations/components/pagination/options/firstlast.svg
new file mode 100644
index 0000000000..549fd118bc
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/options/firstlast.svg
@@ -0,0 +1,17 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108244)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M276.229 459.65L236.939 420.36L276.229 381.07L264.16 369L212.8 420.36L264.16 471.72L276.229 459.65Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M170 369H187.12V471.72H170V369Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M524.43 378.07L512.36 366L461 417.36L512.36 468.721L524.43 456.651L485.225 417.36L524.43 378.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M724.3 442.09C732.108 435.339 738.249 429.809 742.722 425.498C747.277 421.106 751.059 416.551 754.068 411.834C757.077 407.117 758.582 402.399 758.582 397.682C758.582 392.802 757.403 388.979 755.044 386.214C752.767 383.449 749.147 382.066 744.186 382.066C739.387 382.066 735.646 383.611 732.962 386.702C730.359 389.711 728.977 393.778 728.814 398.902H715.394C715.638 389.63 718.403 382.554 723.69 377.674C729.058 372.713 735.849 370.232 744.064 370.232C752.929 370.232 759.843 372.672 764.804 377.552C769.847 382.432 772.368 388.939 772.368 397.072C772.368 402.928 770.863 408.581 767.854 414.03C764.926 419.398 761.388 424.237 757.24 428.548C753.173 432.777 747.968 437.698 741.624 443.31L736.134 448.19H774.808V459.78H715.516V449.654L724.3 442.09Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M964.57 457.93L976.64 470L1028 418.64L976.64 367.279L964.57 379.349L1003.78 418.64L964.57 457.93Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1212.57 379.35L1251.86 418.64L1212.57 457.93L1224.64 470L1276 418.64L1224.64 367.28L1212.57 379.35Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1320 470H1302.88V367.28H1320V470Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3223_108244">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/options/siblings.svg b/site/public/static/illustrations/components/pagination/options/siblings.svg
new file mode 100644
index 0000000000..c6db529af1
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/options/siblings.svg
@@ -0,0 +1,22 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3290_104266)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M356.067 410.112C351.104 410.112 347.044 414.172 347.044 419.135C347.044 424.097 351.104 428.157 356.067 428.157C361.029 428.157 365.089 424.097 365.089 419.135C365.089 414.172 361.029 410.112 356.067 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M410.2 410.112C405.238 410.112 401.178 414.172 401.178 419.135C401.178 424.097 405.238 428.157 410.2 428.157C415.162 428.157 419.222 424.097 419.222 419.135C419.222 414.172 415.162 410.112 410.2 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M383.133 410.112C378.171 410.112 374.111 414.172 374.111 419.135C374.111 424.097 378.171 428.157 383.133 428.157C388.096 428.157 392.156 424.097 392.156 419.135C392.156 414.172 388.096 410.112 383.133 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1081.07 410.112C1076.1 410.112 1072.04 414.172 1072.04 419.135C1072.04 424.097 1076.1 428.157 1081.07 428.157C1086.03 428.157 1090.09 424.097 1090.09 419.135C1090.09 414.172 1086.03 410.112 1081.07 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1135.2 410.112C1130.24 410.112 1126.18 414.172 1126.18 419.135C1126.18 424.097 1130.24 428.157 1135.2 428.157C1140.16 428.157 1144.22 424.097 1144.22 419.135C1144.22 414.172 1140.16 410.112 1135.2 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1108.13 410.112C1103.17 410.112 1099.11 414.172 1099.11 419.135C1099.11 424.097 1103.17 428.157 1108.13 428.157C1113.1 428.157 1117.16 424.097 1117.16 419.135C1117.16 414.172 1113.1 410.112 1108.13 410.112Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M233.43 378.07L221.36 366L170 417.36L221.36 468.721L233.43 456.651L194.225 417.36L233.43 378.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M586.506 392.68C585.612 388.939 583.985 386.133 581.626 384.262C579.268 382.392 575.974 381.456 571.744 381.456C565.319 381.456 560.52 383.937 557.348 388.898C554.176 393.778 552.509 401.912 552.346 413.298C554.461 409.72 557.552 406.954 561.618 405.002C565.685 403.05 570.077 402.074 574.794 402.074C580.162 402.074 584.88 403.254 588.946 405.612C593.094 407.89 596.307 411.224 598.584 415.616C600.943 420.008 602.122 425.254 602.122 431.354C602.122 437.048 600.984 442.131 598.706 446.604C596.51 451.078 593.216 454.616 588.824 457.218C584.432 459.74 579.146 461 572.964 461C564.587 461 557.999 459.17 553.2 455.51C548.483 451.769 545.148 446.523 543.196 439.772C541.326 433.022 540.39 424.604 540.39 414.518C540.39 384.75 550.882 369.866 571.866 369.866C580 369.866 586.384 372.062 591.02 376.454C595.738 380.846 598.503 386.255 599.316 392.68H586.506ZM571.744 413.786C566.783 413.786 562.554 415.291 559.056 418.3C555.64 421.228 553.932 425.498 553.932 431.11C553.932 436.722 555.518 441.196 558.69 444.53C561.944 447.784 566.458 449.41 572.232 449.41C577.356 449.41 581.382 447.824 584.31 444.652C587.32 441.48 588.824 437.251 588.824 431.964C588.824 426.434 587.36 422.042 584.432 418.788C581.586 415.454 577.356 413.786 571.744 413.786Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M770.05 382.798L736.134 461H722.104L756.386 384.262H711.246V372.428H770.05V382.798Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M897.427 414.518C888.968 410.288 884.739 403.619 884.739 394.51C884.739 390.118 885.837 386.092 888.033 382.432C890.229 378.772 893.523 375.884 897.915 373.77C902.307 371.574 907.675 370.476 914.019 370.476C920.281 370.476 925.609 371.574 930.001 373.77C934.474 375.884 937.809 378.772 940.005 382.432C942.201 386.092 943.299 390.118 943.299 394.51C943.299 399.064 942.119 403.09 939.761 406.588C937.483 410.004 934.433 412.647 930.611 414.518C935.247 416.226 938.907 419.032 941.591 422.936C944.275 426.758 945.617 431.272 945.617 436.478C945.617 441.764 944.275 446.441 941.591 450.508C938.907 454.574 935.165 457.706 930.367 459.902C925.568 462.098 920.119 463.196 914.019 463.196C907.919 463.196 902.469 462.098 897.671 459.902C892.953 457.706 889.253 454.574 886.569 450.508C883.885 446.441 882.543 441.764 882.543 436.478C882.543 431.191 883.885 426.636 886.569 422.814C889.253 418.991 892.872 416.226 897.427 414.518ZM930.001 396.218C930.001 391.663 928.577 388.166 925.731 385.726C922.884 383.286 918.98 382.066 914.019 382.066C909.139 382.066 905.275 383.286 902.429 385.726C899.582 388.166 898.159 391.704 898.159 396.34C898.159 400.406 899.623 403.741 902.551 406.344C905.56 408.865 909.383 410.126 914.019 410.126C918.655 410.126 922.477 408.824 925.487 406.222C928.496 403.619 930.001 400.284 930.001 396.218ZM914.019 420.618C908.651 420.618 904.259 421.96 900.843 424.644C897.508 427.246 895.841 431.028 895.841 435.99C895.841 440.626 897.467 444.408 900.721 447.336C903.974 450.182 908.407 451.606 914.019 451.606C919.549 451.606 923.901 450.142 927.073 447.214C930.326 444.286 931.953 440.544 931.953 435.99C931.953 431.11 930.285 427.328 926.951 424.644C923.697 421.96 919.387 420.618 914.019 420.618Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1257 457.93L1269.07 470L1320.43 418.64L1269.07 367.279L1257 379.349L1296.21 418.64L1257 457.93Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M475 335V293C475 288.582 478.582 285 483 285H1000C1004.42 285 1008 288.582 1008 293V335" stroke="#577FFB" stroke-width="4"/>
+</g>
+<defs>
+<clipPath id="clip0_3290_104266">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/options/size.svg b/site/public/static/illustrations/components/pagination/options/size.svg
new file mode 100644
index 0000000000..c8e6b12677
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/options/size.svg
@@ -0,0 +1,31 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3331_104030)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M535 612.457L524.534 602L480 646.5L524.534 691L535 680.542L501.005 646.5L535 612.457Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1213 680.542L1223.47 691L1268 646.5L1223.47 602L1213 612.457L1246.99 646.5L1213 680.542Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M843.514 669.71C851.066 663.18 857.005 657.831 861.332 653.662C865.737 649.414 869.395 645.008 872.306 640.446C875.217 635.883 876.672 631.32 876.672 626.758C876.672 622.038 875.531 618.34 873.25 615.666C871.047 612.991 867.547 611.654 862.748 611.654C858.107 611.654 854.488 613.148 851.892 616.138C849.375 619.048 848.037 622.982 847.88 627.938H834.9C835.136 618.97 837.811 612.126 842.924 607.406C848.116 602.607 854.685 600.208 862.63 600.208C871.205 600.208 877.891 602.568 882.69 607.288C887.567 612.008 890.006 618.301 890.006 626.168C890.006 631.832 888.551 637.299 885.64 642.57C882.808 647.762 879.386 652.442 875.374 656.612C871.441 660.702 866.406 665.462 860.27 670.89L854.96 675.61H892.366V686.82H835.018V677.026L843.514 669.71Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M664.31 614.25V601.978H688.854V688H675.284V614.25H664.31Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1024.84 623.218C1025.32 615.902 1028.11 610.198 1033.22 606.108C1038.41 602.017 1045.02 599.972 1053.05 599.972C1058.55 599.972 1063.31 600.955 1067.32 602.922C1071.34 604.888 1074.36 607.563 1076.41 610.946C1078.46 614.328 1079.48 618.144 1079.48 622.392C1079.48 627.269 1078.18 631.438 1075.58 634.9C1072.99 638.361 1069.88 640.682 1066.26 641.862V642.334C1070.9 643.75 1074.52 646.346 1077.12 650.122C1079.71 653.819 1081.01 658.578 1081.01 664.4C1081.01 669.041 1079.95 673.171 1077.83 676.79C1075.7 680.408 1072.56 683.28 1068.39 685.404C1064.22 687.449 1059.22 688.472 1053.4 688.472C1044.9 688.472 1037.9 686.308 1032.4 681.982C1026.97 677.576 1024.06 671.283 1023.66 663.102H1036.64C1036.96 667.271 1038.57 670.693 1041.48 673.368C1044.39 675.964 1048.33 677.262 1053.28 677.262C1058.08 677.262 1061.78 675.964 1064.37 673.368C1066.97 670.693 1068.27 667.271 1068.27 663.102C1068.27 657.595 1066.5 653.701 1062.96 651.42C1059.5 649.06 1054.15 647.88 1046.91 647.88H1043.84V636.788H1047.03C1053.4 636.709 1058.24 635.647 1061.54 633.602C1064.92 631.556 1066.62 628.331 1066.62 623.926C1066.62 620.15 1065.4 617.16 1062.96 614.958C1060.52 612.676 1057.06 611.536 1052.57 611.536C1048.17 611.536 1044.75 612.676 1042.31 614.958C1039.87 617.16 1038.41 619.914 1037.94 623.218H1024.84Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M535 377.225L526.818 369L492 404L526.818 439L535 430.775L508.422 404L535 377.225Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1213 430.775L1221.18 439L1256 404L1221.18 369L1213 377.225L1239.58 404L1213 430.775Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M848.824 421.36C854.456 416.491 858.885 412.501 862.112 409.392C865.397 406.224 868.125 402.939 870.296 399.536C872.467 396.133 873.552 392.731 873.552 389.328C873.552 385.808 872.701 383.051 871 381.056C869.357 379.061 866.747 378.064 863.168 378.064C859.707 378.064 857.008 379.179 855.072 381.408C853.195 383.579 852.197 386.512 852.08 390.208H842.4C842.576 383.52 844.571 378.416 848.384 374.896C852.256 371.317 857.155 369.528 863.08 369.528C869.475 369.528 874.461 371.288 878.04 374.808C881.677 378.328 883.496 383.021 883.496 388.888C883.496 393.112 882.411 397.189 880.24 401.12C878.128 404.992 875.576 408.483 872.584 411.592C869.651 414.643 865.896 418.192 861.32 422.24L857.36 425.76H885.256V434.12H842.488V426.816L848.824 421.36Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M667.96 380V370.848H686.264V435H676.144V380H667.96Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1032.1 386.688C1032.46 381.232 1034.54 376.979 1038.35 373.928C1042.22 370.877 1047.15 369.352 1053.14 369.352C1057.24 369.352 1060.79 370.085 1063.78 371.552C1066.78 373.019 1069.03 375.013 1070.56 377.536C1072.09 380.059 1072.85 382.904 1072.85 386.072C1072.85 389.709 1071.88 392.819 1069.94 395.4C1068.01 397.981 1065.69 399.712 1062.99 400.592V400.944C1066.45 402 1069.15 403.936 1071.09 406.752C1073.02 409.509 1073.99 413.059 1073.99 417.4C1073.99 420.861 1073.2 423.941 1071.62 426.64C1070.03 429.339 1067.69 431.48 1064.58 433.064C1061.47 434.589 1057.74 435.352 1053.4 435.352C1047.06 435.352 1041.84 433.739 1037.74 430.512C1033.69 427.227 1031.52 422.533 1031.22 416.432H1040.9C1041.14 419.541 1042.34 422.093 1044.51 424.088C1046.68 426.024 1049.62 426.992 1053.31 426.992C1056.89 426.992 1059.65 426.024 1061.58 424.088C1063.52 422.093 1064.49 419.541 1064.49 416.432C1064.49 412.325 1063.17 409.421 1060.53 407.72C1057.95 405.96 1053.96 405.08 1048.56 405.08H1046.27V396.808H1048.65C1053.4 396.749 1057.01 395.957 1059.47 394.432C1061.99 392.907 1063.26 390.501 1063.26 387.216C1063.26 384.4 1062.35 382.171 1060.53 380.528C1058.71 378.827 1056.13 377.976 1052.78 377.976C1049.5 377.976 1046.95 378.827 1045.13 380.528C1043.31 382.171 1042.22 384.224 1041.87 386.688H1032.1Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M535 162.523L529.482 157L506 180.5L529.482 204L535 198.478L517.076 180.5L535 162.523Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1213 198.478L1218.52 204L1242 180.5L1218.52 157L1213 162.523L1230.92 180.5L1213 198.478Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M851.364 194.46C855.716 190.698 859.139 187.615 861.632 185.212C864.171 182.764 866.279 180.226 867.956 177.596C869.633 174.967 870.472 172.338 870.472 169.708C870.472 166.988 869.815 164.858 868.5 163.316C867.231 161.775 865.213 161.004 862.448 161.004C859.773 161.004 857.688 161.866 856.192 163.588C854.741 165.266 853.971 167.532 853.88 170.388H846.4C846.536 165.22 848.077 161.276 851.024 158.556C854.016 155.791 857.801 154.408 862.38 154.408C867.321 154.408 871.175 155.768 873.94 158.488C876.751 161.208 878.156 164.835 878.156 169.368C878.156 172.632 877.317 175.783 875.64 178.82C874.008 181.812 872.036 184.51 869.724 186.912C867.457 189.27 864.556 192.012 861.02 195.14L857.96 197.86H879.516V204.32H846.468V198.676L851.364 194.46Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M671.06 162.5V155.428H685.204V205H677.384V162.5H671.06Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1036.94 167.668C1037.22 163.452 1038.83 160.166 1041.77 157.808C1044.76 155.451 1048.57 154.272 1053.2 154.272C1056.37 154.272 1059.11 154.839 1061.42 155.972C1063.74 157.106 1065.48 158.647 1066.66 160.596C1067.84 162.546 1068.43 164.744 1068.43 167.192C1068.43 170.003 1067.68 172.406 1066.18 174.4C1064.69 176.395 1062.9 177.732 1060.81 178.412V178.684C1063.49 179.5 1065.57 180.996 1067.07 183.172C1068.56 185.303 1069.31 188.046 1069.31 191.4C1069.31 194.075 1068.7 196.455 1067.48 198.54C1066.25 200.626 1064.44 202.28 1062.04 203.504C1059.63 204.683 1056.75 205.272 1053.4 205.272C1048.5 205.272 1044.47 204.026 1041.3 201.532C1038.17 198.994 1036.49 195.367 1036.26 190.652H1043.74C1043.93 193.055 1044.85 195.027 1046.53 196.568C1048.21 198.064 1050.48 198.812 1053.33 198.812C1056.1 198.812 1058.23 198.064 1059.72 196.568C1061.22 195.027 1061.97 193.055 1061.97 190.652C1061.97 187.479 1060.95 185.235 1058.91 183.92C1056.91 182.56 1053.83 181.88 1049.66 181.88H1047.89V175.488H1049.73C1053.4 175.443 1056.19 174.831 1058.09 173.652C1060.04 172.474 1061.02 170.615 1061.02 168.076C1061.02 165.9 1060.31 164.178 1058.91 162.908C1057.5 161.594 1055.51 160.936 1052.92 160.936C1050.39 160.936 1048.41 161.594 1047.01 162.908C1045.6 164.178 1044.76 165.764 1044.49 167.668H1036.94Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M199.592 202.336C197.352 202.336 195.336 201.952 193.544 201.184C191.752 200.384 190.344 199.264 189.32 197.824C188.296 196.384 187.784 194.704 187.784 192.784H193.64C193.768 194.224 194.328 195.408 195.32 196.336C196.344 197.264 197.768 197.728 199.592 197.728C201.48 197.728 202.952 197.28 204.008 196.384C205.064 195.456 205.592 194.272 205.592 192.832C205.592 191.712 205.256 190.8 204.584 190.096C203.944 189.392 203.128 188.848 202.136 188.464C201.176 188.08 199.832 187.664 198.104 187.216C195.928 186.64 194.152 186.064 192.776 185.488C191.432 184.88 190.28 183.952 189.32 182.704C188.36 181.456 187.88 179.792 187.88 177.712C187.88 175.792 188.36 174.112 189.32 172.672C190.28 171.232 191.624 170.128 193.352 169.36C195.08 168.592 197.08 168.208 199.352 168.208C202.584 168.208 205.224 169.024 207.272 170.656C209.352 172.256 210.504 174.464 210.728 177.28H204.68C204.584 176.064 204.008 175.024 202.952 174.16C201.896 173.296 200.504 172.864 198.776 172.864C197.208 172.864 195.928 173.264 194.936 174.064C193.944 174.864 193.448 176.016 193.448 177.52C193.448 178.544 193.752 179.392 194.36 180.064C195 180.704 195.8 181.216 196.76 181.6C197.72 181.984 199.032 182.4 200.696 182.848C202.904 183.456 204.696 184.064 206.072 184.672C207.48 185.28 208.664 186.224 209.624 187.504C210.616 188.752 211.112 190.432 211.112 192.544C211.112 194.24 210.648 195.84 209.72 197.344C208.824 198.848 207.496 200.064 205.736 200.992C204.008 201.888 201.96 202.336 199.592 202.336Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M252.705 168.64V202H247.233V179.152L237.057 202H233.265L223.041 179.152V202H217.569V168.64H223.473L235.185 194.8L246.849 168.64H252.705Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M223.736 388.64V422H218.264V399.152L208.088 422H204.296L194.072 399.152V422H188.6V388.64H194.504L206.216 414.8L217.88 388.64H223.736Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M241.824 388.64C245.376 388.64 248.48 389.328 251.136 390.704C253.824 392.048 255.888 394 257.328 396.56C258.8 399.088 259.536 402.048 259.536 405.44C259.536 408.832 258.8 411.776 257.328 414.272C255.888 416.768 253.824 418.688 251.136 420.032C248.48 421.344 245.376 422 241.824 422H230.928V388.64H241.824ZM241.824 417.536C245.728 417.536 248.72 416.48 250.8 414.368C252.88 412.256 253.92 409.28 253.92 405.44C253.92 401.568 252.88 398.544 250.8 396.368C248.72 394.192 245.728 393.104 241.824 393.104H236.4V417.536H241.824Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M194.072 665.584H205.352V670H188.6V636.64H194.072V665.584Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M234.072 646.24C233.208 644.576 232.008 643.328 230.472 642.496C228.936 641.632 227.16 641.2 225.144 641.2C222.936 641.2 220.968 641.696 219.24 642.688C217.512 643.68 216.152 645.088 215.16 646.912C214.2 648.736 213.72 650.848 213.72 653.248C213.72 655.648 214.2 657.776 215.16 659.632C216.152 661.456 217.512 662.864 219.24 663.856C220.968 664.848 222.936 665.344 225.144 665.344C228.12 665.344 230.536 664.512 232.392 662.848C234.248 661.184 235.384 658.928 235.8 656.08H223.272V651.712H241.656V655.984C241.304 658.576 240.376 660.96 238.872 663.136C237.4 665.312 235.464 667.056 233.064 668.368C230.696 669.648 228.056 670.288 225.144 670.288C222.008 670.288 219.144 669.568 216.552 668.128C213.96 666.656 211.896 664.624 210.36 662.032C208.856 659.44 208.104 656.512 208.104 653.248C208.104 649.984 208.856 647.056 210.36 644.464C211.896 641.872 213.96 639.856 216.552 638.416C219.176 636.944 222.04 636.208 225.144 636.208C228.696 636.208 231.848 637.088 234.6 638.848C237.384 640.576 239.4 643.04 240.648 646.24H234.072Z" fill="var(--color-illustrationPalette020)"/>
+</g>
+<defs>
+<clipPath id="clip0_3331_104030">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/options/truncation.svg b/site/public/static/illustrations/components/pagination/options/truncation.svg
new file mode 100644
index 0000000000..448a4bdc2d
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/options/truncation.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3282_104581)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M356.067 410.112C351.104 410.112 347.044 414.172 347.044 419.135C347.044 424.097 351.104 428.157 356.067 428.157C361.029 428.157 365.089 424.097 365.089 419.135C365.089 414.172 361.029 410.112 356.067 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M410.2 410.112C405.238 410.112 401.178 414.172 401.178 419.135C401.178 424.097 405.238 428.157 410.2 428.157C415.162 428.157 419.222 424.097 419.222 419.135C419.222 414.172 415.162 410.112 410.2 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M383.133 410.112C378.171 410.112 374.111 414.172 374.111 419.135C374.111 424.097 378.171 428.157 383.133 428.157C388.096 428.157 392.156 424.097 392.156 419.135C392.156 414.172 388.096 410.112 383.133 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1078.07 410.112C1073.1 410.112 1069.04 414.172 1069.04 419.135C1069.04 424.097 1073.1 428.157 1078.07 428.157C1083.03 428.157 1087.09 424.097 1087.09 419.135C1087.09 414.172 1083.03 410.112 1078.07 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1132.2 410.112C1127.24 410.112 1123.18 414.172 1123.18 419.135C1123.18 424.097 1127.24 428.157 1132.2 428.157C1137.16 428.157 1141.22 424.097 1141.22 419.135C1141.22 414.172 1137.16 410.112 1132.2 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1105.13 410.112C1100.17 410.112 1096.11 414.172 1096.11 419.135C1096.11 424.097 1100.17 428.157 1105.13 428.157C1110.1 428.157 1114.16 424.097 1114.16 419.135C1114.16 414.172 1110.1 410.112 1105.13 410.112Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M233.43 378.07L221.36 366L170 417.36L221.36 468.721L233.43 456.651L194.225 417.36L233.43 378.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M550.3 442.09C558.108 435.34 564.249 429.809 568.722 425.498C573.277 421.106 577.059 416.552 580.068 411.834C583.077 407.117 584.582 402.4 584.582 397.682C584.582 392.802 583.403 388.98 581.044 386.214C578.767 383.449 575.147 382.066 570.186 382.066C565.387 382.066 561.646 383.612 558.962 386.702C556.359 389.712 554.977 393.778 554.814 398.902H541.394C541.638 389.63 544.403 382.554 549.69 377.674C555.058 372.713 561.849 370.232 570.064 370.232C578.929 370.232 585.843 372.672 590.804 377.552C595.847 382.432 598.368 388.939 598.368 397.072C598.368 402.928 596.863 408.581 593.854 414.03C590.926 419.398 587.388 424.238 583.24 428.548C579.173 432.778 573.968 437.698 567.624 443.31L562.134 448.19H600.808V459.78H541.516V449.654L550.3 442.09Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M711.357 394.022C711.845 386.458 714.733 380.562 720.019 376.332C725.387 372.103 732.219 369.988 740.515 369.988C746.209 369.988 751.129 371.005 755.277 373.038C759.425 375.072 762.557 377.837 764.671 381.334C766.786 384.832 767.843 388.776 767.843 393.168C767.843 398.211 766.501 402.522 763.817 406.1C761.133 409.679 757.921 412.078 754.179 413.298V413.786C758.978 415.25 762.719 417.934 765.403 421.838C768.087 425.661 769.429 430.582 769.429 436.6C769.429 441.399 768.331 445.669 766.135 449.41C763.939 453.152 760.686 456.12 756.375 458.316C752.065 460.431 746.9 461.488 740.881 461.488C732.097 461.488 724.859 459.252 719.165 454.778C713.553 450.224 710.544 443.717 710.137 435.258H723.557C723.883 439.569 725.55 443.107 728.559 445.872C731.569 448.556 735.635 449.898 740.759 449.898C745.721 449.898 749.543 448.556 752.227 445.872C754.911 443.107 756.253 439.569 756.253 435.258C756.253 429.565 754.423 425.539 750.763 423.18C747.185 420.74 741.654 419.52 734.171 419.52H730.999V408.052H734.293C740.881 407.971 745.883 406.873 749.299 404.758C752.797 402.644 754.545 399.309 754.545 394.754C754.545 390.85 753.285 387.76 750.763 385.482C748.242 383.124 744.663 381.944 740.027 381.944C735.473 381.944 731.935 383.124 729.413 385.482C726.892 387.76 725.387 390.606 724.899 394.022H711.357Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M880.617 442.456V431.964L921.609 373.16H938.445V430.378H949.791V442.456H938.445V461H924.781V442.456H880.617ZM925.391 387.312L896.599 430.378H925.391V387.312Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1256.57 457.93L1268.64 470L1320 418.64L1268.64 367.279L1256.57 379.349L1295.77 418.64L1256.57 457.93Z" fill="var(--color-illustrationPalette020)"/>
+</g>
+<defs>
+<clipPath id="clip0_3282_104581">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/active.svg b/site/public/static/illustrations/components/pagination/states/active.svg
new file mode 100644
index 0000000000..303d4a9367
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/active.svg
@@ -0,0 +1,18 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3360_104091)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationPalette020)"/>
+<rect x="487" y="480" width="108" height="12" fill="var(--color-illustrationHighlight010)"/>
+<path d="M517.466 442.723C525.274 436.217 531.496 430.808 536.132 426.497C540.768 422.105 544.631 417.551 547.722 412.833C550.813 408.116 552.358 403.48 552.358 398.925C552.358 394.777 551.382 391.524 549.43 389.165C547.478 386.807 544.469 385.627 540.402 385.627C536.335 385.627 533.204 387.01 531.008 389.775C528.812 392.459 527.673 396.16 527.592 400.877H511C511.325 391.117 514.213 383.716 519.662 378.673C525.193 373.631 532.187 371.109 540.646 371.109C549.918 371.109 557.035 373.59 561.996 378.551C566.957 383.431 569.438 389.897 569.438 397.949C569.438 404.293 567.73 410.353 564.314 416.127C560.898 421.902 556.994 426.945 552.602 431.255C548.21 435.485 542.476 440.609 535.4 446.627H571.39V460.779H511.122V448.091L517.466 442.723Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M348.791 388.801V373.062H378.193V462.001H360.625V388.801H348.791Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M693.193 396.486C693.6 388.353 696.447 382.09 701.733 377.698C707.101 373.225 714.137 370.988 722.839 370.988C728.777 370.988 733.86 372.046 738.089 374.16C742.319 376.194 745.491 379 747.605 382.578C749.801 386.076 750.899 390.061 750.899 394.534C750.899 399.658 749.557 404.01 746.873 407.588C744.271 411.086 741.139 413.444 737.479 414.664V415.152C742.197 416.616 745.857 419.219 748.459 422.96C751.143 426.702 752.485 431.5 752.485 437.356C752.485 442.236 751.347 446.588 749.069 450.41C746.873 454.233 743.579 457.242 739.187 459.438C734.877 461.553 729.671 462.61 723.571 462.61C714.381 462.61 706.898 460.292 701.123 455.656C695.349 451.02 692.299 444.188 691.973 435.16H708.565C708.728 439.146 710.07 442.358 712.591 444.798C715.194 447.157 718.732 448.336 723.205 448.336C727.353 448.336 730.525 447.198 732.721 444.92C734.999 442.562 736.137 439.552 736.137 435.892C736.137 431.012 734.592 427.515 731.501 425.4C728.411 423.286 723.612 422.228 717.105 422.228H713.567V408.198H717.105C728.655 408.198 734.429 404.335 734.429 396.608C734.429 393.111 733.372 390.386 731.257 388.434C729.224 386.482 726.255 385.506 722.351 385.506C718.529 385.506 715.56 386.564 713.445 388.678C711.412 390.712 710.233 393.314 709.907 396.486H693.193Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M878.905 444.676V431.256L918.799 374.16H938.685V429.792H949.421V444.676H938.685V462H921.605V444.676H878.905ZM922.703 392.46L897.693 429.792H922.703V392.46Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1133.49 387.824H1093.96V408.686C1095.67 406.572 1098.11 404.864 1101.28 403.562C1104.45 402.18 1107.83 401.488 1111.41 401.488C1117.91 401.488 1123.24 402.912 1127.39 405.758C1131.54 408.605 1134.55 412.265 1136.42 416.738C1138.29 421.13 1139.22 425.848 1139.22 430.89C1139.22 440.244 1136.54 447.767 1131.17 453.46C1125.88 459.154 1118.32 462 1108.48 462C1099.21 462 1091.81 459.682 1086.28 455.046C1080.74 450.41 1077.61 444.351 1076.88 436.868H1093.47C1094.21 440.122 1095.83 442.724 1098.35 444.676C1100.96 446.628 1104.25 447.604 1108.24 447.604C1113.03 447.604 1116.65 446.1 1119.09 443.09C1121.53 440.081 1122.75 436.096 1122.75 431.134C1122.75 426.092 1121.49 422.269 1118.97 419.666C1116.53 416.982 1112.91 415.64 1108.11 415.64C1104.7 415.64 1101.85 416.494 1099.57 418.202C1097.3 419.91 1095.67 422.188 1094.69 425.034H1078.35V372.818H1133.49V387.824Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1258.57 458.93L1270.64 471L1322 419.64L1270.64 368.279L1258.57 380.349L1297.77 419.64L1258.57 458.93Z" fill="var(--color-illustrationPalette020)"/>
+</g>
+<defs>
+<clipPath id="clip0_3360_104091">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/base.svg b/site/public/static/illustrations/components/pagination/states/base.svg
new file mode 100644
index 0000000000..419d8d029a
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/base.svg
@@ -0,0 +1,17 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108267)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M514.307 442.723C522.115 436.217 528.337 430.808 532.973 426.497C537.609 422.105 541.472 417.551 544.563 412.833C547.653 408.116 549.199 403.48 549.199 398.925C549.199 394.777 548.223 391.524 546.271 389.165C544.319 386.807 541.309 385.627 537.243 385.627C533.176 385.627 530.045 387.01 527.849 389.775C525.653 392.459 524.514 396.16 524.433 400.877H507.841C508.166 391.117 511.053 383.716 516.503 378.673C522.033 373.631 529.028 371.109 537.487 371.109C546.759 371.109 553.875 373.59 558.837 378.551C563.798 383.431 566.279 389.897 566.279 397.949C566.279 404.293 564.571 410.353 561.155 416.127C557.739 421.902 553.835 426.945 549.443 431.255C545.051 435.485 539.317 440.609 532.241 446.627H568.231V460.779H507.963V448.091L514.307 442.723Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M348.791 388.801V373.062H378.193V462.001H360.625V388.801H348.791Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M693.193 396.486C693.6 388.353 696.447 382.09 701.733 377.698C707.101 373.225 714.137 370.988 722.839 370.988C728.777 370.988 733.86 372.046 738.089 374.16C742.319 376.194 745.491 379 747.605 382.578C749.801 386.076 750.899 390.061 750.899 394.534C750.899 399.658 749.557 404.01 746.873 407.588C744.271 411.086 741.139 413.444 737.479 414.664V415.152C742.197 416.616 745.857 419.219 748.459 422.96C751.143 426.702 752.485 431.5 752.485 437.356C752.485 442.236 751.347 446.588 749.069 450.41C746.873 454.233 743.579 457.242 739.187 459.438C734.877 461.553 729.671 462.61 723.571 462.61C714.381 462.61 706.898 460.292 701.123 455.656C695.349 451.02 692.299 444.188 691.973 435.16H708.565C708.728 439.146 710.07 442.358 712.591 444.798C715.194 447.157 718.732 448.336 723.205 448.336C727.353 448.336 730.525 447.198 732.721 444.92C734.999 442.562 736.137 439.552 736.137 435.892C736.137 431.012 734.592 427.515 731.501 425.4C728.411 423.286 723.612 422.228 717.105 422.228H713.567V408.198H717.105C728.655 408.198 734.429 404.335 734.429 396.608C734.429 393.111 733.372 390.386 731.257 388.434C729.224 386.482 726.255 385.506 722.351 385.506C718.529 385.506 715.56 386.564 713.445 388.678C711.412 390.712 710.233 393.314 709.907 396.486H693.193Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M878.905 444.676V431.256L918.799 374.16H938.685V429.792H949.421V444.676H938.685V462H921.605V444.676H878.905ZM922.703 392.46L897.693 429.792H922.703V392.46Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1133.49 387.824H1093.96V408.686C1095.67 406.572 1098.11 404.864 1101.28 403.562C1104.45 402.18 1107.83 401.488 1111.41 401.488C1117.91 401.488 1123.24 402.912 1127.39 405.758C1131.54 408.605 1134.55 412.265 1136.42 416.738C1138.29 421.13 1139.22 425.848 1139.22 430.89C1139.22 440.244 1136.54 447.767 1131.17 453.46C1125.88 459.154 1118.32 462 1108.48 462C1099.21 462 1091.81 459.682 1086.28 455.046C1080.74 450.41 1077.61 444.351 1076.88 436.868H1093.47C1094.21 440.122 1095.83 442.724 1098.35 444.676C1100.96 446.628 1104.25 447.604 1108.24 447.604C1113.03 447.604 1116.65 446.1 1119.09 443.09C1121.53 440.081 1122.75 436.096 1122.75 431.134C1122.75 426.092 1121.49 422.269 1118.97 419.666C1116.53 416.982 1112.91 415.64 1108.11 415.64C1104.7 415.64 1101.85 416.494 1099.57 418.202C1097.3 419.91 1095.67 422.188 1094.69 425.034H1078.35V372.818H1133.49V387.824Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M1258.57 458.93L1270.64 471L1322 419.64L1270.64 368.279L1258.57 380.349L1297.77 419.64L1258.57 458.93Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3223_108267">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/disabled.svg b/site/public/static/illustrations/components/pagination/states/disabled.svg
new file mode 100644
index 0000000000..0f574b98e0
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/disabled.svg
@@ -0,0 +1,29 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108284)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationSubtle010)"/>
+<path d="M514.466 442.723C522.274 436.217 528.496 430.808 533.132 426.497C537.768 422.105 541.631 417.551 544.722 412.833C547.813 408.116 549.358 403.48 549.358 398.925C549.358 394.777 548.382 391.524 546.43 389.165C544.478 386.807 541.469 385.627 537.402 385.627C533.335 385.627 530.204 387.01 528.008 389.775C525.812 392.459 524.673 396.16 524.592 400.877H508C508.325 391.117 511.213 383.716 516.662 378.673C522.193 373.631 529.187 371.109 537.646 371.109C546.918 371.109 554.035 373.59 558.996 378.551C563.957 383.431 566.438 389.897 566.438 397.949C566.438 404.293 564.73 410.353 561.314 416.127C557.898 421.902 553.994 426.945 549.602 431.255C545.21 435.485 539.476 440.609 532.4 446.627H568.39V460.779H508.122V448.091L514.466 442.723Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M355 387.801V372.062H384.402V461.001H366.834V387.801H355Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M693.22 396.486C693.627 388.353 696.473 382.09 701.76 377.698C707.128 373.225 714.163 370.988 722.866 370.988C728.803 370.988 733.887 372.046 738.116 374.16C742.345 376.194 745.517 379 747.632 382.578C749.828 386.076 750.926 390.061 750.926 394.534C750.926 399.658 749.584 404.01 746.9 407.588C744.297 411.086 741.166 413.444 737.506 414.664V415.152C742.223 416.616 745.883 419.219 748.486 422.96C751.17 426.702 752.512 431.5 752.512 437.356C752.512 442.236 751.373 446.588 749.096 450.41C746.9 454.233 743.606 457.242 739.214 459.438C734.903 461.553 729.698 462.61 723.598 462.61C714.407 462.61 706.925 460.292 701.15 455.656C695.375 451.02 692.325 444.188 692 435.16H708.592C708.755 439.146 710.097 442.358 712.618 444.798C715.221 447.157 718.759 448.336 723.232 448.336C727.38 448.336 730.552 447.198 732.748 444.92C735.025 442.562 736.164 439.552 736.164 435.892C736.164 431.012 734.619 427.515 731.528 425.4C728.437 423.286 723.639 422.228 717.132 422.228H713.594V408.198H717.132C728.681 408.198 734.456 404.335 734.456 396.608C734.456 393.111 733.399 390.386 731.284 388.434C729.251 386.482 726.282 385.506 722.378 385.506C718.555 385.506 715.587 386.564 713.472 388.678C711.439 390.712 710.259 393.314 709.934 396.486H693.22Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M876 444.676V431.256L915.894 374.16H935.78V429.792H946.516V444.676H935.78V462H918.7V444.676H876ZM919.798 392.46L894.788 429.792H919.798V392.46Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1126.61 387.824H1087.08V408.686C1088.79 406.572 1091.23 404.864 1094.4 403.562C1097.57 402.18 1100.95 401.488 1104.53 401.488C1111.03 401.488 1116.36 402.912 1120.51 405.758C1124.66 408.605 1127.67 412.265 1129.54 416.738C1131.41 421.13 1132.34 425.848 1132.34 430.89C1132.34 440.244 1129.66 447.767 1124.29 453.46C1119 459.154 1111.44 462 1101.6 462C1092.33 462 1084.92 459.682 1079.39 455.046C1073.86 450.41 1070.73 444.351 1070 436.868H1086.59C1087.32 440.122 1088.95 442.724 1091.47 444.676C1094.07 446.628 1097.37 447.604 1101.35 447.604C1106.15 447.604 1109.77 446.1 1112.21 443.09C1114.65 440.081 1115.87 436.096 1115.87 431.134C1115.87 426.092 1114.61 422.269 1112.09 419.666C1109.65 416.982 1106.03 415.64 1101.23 415.64C1097.82 415.64 1094.97 416.494 1092.69 418.202C1090.41 419.91 1088.79 422.188 1087.81 425.034H1071.46V372.818H1126.61V387.824Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1256 458.93L1268.07 471L1319.43 419.64L1268.07 368.279L1256 380.349L1295.21 419.64L1256 458.93Z" fill="var(--color-illustrationPalette020)"/>
+<g filter="url(#filter0_d_3223_108284)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M328.668 613.175C322.73 617.404 315.465 619.891 307.619 619.891C287.556 619.891 271.292 603.627 271.292 583.563C271.292 575.718 273.779 568.453 278.008 562.515L328.668 613.175ZM337.231 604.613C341.46 598.674 343.947 591.409 343.947 583.564C343.947 563.501 327.682 547.236 307.619 547.236C299.773 547.236 292.509 549.723 286.57 553.952L337.231 604.613ZM307.619 632C334.37 632 356.056 610.315 356.056 583.564C356.056 556.813 334.37 535.127 307.619 535.127C280.868 535.127 259.183 556.813 259.183 583.564C259.183 610.315 280.868 632 307.619 632ZM293 517.381L231 489L245.664 556L263.582 529.537L293 517.381Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3223_108284" x="228" y="487" width="131.056" height="149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3223_108284"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3223_108284" result="shape"/>
+</filter>
+<clipPath id="clip0_3223_108284">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/focus.svg b/site/public/static/illustrations/components/pagination/states/focus.svg
new file mode 100644
index 0000000000..6e784c21c4
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/focus.svg
@@ -0,0 +1,29 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108278)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M496.193 396.486C496.6 388.353 499.447 382.09 504.733 377.698C510.101 373.225 517.137 370.988 525.839 370.988C531.777 370.988 536.86 372.046 541.089 374.16C545.319 376.194 548.491 379 550.605 382.578C552.801 386.076 553.899 390.061 553.899 394.534C553.899 399.658 552.557 404.01 549.873 407.588C547.271 411.086 544.139 413.444 540.479 414.664V415.152C545.197 416.616 548.857 419.219 551.459 422.96C554.143 426.702 555.485 431.5 555.485 437.356C555.485 442.236 554.347 446.588 552.069 450.41C549.873 454.233 546.579 457.242 542.187 459.438C537.877 461.553 532.671 462.61 526.571 462.61C517.381 462.61 509.898 460.292 504.123 455.656C498.349 451.02 495.299 444.188 494.973 435.16H511.565C511.728 439.146 513.07 442.358 515.591 444.798C518.194 447.157 521.732 448.336 526.205 448.336C530.353 448.336 533.525 447.198 535.721 444.92C537.999 442.562 539.137 439.552 539.137 435.892C539.137 431.012 537.592 427.515 534.501 425.4C531.411 423.286 526.612 422.228 520.105 422.228H516.567V408.198H520.105C531.655 408.198 537.429 404.335 537.429 396.608C537.429 393.111 536.372 390.386 534.257 388.434C532.224 386.482 529.255 385.506 525.351 385.506C521.529 385.506 518.56 386.564 516.445 388.678C514.412 390.712 513.233 393.314 512.907 396.486H496.193Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M336.307 442.723C344.115 436.217 350.337 430.808 354.973 426.497C359.609 422.105 363.472 417.551 366.563 412.833C369.653 408.116 371.199 403.48 371.199 398.925C371.199 394.777 370.223 391.524 368.271 389.165C366.319 386.807 363.309 385.627 359.243 385.627C355.176 385.627 352.045 387.01 349.849 389.775C347.653 392.459 346.514 396.16 346.433 400.877H329.841C330.166 391.117 333.053 383.716 338.503 378.673C344.033 373.631 351.028 371.109 359.487 371.109C368.759 371.109 375.875 373.59 380.837 378.551C385.798 383.431 388.279 389.897 388.279 397.949C388.279 404.293 386.571 410.353 383.155 416.127C379.739 421.902 375.835 426.945 371.443 431.255C367.051 435.485 361.317 440.609 354.241 446.627H390.231V460.779H329.963V448.091L336.307 442.723Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M705.905 444.676V431.256L745.799 374.16H765.685V429.792H776.421V444.676H765.685V462H748.605V444.676H705.905ZM749.703 392.46L724.693 429.792H749.703V392.46Z" fill="var(--color-illustrationHighlight010)"/>
+<g filter="url(#filter0_d_3223_108278)">
+<path d="M646.5 419C646.5 366.315 690.198 323.5 743 323.5C795.802 323.5 839.5 366.315 839.5 419C839.5 471.685 795.802 514.5 743 514.5C690.198 514.5 646.5 471.685 646.5 419Z" stroke="#577FFB" stroke-width="9"/>
+</g>
+<path d="M985.489 387.824H945.961V408.686C947.669 406.572 950.109 404.864 953.281 403.562C956.453 402.18 959.828 401.488 963.407 401.488C969.914 401.488 975.241 402.912 979.389 405.758C983.537 408.605 986.546 412.265 988.417 416.738C990.288 421.13 991.223 425.848 991.223 430.89C991.223 440.244 988.539 447.767 983.171 453.46C977.884 459.154 970.32 462 960.479 462C951.207 462 943.806 459.682 938.275 455.046C932.744 450.41 929.613 444.351 928.881 436.868H945.473C946.205 440.122 947.832 442.724 950.353 444.676C952.956 446.628 956.25 447.604 960.235 447.604C965.034 447.604 968.653 446.1 971.093 443.09C973.533 440.081 974.753 436.096 974.753 431.134C974.753 426.092 973.492 422.269 970.971 419.666C968.531 416.982 964.912 415.64 960.113 415.64C956.697 415.64 953.85 416.494 951.573 418.202C949.296 419.91 947.669 422.188 946.693 425.034H930.345V372.818H985.489V387.824Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1146.06 395.266C1145.25 391.85 1143.83 389.288 1141.79 387.58C1139.84 385.872 1136.99 385.018 1133.25 385.018C1127.64 385.018 1123.49 387.296 1120.81 391.85C1118.21 396.324 1116.86 403.644 1116.78 413.81C1118.74 410.557 1121.58 408.036 1125.32 406.246C1129.06 404.376 1133.13 403.44 1137.52 403.44C1142.81 403.44 1147.49 404.579 1151.55 406.856C1155.62 409.134 1158.79 412.468 1161.07 416.86C1163.35 421.171 1164.49 426.376 1164.49 432.476C1164.49 438.251 1163.31 443.416 1160.95 447.97C1158.67 452.444 1155.29 455.941 1150.82 458.462C1146.35 460.984 1141.02 462.244 1134.84 462.244C1126.38 462.244 1119.71 460.374 1114.83 456.632C1110.03 452.891 1106.66 447.686 1104.71 441.016C1102.83 434.266 1101.9 425.97 1101.9 416.128C1101.9 401.244 1104.46 390.02 1109.59 382.456C1114.71 374.811 1122.8 370.988 1133.86 370.988C1142.4 370.988 1149.03 373.306 1153.75 377.942C1158.47 382.578 1161.19 388.353 1161.92 395.266H1146.06ZM1133.62 417.47C1129.31 417.47 1125.69 418.731 1122.76 421.252C1119.83 423.774 1118.37 427.434 1118.37 432.232C1118.37 437.031 1119.71 440.813 1122.4 443.578C1125.16 446.344 1129.02 447.726 1133.99 447.726C1138.38 447.726 1141.83 446.384 1144.36 443.7C1146.96 441.016 1148.26 437.397 1148.26 432.842C1148.26 428.125 1147 424.384 1144.48 421.618C1142.04 418.853 1138.42 417.47 1133.62 417.47Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1258.57 458.93L1270.64 471L1322 419.64L1270.64 368.279L1258.57 380.349L1297.77 419.64L1258.57 458.93Z" fill="var(--color-illustrationPalette020)"/>
+</g>
+<defs>
+<filter id="filter0_d_3223_108278" x="610" y="307" width="266" height="264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3223_108278"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3223_108278" result="shape"/>
+</filter>
+<clipPath id="clip0_3223_108278">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/hover.svg b/site/public/static/illustrations/components/pagination/states/hover.svg
new file mode 100644
index 0000000000..835835570c
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/hover.svg
@@ -0,0 +1,31 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108269)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M507.193 396.486C507.6 388.353 510.447 382.09 515.733 377.698C521.101 373.225 528.137 370.988 536.839 370.988C542.777 370.988 547.86 372.046 552.089 374.16C556.319 376.194 559.491 379 561.605 382.578C563.801 386.076 564.899 390.061 564.899 394.534C564.899 399.658 563.557 404.01 560.873 407.588C558.271 411.086 555.139 413.444 551.479 414.664V415.152C556.197 416.616 559.857 419.219 562.459 422.96C565.143 426.702 566.485 431.5 566.485 437.356C566.485 442.236 565.347 446.588 563.069 450.41C560.873 454.233 557.579 457.242 553.187 459.438C548.877 461.553 543.671 462.61 537.571 462.61C528.381 462.61 520.898 460.292 515.123 455.656C509.349 451.02 506.299 444.188 505.973 435.16H522.565C522.728 439.146 524.07 442.358 526.591 444.798C529.194 447.157 532.732 448.336 537.205 448.336C541.353 448.336 544.525 447.198 546.721 444.92C548.999 442.562 550.137 439.552 550.137 435.892C550.137 431.012 548.592 427.515 545.501 425.4C542.411 423.286 537.612 422.228 531.105 422.228H527.567V408.198H531.105C542.655 408.198 548.429 404.335 548.429 396.608C548.429 393.111 547.372 390.386 545.257 388.434C543.224 386.482 540.255 385.506 536.351 385.506C532.529 385.506 529.56 386.564 527.445 388.678C525.412 390.712 524.233 393.314 523.907 396.486H507.193Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M343.307 442.723C351.115 436.217 357.337 430.808 361.973 426.497C366.609 422.105 370.472 417.551 373.563 412.833C376.653 408.116 378.199 403.48 378.199 398.925C378.199 394.777 377.223 391.524 375.271 389.165C373.319 386.807 370.309 385.627 366.243 385.627C362.176 385.627 359.045 387.01 356.849 389.775C354.653 392.459 353.514 396.16 353.433 400.877H336.841C337.166 391.117 340.053 383.716 345.503 378.673C351.033 373.631 358.028 371.109 366.487 371.109C375.759 371.109 382.875 373.59 387.837 378.551C392.798 383.431 395.279 389.897 395.279 397.949C395.279 404.293 393.571 410.353 390.155 416.127C386.739 421.902 382.835 426.945 378.443 431.255C374.051 435.485 368.317 440.609 361.241 446.627H397.231V460.779H336.963V448.091L343.307 442.723Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M688.905 444.676V431.256L728.799 374.16H748.685V429.792H759.421V444.676H748.685V462H731.605V444.676H688.905ZM732.703 392.46L707.693 429.792H732.703V392.46Z" fill="var(--color-illustrationPalette020)"/>
+<rect x="814" y="315" width="202" height="200" rx="100" fill="var(--color-illustrationPalette010)"/>
+<path d="M940.489 387.824H900.961V408.686C902.669 406.572 905.109 404.864 908.281 403.562C911.453 402.18 914.828 401.488 918.407 401.488C924.914 401.488 930.241 402.912 934.389 405.758C938.537 408.605 941.546 412.265 943.417 416.738C945.288 421.13 946.223 425.848 946.223 430.89C946.223 440.244 943.539 447.767 938.171 453.46C932.884 459.154 925.32 462 915.479 462C906.207 462 898.806 459.682 893.275 455.046C887.744 450.41 884.613 444.351 883.881 436.868H900.473C901.205 440.122 902.832 442.724 905.353 444.676C907.956 446.628 911.25 447.604 915.235 447.604C920.034 447.604 923.653 446.1 926.093 443.09C928.533 440.081 929.753 436.096 929.753 431.134C929.753 426.092 928.492 422.269 925.971 419.666C923.531 416.982 919.912 415.64 915.113 415.64C911.697 415.64 908.85 416.494 906.573 418.202C904.296 419.91 902.669 422.188 901.693 425.034H885.345V372.818H940.489V387.824Z" fill="var(--color-illustrationPalette060)"/>
+<path d="M1120.06 395.266C1119.25 391.85 1117.83 389.288 1115.79 387.58C1113.84 385.872 1110.99 385.018 1107.25 385.018C1101.64 385.018 1097.49 387.296 1094.81 391.85C1092.21 396.324 1090.86 403.644 1090.78 413.81C1092.74 410.557 1095.58 408.036 1099.32 406.246C1103.06 404.376 1107.13 403.44 1111.52 403.44C1116.81 403.44 1121.49 404.579 1125.55 406.856C1129.62 409.134 1132.79 412.468 1135.07 416.86C1137.35 421.171 1138.49 426.376 1138.49 432.476C1138.49 438.251 1137.31 443.416 1134.95 447.97C1132.67 452.444 1129.29 455.941 1124.82 458.462C1120.35 460.984 1115.02 462.244 1108.84 462.244C1100.38 462.244 1093.71 460.374 1088.83 456.632C1084.03 452.891 1080.66 447.686 1078.71 441.016C1076.83 434.266 1075.9 425.97 1075.9 416.128C1075.9 401.244 1078.46 390.02 1083.59 382.456C1088.71 374.811 1096.8 370.988 1107.86 370.988C1116.4 370.988 1123.03 373.306 1127.75 377.942C1132.47 382.578 1135.19 388.353 1135.92 395.266H1120.06ZM1107.62 417.47C1103.31 417.47 1099.69 418.731 1096.76 421.252C1093.83 423.774 1092.37 427.434 1092.37 432.232C1092.37 437.031 1093.71 440.813 1096.4 443.578C1099.16 446.344 1103.02 447.726 1107.99 447.726C1112.38 447.726 1115.83 446.384 1118.36 443.7C1120.96 441.016 1122.26 437.397 1122.26 432.842C1122.26 428.125 1121 424.384 1118.48 421.618C1116.04 418.853 1112.42 417.47 1107.62 417.47Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1258.57 458.93L1270.64 471L1322 419.64L1270.64 368.279L1258.57 380.349L1297.77 419.64L1258.57 458.93Z" fill="var(--color-illustrationPalette020)"/>
+<g filter="url(#filter0_d_3223_108269)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M957.984 520.744L951.977 511.567C947.876 505.301 939.14 503.015 932.458 506.45L934.015 505.649C932.357 506.502 931.562 508.627 932.245 510.394L940.559 531.904C941.877 535.314 945.243 540.137 948.032 542.56C948.032 542.56 964.758 556.403 964.758 561.594V568.165H1012.18V561.594C1012.18 556.403 1022.4 540.056 1022.4 540.056C1024.28 536.878 1025.85 531.28 1025.85 527.563V500.23C1025.73 494.178 1020.58 489.274 1014.24 489.274C1011.06 489.274 1008.49 491.726 1008.49 494.753V496.943C1008.49 490.891 1003.34 485.987 996.997 485.987C993.822 485.987 991.25 488.439 991.25 491.466V493.655C991.25 487.604 986.106 482.7 979.759 482.7C976.583 482.7 974.011 485.152 974.011 488.179V490.368C974.011 489.396 973.907 488.623 973.707 488.01L971.954 459.783C971.716 455.966 968.499 453 964.758 453C960.99 453 957.984 456.032 957.984 459.773V520.744Z" fill="white"/>
+<path d="M933.145 503.955L933.101 503.871C933.101 503.871 933.101 503.871 933.1 503.871L931.546 504.67C931.545 504.67 931.545 504.671 931.544 504.671L931.675 504.926C930.119 506.518 929.553 508.977 930.379 511.115L938.693 532.625C940.128 536.336 943.683 541.431 946.721 544.07L946.739 544.085L946.757 544.1L946.757 544.1L946.757 544.101L946.759 544.102L946.767 544.109L946.801 544.136L946.829 544.16C946.857 544.183 946.893 544.213 946.936 544.249C947.055 544.349 947.231 544.497 947.456 544.689C947.906 545.071 948.551 545.625 949.325 546.306C950.876 547.67 952.937 549.536 954.993 551.557C957.058 553.586 959.075 555.73 960.562 557.653C961.307 558.616 961.884 559.48 962.267 560.212C962.67 560.984 962.758 561.425 962.758 561.594V568.165V570.165H964.758H1012.18H1014.18V568.165V561.594C1014.18 560.751 1014.65 559.101 1015.62 556.819C1016.54 554.639 1017.79 552.171 1019.05 549.828C1020.31 547.492 1021.57 545.311 1022.52 543.712C1023 542.914 1023.39 542.262 1023.67 541.811C1023.81 541.586 1023.91 541.411 1023.99 541.293L1024.07 541.159L1024.09 541.126L1024.09 541.118L1024.1 541.116L1024.1 541.116L1024.1 541.116L1024.11 541.095L1024.12 541.075C1025.18 539.287 1026.1 536.914 1026.76 534.546C1027.41 532.179 1027.85 529.661 1027.85 527.563V500.23V500.209L1027.85 500.189C1027.7 492.985 1021.61 487.274 1014.24 487.274C1011.9 487.274 1009.77 488.283 1008.33 489.907C1005.91 486.325 1001.71 483.987 996.997 483.987C994.666 483.987 992.529 484.996 991.093 486.62C988.675 483.038 984.469 480.7 979.759 480.7C978.134 480.7 976.604 481.19 975.339 482.037L973.95 459.659C973.647 454.78 969.549 451 964.758 451C959.881 451 955.984 454.933 955.984 459.773V514.036L953.651 510.472C949.307 503.835 940.466 501.148 933.145 503.955Z" stroke="#0C285F" stroke-width="4"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3223_108269" x="896.001" y="437" width="165.849" height="187.164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3223_108269"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3223_108269" result="shape"/>
+</filter>
+<clipPath id="clip0_3223_108269">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/states/selected.svg b/site/public/static/illustrations/components/pagination/states/selected.svg
new file mode 100644
index 0000000000..0497898018
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/states/selected.svg
@@ -0,0 +1,18 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3223_108281)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M231.43 379.07L219.36 367L168 418.36L219.36 469.721L231.43 457.651L192.225 418.36L231.43 379.07Z" fill="var(--color-illustrationPalette020)"/>
+<rect x="644" y="319" width="202" height="200" rx="100" fill="var(--color-illustrationPalette020)"/>
+<path d="M496.193 396.486C496.6 388.353 499.447 382.09 504.733 377.698C510.101 373.225 517.137 370.988 525.839 370.988C531.777 370.988 536.86 372.046 541.089 374.16C545.319 376.194 548.491 379 550.605 382.578C552.801 386.076 553.899 390.061 553.899 394.534C553.899 399.658 552.557 404.01 549.873 407.588C547.271 411.086 544.139 413.444 540.479 414.664V415.152C545.197 416.616 548.857 419.219 551.459 422.96C554.143 426.702 555.485 431.5 555.485 437.356C555.485 442.236 554.347 446.588 552.069 450.41C549.873 454.233 546.579 457.242 542.187 459.438C537.877 461.553 532.671 462.61 526.571 462.61C517.381 462.61 509.898 460.292 504.123 455.656C498.349 451.02 495.299 444.188 494.973 435.16H511.565C511.728 439.146 513.07 442.358 515.591 444.798C518.194 447.157 521.732 448.336 526.205 448.336C530.353 448.336 533.525 447.198 535.721 444.92C537.999 442.562 539.137 439.552 539.137 435.892C539.137 431.012 537.592 427.515 534.501 425.4C531.411 423.286 526.612 422.228 520.105 422.228H516.567V408.198H520.105C531.655 408.198 537.429 404.335 537.429 396.608C537.429 393.111 536.372 390.386 534.257 388.434C532.224 386.482 529.255 385.506 525.351 385.506C521.529 385.506 518.56 386.564 516.445 388.678C514.412 390.712 513.233 393.314 512.907 396.486H496.193Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M336.307 442.723C344.115 436.217 350.337 430.808 354.973 426.497C359.609 422.105 363.472 417.551 366.563 412.833C369.653 408.116 371.199 403.48 371.199 398.925C371.199 394.777 370.223 391.524 368.271 389.165C366.319 386.807 363.309 385.627 359.243 385.627C355.176 385.627 352.045 387.01 349.849 389.775C347.653 392.459 346.514 396.16 346.433 400.877H329.841C330.166 391.117 333.053 383.716 338.503 378.673C344.033 373.631 351.028 371.109 359.487 371.109C368.759 371.109 375.875 373.59 380.837 378.551C385.798 383.431 388.279 389.897 388.279 397.949C388.279 404.293 386.571 410.353 383.155 416.127C379.739 421.902 375.835 426.945 371.443 431.255C367.051 435.485 361.317 440.609 354.241 446.627H390.231V460.779H329.963V448.091L336.307 442.723Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M707 444.676V431.256L746.894 374.16H766.78V429.792H777.516V444.676H766.78V462H749.7V444.676H707ZM750.798 392.46L725.788 429.792H750.798V392.46Z" fill="var(--color-illustrationPalette070)"/>
+<path d="M985.489 387.824H945.961V408.686C947.669 406.572 950.109 404.864 953.281 403.562C956.453 402.18 959.828 401.488 963.407 401.488C969.914 401.488 975.241 402.912 979.389 405.758C983.537 408.605 986.546 412.265 988.417 416.738C990.288 421.13 991.223 425.848 991.223 430.89C991.223 440.244 988.539 447.767 983.171 453.46C977.884 459.154 970.32 462 960.479 462C951.207 462 943.806 459.682 938.275 455.046C932.744 450.41 929.613 444.351 928.881 436.868H945.473C946.205 440.122 947.832 442.724 950.353 444.676C952.956 446.628 956.25 447.604 960.235 447.604C965.034 447.604 968.653 446.1 971.093 443.09C973.533 440.081 974.753 436.096 974.753 431.134C974.753 426.092 973.492 422.269 970.971 419.666C968.531 416.982 964.912 415.64 960.113 415.64C956.697 415.64 953.85 416.494 951.573 418.202C949.296 419.91 947.669 422.188 946.693 425.034H930.345V372.818H985.489V387.824Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1146.06 395.266C1145.25 391.85 1143.83 389.288 1141.79 387.58C1139.84 385.872 1136.99 385.018 1133.25 385.018C1127.64 385.018 1123.49 387.296 1120.81 391.85C1118.21 396.324 1116.86 403.644 1116.78 413.81C1118.74 410.557 1121.58 408.036 1125.32 406.246C1129.06 404.376 1133.13 403.44 1137.52 403.44C1142.81 403.44 1147.49 404.579 1151.55 406.856C1155.62 409.134 1158.79 412.468 1161.07 416.86C1163.35 421.171 1164.49 426.376 1164.49 432.476C1164.49 438.251 1163.31 443.416 1160.95 447.97C1158.67 452.444 1155.29 455.941 1150.82 458.462C1146.35 460.984 1141.02 462.244 1134.84 462.244C1126.38 462.244 1119.71 460.374 1114.83 456.632C1110.03 452.891 1106.66 447.686 1104.71 441.016C1102.83 434.266 1101.9 425.97 1101.9 416.128C1101.9 401.244 1104.46 390.02 1109.59 382.456C1114.71 374.811 1122.8 370.988 1133.86 370.988C1142.4 370.988 1149.03 373.306 1153.75 377.942C1158.47 382.578 1161.19 388.353 1161.92 395.266H1146.06ZM1133.62 417.47C1129.31 417.47 1125.69 418.731 1122.76 421.252C1119.83 423.774 1118.37 427.434 1118.37 432.232C1118.37 437.031 1119.71 440.813 1122.4 443.578C1125.16 446.344 1129.02 447.726 1133.99 447.726C1138.38 447.726 1141.83 446.384 1144.36 443.7C1146.96 441.016 1148.26 437.397 1148.26 432.842C1148.26 428.125 1147 424.384 1144.48 421.618C1142.04 418.853 1138.42 417.47 1133.62 417.47Z" fill="var(--color-illustrationPalette020)"/>
+<path d="M1258.57 458.93L1270.64 471L1322 419.64L1270.64 368.279L1258.57 380.349L1297.77 419.64L1258.57 458.93Z" fill="var(--color-illustrationPalette020)"/>
+</g>
+<defs>
+<clipPath id="clip0_3223_108281">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/usage/do-01.svg b/site/public/static/illustrations/components/pagination/usage/do-01.svg
new file mode 100644
index 0000000000..47570e6932
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/usage/do-01.svg
@@ -0,0 +1,32 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3264_104769)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M116 -48.7752C116 -61.0496 125.95 -71 138.225 -71H1350.87C1363.14 -71 1373.09 -61.0496 1373.09 -48.7752V677.7C1373.09 689.974 1363.14 699.924 1350.87 699.924H138.225C125.95 699.924 116 689.974 116 677.7V-48.7752Z" fill="var(--color-illustrationInterface010)"/>
+<rect x="116" y="460" width="1257" height="167" fill="var(--color-illustrationInterface030)"/>
+<path d="M116 627H1373V693C1373 706.255 1362.25 717 1349 717H140C126.745 717 116 706.255 116 693V627Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M571.367 267C567.85 267 565 269.851 565 273.369C565 276.886 567.85 279.738 571.367 279.738H1074.34C1077.86 279.738 1080.71 276.886 1080.71 273.369C1080.71 269.851 1077.86 267 1074.34 267H571.367ZM571.368 300.118C567.851 300.118 565.001 302.969 565.001 306.486C565.001 310.004 567.851 312.855 571.368 312.855H966.107C969.624 312.855 972.474 310.004 972.474 306.486C972.474 302.969 969.624 300.118 966.107 300.118H571.368Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M571.367 87C567.85 87 565 89.8514 565 93.3688C565 96.8861 567.85 99.7375 571.367 99.7375H1074.34C1077.86 99.7375 1080.71 96.8861 1080.71 93.3688C1080.71 89.8514 1077.86 87 1074.34 87H571.367ZM571.368 120.118C567.851 120.118 565.001 122.969 565.001 126.486C565.001 130.004 567.851 132.855 571.368 132.855H966.107C969.624 132.855 972.474 130.004 972.474 126.486C972.474 122.969 969.624 120.118 966.107 120.118H571.368Z" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="466.5" cy="297.5" r="63.5" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="466.5" cy="117.5" r="63.5" fill="var(--color-illustrationInterface020)"/>
+<g opacity="0.6">
+<path d="M441.929 307.416C445.001 304.856 447.449 302.728 449.273 301.032C451.097 299.304 452.617 297.512 453.833 295.656C455.049 293.8 455.657 291.976 455.657 290.184C455.657 288.552 455.273 287.272 454.505 286.344C453.737 285.416 452.553 284.952 450.953 284.952C449.353 284.952 448.121 285.496 447.257 286.584C446.393 287.64 445.945 289.096 445.913 290.952H439.385C439.513 287.112 440.649 284.2 442.793 282.216C444.969 280.232 447.721 279.24 451.049 279.24C454.697 279.24 457.497 280.216 459.449 282.168C461.401 284.088 462.377 286.632 462.377 289.8C462.377 292.296 461.705 294.68 460.361 296.952C459.017 299.224 457.481 301.208 455.753 302.904C454.025 304.568 451.769 306.584 448.985 308.952H463.146V314.52H439.433V309.528L441.929 307.416Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M490.9 285.816H475.348V294.024C476.02 293.192 476.98 292.52 478.228 292.008C479.476 291.464 480.804 291.192 482.212 291.192C484.772 291.192 486.868 291.752 488.5 292.872C490.132 293.992 491.316 295.432 492.052 297.192C492.788 298.92 493.156 300.776 493.156 302.76C493.156 306.44 492.1 309.4 489.988 311.64C487.908 313.88 484.932 315 481.06 315C477.412 315 474.5 314.088 472.324 312.264C470.148 310.44 468.916 308.056 468.628 305.112H475.156C475.444 306.392 476.084 307.416 477.076 308.184C478.1 308.952 479.396 309.336 480.964 309.336C482.852 309.336 484.276 308.744 485.236 307.56C486.196 306.376 486.676 304.808 486.676 302.856C486.676 300.872 486.18 299.368 485.188 298.344C484.228 297.288 482.804 296.76 480.916 296.76C479.572 296.76 478.452 297.096 477.556 297.768C476.66 298.44 476.02 299.336 475.636 300.456H469.204V279.912H490.9V285.816Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+<g opacity="0.2">
+<path d="M441.008 127.416C444.08 124.856 446.528 122.728 448.352 121.032C450.176 119.304 451.696 117.512 452.912 115.656C454.128 113.8 454.736 111.976 454.736 110.184C454.736 108.552 454.352 107.272 453.584 106.344C452.816 105.416 451.632 104.952 450.032 104.952C448.432 104.952 447.2 105.496 446.336 106.584C445.472 107.64 445.024 109.096 444.992 110.952H438.464C438.592 107.112 439.728 104.2 441.872 102.216C444.048 100.232 446.8 99.2402 450.128 99.2402C453.776 99.2402 456.576 100.216 458.528 102.168C460.48 104.088 461.456 106.632 461.456 109.8C461.456 112.296 460.784 114.68 459.44 116.952C458.096 119.224 456.56 121.208 454.832 122.904C453.104 124.568 450.848 126.584 448.064 128.952H462.224V134.52H438.512V129.528L441.008 127.416Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M466.17 128.184V122.904L481.866 100.44H489.69V122.328H493.914V128.184H489.69V135H482.97V128.184H466.17ZM483.402 107.64L473.562 122.328H483.402V107.64Z" fill="var(--color-illustrationInterface060)"/>
+</g>
+<path opacity="0.8" d="M428 527.7L423.243 523L403 543L423.243 563L428 558.3L412.548 543L428 527.7Z" fill="var(--color-illustrationInterface010)"/>
+<path opacity="0.8" d="M1062 558.3L1066.76 563L1087 543L1066.76 523L1062 527.7L1077.45 543L1062 558.3Z" fill="var(--color-illustrationInterface010)"/>
+<circle cx="524" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle opacity="0.8" cx="634" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle opacity="0.8" cx="744" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle opacity="0.8" cx="854" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle opacity="0.8" cx="964" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3264_104769">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/usage/do-02.svg b/site/public/static/illustrations/components/pagination/usage/do-02.svg
new file mode 100644
index 0000000000..54b9a0917a
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/usage/do-02.svg
@@ -0,0 +1,27 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3275_104332)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M116 -48.7752C116 -61.0496 125.95 -71 138.225 -71H1350.87C1363.14 -71 1373.09 -61.0496 1373.09 -48.7752V677.7C1373.09 689.974 1363.14 699.924 1350.87 699.924H138.225C125.95 699.924 116 689.974 116 677.7V-48.7752Z" fill="var(--color-illustrationInterface010)"/>
+<rect x="116" y="344" width="1257" height="283" fill="var(--color-illustrationInterface030)"/>
+<path d="M116 627H1373V693C1373 706.255 1362.25 717 1349 717H140C126.745 717 116 706.255 116 693V627Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M571.367 119C567.85 119 565 121.851 565 125.369C565 128.886 567.85 131.738 571.367 131.738H1074.34C1077.86 131.738 1080.71 128.886 1080.71 125.369C1080.71 121.851 1077.86 119 1074.34 119H571.367ZM571.368 152.118C567.851 152.118 565.001 154.969 565.001 158.486C565.001 162.004 567.851 164.855 571.368 164.855H966.107C969.624 164.855 972.474 162.004 972.474 158.486C972.474 154.969 969.624 152.118 966.107 152.118H571.368Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M571.367 -21C567.85 -21 565 -18.1486 565 -14.6312C565 -11.1139 567.85 -8.26246 571.367 -8.26246H1074.34C1077.86 -8.26246 1080.71 -11.1139 1080.71 -14.6312C1080.71 -18.1486 1077.86 -21 1074.34 -21H571.367ZM571.368 12.1176C567.851 12.1176 565.001 14.969 565.001 18.4864C565.001 22.0037 567.851 24.8551 571.368 24.8551H966.107C969.624 24.8551 972.474 22.0037 972.474 18.4864C972.474 14.969 969.624 12.1176 966.107 12.1176H571.368Z" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="443" cy="142" r="40" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="443" cy="2" r="40" fill="var(--color-illustrationInterface020)"/>
+<path d="M428 422.7L423.243 418L403 438L423.243 458L428 453.3L412.548 438L428 422.7Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M1062 547.3L1066.76 552L1087 532L1066.76 512L1062 516.7L1077.45 532L1062 547.3Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M534.994 448.1C538.194 445.433 540.744 443.217 542.644 441.45C544.544 439.65 546.128 437.783 547.394 435.85C548.661 433.917 549.294 432.017 549.294 430.15C549.294 428.45 548.894 427.117 548.094 426.15C547.294 425.183 546.061 424.7 544.394 424.7C542.728 424.7 541.444 425.267 540.544 426.4C539.644 427.5 539.178 429.017 539.144 430.95H532.344C532.478 426.95 533.661 423.917 535.894 421.85C538.161 419.783 541.028 418.75 544.494 418.75C548.294 418.75 551.211 419.767 553.244 421.8C555.278 423.8 556.294 426.45 556.294 429.75C556.294 432.35 555.594 434.833 554.194 437.2C552.794 439.567 551.194 441.633 549.394 443.4C547.594 445.133 545.244 447.233 542.344 449.7H557.094V455.5H532.394V450.3L534.994 448.1Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M549.559 522.649C549.225 521.249 548.642 520.199 547.809 519.499C547.009 518.799 545.842 518.449 544.309 518.449C542.009 518.449 540.309 519.383 539.209 521.249C538.142 523.083 537.592 526.083 537.559 530.249C538.359 528.916 539.525 527.883 541.059 527.149C542.592 526.383 544.259 525.999 546.059 525.999C548.225 525.999 550.142 526.466 551.809 527.399C553.475 528.333 554.775 529.699 555.709 531.499C556.642 533.266 557.109 535.399 557.109 537.899C557.109 540.266 556.625 542.383 555.659 544.249C554.725 546.083 553.342 547.516 551.509 548.549C549.675 549.583 547.492 550.099 544.959 550.099C541.492 550.099 538.759 549.333 536.759 547.799C534.792 546.266 533.409 544.133 532.609 541.399C531.842 538.633 531.459 535.233 531.459 531.199C531.459 525.099 532.509 520.499 534.609 517.399C536.709 514.266 540.025 512.699 544.559 512.699C548.059 512.699 550.775 513.649 552.709 515.549C554.642 517.449 555.759 519.816 556.059 522.649H549.559ZM544.459 531.749C542.692 531.749 541.209 532.266 540.009 533.299C538.809 534.333 538.209 535.833 538.209 537.799C538.209 539.766 538.759 541.316 539.859 542.449C540.992 543.583 542.575 544.149 544.609 544.149C546.409 544.149 547.825 543.599 548.859 542.499C549.925 541.399 550.459 539.916 550.459 538.049C550.459 536.116 549.942 534.583 548.909 533.449C547.909 532.316 546.425 531.749 544.459 531.749Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M663.784 429.149C663.951 425.816 665.118 423.249 667.284 421.449C669.484 419.616 672.368 418.699 675.934 418.699C678.368 418.699 680.451 419.133 682.184 419.999C683.918 420.833 685.218 421.983 686.084 423.449C686.984 424.883 687.434 426.516 687.434 428.349C687.434 430.449 686.884 432.233 685.784 433.699C684.718 435.133 683.434 436.099 681.934 436.599V436.799C683.868 437.399 685.368 438.466 686.434 439.999C687.534 441.533 688.084 443.499 688.084 445.899C688.084 447.899 687.618 449.683 686.684 451.249C685.784 452.816 684.434 454.049 682.634 454.949C680.868 455.816 678.734 456.249 676.234 456.249C672.468 456.249 669.401 455.299 667.034 453.399C664.668 451.499 663.418 448.699 663.284 444.999H670.084C670.151 446.633 670.701 447.949 671.734 448.949C672.801 449.916 674.251 450.399 676.084 450.399C677.784 450.399 679.084 449.933 679.984 448.999C680.918 448.033 681.384 446.799 681.384 445.299C681.384 443.299 680.751 441.866 679.484 440.999C678.218 440.133 676.251 439.699 673.584 439.699H672.134V433.949H673.584C678.318 433.949 680.684 432.366 680.684 429.199C680.684 427.766 680.251 426.649 679.384 425.849C678.551 425.049 677.334 424.649 675.734 424.649C674.168 424.649 672.951 425.083 672.084 425.949C671.251 426.783 670.768 427.849 670.634 429.149H663.784Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M688.154 518.85L674.854 550H667.754L681.154 519.65H664.054V513.65H688.154V518.85Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M794.822 448.9V443.4L811.172 420H819.322V442.8H823.722V448.9H819.322V456H812.322V448.9H794.822ZM812.772 427.5L802.522 442.8H812.772V427.5Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M802.186 530.7C798.852 528.966 797.186 526.283 797.186 522.65C797.186 520.85 797.636 519.216 798.536 517.75C799.469 516.25 800.852 515.066 802.686 514.2C804.552 513.3 806.819 512.85 809.486 512.85C812.152 512.85 814.402 513.3 816.236 514.2C818.102 515.066 819.486 516.25 820.386 517.75C821.319 519.216 821.786 520.85 821.786 522.65C821.786 524.483 821.336 526.1 820.436 527.5C819.536 528.866 818.336 529.933 816.836 530.7C818.669 531.5 820.102 532.666 821.136 534.2C822.169 535.733 822.686 537.55 822.686 539.65C822.686 541.916 822.102 543.9 820.936 545.6C819.802 547.266 818.236 548.55 816.236 549.45C814.236 550.35 811.986 550.8 809.486 550.8C806.986 550.8 804.736 550.35 802.736 549.45C800.769 548.55 799.202 547.266 798.036 545.6C796.902 543.9 796.336 541.916 796.336 539.65C796.336 537.55 796.852 535.733 797.886 534.2C798.919 532.633 800.352 531.466 802.186 530.7ZM814.986 523.65C814.986 522.016 814.486 520.75 813.486 519.85C812.519 518.95 811.186 518.5 809.486 518.5C807.819 518.5 806.486 518.95 805.486 519.85C804.519 520.75 804.036 522.033 804.036 523.7C804.036 525.2 804.536 526.4 805.536 527.3C806.569 528.2 807.886 528.65 809.486 528.65C811.086 528.65 812.402 528.2 813.436 527.3C814.469 526.366 814.986 525.15 814.986 523.65ZM809.486 533.75C807.586 533.75 806.036 534.233 804.836 535.2C803.669 536.166 803.086 537.55 803.086 539.35C803.086 541.016 803.652 542.383 804.786 543.45C805.952 544.483 807.519 545 809.486 545C811.452 545 813.002 544.466 814.136 543.4C815.269 542.333 815.836 540.983 815.836 539.35C815.836 537.583 815.252 536.216 814.086 535.25C812.919 534.25 811.386 533.75 809.486 533.75Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M954.561 425.599H938.361V434.149C939.061 433.283 940.061 432.583 941.361 432.049C942.661 431.483 944.044 431.199 945.511 431.199C948.178 431.199 950.361 431.783 952.061 432.949C953.761 434.116 954.994 435.616 955.761 437.449C956.528 439.249 956.911 441.183 956.911 443.249C956.911 447.083 955.811 450.166 953.611 452.499C951.444 454.833 948.344 455.999 944.311 455.999C940.511 455.999 937.478 455.049 935.211 453.149C932.944 451.249 931.661 448.766 931.361 445.699H938.161C938.461 447.033 939.128 448.099 940.161 448.899C941.228 449.699 942.578 450.099 944.211 450.099C946.178 450.099 947.661 449.483 948.661 448.249C949.661 447.016 950.161 445.383 950.161 443.349C950.161 441.283 949.644 439.716 948.611 438.649C947.611 437.549 946.128 436.999 944.161 436.999C942.761 436.999 941.594 437.349 940.661 438.049C939.728 438.749 939.061 439.683 938.661 440.849H931.961V419.449H954.561V425.599Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M938.101 539.749C938.367 541.216 938.967 542.349 939.901 543.149C940.867 543.916 942.151 544.299 943.751 544.299C945.817 544.299 947.317 543.449 948.251 541.749C949.184 540.016 949.651 537.116 949.651 533.049C948.884 534.116 947.801 534.949 946.401 535.549C945.034 536.149 943.551 536.449 941.951 536.449C939.817 536.449 937.884 536.016 936.151 535.149C934.451 534.249 933.101 532.933 932.101 531.199C931.101 529.433 930.601 527.299 930.601 524.799C930.601 521.099 931.701 518.166 933.901 515.999C936.101 513.799 939.101 512.699 942.901 512.699C947.634 512.699 950.967 514.216 952.901 517.249C954.867 520.283 955.851 524.849 955.851 530.949C955.851 535.283 955.467 538.833 954.701 541.599C953.967 544.366 952.684 546.466 950.851 547.899C949.051 549.333 946.584 550.049 943.451 550.049C940.984 550.049 938.884 549.583 937.151 548.649C935.417 547.683 934.084 546.433 933.151 544.899C932.251 543.333 931.734 541.616 931.601 539.749H938.101ZM943.401 530.749C945.134 530.749 946.501 530.216 947.501 529.149C948.501 528.083 949.001 526.649 949.001 524.849C949.001 522.883 948.467 521.366 947.401 520.299C946.367 519.199 944.951 518.649 943.151 518.649C941.351 518.649 939.917 519.216 938.851 520.349C937.817 521.449 937.301 522.916 937.301 524.749C937.301 526.516 937.801 527.966 938.801 529.099C939.834 530.199 941.367 530.749 943.401 530.749Z" fill="var(--color-illustrationInterface010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3275_104332">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/pagination/usage/do-03.svg b/site/public/static/illustrations/components/pagination/usage/do-03.svg
new file mode 100644
index 0000000000..1133b708a3
--- /dev/null
+++ b/site/public/static/illustrations/components/pagination/usage/do-03.svg
@@ -0,0 +1,25 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3275_104369)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<rect x="292" y="-19" width="906" height="649" rx="24" fill="var(--color-illustrationInterface030)"/>
+<path d="M428 527.7L423.243 523L403 543L423.243 563L428 558.3L412.548 543L428 527.7Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M1062 558.3L1066.76 563L1087 543L1066.76 523L1062 527.7L1077.45 543L1062 558.3Z" fill="var(--color-illustrationInterface010)"/>
+<circle cx="524" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle cx="634" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle cx="744" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle cx="854" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<circle cx="964" cy="543" r="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="335" y="-188" width="820" height="649" rx="24" fill="var(--color-illustrationInterface010)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M563.367 296C559.85 296 557 298.851 557 302.369C557 305.886 559.85 308.738 563.367 308.738H1066.34C1069.86 308.738 1072.71 305.886 1072.71 302.369C1072.71 298.851 1069.86 296 1066.34 296H563.367ZM563.368 329.118C559.851 329.118 557.001 331.969 557.001 335.486C557.001 339.004 559.851 341.855 563.368 341.855H958.107C961.624 341.855 964.474 339.004 964.474 335.486C964.474 331.969 961.624 329.118 958.107 329.118H563.368Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M563.367 135C559.85 135 557 137.851 557 141.369C557 144.886 559.85 147.738 563.367 147.738H1066.34C1069.86 147.738 1072.71 144.886 1072.71 141.369C1072.71 137.851 1069.86 135 1066.34 135H563.367ZM563.368 168.118C559.851 168.118 557.001 170.969 557.001 174.486C557.001 178.004 559.851 180.855 563.368 180.855H958.107C961.624 180.855 964.474 178.004 964.474 174.486C964.474 170.969 961.624 168.118 958.107 168.118H563.368Z" fill="var(--color-illustrationInterface020)"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M563.367 -35C559.85 -35 557 -32.1486 557 -28.6312C557 -25.1139 559.85 -22.2625 563.367 -22.2625H1066.34C1069.86 -22.2625 1072.71 -25.1139 1072.71 -28.6312C1072.71 -32.1486 1069.86 -35 1066.34 -35H563.367ZM563.368 -1.88241C559.851 -1.88241 557.001 0.968987 557.001 4.48635C557.001 8.00373 559.851 10.8551 563.368 10.8551H958.107C961.624 10.8551 964.474 8.00373 964.474 4.48635C964.474 0.968987 961.624 -1.88241 958.107 -1.88241H563.368Z" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="455" cy="319" r="40" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="455" cy="158" r="40" fill="var(--color-illustrationInterface020)"/>
+<circle opacity="0.6" cx="455" cy="-12" r="40" fill="var(--color-illustrationInterface020)"/>
+</g>
+<defs>
+<clipPath id="clip0_3275_104369">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/routes.ts b/site/routes.ts
index ac8c715ad3..d5d305afa5 100644
--- a/site/routes.ts
+++ b/site/routes.ts
@@ -747,6 +747,14 @@ export const routes = [
               'A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.',
             illustration: 'components/menu/menu-illustration',
           },
+          {
+            title: 'Pagination',
+            page: true,
+            id: '/components/pagination',
+            description:
+              'Pagination lets users navigate through multiple pages.',
+            illustration: 'components/pagination/hero',
+          },
           {
             title: 'Scroll',
             page: true,