diff --git a/ui/src/components/core/Button.tsx b/ui/src/components/core/Button.tsx
index 5c902db1..4ab4c0fa 100644
--- a/ui/src/components/core/Button.tsx
+++ b/ui/src/components/core/Button.tsx
@@ -53,7 +53,7 @@ const Button: React.FC<ButtonProps> = ({
           focus-visible:outline-nuances-white
           fill-nuances-black`,
 
-        tertiary: `bg-nuances-white
+        tertiary: `
           text-primary-600
           underline
           hover:text-primary-400
@@ -67,16 +67,25 @@ const Button: React.FC<ButtonProps> = ({
       disabled: {
         primary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          active: bg-nuances-50
+          hover:bg-nuances-50
+          `,
 
         secondary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          active: bg-nuances-50
+          hover:bg-nuances-50`,
 
-        tertiary: `bg-nuances-white
-          text-nuances-300
+        tertiary: `
           underline
-          fill-nuances-300`,
+          text-nuances-200
+          fill-nuances-200
+          active:text-nuances-200
+          active:fill-nuances-200
+          hover:text-nuances-200
+          hover:fill-nuances-200`,
       },
     },
     dark: {
@@ -117,18 +126,26 @@ const Button: React.FC<ButtonProps> = ({
       disabled: {
         primary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          hover:bg-nuances-50
+          active:bg-nuances-50`,
 
         secondary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          hover:bg-nuances-50
+          active:bg-nuances-50`,
 
         tertiary: `bg-nuances-black
-          text-nuances-300
           underline
-          fill-nuances-300`,
+          text-nuances-300
+          fill-nuances-300
+          hover:text-nuances-300
+          hover:fill-nuances-300
+          active:text-nuances-300
+          active:fill-nuances-300`,
       },
-    }
+    },
   };
 
   return (
@@ -137,8 +154,8 @@ const Button: React.FC<ButtonProps> = ({
         `relative
         px-4
         py-2
-        rounded-md
-        ${styles[theme].base[variant]}`,
+        rounded-md`,
+        styles[theme].base[variant],
         disabled && styles[theme].disabled[variant],
         className
       )}
@@ -171,7 +188,9 @@ const Button: React.FC<ButtonProps> = ({
           <span className={`${isLoading && "invisible"}`}>{rightIcon}</span>
         )}
         {label && (
-          <span className={`font-semibold text-base ${isLoading && "invisible"}`}>
+          <span
+            className={`font-semibold text-base ${isLoading && "invisible"}`}
+          >
             {label}
           </span>
         )}
diff --git a/ui/src/pages/Layers.tsx b/ui/src/pages/Layers.tsx
index 8f3bbb63..9016a5f1 100644
--- a/ui/src/pages/Layers.tsx
+++ b/ui/src/pages/Layers.tsx
@@ -31,13 +31,10 @@ const Layers: React.FC = () => {
   const [layerLimit, setLayerLimit] = useState(10);
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const search = useMemo<string>(
-    () => {
-      setLayerOffset(0);
-      return searchParams.get("search") || ""
-    },
-    [searchParams]
-  );
+  const search = useMemo<string>(() => {
+    setLayerOffset(0);
+    return searchParams.get("search") || "";
+  }, [searchParams]);
 
   const setSearch = useCallback(
     (search: string) => {
@@ -108,6 +105,18 @@ const Layers: React.FC = () => {
     }),
   });
 
+  const updateLimit = useCallback(
+    (limit: number) => {
+      if (layersQuery.isSuccess) {
+        if (layerOffset + limit > layersQuery.data.results.length) {
+          setLayerOffset(Math.max(0, layersQuery.data.results.length - limit));
+        }
+        setLayerLimit(limit);
+      }
+    },
+    [layerOffset, layersQuery]
+  );
+
   return (
     <div className="flex flex-col flex-1 h-screen min-w-0">
       <div
@@ -207,20 +216,78 @@ const Layers: React.FC = () => {
           </div>
           <div className="flex flex-row items-center gap-8">
             <div className="flex flex-row items-center gap-2">
-              <Button theme={theme} variant={"tertiary"} onClick={() => setLayerOffset(Math.max(0,layerOffset-layerLimit))} disabled={ layerOffset == 0 }>Previous</Button>
-              <span className={`
-                  text-base
-                  font-semibold
-                  ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
-                `}>{layerOffset + 1} - {Math.min(layerOffset + layerLimit, layersQuery.isSuccess ? layersQuery.data.results.length : 0)} of {layersQuery.isSuccess ? layersQuery.data.results.length : 0}</span>
-              <Button theme={theme} variant={"tertiary"} onClick={() => setLayerOffset(Math.min(layerOffset+layerLimit, layersQuery.isSuccess ? layersQuery.data.results.length : 0))} disabled= { !layersQuery.isSuccess || layerOffset + layerLimit >= layersQuery.data.results.length }>Next</Button>
-              <span className={`
+              <Button
+                theme={theme}
+                variant={"tertiary"}
+                onClick={() =>
+                  setLayerOffset(Math.max(0, layerOffset - layerLimit))
+                }
+                disabled={layerOffset == 0}
+              >
+                Previous
+              </Button>
+              {layersQuery.isSuccess ? (
+                <span
+                  className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+                >
+                  {layerOffset + 1} -{" "}
+                  {Math.min(
+                    layerOffset + layerLimit,
+                    layersQuery.isSuccess ? layersQuery.data.results.length : 0
+                  )}{" "}
+                  of{" "}
+                  {layersQuery.isSuccess ? layersQuery.data.results.length : 0}
+                </span>
+              ) : (
+                <span
+                  className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+                >
+                  {layersQuery.isLoading ? "Loading..." : "0 - 0 of 0"}
+                </span>
+              )}
+              <Button
+                theme={theme}
+                variant={"tertiary"}
+                onClick={() =>
+                  setLayerOffset(
+                    Math.min(
+                      layerOffset + layerLimit,
+                      layersQuery.isSuccess
+                        ? layersQuery.data.results.length
+                        : 0
+                    )
+                  )
+                }
+                disabled={
+                  !layersQuery.isSuccess ||
+                  layerOffset + layerLimit >= layersQuery.data.results.length
+                }
+              >
+                Next
+              </Button>
+              <span
+                className={`
                   text-base
                   font-medium
                   ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
-                `}>Items per page: </span>
-              <PaginationDropdown className="w-16"
-              variant={theme} selectedPagination={layerLimit} setSelectedPagination={setLayerLimit} />
+                `}
+              >
+                Items per page:{" "}
+              </span>
+              <PaginationDropdown
+                className="w-16"
+                variant={theme}
+                selectedPagination={layerLimit}
+                setSelectedPagination={updateLimit}
+              />
             </div>
             <div className="flex flex-row items-center gap-2">
               <NavigationButton
@@ -265,9 +332,11 @@ const Layers: React.FC = () => {
               </span>
             ) : layersQuery.isSuccess ? (
               layersQuery.data.results.length > 0 ? (
-                layersQuery.data.results.slice(layerOffset, layerOffset + layerLimit).map((layer, index) => (
-                  <Card key={index} variant={theme} layer={layer} />
-                ))
+                layersQuery.data.results
+                  .slice(layerOffset, layerOffset + layerLimit)
+                  .map((layer, index) => (
+                    <Card key={index} variant={theme} layer={layer} />
+                  ))
               ) : (
                 <span
                   className={`
@@ -305,7 +374,7 @@ const Layers: React.FC = () => {
               </span>
             ) : layersQuery.isSuccess ? (
               layersQuery.data.results.length > 0 ? (
-                <Table variant={theme} data={layersQuery.data.results} />
+                <Table variant={theme} data={layersQuery.data.results.slice(layerOffset, layerOffset + layerLimit)} />
               ) : (
                 <div className="p-6">
                   <span
diff --git a/ui/src/pages/Logs.tsx b/ui/src/pages/Logs.tsx
index 2b361f2e..e9f4e49c 100644
--- a/ui/src/pages/Logs.tsx
+++ b/ui/src/pages/Logs.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, useMemo } from "react";
+import React, { useContext, useCallback, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useParams, useSearchParams, useNavigate } from "react-router-dom";
 
@@ -10,6 +10,7 @@ import { ThemeContext } from "@/contexts/ThemeContext";
 import Button from "@/components/core/Button";
 import Input from "@/components/core/Input";
 import RepositoriesDropdown from "@/components/dropdowns/RepositoriesDropdown";
+import PaginationDropdown from "@/components/dropdowns/PaginationDropdown";
 import DateDropdown from "@/components/dropdowns/DateDropdown";
 import Toggle from "@/components/core/Toggle";
 import RunCardLoader from "@/components/loaders/RunCardLoader";
@@ -23,6 +24,8 @@ import { Layer } from "@/clients/layers/types";
 const Logs: React.FC = () => {
   const { theme } = useContext(ThemeContext);
   const { layerId, runId } = useParams();
+  const [layerOffset, setLayerOffset] = useState(0);
+  const [layerLimit, setLayerLimit] = useState(10);
   const [searchParams, setSerchParams] = useSearchParams();
   const navigate = useNavigate();
 
@@ -57,8 +60,8 @@ const Logs: React.FC = () => {
     return param === "ascending"
       ? "ascending"
       : param === "descending"
-      ? "descending"
-      : null;
+        ? "descending"
+        : null;
   }, [searchParams]);
 
   const setDateFilter = useCallback(
@@ -101,20 +104,33 @@ const Logs: React.FC = () => {
           dateFilter === "ascending"
             ? new Date(a.lastRunAt).getTime() - new Date(b.lastRunAt).getTime()
             : dateFilter === "descending"
-            ? new Date(b.lastRunAt).getTime() - new Date(a.lastRunAt).getTime()
-            : 0
+              ? new Date(b.lastRunAt).getTime() -
+                new Date(a.lastRunAt).getTime()
+              : 0
         ),
     }),
   });
 
+  const updateLimit = useCallback(
+    (limit: number) => {
+      if (layersQuery.isSuccess) {
+        if (layerOffset + limit > layersQuery.data.results.length) {
+          setLayerOffset(Math.max(0, layersQuery.data.results.length - limit));
+        }
+        setLayerLimit(limit);
+      }
+    },
+    [layerOffset, layersQuery]
+  );
+
   const handleActive = (layer: Layer, run?: string) => {
     navigate({
       pathname: `/logs/${layer.namespace}/${layer.name}${
         run
           ? `/${run}`
           : layer.latestRuns.length > 0
-          ? `/${layer.lastRun.id}`
-          : ""
+            ? `/${layer.lastRun.id}`
+            : ""
       }`,
       search: searchParams.toString(),
     });
@@ -159,20 +175,20 @@ const Logs: React.FC = () => {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-        <div className="flex flex-row items-center justify-between gap-8">
+        <div className="flex flex-row items-center justify-between h-10 gap-8">
           <div className="flex flex-row items-center gap-4">
             <span
               className={`
-                text-base
-                font-semibold
-                ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+              text-base
+              font-semibold
+              ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
               `}
             >
               {`
                 ${
                   layersQuery.isSuccess ? layersQuery.data.results.length : 0
                 } layers
-              `}
+                `}
             </span>
             <span
               className={`
@@ -183,13 +199,13 @@ const Logs: React.FC = () => {
                     ? "border-primary-600"
                     : "border-nuances-200"
                 }
-              `}
+                `}
             ></span>
             <span
               className={`
-                text-base
-                font-medium
-                ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
+              text-base
+              font-medium
+              ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
               `}
             >
               Filter by
@@ -208,15 +224,86 @@ const Logs: React.FC = () => {
             </div>
             <Toggle
               className={`
-                text-sm
-                font-medium
-                ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+              text-sm
+              font-medium
+              ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
               `}
               checked={hidePRFilter}
               onChange={() => setHidePRFilter(!hidePRFilter)}
               label="Hide Pull Requests"
             />
           </div>
+          <div className="flex flex-row items-center gap-2">
+            <Button
+              theme={theme}
+              variant={"tertiary"}
+              onClick={() =>
+                setLayerOffset(Math.max(0, layerOffset - layerLimit))
+              }
+              disabled={layerOffset == 0}
+            >
+              Previous
+            </Button>
+            {layersQuery.isSuccess ? (
+              <span
+                className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+              >
+                {layerOffset + 1} -{" "}
+                {Math.min(
+                  layerOffset + layerLimit,
+                  layersQuery.isSuccess ? layersQuery.data.results.length : 0
+                )}{" "}
+                of {layersQuery.isSuccess ? layersQuery.data.results.length : 0}
+              </span>
+            ) : (
+              <span
+                className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+              >
+                {layersQuery.isLoading ? "Loading..." : "0 - 0 of 0"}
+              </span>
+            )}
+            <Button
+              theme={theme}
+              variant={"tertiary"}
+              onClick={() =>
+                setLayerOffset(
+                  Math.min(
+                    layerOffset + layerLimit,
+                    layersQuery.isSuccess ? layersQuery.data.results.length : 0
+                  )
+                )
+              }
+              disabled={
+                !layersQuery.isSuccess ||
+                layerOffset + layerLimit >= layersQuery.data.results.length
+              }
+            >
+              Next
+            </Button>
+            <span
+              className={`
+                      text-base
+                      font-medium
+                      ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
+                    `}
+            >
+              Items per page:{" "}
+            </span>
+            <PaginationDropdown
+              className="w-16"
+              variant={theme}
+              selectedPagination={layerLimit}
+              setSelectedPagination={updateLimit}
+            />
+          </div>
         </div>
       </div>
       <div
@@ -245,16 +332,18 @@ const Logs: React.FC = () => {
             </span>
           ) : layersQuery.isSuccess ? (
             layersQuery.data.results.length > 0 ? (
-              layersQuery.data.results.map((layer, index) => (
-                <RunCard
-                  key={index}
-                  variant={theme}
-                  isActive={layerId === layer.name}
-                  onClick={() => handleActive(layer)}
-                  handleActive={handleActive}
-                  layer={layer}
-                />
-              ))
+              layersQuery.data.results
+                .slice(layerOffset, layerOffset + layerLimit)
+                .map((layer, index) => (
+                  <RunCard
+                    key={index}
+                    variant={theme}
+                    isActive={layerId === layer.name}
+                    onClick={() => handleActive(layer)}
+                    handleActive={handleActive}
+                    layer={layer}
+                  />
+                ))
             ) : (
               <span
                 className={`