diff --git a/apps/astro/src/components/Components.astro b/apps/astro/src/components/Components.astro
new file mode 100644
index 0000000..9d04445
--- /dev/null
+++ b/apps/astro/src/components/Components.astro
@@ -0,0 +1,40 @@
+---
+import type { ComponentProps } from 'astro/types'
+import SimpleCtaSection, { SimpleCtaSection_Query } from '@/components/global/SimpleCtaSection.astro'
+
+const components = {
+  SimpleCtaSection,
+}
+
+type ComponentsMap = {
+  [Component in keyof typeof components]: {
+    _type: Component
+  } & ComponentProps<(typeof components)[Component]>
+}
+
+export type ComponentsProps = Array<ComponentsMap[keyof typeof components]>
+
+type Props = {
+  data: ComponentsProps
+  indexStart?: number
+}
+
+const { data, indexStart = 0 } = Astro.props
+
+export const Components_Query = /* groq */ `
+  components[] {
+    _type,
+    _type == "SimpleCtaSection" => {
+      ${SimpleCtaSection_Query}
+    },
+  },
+`
+---
+
+{
+  data?.map((item, i) => {
+    const DynamicComponent = components[item._type]
+    if (!DynamicComponent) return null
+    return <DynamicComponent {...item} index={indexStart + i} />
+  })
+}
diff --git a/apps/astro/src/components/global/SimpleCtaSection.astro b/apps/astro/src/components/global/SimpleCtaSection.astro
new file mode 100644
index 0000000..d930bb5
--- /dev/null
+++ b/apps/astro/src/components/global/SimpleCtaSection.astro
@@ -0,0 +1,48 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/src/components/ui/portable-text'
+import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
+
+export const SimpleCtaSection_Query = `
+  ${PortableTextQuery('name')}
+  ${PortableTextQuery('text')}
+  ${ButtonDataQuery('cta')}
+`
+
+export type Props = {
+  index: number
+  name: PortableTextValue
+  text: PortableTextValue
+  cta: ButtonDataProps
+}
+
+const { index, name, text, cta } = Astro.props
+---
+
+<section class="SimpleCtaSection sec-wo-margin">
+  <div class="max-width">
+    <PortableText value={name} class="h3" />
+    <header>
+      <PortableText value={text} heading={index === 0 ? 'h1' : 'h2'} class="h3" />
+      <Button {...cta} class="cta" />
+    </header>
+  </div>
+</section>
+
+<style lang="scss">
+  .SimpleCtaSection {
+    padding: clamp(calc(32rem / 16), calc(80vw / 7.68), calc(144rem / 16)) 0;
+    background: var(--primary-300, #f4efe8);
+    .max-width {
+      max-width: calc(1024rem / 16);
+      display: grid;
+      gap: clamp(calc(32rem / 16), calc(56vw / 7.68), calc(56rem / 16))
+        clamp(calc(42rem / 16), calc(56vw / 7.68), calc(56rem / 16));
+      @media (min-width: calc(1000rem / 16)) {
+        grid-template-columns: 1fr 3.6fr;
+      }
+    }
+  }
+  .cta {
+    margin-top: 2rem;
+  }
+</style>
diff --git a/apps/astro/src/components/ui/PortableText/Block.astro b/apps/astro/src/components/ui/PortableText/Block.astro
deleted file mode 100644
index 4fa864c..0000000
--- a/apps/astro/src/components/ui/PortableText/Block.astro
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/apps/astro/src/components/ui/PortableText/Cmp.astro b/apps/astro/src/components/ui/PortableText/Cmp.astro
deleted file mode 100644
index c345478..0000000
--- a/apps/astro/src/components/ui/PortableText/Cmp.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import { PortableText } from 'astro-portabletext'
-import type { PortableTextValue } from '.'
-import Block from './Block.astro'
-import Mark from './Mark.astro'
-
-type Props = {
-  value: PortableTextValue
-}
-
-const { value } = Astro.props
----
-
-<PortableText value={value} components={{ block: Block, mark: Mark }} />
diff --git a/apps/astro/src/components/ui/PortableText/Mark.astro b/apps/astro/src/components/ui/PortableText/Mark.astro
deleted file mode 100644
index 78bd5f8..0000000
--- a/apps/astro/src/components/ui/PortableText/Mark.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-import type { Props as $, Mark as MarkType } from 'astro-portabletext/types'
-import { Mark as PortableTextMark } from 'astro-portabletext/components'
-
-export type Props = $<MarkType<never>>
-
-const { node, ...props } = Astro.props
-
-const { href, type } = node.markDef as { href: string; type: 'external' | 'internal' }
-const isExternal = type === 'external'
----
-
-{
-  node.markType === 'link' ? (
-    <a href={href} {...(isExternal && { target: '_blank', rel: 'noreferrer' })} {...props}>
-      <slot />
-    </a>
-  ) : (
-    PortableTextMark
-  )
-}
diff --git a/apps/astro/src/components/ui/PortableText/index.astro b/apps/astro/src/components/ui/PortableText/index.astro
deleted file mode 100644
index 97e0ce7..0000000
--- a/apps/astro/src/components/ui/PortableText/index.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import type { PortableTextProps } from 'astro-portabletext/types'
-import Cmp from './Cmp.astro'
-
-export type PortableTextValue = PortableTextProps['value']
-
-type Props = {
-  value: PortableTextValue
-  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-} & HTMLAttributes<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>
-
-const { heading: HeadingTag, value, ...props } = Astro.props
-
-const valueArray = Array.isArray(value) ? value : [value]
----
-
-{
-  HeadingTag ? (
-    <HeadingTag {...props}>
-      {valueArray.map((value: PortableTextValue, index: number) =>
-        index > 0 ? <span {...props}>{<Cmp value={value} />}</span> : <Cmp value={value} />
-      )}
-    </HeadingTag>
-  ) : (
-    <Cmp value={value} />
-  )
-}
diff --git a/apps/astro/src/components/ui/PortableText/index.ts b/apps/astro/src/components/ui/PortableText/index.ts
deleted file mode 100644
index e53fa36..0000000
--- a/apps/astro/src/components/ui/PortableText/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export { default, type PortableTextValue } from './index.astro';
-
-export const PortableTextQuery = (name: string) => `
-  ${name}[] {
-    ...,
-    markDefs[] {
-      _type == "link" => {
-        _type,
-        _key,
-        type,
-        "href": select(type == "internal" => internal -> slug.current, type == "external" => external, "#"),
-      },
-    },
-  },
-`
diff --git a/apps/astro/src/global/global.scss b/apps/astro/src/global/global.scss
index 2903d42..ce09c5a 100644
--- a/apps/astro/src/global/global.scss
+++ b/apps/astro/src/global/global.scss
@@ -26,8 +26,29 @@
 }
 
 :root {
+  --primary-100: #fffefd;
+  --primary-300: #f4efe8;
+  --primary-700: #ad6116;
+  --primary-800: #9c5712;
+
+  --secondary-100: #dee1e6;
+  --secondary-200: #c0c7db;
+  --secondary-300: #7d8fc1;
+  --secondary-500: #374776;
+  --secondary-700: #0c2d63;
+  --secondary-800: #0b2348;
+  --secondary-900: #122441;
+
+  --error-500: #c8452e;
+
+  --success-500: #298441;
+
+  --visited-500: #713776;
+
   --gap: clamp(96px, calc(132vw / 7.68), 152px);
 
+  --easing: cubic-bezier(0.17, 0.84, 0.44, 1);
+
   --pageMargin: clamp(16px, calc(40vw / 7.68), 40px);
   @media (max-width: 899px) and (min-width: 600px) {
     --pageMargin: clamp(40px, calc(80vw / 7.68), 80px);
@@ -110,7 +131,7 @@ img {
   outline: none;
 }
 :focus-visible {
-  outline: 2px solid var(--primary-800, #01403b);
+  outline: 2px solid var(--secondary-700, #0c2d63);
   outline-offset: 3px;
 }
 
@@ -127,15 +148,15 @@ body {
   min-width: 320px;
   -webkit-tap-highlight-color: transparent;
   background: var(--background-100, #fffcf9);
-  color: var(--primary-900, #001b19);
-  font-family: 'Poppins', sans-serif;
+  color: var(--secondary-700, #0c2d63);
+  font-family: 'Fixel', sans-serif;
   font-size: 1rem;
   line-height: 158%;
 }
 
 main,
 .max-width {
-  max-width: 1200px;
+  max-width: 1300px;
   width: calc(100% - var(--pageMargin) * 2);
   margin: 0 auto;
   height: 100%;
@@ -160,22 +181,24 @@ h6,
 .h6 {
   overflow-wrap: anywhere;
   font-weight: 400;
-  line-height: 128%;
-  color: var(--primary-800, #01403b);
+  line-height: 120%;
+  color: var(--secondary-700, #0c2d63);
+  font-variant-numeric: lining-nums tabular-nums;
   strong {
-    font-weight: 400;
-    color: var(--primary-900, #001b19);
+    font-weight: 600;
   }
 }
 h1,
-.h1,
-h2,
-.h2 {
-  font-size: clamp(calc(28rem / 16), calc(42vw / 7.68), calc(42rem / 16));
+.h1 {
+  font-size: clamp(calc(28rem / 16), calc(40vw / 7.68), calc(40rem / 16));
+  letter-spacing: -0.06em;
 }
+h2,
+.h2,
 h3,
 .h3 {
-  font-size: clamp(calc(18rem / 16), calc(24vw / 7.68), calc(24rem / 16));
+  font-size: clamp(calc(24rem / 16), calc(32vw / 7.68), calc(32rem / 16));
+  letter-spacing: -0.04em;
 }
 
 .link {
@@ -202,8 +225,8 @@ h3,
 
 .sec-wo-margin {
   margin: 0 calc(var(--pageMargin) * -1);
-  @media (min-width: 1280px) {
-    margin: 0 calc((100vw - 1200px) / -2);
+  @media (min-width: 1380px) {
+    margin: 0 calc((100vw - 1300px) / -2);
   }
 }
 
diff --git a/apps/astro/src/pages/index.astro b/apps/astro/src/pages/index.astro
index 68ed073..36c1aa9 100644
--- a/apps/astro/src/pages/index.astro
+++ b/apps/astro/src/pages/index.astro
@@ -1,10 +1,20 @@
 ---
 import Layout from '@/src/layouts/Layout.astro'
 import metadataFetch from '@/utils/metadata.fetch'
+import sanityFetch from '@/utils/sanity.fetch'
+import Components, { Components_Query, type ComponentsProps } from '@/components/Components.astro'
 
 const metadata = await metadataFetch('Index_Page')
+
+const data = await sanityFetch<{ components: ComponentsProps }>({
+  query: `
+    *[_type == "Index_Page"][0] {
+      ${Components_Query}
+    }
+  `,
+})
 ---
 
 <Layout {...metadata}>
-  <h1>Index Page</h1>
+  <Components data={data.components} />
 </Layout>
diff --git a/apps/sanity/schema/components/SimpleCtaSection.ts b/apps/sanity/schema/components/SimpleCtaSection.ts
index cd7c8de..ff7d460 100644
--- a/apps/sanity/schema/components/SimpleCtaSection.ts
+++ b/apps/sanity/schema/components/SimpleCtaSection.ts
@@ -28,7 +28,7 @@ export default defineField({
       type: 'cta',
       title: 'Wezwanie do działania',
       validation: Rule => Rule.required(),
-    })
+    }),
   ],
   preview: {
     select: {
diff --git a/apps/sanity/schema/ui/cta.ts b/apps/sanity/schema/ui/cta.ts
deleted file mode 100644
index 9fb7b2b..0000000
--- a/apps/sanity/schema/ui/cta.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { defineField, defineType } from "sanity"
-import { isValidUrl } from "../../utils/is-valid-url";
-import { InternalLinkableTypes } from "../../structure/internal-linkable-types";
-
-export default defineType({
-  name: 'cta',
-  type: 'object',
-  title: 'Wezwanie do działania',
-  icon: () => '🗣️',
-  fields: [
-    defineField({
-      name: 'text',
-      type: 'string',
-      title: 'Text',
-      description: 'The text that will be displayed on the button.',
-      validation: Rule => Rule.required(),
-    }),
-    defineField({
-      name: 'theme',
-      type: 'string',
-      title: 'Theme',
-      description: 'Theme is used to style the button. Choose "Primary" for the main call to action, or "Secondary" for less important actions.',
-      options: {
-        list: ['primary', 'secondary'],
-        layout: 'radio',
-        direction: 'horizontal',
-      },
-      initialValue: 'primary',
-      validation: Rule => Rule.required(),
-    }),
-    defineField({
-      name: 'type',
-      type: 'string',
-      title: 'Type',
-      description: 'Choose "External" for links to websites outside your domain, or "Internal" for links to pages within your site.',
-      options: {
-        list: ['external', 'internal'],
-        layout: 'radio',
-        direction: 'horizontal',
-      },
-      initialValue: 'external',
-      validation: Rule => Rule.required(),
-    }),
-    defineField({
-      name: 'external',
-      type: 'string',
-      title: 'URL',
-      description: 'Specify the full URL. Ensure it starts with "https://" and is a valid URL.',
-      hidden: ({ parent }) => parent?.type !== 'external',
-      validation: (Rule) => [
-        Rule.custom((value, { parent }) => {
-          const type = (parent as { type?: string })?.type;
-          if (type === 'external') {
-            if (!value) return "URL is required";
-            if (!value.startsWith('https://')) {
-              return 'External link must start with the "https://" protocol';
-            }
-            if (!isValidUrl(value)) return 'Invalid URL';
-          }
-          return true;
-        }),
-      ],
-    }),
-    defineField({
-      name: 'internal',
-      type: 'reference',
-      title: 'Internal reference to page',
-      description: 'Select an internal page to link to.',
-      to: InternalLinkableTypes,
-      options: {
-        disableNew: true,
-        filter: 'defined(slug.current)',
-      },
-      hidden: ({ parent }) => parent?.type !== 'internal',
-      validation: (rule) => [
-        rule.custom((value, { parent }) => {
-          const type = (parent as { type?: string })?.type;
-          if (type === 'internal' && !value?._ref) return "You have to choose internal page to link to.";
-          return true;
-        }),
-      ],
-    }),
-  ],
-  preview: {
-    select: {
-      title: 'text',
-      subtitle: 'href',
-    },
-  },
-});