diff --git a/apps/astro/astro.config.ts b/apps/astro/astro.config.ts
index 2ffb053..b257941 100644
--- a/apps/astro/astro.config.ts
+++ b/apps/astro/astro.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
-import vercel from "@astrojs/vercel/serverless";
+import preact from '@astrojs/preact';
 import sitemap from "@astrojs/sitemap";
+import vercel from "@astrojs/vercel/serverless";
 import { DOMAIN } from "./src/global/constants";
 import { isPreviewDeployment } from "./src/utils/is-preview-deployment";
 import redirects from "./redirects";
@@ -8,6 +9,7 @@ import redirects from "./redirects";
 export default defineConfig({
   site: DOMAIN,
   integrations: [
+    preact({ compat: true }),
     sitemap(),
   ],
   image: {
diff --git a/apps/astro/package.json b/apps/astro/package.json
index 585012e..988e1eb 100644
--- a/apps/astro/package.json
+++ b/apps/astro/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/preact": "^3.5.3",
     "@astrojs/sitemap": "^3.2.0",
     "@astrojs/vercel": "^7.8.1",
     "@sanity/client": "^6.22.1",
@@ -28,5 +29,9 @@
     "eslint-plugin-astro": "^1.2.4",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "sass": "^1.79.5"
+  },
+  "overrides": {
+    "react": "bun:@preact/compat@latest",
+    "react-dom": "bun:@preact/compat@latest"
   }
 }
diff --git a/apps/astro/src/components/ui/button/button.module.scss b/apps/astro/src/components/ui/button/button.module.scss
new file mode 100644
index 0000000..95d6994
--- /dev/null
+++ b/apps/astro/src/components/ui/button/button.module.scss
@@ -0,0 +1,118 @@
+.button {
+  font-size: var(--typography-body-m, 14px);
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  border-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 3rem;
+  padding: 0 clamp(1rem, calc(1rem + 1vw / 0.48), 2rem);
+  transition: transform 500ms var(--easing);
+  @media (max-width: 499px) {
+    width: 100%;
+  }
+  &::before {
+    content: '';
+    width: 110%;
+    aspect-ratio: 1/1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    background-image: conic-gradient(
+      var(--primary-500, #064040) 79%,
+      #90f4e8 87%,
+      #90f4e8 92%,
+      var(--primary-500, #064040) 100%
+    );
+    animation: rotate 2.5s linear infinite;
+    animation-play-state: paused;
+    transition: opacity 500ms var(--easing);
+    @keyframes rotate {
+      from {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      to {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: 1px;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    border-radius: inherit;
+    background: linear-gradient(266deg, #0b0f0d, #011310, #001f1b);
+  }
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 2;
+    border-radius: inherit;
+  }
+  &[data-theme='primary'] {
+    span {
+      background: linear-gradient(266deg, #2dd282, #90f4e8);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .content {
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background:
+          linear-gradient(var(--neutral-900, #000103), var(--neutral-900, #000103)) padding-box,
+          linear-gradient(266deg, #2dd282, #90f4e8) border-box;
+        border: 1px solid rgba(255, 255, 255, 0);
+        border-radius: inherit;
+        transition: opacity 500ms var(--easing);
+      }
+    }
+  }
+  &[data-theme='secondary'] {
+    border-radius: 48px;
+    &::before {
+      opacity: 0;
+    }
+  }
+  &:disabled {
+    opacity: 0.62;
+    pointer-events: none;
+  }
+  img {
+    width: 28px;
+    height: 28px;
+  }
+  &:hover {
+    &::before {
+      animation-play-state: running;
+      @media (prefers-reduced-motion) {
+        animation-play-state: paused;
+      }
+      opacity: 1;
+    }
+    .content {
+      &::before {
+        opacity: 0;
+      }
+    }
+  }
+  &:active {
+    transition: none;
+    transform: scale(0.99);
+  }
+}
diff --git a/apps/astro/src/components/ui/button/button.tsx b/apps/astro/src/components/ui/button/button.tsx
new file mode 100644
index 0000000..5a4e896
--- /dev/null
+++ b/apps/astro/src/components/ui/button/button.tsx
@@ -0,0 +1,32 @@
+import type { ImageDataProps } from '../image';
+import styles from './button.module.scss'
+
+export type Props = React.HTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  text?: string | React.ReactNode
+  children: React.ReactNode;
+  theme?: 'primary' | 'secondary'
+  linkType?: 'external' | 'internal'
+  href?: string
+  img?: ImageDataProps
+  className?: string
+}
+
+export default function Button({ children, text, theme = 'primary', linkType = 'internal', href, img, className, ...props }: Props) {
+  const Element = href ? 'a' : 'button'
+  const isExternal = linkType === 'external'
+  const renderedProps = {
+    ...(href && { href }),
+    ...(isExternal && { target: '_blank', rel: 'noreferrer' }),
+    'data-theme': theme,
+    className: `${styles.button}${className ? ` ${className}` : ''}`,
+    ...props,
+  }
+
+  return (
+    <Element {...renderedProps}>
+      <div className={styles.content}>
+        {children}
+      </div>
+    </Element>
+  )
+}
diff --git a/apps/astro/src/components/ui/button/index.astro b/apps/astro/src/components/ui/button/index.astro
new file mode 100644
index 0000000..652e7b6
--- /dev/null
+++ b/apps/astro/src/components/ui/button/index.astro
@@ -0,0 +1,36 @@
+---
+import Image from '@/components/ui/image'
+import Button, { type Props as ButtonDataProps } from './button'
+
+type Props = ButtonDataProps
+
+const { ...props } = Astro.props
+
+const svgId = `arrow-icon-${Math.random().toString(36).slice(2, 9)}`
+---
+
+<Button {...props}>
+  <span>
+    {props.text || <slot />}
+  </span>
+  {
+    props.img ? (
+      <Image {...props.img} sizes="28px" class="gradient-thumbnail" />
+    ) : (
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none">
+        <path
+          stroke={`url(#${svgId})`}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.664 8.5h10.667m0 0-4-4m4 4-4 4"
+        />
+        <defs>
+          <linearGradient id={svgId} x1="13.131" x2="2.064" y1="4.5" y2="5.44" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2DD282" />
+            <stop offset="1" stop-color="#90F4E8" />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+</Button>
diff --git a/apps/astro/src/components/ui/button/index.ts b/apps/astro/src/components/ui/button/index.ts
new file mode 100644
index 0000000..950a8d8
--- /dev/null
+++ b/apps/astro/src/components/ui/button/index.ts
@@ -0,0 +1,13 @@
+import { ImageDataQuery } from '../image';
+export { default } from './index.astro';
+export { type Props as ButtonDataProps } from './button';
+
+export const ButtonDataQuery = (name: string) => `
+  ${name} {
+    text,
+    theme,
+    linkType,
+    "href": select(linkType == "internal" => internal -> slug.current, linkType == "external" => external, "#"),
+    ${ImageDataQuery('img')}
+  },
+`
diff --git a/apps/astro/src/global/global.scss b/apps/astro/src/global/global.scss
index e412b74..0eeeac1 100644
--- a/apps/astro/src/global/global.scss
+++ b/apps/astro/src/global/global.scss
@@ -1,19 +1,19 @@
 @font-face {
-  font-family: 'Poppins';
+  font-family: 'KryptoPoppins';
   src:
-    url('/fonts/Poppins-Regular.woff2') format('woff2'),
-    url('/fonts/Poppins-Regular.woff') format('woff');
+    url('/fonts/KryptoPoppins-Regular.woff2') format('woff2'),
+    url('/fonts/KryptoPoppins-Regular.woff') format('woff');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
-  font-family: 'Poppins Fallback';
+  font-family: 'KryptoPoppins Fallback';
   src: local('Arial');
-  size-adjust: 109%;
-  ascent-override: 100%;
-  descent-override: 27%;
-  line-gap-override: 5%;
+  ascent-override: 93.76%;
+  descent-override: 31.25%;
+  line-gap-override: 8.93%;
+  size-adjust: 111.99%;
 }
 
 *,
@@ -144,7 +144,7 @@
   --menu-text: var(--neutral-200);
   --background: var(--neutral-900);
 
-  --easing: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --easing: cubic-bezier(0.19, 1, 0.22, 1);
 
   // Margins
   --page-margin: clamp(1rem, calc(2vw / 0.48), 2rem);
@@ -230,7 +230,7 @@ img {
 }
 :focus-visible {
   outline: 2px solid var(--neutral-200, #f0f7f7);
-  outline-offset: 3px;
+  outline-offset: 5px;
 }
 
 html,
@@ -239,6 +239,9 @@ body {
 }
 html {
   scroll-behavior: smooth;
+  @media (prefers-reduced-motion) {
+    scroll-behavior: none;
+  }
   scroll-padding-top: 123px;
   &::-webkit-scrollbar {
     width: 16px;
@@ -257,7 +260,7 @@ body {
   -webkit-tap-highlight-color: transparent;
   background-color: var(--neutral-900, #000103);
   color: var(--neutral-200, #f0f7f7);
-  font-family: 'Poppins', 'Poppins Fallback', sans-serif;
+  font-family: 'KryptoPoppins', 'KryptoPoppins Fallback', sans-serif;
   font-size: var(--typography-body-xl, 1rem);
   line-height: 175%;
   letter-spacing: 0.005em;
@@ -380,3 +383,11 @@ li {
   align-items: center;
   gap: clamp(1rem, calc(1.5vw / 0.48), 2rem);
 }
+
+.gradient-thumbnail {
+  background:
+    linear-gradient(var(--neutral-900), var(--neutral-900)) padding-box,
+    linear-gradient(266deg, #2dd282, #90f4e8) border-box;
+  border: 1px solid rgba(255, 255, 255, 0);
+  border-radius: 50%;
+}
diff --git a/apps/astro/src/pages/index.astro b/apps/astro/src/pages/index.astro
index 0b281c6..2565b60 100644
--- a/apps/astro/src/pages/index.astro
+++ b/apps/astro/src/pages/index.astro
@@ -1,12 +1,28 @@
 ---
 import Layout from '@/src/layouts/Layout.astro'
 import metadataFetch from '@/utils/metadata.fetch'
+import sanityFetch from '@/utils/sanity.fetch'
+import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
 
 const metadata = await metadataFetch('Index_Page')
+
+type QueryProps = {
+  button: ButtonDataProps
+}
+
+const data = await sanityFetch<QueryProps>({
+  query: `
+    *[_type == "Index_Page"][0] {
+      ${ButtonDataQuery('button')}
+    }
+  `,
+})
 ---
 
 <Layout {...metadata}>
-  <h1>Index <strong>special</strong> Page</h1>
+  <h1>❧ Index <strong>special</strong> Page</h1>
+  <p>Zażółć gęślą jaźń</p>
+  <h1>❧ Zażółć gęślą jaźń Zażółć gęślą</h1>
   <p>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt cum expedita ad distinctio temporibus corrupti
     laboriosam cupiditate, impedit dolore <strong>sapiente magni neque</strong> quaerat facilis, est odio consequuntur enim
@@ -16,54 +32,16 @@ const metadata = await metadataFetch('Index_Page')
     magni qui deleniti ducimus. Quam accusamus eos id fugiat soluta corrupti modi maiores ab perspiciatis? Asperiores, sunt
     aliquam rerum ipsum magnam perferendis vero sapiente id sint unde dolor adipisci repudiandae.
   </p>
-  <h2>Index <strong>special</strong> Page</h2>
-  <h3>Index <strong>special</strong> Page</h3>
-  <p>
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quas dignissimos voluptatem, in dolore assumenda
-    dolores totam provident distinctio beatae modi nemo iure, voluptatibus, cumque laborum officia quod ut quisquam
-    deserunt sint rerum sapiente necessitatibus maxime. Voluptatum optio officiis sint pariatur repudiandae quos
-    repellat, assumenda deserunt enim! Numquam, reiciendis perferendis! Ab repudiandae maxime vitae, iusto corrupti
-    veritatis. Optio qui eos error veniam? Doloremque, id culpa omnis, sint temporibus explicabo provident possimus,
-    deleniti unde molestias incidunt. Corporis unde corrupti totam impedit ipsa architecto temporibus doloribus laborum
-    illo vero necessitatibus, laboriosam mollitia eaque? Deserunt nisi vel debitis repudiandae expedita error cum amet
-    voluptate repellendus libero? A aperiam error consectetur quaerat expedita corrupti laboriosam, at cum itaque id
-    repellendus autem quos consequatur praesentium sint voluptatem officia culpa. Earum tempora inventore, vitae neque
-    id consequuntur possimus ullam excepturi quisquam minus perspiciatis similique praesentium modi architecto ut, quasi
-    ratione fugiat dolorem corrupti cupiditate. Ut temporibus debitis eligendi quis et fugiat qui, voluptas, amet, earum
-    blanditiis aperiam id ipsa? Quibusdam perferendis pariatur, quo mollitia, ab odit adipisci accusantium optio maiores
-    repellendus cum, minima expedita libero sit. Omnis, dolorem unde doloremque sit iste ea alias necessitatibus vero
-    soluta odio quo consequatur et, nam minus quisquam iure. Error, beatae assumenda? Nulla, fuga explicabo! Dolore
-    repellat sequi praesentium beatae laudantium accusamus minus ipsam, officiis modi assumenda qui tempore? Voluptatem
-    ipsum assumenda dolorum, similique, beatae eius molestias nulla esse, dolore autem facere rem repellendus odit
-    minima? Atque obcaecati maxime nisi laboriosam excepturi repudiandae cumque quo possimus quae. Nostrum officia
-    impedit, suscipit iure autem dolor soluta sunt quas quidem totam eum, omnis provident recusandae odit vero nam
-    voluptatem delectus! Mollitia eos non similique animi rerum ducimus quasi! Repellendus assumenda omnis ut quam
-    voluptatibus, sapiente, dolorem consectetur voluptatum veniam debitis pariatur! Nemo architecto eum debitis, aperiam
-    rerum odit sequi doloremque a, voluptate fuga quibusdam hic ea? Quasi, libero. Commodi modi vel veritatis unde
-    quisquam ab atque velit maiores consequuntur fugit a at beatae, nobis voluptas non quos iusto labore fugiat illo
-    delectus ipsum veniam. Quidem ea voluptatem tempore quisquam. Id sequi, ducimus est consectetur beatae laboriosam
-    nisi animi adipisci rerum aliquid sit illum quos sunt. Ea nihil aperiam, magnam earum vitae quasi numquam nemo?
-    Eveniet voluptates vitae repellat maiores ex ratione velit! Accusamus sit perferendis libero quas magnam laudantium
-    distinctio ut qui ad ducimus ipsa dolorum neque, sequi vero facere iusto nulla eligendi totam! Voluptatum odio
-    eligendi beatae voluptatem blanditiis ea ad nisi a quas! Magni similique qui, numquam velit accusamus deserunt
-    mollitia cumque debitis totam eaque facere vel illum consectetur quisquam quod cupiditate ut? Architecto,
-    perferendis. Tempora similique facere repudiandae delectus! Fugiat perspiciatis dolorem veniam debitis odio aut
-    molestias eligendi, ducimus earum qui nobis, nisi labore itaque tempora tenetur repudiandae blanditiis suscipit
-    dicta accusantium autem dolore! Dolorum sapiente minus obcaecati corrupti labore cumque adipisci laudantium amet
-    veritatis, eveniet expedita dolore quaerat soluta eos, ipsum, eligendi repellat. Nam dolore animi a quae enim vel
-    corporis, ex autem quasi, sit quos ipsum rem, repudiandae porro nulla soluta esse delectus non amet. Illum,
-    molestiae.
-  </p>
-  <h4>Index <strong>special</strong> Page</h4>
-  <h5>Index <strong>special</strong> Page</h5>
-  <h6>Index <strong>special</strong> Page</h6>
-  <p>
-    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis aspernatur voluptatum provident nihil, rem
-    asperiores odit minus eveniet, suscipit minima quod delectus? Obcaecati ea nisi ducimus eveniet natus porro nemo
-    atque accusamus. Reprehenderit labore, voluptatem impedit sunt soluta dolores eligendi molestias iusto cum fuga
-    dolorem dolore natus. Dignissimos et placeat, quisquam eaque modi soluta ex tenetur commodi. Repellendus delectus
-    doloribus repudiandae, accusamus quae at hic, dicta ad architecto veniam distinctio illum quisquam, nobis
-    cupiditate! Rerum hic assumenda expedita ex voluptas corporis accusantium minima excepturi quod asperiores debitis
-    eveniet optio consequuntur iste earum corrupti aperiam sit inventore cum illum, alias aliquam!
-  </p>
+
+  <div class="cta-wrapper">
+    <Button {...data.button} />
+    <Button {...data.button} theme="secondary" />
+    <Button>Test</Button>
+  </div>
 </Layout>
+
+<style>
+  h1 {
+    text-align: center;
+  }
+</style>
diff --git a/apps/sanity/schema/singleTypes/Index_Page.ts b/apps/sanity/schema/singleTypes/Index_Page.ts
index 693b9ec..0d5af7a 100644
--- a/apps/sanity/schema/singleTypes/Index_Page.ts
+++ b/apps/sanity/schema/singleTypes/Index_Page.ts
@@ -12,6 +12,11 @@ export default defineType({
   icon: () => '🏠',
   fields: [
     ...defineSlugForDocument({ slug: slug }),
+    defineField({
+      name: 'button',
+      type: 'button',
+      title: 'Button',
+    }),
     defineField({
       name: 'components',
       type: 'components',
diff --git a/apps/sanity/structure/schema-types.ts b/apps/sanity/structure/schema-types.ts
index 98c8da6..961bfc1 100644
--- a/apps/sanity/structure/schema-types.ts
+++ b/apps/sanity/structure/schema-types.ts
@@ -24,13 +24,13 @@ const components = [
 ];
 
 // UI Components
-import cta from '../schema/ui/cta';
+import button from '../schema/ui/button';
 import seo from '../schema/ui/seo';
 import PortableText from '../schema/ui/portable-text';
 import Heading from '../schema/ui/portable-text/Heading';
 
 const ui = [
-  cta,
+  button,
   seo,
   PortableText,
   Heading,
diff --git a/bun.lockb b/bun.lockb
index 8d7ea9c..d9c133d 100755
Binary files a/bun.lockb and b/bun.lockb differ