diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 3846fe278..967934a86 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -29,6 +29,7 @@ const SketchList = ({
   mobile
 }) => {
   const [isInitialDataLoad, setIsInitialDataLoad] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
   const [sketchToAddToCollection, setSketchToAddToCollection] = useState(null);
   const { t } = useTranslation();
 
@@ -118,6 +119,19 @@ const SketchList = ({
     [sorting, getButtonLabel, toggleDirectionForField, t]
   );
 
+  const pageNumbers = [];
+  let sketchesPerPage = 5;
+  if (mobile) {
+    sketchesPerPage = 7;
+  }
+  const totalSketches = sketches.length;
+  const indexOfLastSketch = currentPage * sketchesPerPage;
+  const indexOfFirstSketch = indexOfLastSketch - sketchesPerPage;
+  const TotalPages = Math.ceil(totalSketches / sketchesPerPage);
+  for (let i = 1; i <= TotalPages; i += 1) {
+    pageNumbers.push(i);
+  }
+
   return (
     <article className="sketches-table-container">
       <Helmet>
@@ -149,20 +163,68 @@ const SketchList = ({
             </tr>
           </thead>
           <tbody>
-            {sketches.map((sketch) => (
-              <SketchListRowBase
-                mobile={mobile}
-                key={sketch.id}
-                sketch={sketch}
-                user={user}
-                username={username}
-                onAddToCollection={() => setSketchToAddToCollection(sketch)}
-                t={t}
-              />
-            ))}
+            {sketches
+              .slice(indexOfFirstSketch, indexOfLastSketch)
+              .map((sketch) => (
+                <SketchListRowBase
+                  mobile={mobile}
+                  key={sketch.id}
+                  sketch={sketch}
+                  user={user}
+                  username={username}
+                  onAddToCollection={() => setSketchToAddToCollection(sketch)}
+                  t={t}
+                />
+              ))}
           </tbody>
         </table>
       )}
+      <div className="pagination">
+        <ul className="pagination-ul">
+          <li className="page-item">
+            <button
+              className="page-link"
+              onClick={() => setCurrentPage(Math.max(currentPage - 1, 1))}
+              disabled={currentPage === 1}
+            >
+              Prev
+            </button>
+          </li>
+          <li>
+            <button className="page-link" onClick={() => setCurrentPage(1)}>
+              1
+            </button>
+          </li>
+          <li>
+            <span>.......</span>
+          </li>
+          <li>
+            <button className="page-link"> {currentPage} </button>
+          </li>
+          <li>
+            <span>&nbsp;of&nbsp;</span>
+          </li>
+          <li>
+            <button
+              className="page-link"
+              onClick={() => setCurrentPage(TotalPages)}
+            >
+              {TotalPages}
+            </button>
+          </li>
+          <li className="page-item">
+            <button
+              className="page-link"
+              onClick={() =>
+                setCurrentPage(Math.min(currentPage + 1, TotalPages))
+              }
+              disabled={currentPage === TotalPages}
+            >
+              Next
+            </button>
+          </li>
+        </ul>
+      </div>
       {sketchToAddToCollection && (
         <Overlay
           isFixedHeight
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 6537b08c5..e0cf3c4dc 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -70,6 +70,40 @@
   }
 }
 
+.pagination {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  justify-content: center;
+
+  .pagination-ul {
+    bottom: 0;
+    margin-top: auto;
+    display: flex;
+    justify-content: center;
+
+    > li {
+      margin: 0 2px;
+
+      .page-link {
+        @include themify() {
+          color: #ed225d;
+          font-weight: 800;
+          padding: 0 10px;
+          border: 1px solid #fbd2de;
+        }
+      }
+    }
+  }
+}
+
+.pagination-ul > li button:hover {
+  @include themify() {
+    background-color: #f9bcce;
+  }
+}
+
 .sketches-table {
   width: 100%;