diff --git a/src/components/ui/buttons/PrimaryCTA.astro b/src/components/ui/buttons/PrimaryCTA.astro
new file mode 100644
index 0000000..075370c
--- /dev/null
+++ b/src/components/ui/buttons/PrimaryCTA.astro
@@ -0,0 +1,26 @@
+---
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+---
+
+<a
+  class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
+  href={url}
+>
+  {title}
+  <svg
+    class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
+  >
+</a>
diff --git a/src/components/ui/buttons/SecondaryCTA.astro b/src/components/ui/buttons/SecondaryCTA.astro
new file mode 100644
index 0000000..7f8ce6c
--- /dev/null
+++ b/src/components/ui/buttons/SecondaryCTA.astro
@@ -0,0 +1,15 @@
+---
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+---
+
+<a
+  class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-500 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+  href={url}
+>
+  {title}
+</a>