diff --git a/content/person/samar_adel/samar_adel.jpg b/content/person/samar_adel/samar_adel.jpg
index 89741e4db..fff0ba896 100644
Binary files a/content/person/samar_adel/samar_adel.jpg and b/content/person/samar_adel/samar_adel.jpg differ
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 81e6feee3..7cd1aeb8b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -148,6 +148,12 @@ body[data-theme="dark"] {
     .post-content-text {
         @apply text-gray-300;
     }
+    .inset-0 , input[type="text"]{
+        background-color: #191b1f;
+    }
+    .bg-white{
+        background-color: #191b1f; 
+    }
     .post-card-excerpt {
         @apply text-gray-500;
     }
diff --git a/src/layouts/partials/Footer.vue b/src/layouts/partials/Footer.vue
index 9e01fce43..4bd21cd48 100644
--- a/src/layouts/partials/Footer.vue
+++ b/src/layouts/partials/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="relative bg-black py-4 text-sm text-gray-500">
+  <nav class="relative py-4 text-sm">
     <div
       class="container mx-auto flex flex-wrap justify-between h-12 items-center"
     >
diff --git a/src/layouts/partials/Navbar.vue b/src/layouts/partials/Navbar.vue
index 42e62228f..b50a86521 100644
--- a/src/layouts/partials/Navbar.vue
+++ b/src/layouts/partials/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed inset-0 h-16 bg-black">
+  <div class="fixed inset-0 h-16 bg-white">
     <header
       class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
       v-bind:class="{
@@ -8,11 +8,11 @@
       }"
     >
       <div class="flex items-center justify-between px-4 py-3 sm:p-0">
-        <div class="inline-flex items-center flex-shrink-0 text-white mr-6">
+        <div class="inline-flex items-center flex-shrink-0 mr-6">
           <a href="/" class="flex">
             <img
-              src="../../../static/img/TFN_white.svg"
-              class="mr-3"
+              src="../../../static/img/TFN_black.svg"
+              class="mr-3 fill-current"
               width="180"
               alt=""
             />
@@ -73,15 +73,15 @@
 
       <nav
         :class="isOpen ? 'block' : 'hidden'"
-        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-black"
+        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-white"
       >
         <ul
-          class="list-none sm:flex justify-left text-gray-300 uppercase transition-all transition-500"
+          class="list-none sm:flex justify-left uppercase transition-all transition-500"
         >
           <li
             :key="element.name"
             v-for="(element, index) in $static.metadata.navigation"
-            class="hover:text-white py-1"
+            class="py-1"
             v-bind:class="{
               'mr-4':
                 index != Object.keys($static.metadata.navigation).length - 1,
@@ -116,13 +116,13 @@
            </li> -->
         </ul>
         <div
-          class="md:hidden inline-flex rounded-full border-grey-light border w-1/2"
+          class="md:hidden inline-flex rounded-full border w-1/2"
         >
-          <span class="w-auto flex justify-end items-center text-grey p-2">
+          <span class="w-auto flex justify-end items-center p-2">
             <font-awesome :icon="['fas', 'search']" />
           </span>
           <input
-            class="w-full rounded mr-4 bg-black"
+            class="w-full rounded mr-4 bg-white"
             type="text"
             placeholder="Search..."
             v-model="search"
@@ -131,14 +131,14 @@
         </div>
       </nav>
       <div
-        class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last"
+        class="hidden md:ml-auto md:inline-block md:order-last"
       >
-        <div class="inline-flex rounded-full border-grey-light border w-1/2">
-          <span class="w-auto flex justify-end items-center text-grey p-2">
+        <div class="inline-flex rounded-full border w-1/2">
+          <span class="w-auto flex justify-end items-center p-2">
             <font-awesome :icon="['fas', 'search']" />
           </span>
           <input
-            class="w-full rounded mr-4 bg-black"
+            class="w-full rounded mr-4 bg-white"
             type="text"
             placeholder="Search..."
             v-model="search"
@@ -152,7 +152,7 @@
           <li
             :key="element.name"
             v-for="(element, index) in $static.metadata.social"
-            class="hover:text-white sm:block"
+            class="sm:block"
             v-bind:class="{
               'mr-6': index != Object.keys($static.metadata.social).length - 1,
             }"
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 10785a286..684e51fc6 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -10,9 +10,9 @@
             v-for="(header, index) in headers"
             :key="index"
             :href="`#${index}`"
-            class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150"
+            class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium hover:text-gray-900 hover:bg-gray-400 focus:outline-none  transition ease-in-out duration-150"
             :class="{
-              'text-gray-900 border-r-3 border-blue-500 hover:bg-gray-100':
+              'border-r-3 border-blue-500 hover:bg-gray-100':
                 activeIndex === index,
             }"
             @click="setActive(index)"
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 8855e2944..638c4ad98 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -39,7 +39,7 @@
               </div>
               <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
                 <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Projects</h2>
-                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p>
+                <p class="mt-6 mb-8 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p>
                 <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
                     <a  href="/projects">
                         <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
@@ -57,7 +57,7 @@
               </div>
               <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
                 <h2 class="text-4xl font-semibold font-tf-secondary uppercase">People</h2>
-                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p>
+                <p class="mt-6 mb-8 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p>
                 <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
                     <a  href="/people">
                         <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
@@ -75,7 +75,7 @@
               </div>
               <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
                 <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Blog</h2>
-                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p>
+                <p class="mt-6 mb-8 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p>
                 <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
                     <a  href="/blog">
                         <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
diff --git a/static/img/TFN_black.svg b/static/img/TFN_black.svg
new file mode 100644
index 000000000..f787872d3
--- /dev/null
+++ b/static/img/TFN_black.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1089.1 104.1" style="enable-background:new 0 0 1089.1 104.1;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M308.1,20h-27.7v79h-19.7V20H233V4.2h75V20H308.1z"/>
+		<path d="M401.1,4.1v94.8h-19.7V58.1h-41.7v40.8H320V4.1h19.7v40.2h41.7V4.1C381.4,4.1,401.1,4.1,401.1,4.1z"/>
+		<path d="M496.5,98.9h-17.7c-3.3,0-5.7-1.3-7.2-3.8l-18-29.1c-0.7-1.1-1.6-2-2.5-2.5s-2.2-0.8-4-0.8h-6.7v36.1h-19.6V4h29.8
+			c6.6,0,12.3,0.7,17,2.1s8.6,3.3,11.6,5.7s5.2,5.4,6.6,8.7c1.4,3.4,2.1,7.1,2.1,11.1c0,3.1-0.5,6.1-1.3,8.9s-2.2,5.4-3.9,7.7
+			c-1.7,2.3-3.8,4.4-6.3,6.1c-2.5,1.8-5.3,3.2-8.5,4.3c1.3,0.7,2.4,1.5,3.5,2.5s2.1,2.1,2.9,3.5L496.5,98.9z M450.6,49
+			c3.2,0,5.9-0.4,8.2-1.2s4.2-1.9,5.7-3.3c1.5-1.4,2.6-3.1,3.3-5c0.7-1.9,1-4,1-6.3c0-4.5-1.5-8-4.5-10.4s-7.5-3.7-13.6-3.7h-10.2
+			v30L450.6,49L450.6,49z"/>
+		<path d="M525.5,19.5v24.4h31.6v14.8h-31.6v24.9h40.6V99h-60.3V4.2h60.3v15.4L525.5,19.5L525.5,19.5z"/>
+		<path d="M600.5,19.5v24.4h31.6v14.8h-31.6v24.9h40.6V99h-60.3V4.2h60.3v15.4L600.5,19.5L600.5,19.5z"/>
+		<path d="M675.5,19.5v26.2h34.1v15.4h-34.1v37.8h-19.7V4.1h60.3v15.4H675.5L675.5,19.5z"/>
+		<path d="M820.4,51.5c0,6.9-1.2,13.4-3.5,19.3s-5.6,11-9.9,15.4c-4.3,4.3-9.3,7.7-15.3,10.2s-12.6,3.7-19.8,3.7
+			c-7.3,0-13.9-1.2-19.8-3.7c-6-2.5-11.1-5.8-15.3-10.2c-4.3-4.3-7.6-9.4-9.9-15.4c-2.3-5.9-3.5-12.3-3.5-19.3
+			c0-6.9,1.2-13.3,3.5-19.2s5.6-11,9.9-15.3c4.3-4.3,9.4-7.7,15.3-10.2c6-2.5,12.6-3.7,19.8-3.7c7.3,0,13.9,1.2,19.8,3.7
+			c6,2.5,11.1,5.9,15.3,10.2c4.3,4.3,7.5,9.4,9.9,15.3C819.2,38.2,820.4,44.6,820.4,51.5z M800.3,51.5c0-5-0.7-9.4-2-13.4
+			c-1.3-3.9-3.2-7.3-5.7-10.1s-5.4-4.9-9-6.3c-3.5-1.5-7.5-2.2-11.9-2.2s-8.4,0.7-12,2.2c-3.5,1.5-6.5,3.6-9,6.3
+			c-2.5,2.8-4.3,6.1-5.7,10.1c-1.3,3.9-2,8.4-2,13.4s0.7,9.5,2,13.4s3.2,7.3,5.7,10s5.5,4.8,9,6.3s7.5,2.2,12,2.2s8.4-0.7,11.9-2.2
+			s6.5-3.6,9-6.3s4.3-6.1,5.7-10S800.3,56.5,800.3,51.5z"/>
+		<path d="M891,83v15.9h-56.2V4.1h19.6V83H891z"/>
+		<path d="M987.9,51.5c0,6.9-1.2,13.3-3.5,19.1s-5.6,10.8-9.9,15c-4.3,4.2-9.3,7.5-15.3,9.8c-6,2.4-12.6,3.5-19.8,3.5H903V4.1h36.4
+			c7.3,0,13.9,1.2,19.8,3.5c6,2.4,11.1,5.6,15.3,9.8s7.5,9.2,9.9,15C986.7,38.3,987.9,44.6,987.9,51.5z M967.8,51.5
+			c0-5-0.7-9.4-2-13.4s-3.2-7.3-5.6-10.1c-2.4-2.7-5.4-4.8-8.9-6.3s-7.5-2.2-11.9-2.2h-16.7v64.1h16.7c4.4,0,8.4-0.7,11.9-2.2
+			s6.5-3.6,8.9-6.3c2.4-2.8,4.3-6.1,5.6-10.1S967.8,56.5,967.8,51.5z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M204,28.3H93.5V3.1h97.6c7.1,0,12.9,5.8,12.9,12.9V28.3L204,28.3z"/>
+		<path d="M191.1,3.1H93.5v25.2H204V15.9C204,8.8,198.2,3.1,191.1,3.1L191.1,3.1z"/>
+	</g>
+	<polygon points="204,65 125.9,65 125.9,39.8 204,39.8 	"/>
+	<path d="M191.1,101.8H93.5V76.6H204v12.3C204,96,198.2,101.8,191.1,101.8L191.1,101.8z"/>
+</g>
+</svg>