diff --git a/main/templates/main/includes/person_contact_big.html b/main/templates/main/includes/person_contact_big.html
index da113cea3c6323886f14a4da8a03af57cb7d774b..4ed3a2e26632aa28584f2725f7d995c0b4c14c04 100644
--- a/main/templates/main/includes/person_contact_big.html
+++ b/main/templates/main/includes/person_contact_big.html
@@ -1,22 +1,22 @@
 {% load wagtailimages_tags %}
-<div class="flex mb-8 person-box-big max-w-md xl:max-w-xl flex-col xl:flex-row xl:mb-16">
-  <div class="shrink-0 mr-2">
+<div class="flex mb-8 person-box-big max-w-sm gap-6 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
+  <div class="xl:shrink-0">
     {% image person_page.profile_image fill-350x350 as profile_image %}
     <img
-      class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
+      class="rounded-full shadow-sm w-30 xl:w-60"
       src="{{ profile_image.url }}"
       alt=" {{ person_page.title }}"
     >
   </div>
   <div class="flex flex-col justify-between py-4">
-    <div class="flex flex-col mb-4">
+    <div class="flex flex-col mb-8">
       <h4 class="font-bold mb-2 text-2xl xl:text-4xl">
         {{ person_page.title }}
       </h4>
-      <span class="leading-6 mb-6 w-10/12">
+      <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ person_page.position | default_if_none:'' }}
       </span>
-      <span class="font-bold mb-1 text-grey-300">
+      <span class="font-bold mb-2 text-grey-300">
         {{ person_page.phone | default_if_none:'' }}
       </span>
       <span class="text-turquoise-500 underline">
diff --git a/main/templates/main/main_people_page.html b/main/templates/main/main_people_page.html
index b7d9f0112e86bc0d5e4e32560d5384e72aa2e338..1144a6f4bdbea55496fdf31dcacb300dd77240f7 100644
--- a/main/templates/main/main_people_page.html
+++ b/main/templates/main/main_people_page.html
@@ -5,10 +5,10 @@
 
 {% include 'main/includes/layout/simple_page_header.html' %}
 
-<main role="main">
+<main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt leading-4 xl:leading-6 mb-3 text-base xl:text-xl xl:mb-12">
+      <p class="font-alt text-xl leading-7 mb-5">
         {{ page.perex }}
       </p>
     </div>
@@ -21,17 +21,19 @@
         v-slot="{ isCurrentView, toggleView }"
       >
         <div class="flex justify-center mb-12">
-          <div class="switch">
-          {% for people_group in page.people %}
-            <a @click="toggleView('{{ people_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
-               :class="{'switch__item--active': isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')}"
-            >
-              {{ people_group.value.title }}
-            </a>
-          {% endfor %}
-          </div>
+          <ui-horizontal-scrollable>
+            <div class="switch">
+              {% for people_group in page.people %}
+                <a @click="toggleView('{{ people_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
+                   :class="{'switch__item--active': isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')}"
+                >
+                  {{ people_group.value.title }}
+                </a>
+              {% endfor %}
+            </div>
+          </ui-horizontal-scrollable>
         </div>
-        <div class="flex flex-wrap justify-center mb-12">
+        <div class="flex flex-wrap gap-4 xl:justify-center">
           {% for people_group in page.people %}
             <template v-if="isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')">
               {% for person_page in people_group.value.person_list %}