diff --git a/public/index.html b/public/index.html
index babae0b..e879925 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,7 @@
     -->
     <title>Proximity Demo</title>
   </head>
-  <body class="w-screen" style="overflow-x: hidden">
+  <body class="w-screen bg-white" style="overflow-x: hidden">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.js b/src/App.js
index 022d16a..178f3bf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import useWindowSize from './useWindowSize';
 
 import HeaderD from './components/HeaderD';
 import HeaderM from './components/HeaderM';
+import PartOne from './components/PartOne';
 
 export default function App() {
   const [currentLanguage, setCurrentLanguage] = useState('en');
@@ -28,6 +29,8 @@ export default function App() {
           setShowCookies={setShowCookies}
         />
       )}
+
+      <PartOne />
     </div>
   );
 }
diff --git a/src/assets/images/part-1-banner.png b/src/assets/images/part-1-banner.png
new file mode 100644
index 0000000..eb81535
Binary files /dev/null and b/src/assets/images/part-1-banner.png differ
diff --git a/src/components/HeaderD.js b/src/components/HeaderD.js
index 959b21d..195e3e5 100644
--- a/src/components/HeaderD.js
+++ b/src/components/HeaderD.js
@@ -13,7 +13,7 @@ export default function HeaderD({
     'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
 
   const cookies = (
-    <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center">
+    <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center z-10 fixed bottom-0">
       <div className="text-gray-100 font-avenirbook font-normal">
         This website uses cookies to improve your experience. We'll assume
         you're ok with this, but you can opt out if you wish.
@@ -96,9 +96,10 @@ export default function HeaderD({
             showCookies ? 'mb-2' : 'mb-22'
           }`}
         />
-        {showCookies && cookies}
       </div>
 
+      {showCookies && cookies}
+
       <video
         className="h-full w-full bg-gray-900 z-0 object-cover absolute"
         autoPlay
diff --git a/src/components/HeaderM.js b/src/components/HeaderM.js
index 5d7c336..683610d 100644
--- a/src/components/HeaderM.js
+++ b/src/components/HeaderM.js
@@ -15,7 +15,7 @@ export default function HeaderD({
     'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
 
   const sidebar = (
-    <div className="absolute z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2">
+    <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
       <a className={headerLinkClasses} href="/">
         About
       </a>
@@ -35,13 +35,13 @@ export default function HeaderD({
   );
 
   const cookies = (
-    <div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2">
+    <div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2 z-10 fixed bottom-0">
       <div className="text-gray-100 font-avenirbook text-xs font-normal text-center">
         This website uses cookies to improve your experience. We'll assume
         you're ok with this, but you can opt out if you wish.
       </div>
 
-      <div className="w-full px-2 flex justify-around items-center mt-4">
+      <div className="w-4/5 px-2 flex justify-around items-center mt-4">
         <button
           className="flex items-center justify-center rounded px-6 py-1 text-sm font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
           onClick={() => setShowCookies(false)}
@@ -129,9 +129,9 @@ export default function HeaderD({
             showCookies ? 'mb-2' : 'mb-22'
           }`}
         />
-        {showCookies && cookies}
       </div>
 
+      {showCookies && cookies}
       {showSidebar && sidebar}
 
       <video
diff --git a/src/components/PartOne.js b/src/components/PartOne.js
new file mode 100644
index 0000000..faffc70
--- /dev/null
+++ b/src/components/PartOne.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import part1banner from '../assets/images/part-1-banner.png';
+
+export default function PartOne() {
+  return (
+    <div className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4">
+      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack">
+        How we do it
+      </div>
+
+      <div className="text-gray-900 sm:text-2xl text-lg font-avenirbook text-center mb-4">
+        We use data-driven creativity
+        <br />
+        to solve business problems
+      </div>
+
+      <img
+        src={part1banner}
+        alt="part-1-banner"
+        className="w-full object-cover sm:h-5/6"
+      />
+
+      <div className="bg-white sm:-my-48 sm:w-4/5 w-full sm:pt-12 sm:px-36 sm:text-2xl text-base font-avenirbook text-center mt-4">
+        By harnessing powerful insights and smart targeting, we’re able to
+        create behavior-changing ideas and experiences that deliver value to
+        brands. Supported by our proprietary{' '}
+        <u>Creative Intelligence process</u>, <u>unique tools</u> and{' '}
+        <u>global partners</u>, we are able to put data at the heart of
+        everything we do to orchestrate experiences that deliver creativity with
+        precision and purpose.
+      </div>
+    </div>
+  );
+}
