diff --git a/src/components/ui/atoms/arrow/index.tsx b/src/components/ui/atoms/arrow/index.tsx
new file mode 100644
index 00000000..53a33aeb
--- /dev/null
+++ b/src/components/ui/atoms/arrow/index.tsx
@@ -0,0 +1,22 @@
+import {cn} from '@/utils/toolbox'
+
+type ArrowProps = {
+  theme?: 'dark' | 'light'
+  className?: string
+}
+
+export default function Arrow({className='', theme='dark'}: ArrowProps) {
+  return (
+    <div className={cn('-mt-1 w-1.5 h-24', className)}>
+      <div className={cn('w-px h-full', theme === 'dark' ? 'bg-white' : 'bg-primary-dark')}/>
+      <div
+        className={cn(
+          'text-[10px] rotate-180 -mt-3',
+          theme === 'dark' ? 'text-white' : 'text-primary-dark'
+        )}
+      >
+        ▲
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/atoms/button/button.model.ts b/src/components/ui/atoms/button/button.model.ts
index bd8d4cac..7be28e00 100644
--- a/src/components/ui/atoms/button/button.model.ts
+++ b/src/components/ui/atoms/button/button.model.ts
@@ -8,7 +8,7 @@ export const buttonAlignments = ['start', 'center', 'end'] as const
 
 const toneClasses: Record<typeof buttonTones[number], Record<typeof buttonVariants[number], string>> = {
   primary: {
-    default: 'bg-primary-200 text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-500 \
+    default: 'bg-primary-800 text-white hover:bg-white hover:text-primary-800 focus-visible:ring-primary-800 \
     focus-visible:outline-primary-200 uppercase tracking-widest',
     link: 'text-primary-800 hover:underline focus-visible:outline-primary-600 focus-visible:underline',
     ghost: 'text-primary-800 hover:bg-primary-100/30 focus-visible:outline-primary-600  \
@@ -23,9 +23,9 @@ const toneClasses: Record<typeof buttonTones[number], Record<typeof buttonVarian
     ghost: 'text-secondary-500 hover:bg-secondary-50 focus-visible:outline-secondary-600'
   },
   white: {
-    default: 'text-white bg-white hover:bg-white/90 focus-visible:ring-white focus-visible:outline-white',
+    default: 'text-white bg-white hover:bg-white/10 focus-visible:ring-white focus-visible:outline-white',
     link: 'text-white hover:underline focus-visible:outline-white focus-visible:underline',
-    ghost: 'text-white hover:bg-white/90 focus-visible:outline-white'
+    ghost: 'text-white hover:bg-white/10 focus-visible:outline-white'
   }
 }
 
@@ -101,7 +101,7 @@ export class ButtonProps {
       toneClasses[this.tone][this.variant],
       sizeClasses[this.size],
       shapeClasses[this.shape],
-      this.variant === 'link' && 'p-0'
+      this.variant === 'link' && '!p-0'
     )
   }
 
diff --git a/src/components/ui/atoms/titles/vertical/index.tsx b/src/components/ui/atoms/titles/vertical/index.tsx
index be4bd49a..d60d6bdf 100644
--- a/src/components/ui/atoms/titles/vertical/index.tsx
+++ b/src/components/ui/atoms/titles/vertical/index.tsx
@@ -1,22 +1,33 @@
+import {MoveDown} from 'lucide-react'
 import {cn} from '@/utils/toolbox'
+import Arrow from '../../arrow'
 
 export type VerticalTitleProps = {
   styleCard: 'illustrationCard' | 'detailsCard'
-  title: string
   classNameText?: string
+  title: string
+  theme?: 'dark' | 'light'
 }
 
-export default function VerticalTitle({title, styleCard = 'illustrationCard', classNameText}: VerticalTitleProps) {
+export default function VerticalTitle({
+  title,
+  classNameText,
+  styleCard = 'illustrationCard',
+  theme
+}: VerticalTitleProps) {
   return (
     <div
-      className={cn(styleCard === 'illustrationCard' ? 'top-48' : 'top-[450px]',
-        'absolute items-center translate-x-[50%] translate-y-[100%] rotate-90 gap-x-8 hidden xl:flex right-24')}>
-      <span className={cn('text-sm font-medium tracking-[0.25rem] uppercase', classNameText)}>{title}</span>
-      <span
-        className={cn('flex items-center justify-center w-40 before:bg-blue-medium text-[10px] -left-[3px] relative \
-         rotate-90', classNameText)}>
-        ▲
-      </span>
+      className={cn(styleCard === 'illustrationCard' ? 'top-20' : 'top-[450px]',
+        'absolute right-24 flex flex-col items-center space-y-10'
+      )}
+    >
+      <div className={cn('text-sm font-medium tracking-[0.1rem] uppercase', classNameText)}>
+        <span style={{writingMode: 'vertical-lr'}}>{title}</span>
+      </div>
+      <MoveDown
+        className={
+          cn('w-10 text-white stroke-1 h-14 ml-1', theme === 'dark' ? 'text-white' : 'text-primary-dark')
+        }/>
     </div>
   )
 }
diff --git a/src/components/ui/molecules/article/content-section/index.tsx b/src/components/ui/molecules/article/content-section/index.tsx
index 6cb2651f..70492b15 100644
--- a/src/components/ui/molecules/article/content-section/index.tsx
+++ b/src/components/ui/molecules/article/content-section/index.tsx
@@ -1,9 +1,9 @@
 import {ImageProps} from '@/models/image.model'
+import {MarkdownViewer} from '../../mardown'
 import {Tag} from '@/models/tag.model'
-import Markdown from 'markdown-to-jsx'
 import PostCover from '../../cards/cover'
 import PostTagList from '../../cards/article/tag-list'
-import React, {ReactNode} from 'react'
+import React from 'react'
 
 export type ArticleContentSectionProps = {
   image: ImageProps
@@ -28,23 +28,7 @@ export default function ArticleContentSection({image, tags, title, content}: Art
           <h1 className='text-4xl line-clamp-2 text-grey-dark title'>
             {title}
           </h1>
-          <Markdown
-            options={{
-              createElement(type, props: React.HTMLProps<HTMLDivElement> , children: ReactNode) {
-                const element = Array.isArray(children) ? children[0] : children
-                if (element === 'video') {
-                  return <iframe
-                    key={props['href']}
-                    src={props['href']}
-                    className='w-full rounded-lg h-[500px]'/>
-                } else {
-                  return React.createElement(type, props, children)
-                }
-              }
-            }}
-          >
-            {content}
-          </Markdown>
+          <MarkdownViewer content={content}/>
         </div>
       </div>
     </div>    
diff --git a/src/components/ui/molecules/cards/article/tag-list/index.tsx b/src/components/ui/molecules/cards/article/tag-list/index.tsx
index dbf76d2c..4571970a 100644
--- a/src/components/ui/molecules/cards/article/tag-list/index.tsx
+++ b/src/components/ui/molecules/cards/article/tag-list/index.tsx
@@ -14,8 +14,7 @@ export default function ArticleTagList({tags}: ArticleListProps) {
     slugify(a.name).toLowerCase() === queryTag ? -1 : slugify(b.name).toLowerCase() === queryTag ? 1 : 0)
 
   return (
-    <div
-      className='flex p-1 mb-5 space-x-2 overflow-x-scroll'>
+    <div className='flex p-1 mb-5 space-x-2 overflow-x-scroll'>
       {sortedTags?.map((tag, idx: number) => (
         <Link
           key={idx}
diff --git a/src/components/ui/molecules/cards/feature/index.tsx b/src/components/ui/molecules/cards/feature/index.tsx
index fd2d246a..caf43f46 100644
--- a/src/components/ui/molecules/cards/feature/index.tsx
+++ b/src/components/ui/molecules/cards/feature/index.tsx
@@ -9,18 +9,16 @@ export default function FeatureCard({feature}: FeatureCardProps) {
   return (
     <div
       key={feature.name}
-      className='relative pl-16'>
-      <dt className='text-base font-semibold leading-7 text-gray-900'>
-        <div
-          className={'absolute top-0 left-0 flex items-center justify-center w-10 h-10 p-2 rounded-lg'}>
-          <Image
-            {...feature.icon}
-            alt={feature.name}
-          />
-        </div>
+      className='w-full p-6 h-80 bg-primary-500'>
+      <Image
+        {...feature.icon}
+        alt={feature.name}
+        className='w-auto h-10 mb-2'
+      />
+      <div className='text-xl font-semibold leading-7 text-white title'>
         <span className='capitalize'>{feature.name}</span>
-      </dt>
-      <dd className='mt-2 text-base leading-7 text-gray-600'>{feature.description}</dd>
+      </div>
+      <p className='mt-2 overflow-hidden text-base leading-7 text-gray-100'>{feature.description}</p>
     </div>
   )
 }
diff --git a/src/components/ui/molecules/cards/illustration/illustration-card.model.ts b/src/components/ui/molecules/cards/illustration/illustration-card.model.ts
index 34a9ae3f..d40de755 100644
--- a/src/components/ui/molecules/cards/illustration/illustration-card.model.ts
+++ b/src/components/ui/molecules/cards/illustration/illustration-card.model.ts
@@ -1,12 +1,10 @@
 import {ImageProps} from '@/models/image.model'
-import {StaticImageData} from 'next/image'
 
 export type IllustrationCardPropsImpl = {
   number: number
   illustration: ImageProps
-  icon: StaticImageData
+  href: string
   title: string
   description: string
-  alignment?: string
   theme?: string
 }
diff --git a/src/components/ui/molecules/cards/illustration/index.tsx b/src/components/ui/molecules/cards/illustration/index.tsx
index 447bdfb3..d0e8b74c 100644
--- a/src/components/ui/molecules/cards/illustration/index.tsx
+++ b/src/components/ui/molecules/cards/illustration/index.tsx
@@ -2,25 +2,27 @@ import {IllustrationCardPropsImpl} from './illustration-card.model'
 import {cn} from '@/utils/toolbox'
 import {padNumberWithZeroes} from '@/utils/toolbox'
 import Image from 'next/image'
+import Link from 'next/link'
 
 
 export default function IllustrationCard({
-  alignment = 'left',
   theme = 'dark',
   illustration,
-  icon,
+  href,
   number,
   title,
   description
 }: IllustrationCardPropsImpl) {
+  const alignment = number % 2 === 0 ? 'right' : 'left'
   const alignClasses = alignment === 'left' ? 'xl:mr-16' : 'xl:ml-16'
   const backgroundColor = theme === 'dark' ? 'bg-primary-500 text-white' : 'bg-white'
 
   return (
     <div className='w-full mx-auto mb-28 max-w-screen-2xl last:mb-0'>
-      <div
+      <Link
+        href={href}
         className={cn(alignClasses, backgroundColor,
-          'relative flex flex-col md:flex-row')}>
+          'relative flex flex-col md:flex-row duration-200 hover:scale-105')}>
         <div className='absolute right-4 top-3 sm:right-10 sm:top-10'>
           <span className='title'>{padNumberWithZeroes(number, 2)}</span>
         </div>
@@ -37,16 +39,6 @@ export default function IllustrationCard({
           </div>
         </div>
         <div className='p-8 pt-0 md:p-16 md:w-1/3 md:pr-8 md:pl-0 lg:py-28 2xl:pr-36'>
-          <div
-            className={cn((alignment === 'right'
-              ? 'bg-primary-200'
-              : 'bg-secondary-500'),
-            'w-12 h-12 p-3 rounded-full flex items-center justify-center')}>
-            <Image
-              src={icon}
-              alt={title}
-            />
-          </div>
           <h3
             className={cn(
               alignment === 'left' ? 'text-secondary-500' : 'text-primary-200',
@@ -55,7 +47,7 @@ export default function IllustrationCard({
           </h3>
           <p className='w-full sm:w-2/3 md:w-full'>{description}</p>
         </div>
-      </div>
+      </Link>
     </div>
   )
 }
diff --git a/src/components/ui/molecules/cards/service/index.tsx b/src/components/ui/molecules/cards/service/index.tsx
deleted file mode 100644
index 1cb3ab88..00000000
--- a/src/components/ui/molecules/cards/service/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Service} from '@/models/service.model'
-import {motion} from 'framer-motion'
-import CardCover from '../cover'
-import Link from 'next/link'
-
-type ServiceCardProps = {
-  service: Service
-}
-
-export default function ServiceCard({service}: ServiceCardProps) {
-  return (
-    <motion.div
-      initial={{opacity: 0}}
-      animate={{opacity: 1}}
-      exit={{opacity: 0}}
-      transition={{duration: 0.2}}
-    >
-      <Link
-        href={`/services/${service.slug}`}
-        className='relative flex flex-col overflow-hidden duration-200 bg-white rounded-lg shadow-lg cursor-pointer \
-      hover:shadow-2xl hover:scale-105'>
-        <CardCover image={service.image}/>
-        <div
-          className='flex flex-col py-6 pl-6 bg-white'>
-          <div className='pr-6'>
-            <h1
-              className='text-2xl line-clamp-2 text-grey-dark title'>
-              {service.title}
-            </h1>
-            <p 
-              className='mt-2 text-base text-grey-light line-clamp-3'>
-              {service.description}
-            </p>
-          </div>
-        </div>
-      </Link>
-    </motion.div>
-  )
-}
diff --git a/src/components/ui/molecules/cards/solution/index.tsx b/src/components/ui/molecules/cards/solution/index.tsx
deleted file mode 100644
index ba2dbc57..00000000
--- a/src/components/ui/molecules/cards/solution/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Solution} from '@/models/solution.model'
-import {motion} from 'framer-motion'
-import CardCover from '../cover'
-import Link from 'next/link'
-
-type SolutionCardProps = {
-  solution: Solution
-}
-
-export default function SolutionCard({solution}: SolutionCardProps) {
-  return (
-    <motion.div
-      initial={{opacity: 0}}
-      animate={{opacity: 1}}
-      exit={{opacity: 0}}
-      transition={{duration: 0.2}}
-    >
-      <Link
-        href={`/solutions/${solution.slug}`}
-        className='relative flex flex-col overflow-hidden duration-200 bg-white rounded-lg shadow-lg cursor-pointer \
-      hover:shadow-2xl hover:scale-105'>
-        <CardCover image={solution.image}/>
-        <div
-          className='flex flex-col py-6 pl-6 bg-white'>
-          <div className='pr-6'>
-            <h1
-              className='text-2xl line-clamp-2 text-grey-dark title'>
-              {solution.title}
-            </h1>
-            <p 
-              className='mt-2 text-base text-grey-light line-clamp-3'>
-              {solution.description}
-            </p>
-          </div>
-        </div>
-      </Link>
-    </motion.div>
-  )
-}
diff --git a/src/components/ui/molecules/cards/team-member/index.tsx b/src/components/ui/molecules/cards/team-member/index.tsx
index b880cfc3..f31496e0 100644
--- a/src/components/ui/molecules/cards/team-member/index.tsx
+++ b/src/components/ui/molecules/cards/team-member/index.tsx
@@ -11,7 +11,9 @@ export type TeamMemberCardProps = {
 
 export default function TeamMemberCard({teamMember}: TeamMemberCardProps) {
   return (
-    <div className='flex w-full p-10 space-x-4 bg-white shadow-lg sm:space-x-8 rounded-xl'>
+    <Link
+      href={`/about/team-members/${teamMember.slug}`}
+      className='flex w-full p-10 space-x-4 bg-white shadow-lg sm:space-x-8 rounded-xl hover:bg-gray-50'>
       <div>
         <Avatar
           size='lg'
@@ -49,6 +51,6 @@ export default function TeamMemberCard({teamMember}: TeamMemberCardProps) {
           }
         </div>
       </div>
-    </div>
+    </Link>
   )
 }
diff --git a/src/components/ui/molecules/mardown/index.tsx b/src/components/ui/molecules/mardown/index.tsx
new file mode 100644
index 00000000..72e649cb
--- /dev/null
+++ b/src/components/ui/molecules/mardown/index.tsx
@@ -0,0 +1,28 @@
+import Markdown from 'markdown-to-jsx'
+import React from 'react'
+
+export function MarkdownViewer({content}: {content: string}) {
+  return (
+    <div className='flex justify-center w-full'>
+      <div className='w-full px-4 prose max-w-7xl'>
+        <Markdown
+          options={{
+            createElement(type, props: React.HTMLProps<HTMLDivElement> , children: React.ReactNode) {
+              const element = Array.isArray(children) ? children[0] : children
+              if (element === 'video') {
+                return <iframe
+                  key={props['href']}
+                  src={props['href']}
+                  className='w-full rounded-lg h-[500px]'/>
+              } else {
+                return React.createElement(type, props, children)
+              }
+            }
+          }}
+        >
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/molecules/tag-filter/index.tsx b/src/components/ui/molecules/tag-filter/index.tsx
index 13ba3d12..925a11bb 100644
--- a/src/components/ui/molecules/tag-filter/index.tsx
+++ b/src/components/ui/molecules/tag-filter/index.tsx
@@ -31,7 +31,7 @@ export default function TagFilter({tags}: TagFilterProps) {
   
   return (
     <div className='flex items-center justify-center w-full'>
-      <div className='relative flex w-full border-b'>
+      <div className='relative flex w-full mt-10 border-b max-w-7xl'>
         <div className='absolute left-0 flex h-full'>
           <button
             onClick={() => slide('left')} 
diff --git a/src/components/ui/organisms/footer/index.tsx b/src/components/ui/organisms/footer/index.tsx
index ba68e9c4..d7bbec5a 100644
--- a/src/components/ui/organisms/footer/index.tsx
+++ b/src/components/ui/organisms/footer/index.tsx
@@ -9,66 +9,72 @@ export default function Footer({logo, links, locations, contactUsCTA}: FooterPro
   const [isContactFormOpen, setIsContactFormOpen] = useState(false)
   return (
     <footer
-      className='flex justify-center p-10 lg:h-80 bg-primary-900'>
-      <div className='flex flex-col w-full space-y-10 lg:space-y-0 lg:space-x-20 lg:flex-row max-w-7xl'>
-        <div className='flex-1'>
-          <ul className='space-y-2'>
-            {links.map((link, index) => (
-              <li
-                key={index}
-                className='w-1/2 mb-2'>
+      className='flex justify-center w-full px-10 pt-12 pb-16 lg:h-80 bg-primary-900'>
+      <div className='flex flex-col w-full space-y-10 lg:space-y-0 lg:space-x-10 lg:flex-row max-w-7xl'>
+        <div className='flex flex-col flex-1 space-y-10 lg:space-y-0 lg:space-x-10 sm:flex-row'>
+          <div className='flex items-start flex-1 lg:flex-col lg:pt-10'>
+            <Link
+              href='/'
+              aria-label='56k logo'
+            >
+              <Image
+                {...logo}
+                alt='altLogo56k'
+                className='w-40'
+              />
+            </Link>
+          </div>
+          <div className='flex items-center flex-1 lg:pt-3'>
+            <ul className='space-y-2'>
+              {links.map((link, index) => (
+                <li
+                  key={index}
+                  className='w-1/2 mb-2'>
+                  <Button
+                    asChild
+                    variant='link'
+                    tone='white'
+                    align='start'
+                    className='capitalize w-max'
+                  >
+                    <Link href={link.href}>
+                      {link.children}
+                    </Link>
+                  </Button>
+                </li>
+              ))}
+              <li>
                 <Button
-                  asChild
-                  variant='link'
                   tone='white'
+                  variant='link'
                   align='start'
-                  className='capitalize w-max'
+                  onClick={() => setIsContactFormOpen(true)}
                 >
-                  <Link href={link.href}>
-                    {link.children}
-                  </Link>
+                  {contactUsCTA.title}
                 </Button>
+                <ContactForm
+                  isOpen={isContactFormOpen}
+                  setIsOpen={setIsContactFormOpen}
+                  {...contactUsCTA.modal}
+                />
               </li>
-            ))}
-          </ul>
-        </div>
-        <div className='flex justify-between lg:flex-col'>
-          <Link
-            href='/'
-            aria-label='56k logo'
-          >
-            <Image
-              {...logo}
-              alt='altLogo56k'
-              className='w-40'
-            />
-          </Link>
-          <Button
-            tone='secondary'
-            onClick={() => setIsContactFormOpen(true)}
-          >
-            {contactUsCTA.title}
-          </Button>
-          <ContactForm
-            isOpen={isContactFormOpen}
-            setIsOpen={setIsContactFormOpen}
-            {...contactUsCTA.modal}
-          />
+            </ul>
+          </div>
         </div>
-        <div className='flex space-x-10'>
+        <div className='flex flex-col space-y-10 sm:space-y-0 sm:space-x-10 md:space-x-36 sm:flex-row'>
           {locations?.map((location) => (
             <a
               target='_blank'
               href={location.gMap}
               key={location.name}
-              className='flex flex-col justify-between space-y-5 text-white w-52 hover:underline'
+              className='flex items-center space-x-5 text-white hover:underline'
             >
               <Image
                 {...location.image}
                 alt={location.name}
-                className='w-32'
+                className='w-32 aspect-square'
               />
-              <div>
+              <div className='ml-2'>
                 <p>{location.address}</p>
                 <p>{location.zipCode} {location.city}</p>
                 <p>{location.country}</p>
diff --git a/src/components/ui/organisms/header/index.tsx b/src/components/ui/organisms/header/index.tsx
index d81a4eaf..5c220288 100644
--- a/src/components/ui/organisms/header/index.tsx
+++ b/src/components/ui/organisms/header/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as NavbarPrimitive from '@radix-ui/react-dialog'
-import {ImageProps} from '@/models/image.model'
 import {LinkProps} from '@/models/link.model'
 import {Logo} from '../../svgs/logos/56k'
 import {Menu} from '../../svgs/icons/menu'
@@ -10,29 +9,20 @@ import {usePathname} from 'next/navigation'
 import {useState} from 'react'
 import Button from '../../atoms/button'
 import Image from 'next/image'
-import LanguageSwitcher from '@/components/ui/molecules/language-switcher'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
 export type HeaderProps = {
-  logo: ImageProps
-  links: Array<{
-    title: string
-    href: string
-  }>
+  links: Array<LinkProps>
   isFloating?: boolean
+  darkTheme?: boolean
 }
 
-export default function Header({logo, links, isFloating}: HeaderProps) {
+export default function Header({links, isFloating, darkTheme}: HeaderProps) {
   const {t} = useTranslation()
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const pathname = usePathname()
 
-  const navigation: Array<LinkProps> = links.map(link => ({
-    href: link.href || '',
-    children: link.children
-  }))
-
   const sidebarHandler = () => {
     setSidebarOpen(false)
   }
@@ -70,14 +60,14 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
               <Link
                 href='/'
                 aria-label='56k cloud logo'>
-                <Logo className='w-auto h-7'/>
+                <Logo className={cn(darkTheme ? 'text-white' : 'text-primary-800',  'w-auto h-7')}/>
               </Link>
               <div className='translate-y-[3px]'>
-                <LanguageSwitcher/>
+                {/* <LanguageSwitcher/> */}
               </div>
             </div>
             <div className='mb-auto'>
-              {navigation.map((item, index) => (
+              {links.map((item, index) => (
                 <Button
                   asChild
                   key={index}
@@ -109,10 +99,10 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
             <div className='absolute inset-y-0 right-0 flex items-center xl:hidden'>
               <Button
                 onClick={() => setSidebarOpen(!sidebarOpen)}
-                trailing={<Menu className='w-3.5 h-3.5 ml-3 -mt-[1.5px]'/>}
-                size='small'
+                shape='circle'
+                className='p-3'
               >
-                Menu
+                <Menu className='w-5 h-5'/>
               </Button>
             </div>
             <div className='flex justify-between'>
@@ -120,21 +110,18 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                 <Link
                   href='/'
                   aria-label='56k cloud logo'>
-                  <Image
-                    {...logo}
-                    alt='altLogo56k'
-                    className='w-auto h-7 lg:h-10'
-                  />
+                  <Logo className={cn(darkTheme ? 'text-white' : 'text-primary-800',  'w-auto h-7 lg:h-10')}/>
                 </Link>
               </div>
               <div className='hidden xl:flex xl:items-center xl:justify-between gap-x-12 2xl:gap-x-16'>
                 <div className='flex items-center space-x-2'>
-                  {navigation.map((item, index) => (
+                  {links.map((item, index) => (
                     <Button
                       asChild
                       key={index}
                       variant='ghost'
-                      className='text-white capitalize'
+                      tone={darkTheme ? 'white' : 'primary'}
+                      className='capitalize'
                       data-active={pathname.includes(item.href)}
                     >
                       <Link href={item.href}>
@@ -142,7 +129,7 @@ export default function Header({logo, links, isFloating}: HeaderProps) {
                       </Link>
                     </Button>
                   ))}
-                  <LanguageSwitcher/>
+                  {/* <LanguageSwitcher/> */}
                 </div>
               </div>
             </div>
diff --git a/src/components/ui/organisms/heros/basic/index.tsx b/src/components/ui/organisms/heros/basic/index.tsx
new file mode 100644
index 00000000..7ea83985
--- /dev/null
+++ b/src/components/ui/organisms/heros/basic/index.tsx
@@ -0,0 +1,37 @@
+import {ImageProps} from '@/models/image.model'
+import Image from 'next/image'
+
+export type BasicHeroProps = {
+  title: string
+  subtitle: string
+  image: ImageProps
+}
+
+export default function BasicHero({title, subtitle, image}: BasicHeroProps) {  
+  return (
+    <div className='h-[400px] bg-white relative'>
+      <Image
+        alt={'Background'}
+        src={image.src}
+        placeholder='blur'
+        blurDataURL={image.blurDataURL}
+        width={image.width}
+        height={image.height}
+        className='pointer-events-none'
+      />
+      <div 
+        className='absolute inset-0 flex flex-col items-start justify-center w-full mx-auto max-w-7xl'>
+        <div className='flex flex-col items-center w-full pr-4 xl:items-start'>
+          <h1
+            className={'text-center xl:text-left text-primary-800 text-7xl title'}>
+            {title}
+          </h1>
+          <p
+            className={'text-center xl:text-left text-primary-800 text-base title'}>
+            {subtitle}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/organisms/heros/features/index.tsx b/src/components/ui/organisms/heros/features/index.tsx
new file mode 100644
index 00000000..3960d065
--- /dev/null
+++ b/src/components/ui/organisms/heros/features/index.tsx
@@ -0,0 +1,52 @@
+import {Feature} from '@/models/feature.model'
+import {ImageProps} from '@/models/image.model'
+import FeatureCard from '@/components/ui/molecules/cards/feature'
+import Image from 'next/image'
+
+export type BasicHeroProps = {
+  title: string
+  subtitle: string
+  image: ImageProps
+  features: Array<Feature>
+}
+
+export default function FeaturesHero({title, subtitle, image, features}: BasicHeroProps) {  
+  return (
+    <div className='mb-28'>
+      <div className='h-[600px] bg-primary-100 w-full relative'>
+        <Image
+          alt={'Background'}
+          src={image.src}
+          placeholder='blur'
+          blurDataURL={image.blurDataURL}
+          width={image.width}
+          height={image.height}
+          className='object-cover w-full h-full pointer-events-none'
+        />
+        <div 
+          className='absolute inset-0 flex flex-col items-start justify-center w-full mx-auto max-w-7xl'>
+          <div className='flex flex-col items-center w-full pr-4 space-y-8 xl:items-start text-primary-800'>
+            <h1
+              className={'text-center text-6xl xl:text-left xl:text-7xl title max-w-2xl'}>
+              {title}
+            </h1>
+            <p
+              className={'text-center xl:text-left text-base w-96'}>
+              {subtitle}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className='flex justify-center w-full h-auto px-4 -mt-16'>
+        <div className='z-40 grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 max-w-7xl'>
+          {features?.map((feature) => (
+            <FeatureCard
+              key={feature.name}
+              feature={feature}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/organisms/heros/home/index.tsx b/src/components/ui/organisms/heros/home/index.tsx
index bd65845b..de8ea611 100644
--- a/src/components/ui/organisms/heros/home/index.tsx
+++ b/src/components/ui/organisms/heros/home/index.tsx
@@ -1,5 +1,9 @@
 import {ImageProps} from '@/models/image.model'
 import {LinkProps} from '@/models/link.model'
+import {MoveDown} from 'lucide-react'
+import {cn} from '@/utils/toolbox'
+import {useEffect, useState} from 'react'
+import Arrow from '@/components/ui/atoms/arrow'
 import Button from '@/components/ui/atoms/button'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -10,9 +14,34 @@ export type HomeHeroProps = {
   image: ImageProps
 }
 
-export default function HomeHero({title, button, image}: HomeHeroProps) {  
+export default function HomeHero({title, button, image}: HomeHeroProps) {
+  const [hideScrollBar, setHideScrollBar] = useState(true)
+
+  function handleScroll(e: Event) {
+    const scroll = (e.target as Document)?.scrollingElement?.scrollTop || 0
+    setHideScrollBar(scroll > 0)
+  }
+
+  function handleResize() {
+    if (window.innerHeight >= 1300 && window.innerWidth > 1500) {
+      setHideScrollBar(false)
+    } else if (window.innerHeight > 1300 || window.innerHeight < 900) {
+      setHideScrollBar(true)
+    }    
+  }
+
+  useEffect(() => {
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
   return (
-    <div className='relative pt-24 overflow-hidden bg-white sm:pt-0'>
+    <div className='relative overflow-hidden bg-white'>
       <Image
         alt={'Team background'}
         src={image.src}
@@ -22,21 +51,30 @@ export default function HomeHero({title, button, image}: HomeHeroProps) {
         height={image.height}
         className='w-full pointer-events-none'/>
       <div 
-        className='absolute inset-0 flex flex-col items-center justify-center title'>
-        <h1
-          className={`mx-10 my-4 mt-20 text-xl text-center text-white sm:mx-30 sm:mt-10 sm:text-3xl md:text-5xl 
-          lg:text-6xl xl:text-7xl 2xl:text-8xl`}>
-          {title}
-        </h1>
-        <Button
-          tone='primary'
-          size='small'
-          className='p-2 mt-8 text-xs/3 lg:mt-20'
-        >
-          <Link href={button.href}>
-            {button.title}
-          </Link>
-        </Button>
+        className='absolute inset-0 flex flex-col items-center justify-center space-y-10 xl:justify-start xl:top-72'>
+        <div className='flex flex-col items-center space-y-10 max-w-7xl'>
+          <h1
+            className={`mx-10 my-4 mt-20 text-xl text-center text-white sm:mx-30 sm:mt-10 sm:text-3xl md:text-5xl 
+          lg:text-6xl xl:text-7xl title`}>
+            {title}
+          </h1>
+          <Button
+            size='small'
+            tone='primary'
+          >
+            <Link href={button.href}>
+              {button.children}
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'fixed items-center justify-center w-full flex bottom-24',
+          hideScrollBar && 'hidden'
+        )}>
+        {/* <Arrow className='text-white w-14 h-14 animate-bounce'/> */}
+        <MoveDown className='text-white stroke-1 w-14 h-14 animate-bounce'/>
       </div>
     </div>
   )
diff --git a/src/components/ui/organisms/lists/illustration/index.tsx b/src/components/ui/organisms/lists/illustration/index.tsx
index 4e688fcc..8ca23cab 100644
--- a/src/components/ui/organisms/lists/illustration/index.tsx
+++ b/src/components/ui/organisms/lists/illustration/index.tsx
@@ -16,14 +16,18 @@ export default function IllustrationCardList({theme='dark', title, illustrationC
       <VerticalTitle
         title={title}
         styleCard='illustrationCard'
-        classNameText={cn(theme === 'dark' ? 'text-white' : 'text-blue-dark')}/>
-      {illustrationCards.map((card) => 
-        <IllustrationCard
-          theme={theme}
-          key={card.title}
-          {...card}
-        />
-      )}
+        theme={theme}
+        classNameText={cn(theme === 'dark' ? 'text-white' : 'text-blue-dark')}
+      />
+      <div className='flex flex-col space-y-28'>
+        {illustrationCards.map((card) => 
+          <IllustrationCard
+            theme={theme}
+            key={card.title}
+            {...card}
+          />
+        )}
+      </div>
     </section>
   )
 }
diff --git a/src/components/ui/organisms/lists/masonry/index.tsx b/src/components/ui/organisms/lists/masonry/index.tsx
index e7fe2b9a..3c47b342 100644
--- a/src/components/ui/organisms/lists/masonry/index.tsx
+++ b/src/components/ui/organisms/lists/masonry/index.tsx
@@ -3,14 +3,16 @@ import Masonry, {ResponsiveMasonry} from 'react-responsive-masonry'
 
 export default function MasonryLayout({children}: {children: ReactNode}) {
   return (
-    <div className='w-full'>
-      <ResponsiveMasonry
-        columnsCountBreakPoints={{300: 1, 700: 2, 1000: 3}}
-      >
-        <Masonry gutter='2.5rem'>
-          {children}
-        </Masonry>
-      </ResponsiveMasonry>
+    <div className='flex items-center justify-center w-full'>
+      <div className='w-full px-4 py-10 max-w-7xl'>
+        <ResponsiveMasonry
+          columnsCountBreakPoints={{300: 1, 700: 2, 1000: 3}}
+        >
+          <Masonry gutter='2.5rem'>
+            {children}
+          </Masonry>
+        </ResponsiveMasonry>
+      </div>
     </div>
   )
 }
diff --git a/src/components/ui/organisms/lists/related/base.tsx b/src/components/ui/organisms/lists/related/base.tsx
index 81872939..9054e2f8 100644
--- a/src/components/ui/organisms/lists/related/base.tsx
+++ b/src/components/ui/organisms/lists/related/base.tsx
@@ -7,11 +7,13 @@ export type RelatedListProps = {
 }
 
 export default function RelatedList({title, subtitle, children}: RelatedListProps) {
-  return (<div className='flex flex-col w-full'>
-    <h1 className='mb-2 text-4xl text-center line-clamp-2 text-grey-dark title'>
-      {title}
-    </h1>
-    {subtitle && <p className='mb-4 text-center text-grey-light'>{subtitle}</p>}
+  return (<div className='flex flex-col w-full my-20 space-y-5'>
+    <div>
+      <h1 className='mb-2 text-4xl text-center line-clamp-2 text-grey-dark title'>
+        {title}
+      </h1>
+      {subtitle && <p className='mb-4 text-center text-grey-light'>{subtitle}</p>}
+    </div>
     {children}
   </div>)
 }
diff --git a/src/components/ui/organisms/lists/related/services.tsx b/src/components/ui/organisms/lists/related/services.tsx
index e5b05fb4..746cfea2 100644
--- a/src/components/ui/organisms/lists/related/services.tsx
+++ b/src/components/ui/organisms/lists/related/services.tsx
@@ -1,18 +1,14 @@
 import {Service} from '@/models/service.model'
-import RelatedList from './base'
 import ServiceList from '../service'
-import useTranslation from 'next-translate/useTranslation'
 
 export type RelatedServicesProps = {
   services: Array<Service>
 }
 
 export default function RelatedServices({services}: RelatedServicesProps) {
-  const {t} = useTranslation('common')
-  return (<RelatedList
-    title={t('relatedServicesTitle')}
-    subtitle={t('relatedServicesSubtitle')}
-  >
-    <ServiceList services={services}/>
-  </RelatedList>)
+  return (
+    <ServiceList
+      services={services}
+    />
+  )
 }
diff --git a/src/components/ui/organisms/lists/related/solutions.tsx b/src/components/ui/organisms/lists/related/solutions.tsx
index ae69b4e0..76211f31 100644
--- a/src/components/ui/organisms/lists/related/solutions.tsx
+++ b/src/components/ui/organisms/lists/related/solutions.tsx
@@ -1,18 +1,14 @@
 import {Solution} from '@/models/solution.model'
-import RelatedList from './base'
 import SolutionList from '../solution'
-import useTranslation from 'next-translate/useTranslation'
 
 export type RelatedSolutionsProps = {
   solutions: Array<Solution>
 }
 
 export default function RelatedSolutions({solutions}: RelatedSolutionsProps) {
-  const {t} = useTranslation('common')
-  return (<RelatedList
-    title={t('relatedSolutionsTitle')}
-    subtitle={t('relatedSolutionsSubtitle')}
-  >
-    <SolutionList solutions={solutions}/>
-  </RelatedList>)
+  return (
+    <SolutionList
+      solutions={solutions}
+    />
+  )
 }
diff --git a/src/components/ui/organisms/lists/service/index.tsx b/src/components/ui/organisms/lists/service/index.tsx
index fa5a4dd9..458c5d55 100644
--- a/src/components/ui/organisms/lists/service/index.tsx
+++ b/src/components/ui/organisms/lists/service/index.tsx
@@ -1,20 +1,24 @@
 import {Service} from '@/models/service.model'
-import MasonryLayout from '../masonry'
-import ServiceCard from '@/components/ui/molecules/cards/service'
+import IllustrationCardList from '../illustration'
 
 export type ServiceListProps = {
   services: Array<Service>
+  title?: string
 }
 
-export default function ServiceList({services}: ServiceListProps) {
+export default function ServiceList({services, title}: ServiceListProps) {
+  const cards =  services.map((service, index) => ({
+    title: service.title,
+    description: service.description,
+    illustration: service.image,
+    number: index+1,
+    href: `/services/${service.slug}`
+  }))
+
   return (
-    <MasonryLayout>
-      {services.map((service, index) => (
-        <ServiceCard
-          key={index}
-          service={service}
-        />
-      ))}
-    </MasonryLayout>
+    <IllustrationCardList
+      title={title || 'Services'}
+      illustrationCards={cards}
+    />
   )
 }
diff --git a/src/components/ui/organisms/lists/solution/index.tsx b/src/components/ui/organisms/lists/solution/index.tsx
index f5ee0da6..472f807b 100644
--- a/src/components/ui/organisms/lists/solution/index.tsx
+++ b/src/components/ui/organisms/lists/solution/index.tsx
@@ -1,20 +1,25 @@
 import {Solution} from '@/models/solution.model'
-import MasonryLayout from '../masonry'
-import SolutionCard from '@/components/ui/molecules/cards/solution'
+import IllustrationCardList from '../illustration'
 
 export type SolutionListProps = {
-  solutions: Array<Solution>
+  solutions: Array<Solution>,
+  title?: string
 }
 
-export default function SolutionList({solutions}: SolutionListProps) {
+export default function SolutionList({solutions, title}: SolutionListProps) {
+  const cards =  solutions.map((solution, index) => ({
+    title: solution.title,
+    description: solution.description,
+    illustration: solution.image,
+    number: index+1,
+    href: `/solutions/${solution.slug}`
+  }))
+
   return (
-    <MasonryLayout>
-      {solutions.map((solution, index) => (
-        <SolutionCard
-          key={index}
-          solution={solution}
-        />
-      ))}
-    </MasonryLayout>
+    <IllustrationCardList
+      theme='light'
+      title={title || 'Solutions'}
+      illustrationCards={cards}
+    />
   )
 }
diff --git a/src/components/ui/svgs/logos/56k.tsx b/src/components/ui/svgs/logos/56k.tsx
index 5824a0cf..302499db 100644
--- a/src/components/ui/svgs/logos/56k.tsx
+++ b/src/components/ui/svgs/logos/56k.tsx
@@ -9,7 +9,7 @@ export function Logo(props: IconProps) {
       x='0px'
       y='0px'
       viewBox='0 0 194 40.6'
-      fill='#002E6E'
+      fill='currentColor'
       {...props}
     >
       <g>
diff --git a/src/models/link.model.ts b/src/models/link.model.ts
index 31778a7b..4532a00c 100644
--- a/src/models/link.model.ts
+++ b/src/models/link.model.ts
@@ -1,9 +1,6 @@
-import {ReactNode} from 'react'
-
 export type LinkProps = {
   href: string
-  children: ReactNode
+  children: React.ReactNode
   alt?: string
   className?: string
-  children?: React.ReactNode
 }
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 600d9405..5f31fd91 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -3,8 +3,8 @@ import {PageProps} from '@/models/page.mode'
 import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 
-export default function BlogPage({components, openGraph}: PageProps) {
-  return pageRenderer(components, openGraph, 'CenteredLayout')
+export default function BlogPage({layout, components, openGraph}: PageProps) {
+  return pageRenderer(components, openGraph, layout)
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 791f1a60..9e419fdc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,7 +4,7 @@ import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 
 export default function HomePage({components, openGraph, layout}: PageProps) {
-  return pageRenderer(components, openGraph, layout)
+  return pageRenderer(components, openGraph, layout, true)
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
diff --git a/src/pages/services/[service].tsx b/src/pages/services/[service].tsx
index cdec92f0..2786e064 100644
--- a/src/pages/services/[service].tsx
+++ b/src/pages/services/[service].tsx
@@ -5,8 +5,8 @@ import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 import {strapiFetcher} from '../../../config'
 
-export default function ServicePage({components, openGraph}: PageProps) {
-  return pageRenderer(components, openGraph, 'CenteredLayout')
+export default function ServicePage({layout, components, openGraph}: PageProps) {
+  return pageRenderer(components, openGraph, layout, true)
 }
 
 export async function getStaticPaths() {
diff --git a/src/pages/services/index.tsx b/src/pages/services/index.tsx
index 3423163e..e5e2ecf9 100644
--- a/src/pages/services/index.tsx
+++ b/src/pages/services/index.tsx
@@ -3,8 +3,8 @@ import {PageProps} from '@/models/page.mode'
 import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 
-export default function ServicesPage({components, openGraph}: PageProps) {
-  return pageRenderer(components, openGraph, 'CenteredLayout')
+export default function ServicesPage({layout, components, openGraph}: PageProps) {
+  return pageRenderer(components, openGraph, layout)
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
diff --git a/src/pages/solutions/[solution].tsx b/src/pages/solutions/[solution].tsx
index 2410d510..03be7015 100644
--- a/src/pages/solutions/[solution].tsx
+++ b/src/pages/solutions/[solution].tsx
@@ -5,8 +5,8 @@ import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 import {strapiFetcher} from '../../../config'
 
-export default function SolutionPage({components, openGraph}: PageProps) {
-  return pageRenderer(components, openGraph, 'CenteredLayout')
+export default function SolutionPage({layout, components, openGraph}: PageProps) {
+  return pageRenderer(components, openGraph, layout, true)
 }
 
 export async function getStaticPaths() {
diff --git a/src/pages/solutions/index.tsx b/src/pages/solutions/index.tsx
index ac33eae6..863b398b 100644
--- a/src/pages/solutions/index.tsx
+++ b/src/pages/solutions/index.tsx
@@ -3,8 +3,8 @@ import {PageProps} from '@/models/page.mode'
 import {getPageProps} from '@/utils/cms/endpoints'
 import {pageRenderer} from '@/utils/cms/renderer/components'
 
-export default function SolutionsPage({components, openGraph}: PageProps) {
-  return pageRenderer(components, openGraph, 'CenteredLayout')
+export default function SolutionsPage({layout, components, openGraph}: PageProps) {
+  return pageRenderer(components, openGraph, layout, true)
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
diff --git a/src/utils/cms/renderer/blueprints.ts b/src/utils/cms/renderer/blueprints.ts
index 410c314c..0e7cd4dd 100644
--- a/src/utils/cms/renderer/blueprints.ts
+++ b/src/utils/cms/renderer/blueprints.ts
@@ -1,9 +1,11 @@
+import {MarkdownViewer} from '@/components/ui/molecules/mardown'
 import {z} from 'zod'
 import ArticleContentSection from '@/components/ui/molecules/article/content-section'
 import ArticleList from '@/components/ui/organisms/lists/article'
 import BackgroundImage from '@/components/ui/atoms/background-image'
+import BasicHero from '@/components/ui/organisms/heros/basic'
 import CompanyList from '@/components/ui/organisms/lists/company'
-import FeatureList from '@/components/ui/organisms/lists/feature'
+import FeaturesHero from '@/components/ui/organisms/heros/features'
 import Footer from '@/components/ui/organisms/footer'
 import Header from '@/components/ui/organisms/header'
 import HeroWithImageTiles from '@/components/ui/organisms/heros/hero-with-image-tiles'
@@ -273,21 +275,6 @@ export const tagsFilterBlueprint: ComponentBlueprint = {
   }
 }
 
-export const featureListBlueprint: ComponentBlueprint = {
-  component: FeatureList,
-  props: {
-    title: 'title',
-    subtitle: 'subtitle',
-    features: [
-      {
-        name: 'name',
-        description: 'description',
-        icon: iconBlueprint
-      }
-    ]
-  }
-}
-
 export const articleListBlueprint: ComponentBlueprint = {
   component: ArticleList,
   props: {
@@ -426,6 +413,31 @@ export const homeHeroBlueprint: ComponentBlueprint = {
   }
 }
 
+export const basicHeroBlueprint: ComponentBlueprint = {
+  component: BasicHero,
+  props: {
+    title: 'title',
+    subtitle: 'subtitle',
+    image: imageBlueprint
+  }
+}
+
+export const featuresHeroBlueprint: ComponentBlueprint = {
+  component: FeaturesHero,
+  props: {
+    title: 'title',
+    subtitle: 'subtitle',
+    image: imageBlueprint,
+    features: [
+      {
+        name: 'name',
+        description: 'description',
+        icon: iconBlueprint
+      }
+    ]
+  }
+}
+
 export const heroWithImageTilesBlueprint: ComponentBlueprint = {
   component: HeroWithImageTiles,
   props: {
@@ -477,3 +489,10 @@ export const teamListBlueprint: ComponentBlueprint = {
     joinTeamCTATitle: 'joinTeamCTATitle'
   }
 }
+
+export const markdownViewerBlueprint: ComponentBlueprint = {
+  component: MarkdownViewer,
+  props: {
+    content: 'content'
+  }
+}
diff --git a/src/utils/cms/renderer/components.tsx b/src/utils/cms/renderer/components.tsx
index f8461349..4a8cd9fb 100644
--- a/src/utils/cms/renderer/components.tsx
+++ b/src/utils/cms/renderer/components.tsx
@@ -3,14 +3,16 @@ import {
   articleContentBlueprint,
   articleListBlueprint,
   backgroundImageBlueprint,
+  basicHeroBlueprint,
   companyListBlueprint,
-  featureListBlueprint,
+  featuresHeroBlueprint,
   footerBlueprint,
   headerBlueprint,
   heroWithImageTilesBlueprint,
   homeHeroBlueprint,
   illustrationCardListBlueprint,
   largeTitleSectionBlueprint,
+  markdownViewerBlueprint,
   mediumTitleSectionBlueprint,
   partnerListBlueprint,
   rectangleCardListBlueprint,
@@ -49,7 +51,6 @@ export const componentBlueprints: ComponentBlueprints = {
   'team-member-hero': teamMemberHeroBlueprint,
   'team-member-card': teamMemberCardBlueprint,
   'tags-filter': tagsFilterBlueprint,
-  'feature-list': featureListBlueprint,
   'article-list': articleListBlueprint,
   'solution-list': solutionListBlueprint,
   'service-list': serviceListBlueprint,
@@ -60,7 +61,10 @@ export const componentBlueprints: ComponentBlueprints = {
   'related-partners': relatedPartnersBlueprint,
   'article-content': articleContentBlueprint,
   'background-image': backgroundImageBlueprint,
+  'markdown': markdownViewerBlueprint,
   'home-hero': homeHeroBlueprint,
+  'basic-hero': basicHeroBlueprint,
+  'features-hero': featuresHeroBlueprint,
   'hero-with-image-tiles': heroWithImageTilesBlueprint,
   'rectangle-card-list': rectangleCardListBlueprint
 }
@@ -86,11 +90,13 @@ export const layouts = {
 export function pageRenderer(
   components: Array<ComponentBlueprint>,
   openGraph: PageOpenGraph,
-  layout: string|null
+  layout: string|null,
+  headerDark?: boolean
 ) {
   const Layout = layouts[layout as keyof typeof layouts]?.component
   if (components?.length > 0) {
     components[0].props['isFloating'] = layout ? false : true
+    components[0].props['darkTheme'] = headerDark
   }
   const children = renderComponents(components)
   return (<>