app/components/RuleCard.js

@@ -9,7 +9,7 @@ const RuleCard = ({
 }) => {
   return (
     <div
-      className={`${backgroundColor} rounded-[var(--spacing-scale-012)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm ${className}`}
+      className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm ${className}`}
     >
       {/* Header Container */}
       <div className="grid grid-cols-[auto_1fr] h-[72px] border-b border-[var(--color-surface-default-primary)]">

app/components/RuleStack.js

@@ -2,6 +2,7 @@
 
 import SectionHeader from "./SectionHeader";
 import RuleCard from "./RuleCard";
+import Button from "./Button";
 import Image from "next/image";
 
 const RuleStack = ({ children, className = "" }) => {
@@ -68,6 +69,13 @@ const RuleStack = ({ children, className = "" }) => {
           backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
         />
       </div>
+
+      {/* See all templates button */}
+      <div className="flex justify-center">
+        <Button variant="outlined" size="large">
+          See all templates
+        </Button>
+      </div>
     </div>
   );
 };