diff --git a/components.198185.json b/components.198185.json
index 32a6aab7..0cb3e162 100644
--- a/components.198185.json
+++ b/components.198185.json
@@ -2526,7 +2526,7 @@
       "name": "proposal-department",
       "display_name": null,
       "created_at": "2023-09-11T15:40:29.996Z",
-      "updated_at": "2023-09-11T15:40:38.569Z",
+      "updated_at": "2023-09-21T09:46:47.753Z",
       "id": 4555221,
       "schema": {
         "title": {
@@ -2539,9 +2539,9 @@
       },
       "image": null,
       "preview_field": null,
-      "is_root": false,
+      "is_root": true,
       "preview_tmpl": null,
-      "is_nestable": true,
+      "is_nestable": false,
       "all_presets": [
         {
           "id": 1897410,
@@ -2845,7 +2845,7 @@
       "name": "proposal-team-entry",
       "display_name": null,
       "created_at": "2023-09-11T15:39:52.162Z",
-      "updated_at": "2023-09-13T16:08:55.251Z",
+      "updated_at": "2023-09-21T09:47:12.652Z",
       "id": 4555220,
       "schema": {
         "team_member": {
@@ -2855,7 +2855,7 @@
           "options": []
         },
         "department": {
-          "type": "bloks",
+          "type": "option",
           "restrict_type": "",
           "restrict_components": true,
           "component_whitelist": ["proposal-department"],
@@ -2863,7 +2863,10 @@
           "maximum": 1,
           "required": true,
           "pos": 1,
-          "key": "department"
+          "key": "department",
+          "use_uuid": true,
+          "source": "internal_stories",
+          "filter_content_type": ["proposal-department"]
         },
         "role": {
           "type": "bloks",
diff --git a/src/components/awards-entry.svelte b/src/components/awards-entry.svelte
new file mode 100644
index 00000000..29a785b2
--- /dev/null
+++ b/src/components/awards-entry.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Button } from '@significa/svelte-ui';
+  import { getImageAttributes } from '$lib/utils/cms';
+  import type { AssetStoryblok } from '$types/bloks';
+
+  export let linkHref: string | undefined;
+  export let image: AssetStoryblok | undefined;
+  export let label: string | undefined;
+  export let name: string | undefined;
+  export let project: string | undefined;
+  export let linkText: string | undefined;
+</script>
+
+<div class="flex w-full flex-col-reverse items-center lg:flex-row">
+  <div class="mb-4 flex w-full items-center lg:mb-0">
+    {#if image?.filename}
+      {@const { alt, src, width, height } = getImageAttributes(image, {
+        size: [120, 0]
+      })}
+      <img class="mr-2 h-auto w-14 rounded-xs bg-background-offset" {src} {alt} {width} {height} />
+    {/if}
+    <div class="ml-4 flex-col">
+      <p class="text-base font-semibold text-foreground-secondary">
+        {label}
+      </p>
+      <p class="text-base font-semibold">{name}</p>
+    </div>
+  </div>
+  <div class="mb-4 w-full lg:mb-0">
+    <p class="text-3xl font-semibold">{project}</p>
+  </div>
+</div>
+<div class="w-1/3">
+  {#if linkHref}
+    <div class="flex-1 justify-end text-foreground-tertiary xl:flex">
+      <Button variant="secondary" arrow>
+        {linkText}
+      </Button>
+    </div>
+  {/if}
+</div>
diff --git a/src/components/clients.svelte b/src/components/clients.svelte
new file mode 100644
index 00000000..125cebd9
--- /dev/null
+++ b/src/components/clients.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { ClientLogoStoryblok } from '$types/bloks';
+  import { theme } from '$lib/stores/theme';
+  import { getImageAttributes } from '$lib/utils/cms';
+
+  export let clients: ClientLogoStoryblok[];
+</script>
+
+<div class="flex flex-wrap justify-center gap-12 p-6">
+  {#each clients as client}
+    {#if client.light_mode?.filename && $theme === 'light'}
+      {@const { src, alt, width, height } = getImageAttributes(client.light_mode)}
+      <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+    {/if}
+
+    {#if client.dark_mode?.filename && $theme === 'dark'}
+      {@const { src, alt, width, height } = getImageAttributes(client.dark_mode)}
+      <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+    {/if}
+  {/each}
+</div>
diff --git a/src/components/pages/services.svelte b/src/components/pages/services.svelte
index aa4378ea..a4ae9fa3 100644
--- a/src/components/pages/services.svelte
+++ b/src/components/pages/services.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Button } from '@significa/svelte-ui';
   import Seo from '$components/seo.svelte';
   import Testimonials from '$components/testimonials.svelte';
   import PreFooter from '$components/pre-footer.svelte';
@@ -7,13 +6,14 @@
   import Hand from './services/illustrations/hand.svelte';
   import Duck from './services/illustrations/duck.svelte';
   import Timeline from './services/timeline.svelte';
-  import { theme } from '$lib/stores/theme';
   import { getAnchorFromCmsLink, getImageAttributes } from '$lib/utils/cms';
   import type { ServicesPageStoryblok } from '$types/bloks';
   import { drawerLinks } from '$lib/actions/drawer-links';
   import clsx from 'clsx';
   import { TrackingEvent, track } from '$lib/track';
   import { page } from '$app/stores';
+  import AwardsEntry from '$components/awards-entry.svelte';
+  import Clients from '$components/clients.svelte';
 
   export let data: ServicesPageStoryblok;
 </script>
@@ -70,40 +70,14 @@
                     }}
                     class="container mx-auto flex flex-col justify-between px-container py-5 lg:flex-row"
                   >
-                    <div class="flex w-full flex-col-reverse items-center lg:flex-row">
-                      <div class="mb-4 flex w-full items-center lg:mb-0">
-                        {#if award.image?.filename}
-                          {@const { alt, src, width, height } = getImageAttributes(award.image, {
-                            size: [120, 0]
-                          })}
-                          <img
-                            class="mr-2 h-auto w-14 rounded-xs bg-background-offset"
-                            {src}
-                            {alt}
-                            {width}
-                            {height}
-                          />
-                        {/if}
-                        <div class="ml-4 flex-col">
-                          <p class="text-base font-semibold text-foreground-secondary">
-                            {award.label}
-                          </p>
-                          <p class="text-base font-semibold">{award.name}</p>
-                        </div>
-                      </div>
-                      <div class="mb-4 w-full lg:mb-0">
-                        <p class="text-3xl font-semibold">{award.project}</p>
-                      </div>
-                    </div>
-                    <div class="w-1/3">
-                      {#if href}
-                        <div class="flex-1 justify-end text-foreground-tertiary xl:flex">
-                          <Button variant="secondary" arrow>
-                            {award.link_text}
-                          </Button>
-                        </div>
-                      {/if}
-                    </div>
+                    <AwardsEntry
+                      linkHref={href}
+                      image={award.image}
+                      label={award.label}
+                      name={award.name}
+                      project={award.project}
+                      linkText={award.link_text}
+                    ></AwardsEntry>
                   </a>
                 </li>
               {/each}
@@ -205,19 +179,7 @@
   <section class=" container mx-auto px-container pb-16 pt-20 lg:pb-20 lg:pt-40">
     <h3 class="text-center text-2xl text-foreground-secondary">{data.clients_title}</h3>
     {#if data.clients}
-      <div class="flex flex-wrap justify-center gap-12 p-6">
-        {#each data.clients as client}
-          {#if client.light_mode?.filename && $theme === 'light'}
-            {@const { src, alt, width, height } = getImageAttributes(client.light_mode)}
-            <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
-          {/if}
-
-          {#if client.dark_mode?.filename && $theme === 'dark'}
-            {@const { src, alt, width, height } = getImageAttributes(client.dark_mode)}
-            <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
-          {/if}
-        {/each}
-      </div>
+      <Clients clients={data.clients}></Clients>
     {/if}
   </section>
 
diff --git a/src/components/testimonials.svelte b/src/components/testimonials.svelte
index 525bf773..0e3ff84f 100644
--- a/src/components/testimonials.svelte
+++ b/src/components/testimonials.svelte
@@ -20,6 +20,7 @@
   export let ctaLink: MultilinkStoryblok | undefined = undefined;
   export let ctaLabel: string | undefined = undefined;
   export let testimonials: RichtextTestimonialStoryblok[] | undefined = undefined;
+  export let hasBorder: boolean | undefined = true;
 
   let scroll: number;
   let testimonialsSection: HTMLElement;
@@ -31,7 +32,7 @@
 
 <svelte:window bind:scrollY={scroll} />
 
-<section class="border-t" bind:this={testimonialsSection}>
+<section class={clsx(hasBorder && 'border-t')} bind:this={testimonialsSection}>
   <div class="container mx-auto px-container pt-16 lg:pt-20">
     <div class="mx-auto flex max-w-xl flex-col items-center">
       <svelte:element this={as} class="text-center text-5xl text-foreground-secondary"
diff --git a/src/lib/i18n/data.json b/src/lib/i18n/data.json
index 7858f3b0..43f2c886 100644
--- a/src/lib/i18n/data.json
+++ b/src/lib/i18n/data.json
@@ -102,5 +102,34 @@
   "proposals.hero.client": "Client",
   "proposals.hero.createdby": "Created by",
   "proposals.hero.date": "Date",
-  "proposals.nav.versions": "Versions"
+  "proposals.nav.versions": "Versions",
+  "proposals.scope.delivarable": "Delivarable",
+  "proposals.scope.service": "service",
+  "proposals.scope.multiple-features": "Multiple Features",
+  "proposals.show": "Show",
+  "proposals.hide": "Hide",
+  "proposals.team.department": "Department",
+  "proposals.team.team-member": "Team Member",
+  "proposals.team.role": "Role",
+  "proposals.team.rate": "Rate",
+  "proposals.included": "Included",
+  "proposals.scope.features": "Features",
+  "proposals.estimates.area": "Area",
+  "proposals.estimates.phases": "Phases",
+  "proposals.estimates.team": "Team",
+  "proposals.estimates.duration": "Duration",
+  "proposals.estimates.predicted-cost": "Predicted Cost",
+  "proposals.estimates.phase": "Phase",
+  "proposals.estimates.people": "People",
+  "proposals.estimates.person": "Person",
+  "proposals.estimates.subtotal": "Subtotal",
+  "proposals.estimates.discount": "Discount",
+  "proposals.estimates.gran-total": "Gran Total",
+  "proposals.reply.description": "Ready to start a wonderful product journey with us?",
+  "proposals.testimonials": "Testimonials",
+  "proposals.testimonials.description": "How it feels to work with Significa team.",
+  "proposals.clients.description": "Some clients we work with",
+  "proposals.awards": "Awards",
+  "proposals.awards.description": "Celebrating great work achievements.",
+  "proposals.projects": "Projects"
 }
diff --git a/src/lib/i18n/types.ts b/src/lib/i18n/types.ts
index d51e4003..44beb7bd 100644
--- a/src/lib/i18n/types.ts
+++ b/src/lib/i18n/types.ts
@@ -102,7 +102,36 @@ export const TranslationKeys = [
   'proposals.hero.client',
   'proposals.hero.createdby',
   'proposals.hero.date',
-  'proposals.nav.versions'
+  'proposals.nav.versions',
+  'proposals.scope.delivarable',
+  'proposals.scope.service',
+  'proposals.scope.multiple-features',
+  'proposals.show',
+  'proposals.hide',
+  'proposals.team.department',
+  'proposals.team.team-member',
+  'proposals.team.role',
+  'proposals.team.rate',
+  'proposals.included',
+  'proposals.scope.features',
+  'proposals.estimates.area',
+  'proposals.estimates.phases',
+  'proposals.estimates.team',
+  'proposals.estimates.duration',
+  'proposals.estimates.predicted-cost',
+  'proposals.estimates.phase',
+  'proposals.estimates.people',
+  'proposals.estimates.person',
+  'proposals.estimates.subtotal',
+  'proposals.estimates.discount',
+  'proposals.estimates.gran-total',
+  'proposals.reply.description',
+  'proposals.testimonials',
+  'proposals.testimonials.description',
+  'proposals.clients.description',
+  'proposals.awards',
+  'proposals.awards.description',
+  'proposals.projects'
 ] as const;
 
 export type TranslationKey = (typeof TranslationKeys)[number];
diff --git a/src/lib/utils/currency.ts b/src/lib/utils/currency.ts
new file mode 100644
index 00000000..7f875138
--- /dev/null
+++ b/src/lib/utils/currency.ts
@@ -0,0 +1,4 @@
+export const formatter = new Intl.NumberFormat('pt-PT', {
+  style: 'currency',
+  currency: 'EUR'
+});
diff --git a/src/lib/utils/proposalTables.ts b/src/lib/utils/proposalTables.ts
new file mode 100644
index 00000000..ff186d10
--- /dev/null
+++ b/src/lib/utils/proposalTables.ts
@@ -0,0 +1,44 @@
+export function getColumnsWidthClassName(
+  col: 'first' | 'central' | 'last' | 'sticky' | 'last-empty'
+) {
+  switch (col) {
+    case 'first':
+      return 'lg:w-[calc(var(--container-margin)+var(--section-title-width)+theme(padding.container)+3rem)]';
+    case 'central':
+      return 'lg:w-[--central-cols-width]';
+    case 'last':
+      return 'lg:w-[calc(var(--container-margin)+var(--last-col-content-width)+theme(padding.container))]';
+    case 'sticky':
+      return 'w-[--sticky-col-content-width]';
+    case 'last-empty':
+      return 'lg:w-[calc(var(--container-margin)+theme(padding.container))]';
+    default:
+      break;
+  }
+}
+
+export function getContainersPaddingClassName(side: 'left' | 'right') {
+  switch (side) {
+    case 'left':
+      return 'pl-[calc(theme(padding.container)+var(--container-margin))]';
+    case 'right':
+      return 'pr-[calc(theme(padding.container)+var(--container-margin))]';
+    default:
+      break;
+  }
+}
+
+export function getHeaderCellTextClassName(side: 'left' | 'right') {
+  switch (side) {
+    case 'left':
+      return 'text-xs uppercase tracking-wider text-foreground-secondary text-left';
+    case 'right':
+      return 'text-xs uppercase tracking-wider text-foreground-secondary text-right';
+    default:
+      break;
+  }
+}
+
+export function getStickyColClassName() {
+  return 'right-0 sticky md:relative bg-background md:bg-transparent drop-shadow-md md:drop-shadow-none';
+}
diff --git a/src/routes/(proposals)/proposal/[slug]/+page.server.ts b/src/routes/(proposals)/proposal/[slug]/+page.server.ts
index 3f4bc62e..22ceb139 100644
--- a/src/routes/(proposals)/proposal/[slug]/+page.server.ts
+++ b/src/routes/(proposals)/proposal/[slug]/+page.server.ts
@@ -1,6 +1,7 @@
 import { STORYBLOK_PROPOSALS_TOKEN } from '$env/static/private';
 import { PREVIEW_COOKIE_KEY } from '$lib/constants';
 import { getStoryblok } from '$lib/storyblok';
+import { fetchPage } from '$lib/content';
 import type { ProposalStoryblok } from '$types/bloks.js';
 import type { ISbStoryData } from '@storyblok/js';
 
@@ -28,10 +29,13 @@ export const load = async ({ cookies, fetch, params, url }) => {
   }
 
   let res;
+  let services;
+  let home;
 
   try {
     res = await storyblok.get('cdn/stories/' + url.pathname, {
-      version
+      version,
+      resolve_relations: ['proposal-team-entry.department']
     });
   } catch (error) {
     if (isStatusError(error) && error.status === 404) {
@@ -47,7 +51,31 @@ export const load = async ({ cookies, fetch, params, url }) => {
     return failAuthentication();
   }
 
-  return { story };
+  try {
+    services = await fetchPage({
+      slug: 'services',
+      version: cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published',
+      fetch,
+      url
+    });
+  } catch (err) {
+    console.error('Fetching services for proposals: ' + err);
+    throw err;
+  }
+
+  try {
+    home = await fetchPage({
+      slug: '',
+      version: cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published',
+      fetch,
+      url
+    });
+  } catch (err) {
+    console.error('Fetching home for proposals: ' + err);
+    throw err;
+  }
+
+  return { story, services, home };
 };
 
 export const actions = {
diff --git a/src/routes/(proposals)/proposal/[slug]/+page.svelte b/src/routes/(proposals)/proposal/[slug]/+page.svelte
index 1823aa74..554ddac2 100644
--- a/src/routes/(proposals)/proposal/[slug]/+page.svelte
+++ b/src/routes/(proposals)/proposal/[slug]/+page.svelte
@@ -5,10 +5,12 @@
   export let data;
 
   const proposal = data?.story?.content;
+  const services = data?.services?.story?.content?.page[0];
+  const home = data?.home?.story.content.page[0];
 </script>
 
 {#if data?.story && proposal}
-  <ProposalPage {proposal} />
+  <ProposalPage {proposal} {services} {home} />
 {:else}
   <PasswordPage error={data.error} />
 {/if}
diff --git a/src/routes/(proposals)/proposal/[slug]/hero.svelte b/src/routes/(proposals)/proposal/[slug]/hero.svelte
index 12846cf8..a50e1ff0 100644
--- a/src/routes/(proposals)/proposal/[slug]/hero.svelte
+++ b/src/routes/(proposals)/proposal/[slug]/hero.svelte
@@ -8,7 +8,7 @@
   export let date: string | undefined;
 </script>
 
-<div class="flex-1 pt-10 md:pt-14 lg:pt-20">
+<div class="container mx-auto px-container flex-1 pt-10 md:pt-14 lg:pt-20">
   <div class="max-w-2xl">
     <h2 class="text-7xl">{proposal.title}</h2>
     <h2 class="text-7xl text-foreground-secondary">{proposal.description}</h2>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-awards.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-awards.svelte
new file mode 100644
index 00000000..311a8ca6
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-awards.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { drawerLinks } from '$lib/actions/drawer-links';
+  import clsx from 'clsx';
+  import { getAnchorFromCmsLink } from '$lib/utils/cms';
+  import type { AwardsEntryStoryblok } from '$types/bloks';
+  import { t } from '$lib/i18n';
+  import AwardsEntry from '$components/awards-entry.svelte';
+
+  export let awards: AwardsEntryStoryblok[];
+</script>
+
+<section class=" pt-20 lg:pt-28">
+  <div class="container mx-auto flex px-container">
+    <div class="xl:max-w-3xl lg:w-1/4">
+      <h2 class="text-4xl">{t('proposals.awards')}.</h2>
+      <p class="text-4xl text-foreground-secondary">{t('proposals.awards.description')}</p>
+    </div>
+  </div>
+
+  <div class="mt-10 md:mt-14 lg:mt-20 justify-between gap-12 lg:flex">
+    <div class="flex flex-1 flex-col items-start">
+      <div class="w-full flex-1">
+        <ul use:drawerLinks>
+          {#each awards as award}
+            {@const { href, target, rel } = getAnchorFromCmsLink(award.link)}
+            <li
+              class={clsx(
+                'block border-b first:border-t',
+                href ? 'transition-colors hover:bg-foreground-tertiary/10' : ''
+              )}
+            >
+              <a
+                {href}
+                {target}
+                {rel}
+                class="container mx-auto flex flex-col justify-between px-container py-5 lg:flex-row"
+              >
+                <AwardsEntry
+                  linkHref={href}
+                  image={award.image}
+                  label={award.label}
+                  name={award.name}
+                  project={award.project}
+                  linkText={award.link_text}
+                ></AwardsEntry>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-clients.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-clients.svelte
new file mode 100644
index 00000000..7cc5323c
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-clients.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { ClientLogoStoryblok } from '$types/bloks';
+  import { t } from '$lib/i18n';
+  import Clients from '$components/clients.svelte';
+
+  export let clients: ClientLogoStoryblok[];
+</script>
+
+<section class=" container mx-auto px-container pb-16 pt-20 lg:pb-20 lg:pt-40">
+  <h3 class="text-center text-2xl text-foreground-secondary">
+    {t('proposals.clients.description')}
+  </h3>
+
+  <Clients {clients}></Clients>
+</section>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-estimates.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-estimates.svelte
new file mode 100644
index 00000000..69e11ea5
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-estimates.svelte
@@ -0,0 +1,364 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+  import clsx from 'clsx';
+  import {
+    getColumnsWidthClassName,
+    getContainersPaddingClassName,
+    getHeaderCellTextClassName,
+    getStickyColClassName
+  } from '$lib/utils/proposalTables';
+  import type { ProposalEstimateEntryStoryblok, ProposalTeamEntryStoryblok } from '$types/bloks';
+  import { Tag } from '@significa/svelte-ui';
+  import { formatter } from '$lib/utils/currency';
+
+  export let data: ProposalEstimateEntryStoryblok[];
+  export let team: ProposalTeamEntryStoryblok[];
+  export let discount: string | undefined;
+  export let windowWidth: number;
+  export let containerMargin: number;
+  export let sectionTitleWidth: number;
+
+  let firstColWidth: number;
+  let stickyColWidth: number;
+  let stickyColContentWidth: number;
+  let emptyColWidth: number;
+
+  let teamInfoMap = new Map();
+  let areaInfoMap = new Map();
+
+  let subtotal: number = 0;
+  let totalDuration: number = 0;
+  let discountedValue: number = 0;
+  let granTotal: number = 0;
+
+  team.forEach((member) => {
+    teamInfoMap.set(member.team_member.member.name, {
+      role: member.role[0].title,
+      rate_type: member.rate_type,
+      rate_value: member.rate_value
+    });
+  });
+
+  data.forEach((entry) => {
+    let areaCounter = {
+      phases: entry.phases.length,
+      team: 0,
+      duration: 0,
+      cost: 0,
+      percentage: 0
+    };
+
+    entry.phases.forEach((phase) => {
+      areaCounter.team = areaCounter.team + phase.team.length;
+
+      phase.team.forEach((team) => {
+        areaCounter.duration = areaCounter.duration + +team.duration;
+        const memberInfo = teamInfoMap.get(team.team_member.member.name);
+        if (memberInfo.rate_type == 'value') {
+          areaCounter.cost = areaCounter.cost + +team.duration * +memberInfo.rate_value;
+        } else if (memberInfo.rate_type == 'percentage') {
+          areaCounter.percentage = areaCounter.percentage + +memberInfo.rate_value;
+        }
+      });
+    });
+
+    areaCounter.cost = areaCounter.cost + areaCounter.cost * (areaCounter.percentage / 100);
+    subtotal = subtotal + areaCounter.cost;
+    totalDuration = totalDuration + areaCounter.duration;
+    areaInfoMap.set(entry.title, areaCounter);
+  });
+
+  if (discount) {
+    discountedValue = (subtotal * +discount) / 100;
+    granTotal = subtotal - discountedValue;
+  } else {
+    granTotal = subtotal;
+  }
+
+  stickyColContentWidth = Math.max((('' + subtotal).length * 135) / 5.5, 175);
+
+  $: centralColsWidth = (windowWidth - firstColWidth - stickyColWidth - emptyColWidth) / 3;
+</script>
+
+<div
+  class="overflow-x-scroll md:overflow-hidden"
+  style="--container-margin: {containerMargin}px;
+  --section-title-width: {sectionTitleWidth}px;
+  --central-cols-width: {centralColsWidth}px;
+  --sticky-col-content-width: {stickyColContentWidth}px;"
+>
+  <table class="table-fixed w-[750px] md:w-full">
+    <thead>
+      <tr class="border-b border-foreground-secondary">
+        <!-- Area Column -->
+        <th
+          class={clsx(
+            getColumnsWidthClassName('first'),
+            getContainersPaddingClassName('left'),
+            'pr-4 lg:pr-12 py-2.5'
+          )}
+          bind:clientWidth={firstColWidth}
+        >
+          <p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.estimates.area')}
+          </p>
+        </th>
+        <!-- Phases Column -->
+        <th class={clsx(getColumnsWidthClassName('central'), 'pr-4 lg:pr-12 py-2.5')}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.estimates.phases')}
+          </p>
+        </th>
+        <!-- Team Column-->
+        <th class={clsx(getColumnsWidthClassName('central'), 'py-2.5')}>
+          <p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.estimates.team')}
+          </p>
+        </th>
+        <!-- Duration Column-->
+        <th class={clsx(getColumnsWidthClassName('central'), 'lg:pl-12 pl-4 py-2.5 pr-4 md:pr-0')}>
+          <p class={clsx(getHeaderCellTextClassName('right'))}>
+            {t('proposals.estimates.duration')}
+          </p>
+        </th>
+        <!-- Predicted Cost Column-->
+        <th
+          bind:clientWidth={stickyColWidth}
+          class={clsx(
+            getColumnsWidthClassName('sticky'),
+            getContainersPaddingClassName('right'),
+            'lg:pl-12 pl-4 lg:pr-0 py-2.5',
+            getStickyColClassName()
+          )}
+        >
+          <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+          <p class={clsx(getHeaderCellTextClassName('right'))}>
+            {t('proposals.estimates.predicted-cost')}
+          </p>
+        </th>
+        <!-- Empty Column-->
+        <th
+          class={clsx(
+            getContainersPaddingClassName('right'),
+            getColumnsWidthClassName('last-empty'),
+            'bg-background md:bg-transparent drop-shadow-md md:drop-shadow-none',
+            'hidden lg:block'
+          )}
+          bind:clientWidth={emptyColWidth}
+        >
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each data as entry, i}
+        {@const areaInfo = areaInfoMap.get(entry.title)}
+        {#each entry.phases as phase, j}
+          {#each phase.team as team, k}
+            {@const teamMemberInfo = teamInfoMap.get(team.team_member.member.name)}
+            <tr
+              class={clsx(
+                (j !== entry.phases.length - 1 || k !== phase.team.length - 1) &&
+                  'border-b border-foreground-tertiary',
+                i % 2 ? 'bg-background-offset ' : 'bg-background'
+              )}
+            >
+              <!-- Area Cell -->
+              {#if k == 0 && j == 0}
+                <td
+                  rowspan={areaInfo.team + 1}
+                  class={clsx(
+                    getContainersPaddingClassName('left'),
+                    'py-4 pr-4 lg:pr-12 align-top'
+                  )}
+                >
+                  <span
+                    style="background-color: {entry.color}"
+                    class="w-[8px] h-[8px] rounded-full inline-block mt-[9px] ml-[-16px] absolute"
+                  ></span>
+                  <p class="font-bold">
+                    {entry.title}.
+                  </p>
+                  <p class="text-foreground-secondary">
+                    {entry.description}
+                  </p>
+                </td>
+              {/if}
+              <!-- Phases Cell -->
+              {#if k == 0}
+                <td rowspan={phase.team.length} class={'pr-4 lg:pr-12 py-4  align-top'}>
+                  <p class="font-bold">
+                    {phase.title}.
+                  </p>
+                  <p class="text-foreground-secondary">
+                    {phase.description}
+                  </p>
+                </td>
+              {/if}
+              <!-- Team Cell -->
+              <td class={'py-4  align-top'}>
+                {#if teamMemberInfo}
+                  {teamMemberInfo.role}
+                {/if}
+              </td>
+              <!-- Duration Cell -->
+              <td class={'pl-4 lg:pl-12 py-4 pr-4 md:pr-0 align-top text-right tabular-nums'}>
+                {team.duration}
+              </td>
+              <!-- Predicted Cost Cell -->
+              <td
+                class={clsx(
+                  getStickyColClassName(),
+                  getContainersPaddingClassName('right'),
+                  'lg:pl-12 pl-4 py-4 lg:pr-0',
+                  i % 2 ? 'bg-background-offset' : 'bg-background',
+                  'align-top text-right tabular-nums'
+                )}
+              >
+                <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+                {#if teamMemberInfo}
+                  {#if teamMemberInfo.rate_type === 'percentage' && teamMemberInfo.rate_value}
+                    <p>
+                      {teamMemberInfo.rate_value} %
+                    </p>
+                  {:else if teamMemberInfo.rate_type === 'value' && teamMemberInfo.rate_value}
+                    <p>
+                      {formatter.format(+team.duration * +teamMemberInfo.rate_value)}
+                    </p>
+                  {:else if teamMemberInfo.rate_type === 'free'}
+                    <p>{t('proposals.included')}</p>
+                  {/if}
+                {/if}
+              </td>
+              <!-- Empty Cell -->
+              {#if k == 0 && j == 0}
+                <td rowspan={areaInfo.team + 1} class="hidden lg:table-cell"> </td>
+              {/if}
+            </tr>
+          {/each}
+        {/each}
+        <!-- AREA SUMS -->
+        <tr
+          class={clsx(
+            'border-b border-b-foreground-tertiary',
+            i % 2 ? 'bg-background-offset' : 'bg-background'
+          )}
+        >
+          <!-- Total Phases Cell -->
+          <td
+            class={'lg:pr-12 pr-4 py-4 border-t border-t-foreground-secondary align-top tabular-nums'}
+          >
+            {areaInfo.phases}
+            {#if areaInfo.phases == 1}
+              {t('proposals.estimates.phases')}
+            {:else}
+              {t('proposals.estimates.phase')}
+            {/if}
+          </td>
+          <!-- Total Team Cell -->
+          <td class={'py-4 align-top tabular-nums border-t border-t-foreground-secondary'}>
+            {areaInfo.team}
+            {#if areaInfo.team == 1}
+              {t('proposals.estimates.person')}
+            {:else}
+              {t('proposals.estimates.people')}
+            {/if}
+          </td>
+          <!-- Total Duration Cell -->
+          <td
+            class={'lg:pl-12 pl-4 py-4  align-top text-right font-bold tabular-nums pr-4 md:pr-0 border-t border-t-foreground-secondary'}
+          >
+            {areaInfo.duration}
+          </td>
+          <!-- Total Predicted Cost Cell -->
+          <td
+            class={clsx(
+              getStickyColClassName(),
+              getContainersPaddingClassName('right'),
+              'lg:pl-12 pl-4 py-4 lg:pr-0',
+              'align-top text-right font-bold tabular-nums',
+              'border-t border-t-foreground-secondary',
+              i % 2 ? 'bg-background-offset' : 'bg-background'
+            )}
+          >
+            <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+            {formatter.format(areaInfo.cost)}
+          </td>
+        </tr>
+      {/each}
+      <!-- TOTAL SUMS -->
+      <tr class={'border-b border-foreground-tertiary bg-background'}>
+        <td rowspan="3"> </td>
+        <td rowspan="3"> </td>
+        <!-- Subtotal Label Cell -->
+        <td class={'py-4 align-top'}>
+          {t('proposals.estimates.subtotal')}
+        </td>
+        <!-- Total Duration Cell -->
+        <td class={'lg:pl-12 pl-4 py-4 pr-4 md:pr-0 align-top text-right tabular-nums'}>
+          {totalDuration}
+        </td>
+        <!-- Subtotal Cell -->
+        <td
+          class={clsx(
+            getStickyColClassName(),
+            getContainersPaddingClassName('right'),
+            'lg:pl-12 pl-4 py-4 lg:pr-0',
+            'align-top text-right tabular-nums'
+          )}
+        >
+          <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+          {formatter.format(subtotal)}
+        </td>
+        <!-- Empty Cell -->
+        <td class="hidden lg:table-cell" rowspan="3"> </td>
+      </tr>
+      {#if discount}
+        <tr class={'border-b border-foreground-tertiary bg-background'}>
+          <!-- Discount Label Cell -->
+          <td class={clsx('py-4  align-top')}>
+            <div class="flex gap-2 items-center">
+              <p>{t('proposals.estimates.discount')}</p>
+              <Tag class="cursor-default" label={discount + '%'} />
+            </div>
+          </td>
+          <!-- - Cell -->
+          <td class={'lg:pl-12 pl-4 py-4 pr-4 md:pr-0 align-top text-right'}> - </td>
+          <!-- Discount Cell -->
+          <td
+            class={clsx(
+              getStickyColClassName(),
+              getContainersPaddingClassName('right'),
+              'lg:pl-12 pl-4 py-4 lg:pr-0 align-top text-right',
+              'tabular-nums'
+            )}
+          >
+            <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+            {formatter.format(discountedValue)}
+          </td>
+        </tr>
+      {/if}
+      <tr class={'border-b border-foreground-tertiary bg-background'}>
+        <!-- Gran Total Label Cell -->
+        <td class={clsx('py-4  align-top font-bold')}>
+          {t('proposals.estimates.gran-total')}
+        </td>
+        <!-- Total Duration Cell -->
+        <td class={'lg:pl-12 pl-4 py-4 align-top text-right font-bold tabular-nums pr-4 md:pr-0'}>
+          {totalDuration}
+        </td>
+        <!-- Gran Total Cell -->
+        <td
+          class={clsx(
+            getStickyColClassName(),
+            getContainersPaddingClassName('right'),
+            'lg:pl-12 pl-4 py-4 lg:pr-0',
+            'font-bold tabular-nums align-top text-right'
+          )}
+        >
+          <div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+          {formatter.format(granTotal)}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-navigation.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-navigation.svelte
index 1650e34e..54e1be0e 100644
--- a/src/routes/(proposals)/proposal/[slug]/proposal-navigation.svelte
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-navigation.svelte
@@ -111,7 +111,7 @@
 
       <div class="w-full">
         {#if versions.length > 1}
-          <div class="md:hidden block mt-8">
+          <div class="md:hidden block mt-10">
             <p class="mb-2 text-xs font-medium uppercase tracking-wider text-foreground-secondary">
               {t('proposals.nav.versions')}
             </p>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-page.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-page.svelte
index 2151ff4a..12e22623 100644
--- a/src/routes/(proposals)/proposal/[slug]/proposal-page.svelte
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-page.svelte
@@ -1,44 +1,92 @@
 <script lang="ts">
-  import type { ProposalStoryblok } from '$types/bloks';
+  import type { HomePageStoryblok, ProposalStoryblok, ServicesPageStoryblok } from '$types/bloks';
   import { slugify } from '$lib/utils/paths';
   import Hero from './hero.svelte';
   import ProposalNavigation from './proposal-navigation.svelte';
   import RichText from '$components/rich-text.svelte';
+  import ProposalScope from './proposal-scope.svelte';
+  import ProposalTeam from './proposal-team.svelte';
+  import ProposalEstimates from './proposal-estimates.svelte';
+  import ProposalAwards from './proposal-awards.svelte';
+  import ProposalClients from './proposal-clients.svelte';
+  import ProposalTestimonials from './proposal-testimonials.svelte';
+  import ProposalProjects from './proposal-projects.svelte';
+  import ProposalReplyBlock from './proposal-reply-block.svelte';
 
   export let proposal: ProposalStoryblok;
+  export let services: ServicesPageStoryblok;
+  export let home: HomePageStoryblok;
+
   const versions = proposal?.versions || [];
   let version = versions.length > 0 ? versions[0].version_name : '';
 
   $: content = versions.find((v) => v.version_name === version);
   $: sections = (content?.body || []).map((b) => b.title || '').filter(Boolean);
+
+  let sectionTitleWidth;
+  let containerWidth: number;
+  let windowWidth: number;
+
+  $: containerMargin = (windowWidth - containerWidth) / 2;
 </script>
 
+<div class="container mx-auto" bind:clientWidth={containerWidth}></div>
+<div class="w-full" bind:clientWidth={windowWidth}></div>
+
 <ProposalNavigation
   {sections}
   versions={versions.map((version) => version.version_name)}
   bind:version
 />
-<div class="container mx-auto px-container">
-  <Hero {proposal} date={content?.date}></Hero>
-  {#each content?.body || [] as section}
-    <section id={slugify(section.title)} class="pt-20 lg:pt-28">
-      <div class="flex flex-col gap-12 lg:flex-row">
-        <h2 class="text-4xl lg:w-1/2">{section.title}</h2>
-
-        <div class="w-full">
-          <RichText class="lg:w-2/3" doc={section.body} />
-        </div>
-      </div>
 
+<Hero {proposal} date={content?.date}></Hero>
+{#each content?.body || [] as section}
+  <section id={slugify(section.title)} class=" pt-20 lg:pt-28">
+    <div class="container mx-auto px-container flex flex-col gap-12 lg:flex-row">
+      <h2 bind:clientWidth={sectionTitleWidth} class="text-4xl lg:w-1/2">{section.title}.</h2>
+      <div class="w-full">
+        <RichText class="lg:w-2/3" doc={section.body} />
+      </div>
+    </div>
+    <div class="pt-20">
       {#if section.data === 'scope' && content?.scope}
-        <!-- TODO: <ProposalScope data={content.scope} /> -->
-      {:else if section.data === 'team' && content?.estimates}
-        <!-- TODO: <ProposalTeam data={content.scope} /> -->
+        <ProposalScope data={content.scope} {windowWidth} {containerMargin} {sectionTitleWidth} />
+      {:else if section.data === 'team' && content?.team}
+        <ProposalTeam data={content.team} {windowWidth} {containerMargin} {sectionTitleWidth} />
       {:else if section.data === 'estimates' && content?.estimates}
-        <!-- TODO: <ProposalEstimates data={content.scope} /> -->
-      {:else if section.data === 'timeline' && content?.estimates}
-        <!-- TODO: <ProposalTimeline data={content.scope} /> -->
+        <ProposalEstimates
+          data={content.estimates}
+          team={content.team}
+          discount={content.discount_percentage}
+          {windowWidth}
+          {containerMargin}
+          {sectionTitleWidth}
+        />
+        <!-- FIXME: Implement timeline -->
+        <!-- {:else if section.data === 'timeline'} -->
       {/if}
-    </section>
-  {/each}
-</div>
+    </div>
+  </section>
+{/each}
+
+<ProposalReplyBlock></ProposalReplyBlock>
+
+<!-- Awards -->
+{#if services.awards?.length}
+  <ProposalAwards awards={services.awards}></ProposalAwards>
+{/if}
+
+<!-- Projects -->
+{#if home.projects?.length}
+  <ProposalProjects projects={home.projects}></ProposalProjects>
+{/if}
+
+<!-- Testimonials -->
+{#if services.testimonials?.length}
+  <ProposalTestimonials testimonials={services.testimonials}></ProposalTestimonials>
+{/if}
+
+<!-- Clients -->
+{#if services.clients?.length}
+  <ProposalClients clients={services.clients}></ProposalClients>
+{/if}
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-projects.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-projects.svelte
new file mode 100644
index 00000000..21679304
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-projects.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import ProjectEntry from '$components/project-entry.svelte';
+  import type { ProjectStoryblok } from '$types/bloks';
+  import type { ISbStoryData } from '@storyblok/js';
+  import { t } from '$lib/i18n';
+
+  export let projects: ISbStoryData<ProjectStoryblok>[];
+</script>
+
+<section class="mt-10 md:mt-14 lg:mt-20">
+  <div class="container mx-auto px-container">
+    <div class="xl:max-w-3xl lg:w-1/3">
+      <h2 class="text-4xl">{t('proposals.projects')}.</h2>
+    </div>
+  </div>
+  <div class="mt-4 md:mt-6 lg:mt-8">
+    {#each projects as project}
+      <ProjectEntry {project} />
+    {/each}
+  </div>
+</section>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-reply-block.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-reply-block.svelte
new file mode 100644
index 00000000..79a8a7b4
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-reply-block.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Button } from '@significa/svelte-ui';
+  import { t } from '$lib/i18n';
+</script>
+
+<section class="container mx-auto px-container mt-20 lg:mt-28">
+  <div class="bg-black flex items-start justify-between rounded-lg">
+    <div class="md:w-1/2 2xl:w-1/3 p-12">
+      <div>
+        <h3 class="text-4xl text-white">{t('proposals.reply.description')}</h3>
+      </div>
+      <!-- FIXME: this button should do something-->
+      <Button class="mt-10 bg-white text-black">{t('proposals.nav.action.long')}</Button>
+    </div>
+    <!-- FIXME: Add physics illustrations -->
+  </div>
+</section>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-scope.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-scope.svelte
new file mode 100644
index 00000000..f43ea6bb
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-scope.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+  import clsx from 'clsx';
+  import {
+    getColumnsWidthClassName,
+    getContainersPaddingClassName,
+    getHeaderCellTextClassName
+  } from '$lib/utils/proposalTables';
+  import type { ProposalScopeEntryStoryblok } from '$types/bloks';
+  import { Button, Tag } from '@significa/svelte-ui';
+  import { fade, slide } from 'svelte/transition';
+  import { circOut } from 'svelte/easing';
+
+  export let data: ProposalScopeEntryStoryblok[];
+  export let windowWidth: number;
+  export let containerMargin: number;
+  export let sectionTitleWidth: number;
+
+  let isShowingFeatures = Array(data.length).fill(false);
+
+  let lastColWidth: number;
+  let firstColWidth: number;
+
+  $: centralColsWidth = (windowWidth - lastColWidth - firstColWidth) / 2;
+</script>
+
+<div
+  class="overflow-x-scroll md:overflow-hidden"
+  style="--container-margin: {containerMargin}px;
+  --section-title-width: {sectionTitleWidth}px;
+  --central-cols-width: {centralColsWidth}px;
+  --last-col-content-width: 75px;"
+>
+  <table class="table-fixed w-[750px] md:w-full">
+    <thead>
+      <tr class="border-b border-foreground-secondary">
+        <!-- Delivarable Column -->
+        <th
+          class={clsx(
+            getContainersPaddingClassName('left'),
+            getColumnsWidthClassName('first'),
+            'pr-4 lg:pr-12 py-2.5'
+          )}
+          bind:clientWidth={firstColWidth}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.scope.delivarable')}
+          </p></th
+        >
+        <!-- Service Column-->
+        <th class={clsx(getColumnsWidthClassName('central'), 'pr-4 lg:pr-12 py-2.5')}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.scope.service')}
+          </p></th
+        >
+        <!-- Features Column-->
+        <th
+          class={clsx(
+            getColumnsWidthClassName('central'),
+            'lg:pr-12 py-2.5',
+            getContainersPaddingClassName('right')
+          )}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.scope.features')}
+          </p></th
+        >
+        <!-- Show Column -->
+        <th
+          class={clsx(
+            getContainersPaddingClassName('right'),
+            getColumnsWidthClassName('last'),
+            'hidden lg:block pl-4 lg:pl-12 py-2.5'
+          )}
+          bind:clientWidth={lastColWidth}
+        ></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each data as entry, i}
+        {@const features = entry.features?.split('\n').filter(Boolean) || []}
+        <tr class="border-b border-foreground-tertiary even:bg-background-offset">
+          <!-- Delivarable Cell -->
+          <td class={clsx(getContainersPaddingClassName('left'), 'py-4 pr-4 lg:pr-12 align-top')}>
+            <p class="font-bold">
+              {entry.title}.
+            </p>
+            <p class="text-foreground-secondary">
+              {entry.description}
+            </p>
+            <Button
+              class="lg:hidden block mt-3"
+              variant="secondary"
+              size="sm"
+              on:click={() => {
+                isShowingFeatures[i] = !isShowingFeatures[i];
+              }}
+            >
+              {isShowingFeatures[i] ? t('proposals.hide') : t('proposals.show')}
+            </Button>
+          </td>
+          <!-- Service Cell -->
+          <td class="pr-4 lg:pr-12 py-4 align-top">
+            <div class="flex flex-wrap gap-2">
+              {#each entry.services || [] as service}
+                <Tag class="cursor-default" label={service} />
+              {/each}
+            </div>
+          </td>
+          <!-- Features Cell -->
+          <td class={clsx(getContainersPaddingClassName('right'), 'lg:pr-12 align-top')}>
+            <p
+              class={clsx(
+                'border-t border-foreground-secondary py-4 -mt-0.5 transition-colors',
+                isShowingFeatures[i] ? 'text-foreground-secondary' : ''
+              )}
+            >
+              {t('proposals.scope.multiple-features')}
+            </p>
+            {#if isShowingFeatures[i]}
+              <div transition:slide={{ duration: 400, easing: circOut }}>
+                {#each features as feature}
+                  <p
+                    transition:fade|global={{ duration: 200 }}
+                    class="py-4 border-b last:border-none"
+                  >
+                    {feature}
+                  </p>
+                {/each}
+              </div>
+            {/if}
+          </td>
+          <!-- Show Cell -->
+          <td
+            class={clsx(
+              getContainersPaddingClassName('right'),
+              'hidden lg:table-cell align-top text-right py-4'
+            )}
+            ><Button
+              variant="secondary"
+              size="sm"
+              class="w-16"
+              on:click={() => {
+                isShowingFeatures[i] = !isShowingFeatures[i];
+              }}
+            >
+              {isShowingFeatures[i] ? t('proposals.hide') : t('proposals.show')}
+            </Button></td
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-team.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-team.svelte
new file mode 100644
index 00000000..72a27c57
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-team.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  import { t } from '$lib/i18n';
+  import type { ProposalTeamEntryStoryblok, ProposalDepartmentStoryblok } from '$types/bloks';
+  import {
+    getColumnsWidthClassName,
+    getContainersPaddingClassName,
+    getHeaderCellTextClassName,
+    getStickyColClassName
+  } from '$lib/utils/proposalTables';
+  import { formatter } from '$lib/utils/currency';
+  import { Link } from '@significa/svelte-ui';
+  import { drawerLinks } from '$lib/actions/drawer-links';
+
+  export let data: ProposalTeamEntryStoryblok[];
+  export let windowWidth: number;
+  export let containerMargin: number;
+  export let sectionTitleWidth: number;
+
+  let firstColWidth: number;
+  let lastColWidth: number;
+  let lastColContentWidth: number;
+  let emptyColWidth: number;
+
+  $: centralColsWidth = (windowWidth - firstColWidth - lastColWidth - emptyColWidth) / 2;
+
+  let rateMaxCharacters = Math.max(...data.map((a) => a.rate_value?.length || 0));
+  lastColContentWidth = Math.max((rateMaxCharacters * 135) / 4.5, 175);
+
+  let dataMap = new Map();
+  let departmentsInfo: ProposalDepartmentStoryblok[] = [];
+
+  data.forEach(({ department, ...entryNoDepartment }) => {
+    if (dataMap.has(department.name)) {
+      dataMap.set(department.name, [...dataMap.get(department.name), entryNoDepartment]);
+    } else {
+      dataMap.set(department.name, [entryNoDepartment]);
+      departmentsInfo.push(department);
+    }
+  });
+</script>
+
+<div
+  class="overflow-x-scroll md:overflow-hidden"
+  style="--container-margin: {containerMargin}px;
+  --section-title-width: {sectionTitleWidth}px;
+  --central-cols-width: {centralColsWidth}px;
+  --sticky-col-content-width: {lastColContentWidth}px;"
+>
+  <table class="table-fixed w-[750px] md:w-full">
+    <thead>
+      <tr class="border-b border-foreground-secondary">
+        <th
+          class={clsx(
+            getContainersPaddingClassName('left'),
+            getColumnsWidthClassName('first'),
+            'py-2.5 pr-4 lg:pr-12'
+          )}
+          bind:clientWidth={firstColWidth}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.team.department')}
+          </p></th
+        >
+        <th class={clsx(getColumnsWidthClassName('central'), 'py-2.5 pr-4 lg:pr-12')}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>
+            {t('proposals.team.team-member')}
+          </p></th
+        >
+        <th class={clsx(getColumnsWidthClassName('central'), 'pr-4 lg:pr-12 py-2.5')}
+          ><p class={clsx(getHeaderCellTextClassName('left'))}>{t('proposals.team.role')}</p></th
+        >
+        <th
+          class={clsx(
+            getColumnsWidthClassName('sticky'),
+            getStickyColClassName(),
+
+            'pr-container lg:pr-0 py-2.5 text-right'
+          )}
+          bind:clientWidth={lastColWidth}
+          ><div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+          <p class={clsx(getHeaderCellTextClassName('right'))}>{t('proposals.team.rate')}</p></th
+        >
+        <th
+          class={clsx(
+            getContainersPaddingClassName('right'),
+            getColumnsWidthClassName('last-empty'),
+            'bg-background md:bg-transparent drop-shadow-md md:drop-shadow-none',
+            'hidden lg:block'
+          )}
+          bind:clientWidth={emptyColWidth}
+        ></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each departmentsInfo as department, j}
+        {#each dataMap.get(department.name) as entry, i}
+          <tr
+            class={clsx(
+              'border-b border-foreground-tertiary',
+              j % 2 ? 'bg-background-offset' : 'bg-background'
+            )}
+          >
+            {#if i == 0}
+              <td
+                rowspan={dataMap.get(department.name).length}
+                class={clsx(getContainersPaddingClassName('left'), 'py-4 align-top pr-4 lg:pr-12')}
+              >
+                <p class="font-bold">
+                  {department.content.title}.
+                </p>
+                <p class="text-foreground-secondary">
+                  {department.content.description}
+                </p>
+              </td>
+            {/if}
+
+            <td class="py-4 align-top pr-4 lg:pr-12">
+              <div class="flex flex-wrap gap-2" use:drawerLinks>
+                <Link href={`/about/${entry.team_member.member?.slug}`}>
+                  {entry.team_member.member.name}
+                </Link>
+              </div>
+            </td>
+
+            <td class={'pr-4 lg:pr-12 py-4 align-top'}>
+              <div>
+                <p class="font-bold">
+                  {entry.role[0].title}
+                </p>
+                <p class="text-foreground-secondary">
+                  {entry.role[0].description}
+                </p>
+              </div>
+            </td>
+
+            <td
+              class={clsx(
+                getStickyColClassName(),
+                'pr-container lg:pr-0 py-4 pl-container md:pl-0',
+                'align-top text-right tabular-nums',
+                j % 2 ? 'bg-background-offset' : 'bg-background'
+              )}
+              ><div class="w-px bg-foreground-tertiary md:w-0 absolute left-0 top-0 bottom-0" />
+              {#if entry.rate_type === 'percentage' && entry.rate_value}
+                <p class="font-bold">{entry.rate_value} %</p>
+              {:else if entry.rate_type === 'value' && entry.rate_value}
+                <p class="font-bold">{formatter.format(+entry.rate_value)}</p>
+              {:else if entry.rate_type === 'free'}
+                <p class="font-bold">{t('proposals.included')}</p>
+              {/if}
+            </td>
+            {#if i == 0}
+              <td rowspan={dataMap.get(department.name).length} class="hidden lg:table-cell"></td>
+            {/if}
+          </tr>
+        {/each}
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/src/routes/(proposals)/proposal/[slug]/proposal-testimonials.svelte b/src/routes/(proposals)/proposal/[slug]/proposal-testimonials.svelte
new file mode 100644
index 00000000..8c5bf50a
--- /dev/null
+++ b/src/routes/(proposals)/proposal/[slug]/proposal-testimonials.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Testimonials from '$components/testimonials.svelte';
+  import { t } from '$lib/i18n';
+  import type { RichtextTestimonialStoryblok } from '$types/bloks';
+
+  export let testimonials: RichtextTestimonialStoryblok[];
+</script>
+
+<section class=" pt-20 lg:pt-28">
+  <div class="container mx-auto flex px-container">
+    <div class="xl:max-w-3xl lg:w-1/3">
+      <h2 class="text-4xl">{t('proposals.testimonials')}.</h2>
+      <p class="text-4xl text-foreground-secondary">
+        {t('proposals.testimonials.description')}
+      </p>
+    </div>
+  </div>
+  <Testimonials variant="one" firstTitle={''} secondTitle={''} {testimonials} hasBorder={false} />
+</section>
diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
index ca4a613d..b101a310 100644
--- a/src/types/bloks.d.ts
+++ b/src/types/bloks.d.ts
@@ -705,7 +705,7 @@ export interface ProposalSectionStoryblok {
 }
 
 export interface ProposalTeamEntryStoryblok {
-  department: ProposalDepartmentStoryblok[];
+  department: StoryblokStory<ProposalDepartmentStoryblok> | string;
   role: ProposalRoleStoryblok[];
   rate_type?: '' | 'value' | 'percentage' | 'free';
   rate_value?: string;