diff --git a/.gitignore b/.gitignore
index fc9b6bf..e25d0ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 public/styles.css
+package-lock.json
diff --git a/package-lock.json b/package-lock.json
index 0f47483..9ca6cf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "@edgeking810/create-react-app",
+  "name": "proximitydemo",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/src/App.js b/src/App.js
index 7917ae8..1593036 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,16 @@ export default function App() {
   const { width } = useWindowSize();
   //   console.log(width);
 
+  const scrollToElement = (e, id) => {
+    e.preventDefault();
+
+    window.scroll({
+      top: document.getElementById(id).getBoundingClientRect().top,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <div className="w-full overflow-x-hidden">
       {width > 1000 ? (
@@ -23,6 +33,7 @@ export default function App() {
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       ) : (
         <HeaderM
@@ -30,6 +41,7 @@ export default function App() {
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       )}
 
diff --git a/src/assets/images/pencil.gif b/src/assets/images/pencil.gif
new file mode 100644
index 0000000..9376b67
Binary files /dev/null and b/src/assets/images/pencil.gif differ
diff --git a/src/assets/images/pencil.png b/src/assets/images/pencil.png
deleted file mode 100644
index ad9c506..0000000
Binary files a/src/assets/images/pencil.png and /dev/null differ
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 70c853c..6088c83 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -17,13 +17,13 @@ export default function Footer() {
       <div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
         <button
           onClick={() => handleScroll()}
-          className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
+          className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
         >
-          Return to top
+          &#x2191; Return to top
         </button>
       </div>
 
-      <div className="w-full sm:px-20 px-4 flex sm:flex-row flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
+      <div className="w-full sm:px-20 px-4 flex sm:flex-row-reverse flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
         <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
           <a
             href="/"
diff --git a/src/components/HeaderD.js b/src/components/HeaderD.js
index f23e0c5..9799443 100644
--- a/src/components/HeaderD.js
+++ b/src/components/HeaderD.js
@@ -8,6 +8,7 @@ export default function HeaderD({
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const headerLinkClasses =
     'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';
@@ -93,7 +94,8 @@ export default function HeaderD({
       <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
         >
           {' '}
         </a>
diff --git a/src/components/HeaderM.js b/src/components/HeaderM.js
index e92dba5..b6c9c62 100644
--- a/src/components/HeaderM.js
+++ b/src/components/HeaderM.js
@@ -3,32 +3,39 @@ import React, { useState } from 'react';
 import proximity_logo from '../assets/images/proximity_logo.svg';
 import backgroundVideo from '../assets/videos/video.mp4';
 
+import '../styles/sidebar.css';
+
 export default function HeaderD({
   currentLanguage,
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const [showSidebar, setShowSidebar] = useState(false);
 
   const headerLinkClasses =
-    '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';
+    'text-gray-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';
 
   const sidebar = (
-    <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="/">
+    <div
+      className={`z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed ${
+        showSidebar ? 'sidebar-left-nav closed' : 'sidebar-left-nav'
+      }`}
+    >
+      <a className={headerLinkClasses} href="/about">
         About
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/work">
         Work
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/latest">
         Latest
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/people-and-careers">
         People & Careers
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/contact">
         Contact
       </a>
     </div>
@@ -60,12 +67,12 @@ export default function HeaderD({
   );
 
   return (
-    <div className="h-screen w-full">
-      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
+    <div className="h-80 w-full">
+      <div className="absolute h-12 w-full flex items-center justify-between mt-4 px-4">
         <img
           src={proximity_logo}
           alt="Proximity Logo"
-          className="h-full object-scale-down"
+          className="h-full object-scale-down z-20"
         />
 
         <div className="w-2/5 h-full flex items-center justify-end">
@@ -85,7 +92,7 @@ export default function HeaderD({
             Contact
           </a> */}
 
-          <div className="border h-10 px-2 flex justify-between items-center">
+          <div className="border h-10 px-2 flex justify-between items-center z-20">
             <button
               className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                 currentLanguage === 'en' ? 'font-bold' : ''
@@ -107,34 +114,37 @@ export default function HeaderD({
           <button
             className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
               showSidebar ? 'close' : 'menu'
-            }-fill bg-${
-              showSidebar ? 'red' : 'blue'
-            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
+            }-fill text-gray-${
+              showSidebar ? '900' : '100'
+            } opacity-75 text-3xl font-bold rounded-sm z-40`}
             onClick={() => setShowSidebar((current) => !current)}
           />
         </div>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex items-center justify-center">
-        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
+      <div className="absolute z-10 w-full h-80 flex items-center justify-center">
+        <p className="w-5/6 font-avenirblack text-center text-3xl font-bold text-gray-200">
           We make people
           <br />
           more valuable to brands
         </p>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
+      <div className="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
-        />
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
+        >
+          {' '}
+        </a>
       </div>
 
       {showCookies && cookies}
-      {showSidebar && sidebar}
+      {sidebar}
 
       <video
-        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
+        className="h-80 w-full bg-gray-900 z-0 object-cover absolute"
         autoPlay
         loop
         muted
diff --git a/src/components/PartOne.js b/src/components/PartOne.js
index d19a7fb..41c4be9 100644
--- a/src/components/PartOne.js
+++ b/src/components/PartOne.js
@@ -5,7 +5,7 @@ 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"
+      className="w-full sm:h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4 sm:my-0 my-8"
       id="part-one"
     >
       <div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">
diff --git a/src/components/PartTwo.js b/src/components/PartTwo.js
index 7a09937..9a25049 100644
--- a/src/components/PartTwo.js
+++ b/src/components/PartTwo.js
@@ -1,18 +1,14 @@
 import React from 'react';
 
-import pencil from '../assets/images/pencil.png';
+import pencil from '../assets/images/pencil.gif';
 
 export default function PartTwo() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
       id="part-two"
     >
-      <img
-        src={pencil}
-        alt="pencil"
-        className="object-cover sm:h-6 h-4 sm:mb-8 mb-4"
-      />
+      <img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />
 
       <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
         Business Problems we've solved
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
new file mode 100644
index 0000000..069a472
--- /dev/null
+++ b/src/styles/sidebar.css
@@ -0,0 +1,13 @@
+.sidebar-left-nav {
+  -webkit-transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
+  visibility: visible;
+  transition: all 0.5s ease 0s;
+  -webkit-transition: all 0.5s ease 0s;
+}
+
+.closed {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
+  visibility: visible;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d1f0ac..3705fbc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -439,6 +439,10 @@ module.exports = {
       25: '0.25',
       50: '0.5',
       75: '0.75',
+      80: '0.80',
+      85: '0.85',
+      90: '0.90',
+      95: '0.95',
       100: '1',
     },
     order: {