diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc
index f78022e..4ea52d0 100644
--- a/docs/modules/ROOT/pages/index.adoc
+++ b/docs/modules/ROOT/pages/index.adoc
@@ -116,6 +116,7 @@ src/
   js/
     01-navigation.js
     02-fragment-jumper.js
+    scrollable-header-nav.js
     ...
     vendor/
       highlight.js
diff --git a/src/css/footer.css b/src/css/footer.css
index 1cf942c..89b48c8 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -8,7 +8,6 @@ footer.footer {
 
 .footer p {
   margin: 0;
-  font-family: var(--footer-OP-font-family);
   font-size: x-small;
 }
 
@@ -26,13 +25,6 @@ footer.footer {
 /* .footer .columns div {
   flex-grow: 1;
 } */
-.footer h3 {
-  font-family: var(--footer-OP-font-family);
-  font-size: 15px;
-  font-weight: 700;
-  margin: 0 0 15px 0;
-}
-
 .footer .logo {
   margin: 0;
   height: 48px;
@@ -171,6 +163,24 @@ footer.footer {
   flex-wrap: wrap;
   background-color: #f3f6fc;
   border-bottom: 1px solid #cfdaf5;
+  justify-content: center;
+}
+
+.three-columns > div {
+  flex: 1; /* This allows the divs to grow and shrink as needed */
+  min-width: 20%; /* This sets a minimum width for the divs */
+  box-sizing: border-box;
+  padding: 1rem;
+}
+
+.three-columns > div:first-child {
+  flex: 0 0 20%;
+  box-sizing: border-box;
+}
+
+.three-columns > div:not(:first-child) {
+  flex: 0 0 40%;
+  box-sizing: border-box;
 }
 
 /* columns */
@@ -178,14 +188,37 @@ footer.footer {
   padding: 1rem;
 }
 
-/* tablet breakpoint */
-@media screen and (min-width: 769px) {
+.search-institutions {
+  display: none;
+}
+
+@media (max-width: 1024px) {
   .three-columns {
-    display: grid;
-    grid-auto-rows: 1fr;
-    grid-template-columns: 1fr 1fr 1fr;
+    flex-direction: column;
+  }
+
+  .institutions {
+    display: none;
+  }
+
+  .search-institutions {
+    display: block;
   }
 }
+/* tablet breakpoint */
+/* @media screen and (min-width: 769px) {
+  .three-columns {
+    display: flex;
+  }
+
+  .three-columns > div:first-child {
+    flex: 0 0 20%;
+  }
+
+  .three-columns > div:not(:first-child) {
+    flex: 0 0 40%;
+  }
+}  */
 
 /* responsive EU logo change */
 @media (min-width: 769px) {
@@ -265,3 +298,35 @@ footer.footer {
   margin-right: 0.35rem;
   margin-left: 2rem;
 }
+
+.ted-footer__title {
+  font-size: 28px;
+  font-weight: 400;
+  color: #333;
+  border-bottom: 1px solid #cfdaf5;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  display: block;
+  line-height: 1.2;
+}
+
+.ted-footer__rich-text {
+  padding-right: 60px;
+  font-family: var(--gs-base-font-family-default);
+  font-weight: var(--gs-base-font-weight-default);
+}
+
+.ted-footer__rich-text p {
+  font-size: 16px;
+  color: #333;
+}
+
+.ted-footer__rich-text a {
+  font-size: 16px;
+  color: #0e47cb;
+}
+
+.ted-footer__title.ted-footer__title--main {
+  border: unset;
+  padding: 0;
+}
diff --git a/src/css/header.css b/src/css/header.css
index f0e8b72..9b6e81f 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,31 +1,42 @@
-.globan {
+/* .globan {
   z-index: var(--z-index-globan) !important;
 }
 
 .header {
   z-index: var(--z-index-header);
-}
+} */
 
 html.is-clipped--navbar {
   overflow-y: hidden;
 }
 
-body {
+/* body {
   padding-top: var(--navbar-height);
+} */
+
+.navbar-scrollable {
+  background: var(--color-white);
+  color: var(--navbar-font-color);
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  height: calc(var(--navbar-height) / 2);
+  top: var(--globan-height);
+  width: 100%;
+  z-index: var(--z-index-navbar);
+  display: flex;
+  flex-direction: column;
 }
 
 .navbar {
-  background: var(--navbar-background);
+  background: var(--color-white);
   color: var(--navbar-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
-  height: var(--navbar-height);
-  position: fixed;
-  top: 0;
+  height: calc(var(--navbar-height) / 2);
+  top: var(--globan-height);
   width: 100%;
   z-index: var(--z-index-navbar);
-  border-bottom: 6px solid var(--color-OP-green);
   display: flex;
   flex-direction: column;
+  border-bottom: 6px solid var(--color-OP-green);
 }
 
 .navbar a {
@@ -153,27 +164,11 @@ body {
 }
 
 @media screen and (max-width: 1023.5px) {
-  .navbar-brand {
-    height: inherit;
-  }
-
   .navbar-brand .navbar-item {
     align-items: center;
     display: flex;
   }
 
-  .navbar-menu {
-    background: var(--navbar-menu-background);
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: var(--body-min-height);
-    overflow-y: auto;
-    padding: 0.5rem 0;
-  }
-
-  .navbar-menu:not(.is-active) {
-    display: none;
-  }
-
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
     background: var(--navbar-menu_hover-background);
@@ -309,7 +304,6 @@ body {
   color: #515560;
   margin-left: 25px;
   margin-bottom: 6px;
-  margin-top: 15px;
   display: block;
 }
 
@@ -345,14 +339,73 @@ body {
   line-height: 18px;
 }
 
+.text-eu-subtext-text a {
+  text-decoration: none;
+  color: #515560;
+}
+
+.text-eu-subtext-text a:visited {
+  color: #515560;
+}
+
+.text-eu-subtext-text a:hover,
+.text-eu-subtext-text a:focus,
+.text-eu-subtext-text a:active {
+  color: var(--color-OP-green);
+}
+
+@media (max-width: 500px) {
+  .text-eu-subtext-text {
+    font-size: 3vw;
+  }
+}
+
+.text-eu-subtext-label a {
+  text-decoration: none;
+  color: #515560;
+}
+
+.text-eu-subtext-label a:visited {
+  color: #515560;
+}
+
+.text-eu-tenders a {
+  text-decoration: none;
+  color: #515560;
+}
+
+.text-eu-tenders a:visited {
+  color: #515560;
+}
+
+.text-eu-subtext-label a:hover,
+.text-eu-subtext-label a:focus,
+.text-eu-subtext-label a:active {
+  color: var(--color-OP-green);
+}
+
 @media screen and (max-width: 960px) {
   .text-eu-subtext-label {
     margin-left: 25px;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 820px) {
   .text-eu-subtext-label {
     display: none;
   }
 }
+
+.eu-tenders {
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: calc(var(--navbar-height) / 2);
+  z-index: 5;
+  border-bottom: 6px solid var(--color-OP-green);
+}
+
+.eu-flag {
+  height: calc(var(--navbar-height) / 2);
+  z-index: 6;
+}
diff --git a/src/css/nav.css b/src/css/nav.css
index 20822fb..3066ed1 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -2,21 +2,18 @@
   justify-content: flex-end;
 }
 
-/* @media screen and (min-width: 1024px) {
-  .navbar-brand {
-    flex-grow: 1;
-  }
-
-  .navbar-menu {
-    flex-grow: 0;
-  }
-} */
-
 @media screen and (max-width: 768px) {
   .navbar-brand .navbar-item + .navbar-item {
     padding-left: 0;
     padding-right: 0;
   }
+
+  .nav {
+    top: calc((var(--navbar-height) / 2) + var(--toolbar-height));
+    box-shadow: 0.5px 0 3px var(--nav-border-color);
+    position: absolute;
+    height: var(--nav-height);
+  }
 }
 
 .nav-container {
@@ -33,6 +30,12 @@
   .nav-container {
     width: var(--nav-width);
   }
+
+  .nav {
+    top: calc(var(--navbar-height) / 2);
+    box-shadow: 0.5px 0 3px var(--nav-border-color);
+    height: var(--nav-height);
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -43,6 +46,21 @@
     top: 0;
     visibility: visible;
   }
+
+  .nav {
+    top: calc(var(--navbar-height) / 2);
+    box-shadow: none;
+    position: sticky;
+    height: var(--nav-height--desktop);
+  }
+
+  .navbar-brand {
+    flex-grow: 1;
+  }
+
+  .navbar-menu {
+    flex-grow: 0;
+  }
 }
 
 .nav-container.is-active {
@@ -50,31 +68,21 @@
 }
 
 .nav {
-  background: var(--nav-background);
-  position: relative;
-  top: var(--toolbar-height);
-  height: var(--nav-height);
-}
-
-@media screen and (min-width: 769px) {
-  .nav {
-    box-shadow: 0.5px 0 3px var(--nav-border-color);
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .nav {
-    top: var(--navbar-height);
-    box-shadow: none;
-    position: sticky;
-    height: var(--nav-height--desktop);
-  }
+  background: var(--color-white);
+  position: sticky;
+  height: var(--nav-height--desktop);
+  overflow-y: auto;
+  display: flex;
+  border-right: 1px solid var(--toolbar-border-color);
 }
 
 .nav .panels {
   display: flex;
   flex-direction: column;
-  height: inherit;
+}
+
+.panels {
+  width: -webkit-fill-available;
 }
 
 html.is-clipped--nav {
@@ -83,7 +91,6 @@ html.is-clipped--nav {
 
 .nav-panel-menu {
   overflow-y: scroll;
-  height: var(--nav-panel-menu-height);
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -176,7 +183,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore {
-  background: var(--nav-background);
+  background: var(--color-white);
   display: flex;
   flex-direction: column;
   position: absolute;
diff --git a/src/css/search.css b/src/css/search.css
index f0a30c2..3fb79e0 100644
--- a/src/css/search.css
+++ b/src/css/search.css
@@ -22,13 +22,14 @@
   border-radius: 0.1em;
   line-height: 1.5;
   padding: 0 0.25em;
-  height: 38px;
+  height: 25px;
   margin-right: 25px;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 1060px) {
   #search-input {
     width: 400px;
+    height: 38px;
   }
 }
 
diff --git a/src/css/site.css b/src/css/site.css
index 8e203b7..72b2abc 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -16,3 +16,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "search.css";
+@import "widget.css";
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 7f38488..ded4dca 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -1,14 +1,14 @@
 .toolbar {
   color: var(--toolbar-font-color);
   align-items: center;
-  background-color: var(--toolbar-background);
+  background-color: var(--color-white);
   box-shadow: 0 1px 0 var(--toolbar-border-color);
   display: flex;
   font-size: calc(15 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
   position: sticky;
-  top: var(--navbar-height);
+  top: calc(var(--navbar-height) / 2);
   z-index: var(--z-index-toolbar);
 }
 
diff --git a/src/css/vars.css b/src/css/vars.css
index 9ac207d..2783ebb 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -316,11 +316,11 @@
   --navbar-height: calc(200 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
-  --body-top: var(--navbar-height);
+  --body-top: calc(var(--navbar-height) + var(--globan-height));
   --body-min-height: calc(100vh - var(--body-top));
-  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
-  --nav-height--desktop: var(--body-min-height);
-  --nav-panel-menu-height: calc(100% - var(--drawer-height));
+  --nav-height: calc(var(--body-min-height) + var(--toolbar-height));
+  --nav-height--desktop: calc(var(--body-min-height));
+  --nav-panel-menu-height: calc(100% - var(--navbar-height) - var(--drawer-height));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
@@ -336,4 +336,5 @@
   --z-index-navbar: 4;
   --z-index-header: 4;
   --z-index-globan: 3;
+  --globan-height: 1.125rem;
 }
diff --git a/src/css/widget.css b/src/css/widget.css
new file mode 100644
index 0000000..7c4c989
--- /dev/null
+++ b/src/css/widget.css
@@ -0,0 +1,55 @@
+.widget {
+  width: auto;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  margin: 50px;
+  position: sticky;
+  top: var(--toc-top);
+}
+
+.widget-title {
+  height: 25%;
+  font-family: var(--gs-base-font-family-default);
+  color: #515560;
+  display: flex;
+  align-items: left;
+  justify-content: center;
+  font-size: 16px;
+  text-decoration: underline;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.links {
+  height: 75%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  font-size: 13.5px;
+}
+
+.links a {
+  color: var(--color-OP-green);
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  align-items: left;
+  padding-bottom: 7px;
+}
+
+@media screen and (max-width: 1024px) {
+  .widget {
+    display: none;
+  }
+
+  .widget-title {
+    display: none;
+  }
+
+  .links {
+    display: none;
+  }
+}
diff --git a/src/img/twitter.svg b/src/img/twitter.svg
index 9b9101d..611108e 100644
--- a/src/img/twitter.svg
+++ b/src/img/twitter.svg
@@ -1,3 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="66" height="66" viewBox="0 0 66 66">
-  <image y="6" width="66" height="54" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAA2CAYAAABz508/AAAD1UlEQVRogWJkMD7DMITAfxxuZaTIDwwMDAAAAAD//2IZAoGAy/O41JASKBB9DAyMAAAAAP//GswBQUwA4NOHL0BQzWZgYAAAAAD//8IWEMQYREtAbgBg8we6H7CZzcjAwMAAAAAA//9CDwhkhdgMojWgViBg8w9uwMDAAAAAAP//YqKWQUMUQCKagYEBAAAA//8iFBD0DAx6BzoitTMw/AcAAAD//yImIMAKaeQYepmPDmCBALL3PwMDAwMAAAD//0IOCEKOGU7ZBB4AYMDAwAAAAAD//yI2ReA0gApg4AOYgYERAAAA//8iNSBgYDilDkYGBgYGAAAAAP//IjcgQIAWqYPeAFJWMDAwAAAAAP//Qg4IctsMQzVAEP5lYGAAAAAA//+iJEWgg6EUIKiRzsDAAAAAAP//omZAwMBgDxDMlM/AwAAAAAD//6Jlpws9MAaq70IYMDAwAAAAAP//Qg8IkGNpFZuDN5UwMDAAAAAA//+iRdYYeoCBgQEAAAD//8IWEIM6CdMEMDAwAAAAAP//Qs4a6KM8w73niQAMDAwAAAAA///ClTVGVCAwMDAwAAAAAP//GmllBPZsz8DAAAAAAP//okbLcugDBgYGAAAAAP//Gq01QICBgQEAAAD//xoNCBBgYGAAAAAA//9CD4iRmT0YGBgAAAAA//8aSSkCdyQzMDAAAAAA//8abVCBAAMDAwAAAP//Gi0jQICBgQEAAAD//8IVEMMtVeD3DwMDAwAAAP//wpciQJpHRjZhYGAAAAAA//8iJmsM/8BgYGAAAAAA//8iNDAzHPochCOSgYEBAAAA//8aLSxBgIGBAQAAAP//IhQQQz1bEOd+BgYGAAAAAP//Gs4pgvhIZGBgAAAAAP//Gi0sQYCBgQEAAAD//xquKYK0yGNgYAAAAAD//yI2IIZ3qmBgYAAAAAD//yIlRQyVwCDdnQwMDAAAAAD//yI1awz21iZ5bmNgYAAAAAD//yK3jBiMAUK+exgYGAAAAAD//6J0yg9lHRKFZlHLHaQDBgYGAAAAAP//olatMaQDgYGBgQEAAAD//6I0RQx0X4Q62ZOBgQEAAAD//yInIAZLR4x6ZRQDAwMAAAD//yI2IAZbL5S6BTUDAwMAAAD//2IZYl1t2tRUDAwMAAAAAP//GkpNbNpV1wwMDAAAAAD//2JBW4U6GAHt2ysMDAwAAAAA//9CLiMGW4DQr8HGwMAAAAAA///CVlgOdCOJ/i1WBgYGAAAAAP//IlRr0CtQBra5zsDAAAAAAP//IqUdQcxuGHLMGXjAwMAAAAAA//8DAGT8OpfyND5gAAAAAElFTkSuQmCC"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3405_2591)">
+<path d="M9.32 6.77L15.15 0H13.75L8.7 5.88L4.66 0H0L6.11 8.9L0 16H1.38L6.73 9.79L10.99 16H15.66L9.32 6.77ZM7.42 8.97L6.81 8.09L1.88 1.04H4L7.98 6.73L8.6 7.61L13.77 15.01H11.64L7.43 8.97H7.42Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_3405_2591">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 95f5163..e20f8f8 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -117,8 +117,16 @@
     navToggle.classList.add('is-active')
     navContainer.classList.add('is-active')
     var bounds = nav.getBoundingClientRect()
-    var expectedHeight = window.innerHeight - Math.round(bounds.top)
-    if (Math.round(bounds.height) !== expectedHeight) nav.style.height = expectedHeight + 'px'
+
+    const toolbar = document.querySelector('.toolbar')
+    const toolbarBottom = toolbar.getBoundingClientRect().bottom
+    var expectedHeight = window.innerHeight - toolbarBottom
+    if (Math.round(bounds.height) !== expectedHeight) {
+      nav.style.height = expectedHeight + 'px'
+    }
+    nav.style.top = toolbarBottom + 'px'
+    navContainer.style.top = toolbarBottom + 'px'
+
     html.addEventListener('click', hideNav)
   }
 
diff --git a/src/js/07-scrollable-header-nav.js b/src/js/07-scrollable-header-nav.js
new file mode 100644
index 0000000..6cd4e79
--- /dev/null
+++ b/src/js/07-scrollable-header-nav.js
@@ -0,0 +1,44 @@
+function adjustNav () {
+  const nav = document.querySelector('.nav')
+  const navMenu = document.querySelector('.nav-panel-menu')
+  const navExplore = document.querySelector('.nav-panel-explore')
+  const toolbar = document.querySelector('.toolbar')
+
+  const navbar = document.querySelector('.navbar')
+  const screenHeight = window.innerHeight
+
+  // It is a standard value and is set in the vars.css --globan-height
+  const globanHeight = 18
+
+  // Get the values of the CSS variables
+  const navbarHeight = navbar.getBoundingClientRect().height
+
+  // Calculate the maximum height
+  const maxHeight = screenHeight - ((navbarHeight / 2) + globanHeight)
+  // Calculate the height of the div based on its top position
+  var divTop = nav.getBoundingClientRect().top
+  const drawerHeight = navExplore.getBoundingClientRect().height
+
+  //If the width of the page is less than 1024px, change the top of the nav
+  if (window.matchMedia('(max-width: 1023.5px)').matches) {
+    const toolbaBottom = toolbar.getBoundingClientRect().bottom
+    divTop = toolbaBottom + 10
+  }
+
+  const divHeight = screenHeight - divTop
+
+  if (divHeight >= maxHeight) {
+    // Max height for side navigation. from this height and on must stay stable
+    return
+  }
+  const divMenuHeight = divHeight - drawerHeight
+  // Ensure height is non-negative
+  const calculatedHeight = Math.max(0, divHeight)
+
+  // Apply the calculated height to the div
+  nav.style.height = calculatedHeight + 'px'
+  navMenu.style.height = divMenuHeight + 'px'
+}
+
+window.addEventListener('scroll', adjustNav)
+window.addEventListener('resize', adjustNav)
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
index 14d2e66..59dd9cd 100644
--- a/src/partials/footer-content.hbs
+++ b/src/partials/footer-content.hbs
@@ -1,119 +1,169 @@
-<style type="text/css">@import url('/documents/d/global/custom');</style>
+<style type="text/css">
+    @import url('/documents/d/global/custom');
+</style>
 
 <div class="footer">
-  <div class="three-columns">
-
-      <div class="col-md-12 col-lg-4">
-          <div class="ls-footer-logo-DD"><a href="https://docs.ted.europa.eu/home/index.html"><img alt="TED Developer Docs" class="ls-op" src="{{{uiRootPath}}}/img/ted-logo-footer2.png" height="48"/></a></div>
-      </div>
-
-      <div class="col-md-12 col-lg-4">
-
-          <h3 class="h3-footer">Need Help?</h3>
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://ted.europa.eu/en/help-page">Help</a></li>
-              <li class="li-footer"><a href="https://simap.ted.europa.eu/contact">Contact the TED Helpdesk</a></li>
-          </ul>
-
-          <h3 class="h3-footer">Follow us</h3>
-          <ul class="ul-footer">
-              <li>
-                  <a href="https://twitter.com/eulawdatapubs"> <img src="{{{uiRootPath}}}/img/twitter.svg" class="icon-footer"/><span>Twitter</span></a>
-                  <a href="https://www.youtube.com/playlist?list=PLT5rARDev_rkQdFimoHlpv2Och1H0uBLs"><img src="{{{uiRootPath}}}/img/youtube.svg" class="icon-footer-2nd"/><span>YouTube</span></a>
-              </li>
-          </ul>
-
-          <h3 class="h3-footer">Legal</h3>
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://op.europa.eu/en/web/about-us/legal-notices/accessibility-statement">Accessibility</a></li>
-          </ul>
-
-      </div>
-
-      <div class="col-md-12 col-lg-4">
-
-          <h3 class="h3-footer">About us</h3>
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://op.europa.eu/en/web/about-us/about-publication-office-of-the-european-union">Our mission, vision, and values</a></li>
-              <li class="li-footer"><a href="https://op.europa.eu/en/web/general-publications/">Newsletter</a></li>
-          </ul>
-
-          <h3 class="h3-footer">Other services</h3>
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://ted.europa.eu/TED/main/HomePage.do">EU tenders</a></li>
-              <li class="li-footer"><a href="https://data.europa.eu/en">European data</a></li>
-              <li class="li-footer"><a href="https://op.europa.eu/en/web/eu-vocabularies">EU vocabularies</a></li>
-              <li class="li-footer"><a href="https://cordis.europa.eu/">EU research results</a></li>
-              <li class="li-footer"><a href="https://op.europa.eu/en/web/who-is-who">EU Whoiswho</a></li>
-              <li class="li-footer"><a href="/web/librarians-corner">EU publications</a></li>
-          </ul>
-      </div>
-  </div>
-
-  <div class="three-columns">
-      <div class="col-md-12 col-lg-4">
-          <!--<h2 class="sr-only" id="section-title-op">Publications Office of the European Union</h2> -->
-
-          <div class="ls-footer-logo"><a aria-labelledby="section-title-op" href="/"><img alt="European Union" class="ls-op" /></a></div>
-          <p class="byline-footer">Discover more on <a class="ls-underline" href="https://europa.eu/en/home"><span style="word-break: keep-all; white-space: nowrap; text-decoration: underline!important">europa.eu</span></a></p>
-          <div style="margin-top: 20px" >
-            <h3>This website is managed by<h3>
-            <img src="{{{uiRootPath}}}/img/op-logo-with-name.svg" class="logo" />
-          </div>
-
-      </div>
-      <div class="col-md-12 col-lg-4">
-          <h3 class="h3-footer">Contact the EU</h3>
-
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="tel:0080067891011">Call us 00 800 6 7 8 9 10 11</a></li>
-              <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/call-us_en">Use other Telephone options</a></li>
-              <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/write-us_en">Write to us via our contact forms</a></li>
-              <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/meet-us_en">Meet us at one of the EU centres</a></li>
-
-          </ul>
-
-          <h3 class="h3-footer">Social Media</h3>
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search"><i aria-hidden="true" class="gs-icon-twitter"></i>Search of EU social media channels</a></li>
-
-          </ul>
-
-          <h3 class="h3-footer">Legal</h3>
-
-          <ul class="ul-footer">
-              <li class="li-footer"><a aria-labelledby="section-title-op" href="https://european-union.europa.eu/languages-our-websites_en">Languages on our website</a></li>
-              <li class="li-footer"><a aria-labelledby="section-title-op" href="https://european-union.europa.eu/privacy-policy-european-union-website_en">Privacy Policy</a></li>
-              <li class="li-footer"><a aria-labelledby="section-title-op" href="https://european-union.europa.eu/legal-notice_en">Legal notice</a></li>
-              <li class="li-footer"><a aria-labelledby="section-title-op" href="https://european-union.europa.eu/cookies_en">Cookies</a></li>
-          </ul>
-      </div>
-      <div class="col-md-12 col-lg-4">
-          <h3 class="h3-footer">EU institutions</h3>
-
-          <ul class="ul-footer">
-              <li class="li-footer"><a href="https://www.europarl.europa.eu/portal/en">European Parliament</a></li>
-              <li class="li-footer"><a href="https://www.consilium.europa.eu/en/european-council/">European Council</a></li>
-              <li class="li-footer"><a href="https://www.consilium.europa.eu/en/">Council of the European Union</a></li>
-              <li class="li-footer"><a href="https://commission.europa.eu/index_en">European Commission</a></li>
-              <li class="li-footer"><a href="https://curia.europa.eu/jcms/jcms/j_6/en/">Court of Justice of the European Union (CJEU)</a></li>
-              <li class="li-footer"><a href="https://www.ecb.europa.eu/home/html/index.en.html">European Central Bank (ECB)</a></li>
-              <li class="li-footer"><a href="http://www.eca.europa.eu/en">European Court of Auditors (ECA)</a></li>
-              <li class="li-footer"><a href="https://www.eeas.europa.eu/_en">European External Action Services (EEAS)</a></li>
-              <li class="li-footer"><a href="https://www.eesc.europa.eu/en">European Economic and Social Committee (EESC)</a></li>
-              <li class="li-footer"><a href="https://cor.europa.eu/en/">European Committee of the Regions (CoR)</a></li>
-              <li class="li-footer"><a href="https://www.eib.org/en/index.htm">European Investment Bank (EIB)</a></li>
-              <li class="li-footer"><a href="https://www.ombudsman.europa.eu/en/home">European Ombudsman</a></li>
-              <li class="li-footer"><a href="https://edps.europa.eu/_en?lang=en">European Data Protection Supervisor (EDPS)</a></li>
-              <li class="li-footer"><a href="https://edpb.europa.eu/edpb_en">European Data protection Board</a></li>
-              <li class="li-footer"><a href="https://eu-careers.europa.eu/en">European Personnel Selection Office</a></li>
-              <li class="li-footer"><a href="https://op.europa.eu/en/home">Publications Office of the European Union</a></li>
-              <li class="li-footer"><a href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_en?f%5B0%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_DEC&f%5B1%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_EXEC&f%5B2%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/EU_JU">Agencies</a></li>
-          </ul>
-      </div>
-
-      <script>
-        ECL.autoInit();
-      </script>
-  </div>
+    <div class="three-columns">
+
+        <div class="col-md-12 col-lg-4">
+            <div class="ls-footer-logo-DD"><a href="https://docs.ted.europa.eu/home/index.html"><img
+                        alt="TED Developer Docs" class="ls-op" src="{{{uiRootPath}}}/img/ted-logo-footer2.png"
+                        height="48" /></a></div>
+            <span class="ted-footer__title ted-footer__title--main"></span>
+            <div class="ted-footer__rich-text">
+                <p>This website is managed by:
+                    <u>
+                        <a href="https://op.europa.eu/en/home" target="_blank">Publications Office of the European
+                            Union</a>
+                    </u>
+                </p>
+                {{!-- <img src="{{{uiRootPath}}}/img/op-logo-with-name.svg" class="logo" /> --}}
+
+            </div>
+        </div>
+
+        <div class="col-md-12 col-lg-4">
+
+            <h3 class="ted-footer__title">Need Help?</h3>
+            <ul class="ul-footer">
+                <li class="li-footer"><a href="https://ted.europa.eu/en/help-page">Help</a></li>
+                <li class="li-footer"><a href="https://ted.europa.eu/en/contact">Contact the TED Helpdesk</a></li>
+            </ul>
+
+            <h3 class="ted-footer__title">Follow us</h3>
+            <ul class="ul-footer">
+                <li class="li-footer">
+                    <a href="https://twitter.com/EUTenders"> <img src="{{{uiRootPath}}}/img/twitter.svg"
+                            class="icon-footer" /><span>X/Twitter</span></a>
+                    <a href="https://www.youtube.com/playlist?list=PLT5rARDev_rkQdFimoHlpv2Och1H0uBLs"><img
+                            src="{{{uiRootPath}}}/img/youtube.svg" class="icon-footer-2nd" /><span>YouTube</span></a>
+                </li>
+            </ul>
+
+            <h3 class="ted-footer__title">Legal</h3>
+            <ul class="ul-footer">
+                <li class="li-footer"><a href="https://ted.europa.eu/en/legal-notice" target="_blank">Legal Notice</a>
+                </li>
+                <li class="li-footer"><a href="https://ted.europa.eu/en/cookie-choice" target="_blank">Cookies</a>
+                </li>
+                <li class="li-footer"><a
+                        href="https://ted.europa.eu/en/accessibility"
+                        target="_blank">Accessibility</a>
+                </li>
+            </ul>
+
+        </div>
+
+        <div class="col-md-12 col-lg-4">
+
+            <h3 class="ted-footer__title">About us</h3>
+            <ul class="ul-footer">
+                <li class="li-footer"><a href="https://ted.europa.eu/">About TED</a></li>
+            </ul>
+
+            <h3 class="ted-footer__title">Other services</h3>
+            <ul class="ul-footer">
+                <li class="li-footer"><a href="https://ted.europa.eu/TED/main/HomePage.do">EU tenders</a></li>
+                <li class="li-footer"><a href="https://data.europa.eu/en">European data</a></li>
+                <li class="li-footer"><a href="https://op.europa.eu/en/web/eu-vocabularies">EU vocabularies</a></li>
+                <li class="li-footer"><a href="https://cordis.europa.eu/">EU research results</a></li>
+                <li class="li-footer"><a href="https://op.europa.eu/en/web/who-is-who">EU Whoiswho</a></li>
+                <li class="li-footer"><a href="/web/librarians-corner">EU publications</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="three-columns">
+        <div class="col-md-12 col-lg-4">
+            <!--<h2 class="sr-only" id="section-title-op">Publications Office of the European Union</h2> -->
+
+            <div class="ls-footer-logo"><a aria-labelledby="section-title-op" href="/"><img alt="European Union"
+                        class="ls-op" /></a></div>
+            <span class="ted-footer__title ted-footer__title--main"></span>
+           
+            <div class="ted-footer__rich-text">
+                <p class="byline-footer">Discover more on <a class="ls-underline" href="https://europa.eu/en/home"><span
+                            style="word-break: keep-all; white-space: nowrap; text-decoration: underline!important">europa.eu</span></a>
+                </p>
+
+            </div>
+        </div>
+        <div class="col-md-12 col-lg-4">
+            <h3 class="ted-footer__title">Contact the EU</h3>
+
+            <ul class="ul-footer">
+                <li class="li-footer"><a href="tel:0080067891011">Call us 00 800 6 7 8 9 10 11</a></li>
+                <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/call-us_en">Use other
+                        Telephone options</a></li>
+                <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/write-us_en">Write to us via
+                        our contact forms</a></li>
+                <li class="li-footer"><a href="https://european-union.europa.eu/contact-eu/meet-us_en">Meet us at one of
+                        the EU centres</a></li>
+
+            </ul>
+
+            <h3 class="ted-footer__title">Social Media</h3>
+            <ul class="ul-footer">
+                <li class="li-footer"><a
+                        href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search"><i
+                            aria-hidden="true" class="gs-icon-twitter"></i>Search of EU social media channels</a></li>
+
+            </ul>
+
+            <h3 class="ted-footer__title">Legal</h3>
+
+            <ul class="ul-footer">
+                <li class="li-footer"><a aria-labelledby="section-title-op"
+                        href="https://european-union.europa.eu/languages-our-websites_en">Languages on our website</a>
+                </li>
+                <li class="li-footer"><a aria-labelledby="section-title-op"
+                        href="https://european-union.europa.eu/privacy-policy-european-union-website_en">Privacy
+                        Policy</a></li>
+                <li class="li-footer"><a aria-labelledby="section-title-op"
+                        href="https://european-union.europa.eu/legal-notice_en">Legal notice</a></li>
+                <li class="li-footer"><a aria-labelledby="section-title-op"
+                        href="https://european-union.europa.eu/cookies_en">Cookies</a></li>
+            </ul>
+        </div>
+        <div class="col-md-12 col-lg-4">
+            <h3 class="ted-footer__title">EU institutions</h3>
+
+            <ul class="ul-footer">
+                <li class="li-footer institutions"><a href="https://www.europarl.europa.eu/portal/en">European Parliament</a></li>
+                <li class="li-footer institutions"><a href="https://www.consilium.europa.eu/en/european-council/">European
+                        Council</a></li>
+                <li class="li-footer institutions"><a href="https://www.consilium.europa.eu/en/">Council of the European Union</a>
+                </li>
+                <li class="li-footer institutions"><a href="https://commission.europa.eu/index_en">European Commission</a></li>
+                <li class="li-footer institutions"><a href="https://curia.europa.eu/jcms/jcms/j_6/en/">Court of Justice of the
+                        European Union (CJEU)</a></li>
+                <li class="li-footer institutions"><a href="https://www.ecb.europa.eu/home/html/index.en.html">European Central Bank
+                        (ECB)</a></li>
+                <li class="li-footer institutions"><a href="http://www.eca.europa.eu/en">European Court of Auditors (ECA)</a></li>
+                <li class="li-footer institutions"><a href="https://www.eeas.europa.eu/_en">European External Action Services
+                        (EEAS)</a></li>
+                <li class="li-footer institutions"><a href="https://www.eesc.europa.eu/en">European Economic and Social Committee
+                        (EESC)</a></li>
+                <li class="li-footer institutions"><a href="https://cor.europa.eu/en/">European Committee of the Regions (CoR)</a>
+                </li>
+                <li class="li-footer institutions"><a href="https://www.eib.org/en/index.htm">European Investment Bank (EIB)</a></li>
+                <li class="li-footer institutions"><a href="https://www.ombudsman.europa.eu/en/home">European Ombudsman</a></li>
+                <li class="li-footer institutions"><a href="https://edps.europa.eu/_en?lang=en">European Data Protection Supervisor
+                        (EDPS)</a></li>
+                <li class="li-footer institutions"><a href="https://edpb.europa.eu/edpb_en">European Data protection Board</a></li>
+                <li class="li-footer institutions"><a href="https://eu-careers.europa.eu/en">European Personnel Selection Office</a>
+                </li>
+                <li class="li-footer institutions"><a href="https://op.europa.eu/en/home">Publications Office of the European
+                        Union</a></li>
+                <li class="li-footer institutions"><a
+                        href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_en?f%5B0%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_DEC&f%5B1%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_EXEC&f%5B2%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/EU_JU">Agencies</a>
+                </li>
+                <li class="li-footer search-institutions"><a href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_en">Search for EU institutions</a></li>
+            </ul>
+        </div>
+
+        <script>
+            ECL.autoInit();
+        </script>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/partials/header.hbs b/src/partials/header.hbs
index b3a4c00..051496f 100644
--- a/src/partials/header.hbs
+++ b/src/partials/header.hbs
@@ -1,34 +1,44 @@
-
 {{>header-scripts}}
 
-<header class="header">
-
-        <div class="container">
-<div>
-    <nav class="navbar">
-
+<div class="eu-flag">
+    <nav class="navbar-scrollable">
         <div class="navbar-brand">
 
             <div class="eu-emblem" style="display: inline-block;">
                 <!-- flag and logo-->
-                <div class="eu-emblem-std-en" ><a href="https://european-union.europa.eu/index_en"><span></span></a></div>
-            </div>
+                <a href="https://european-union.europa.eu/index_en" target="_blank">
+                    <div class="eu-emblem-std-en"><span></span>
+                    </div>
+                </a>
 
+            </div>
         </div>
-         <div class="sep-frame">
+        <div class="sep-frame">
             <div class="rect-grey"></div>
         </div>
-        <div class="text-eu-tenders">EU tenders</div>
+    </nav>
 
+</div>
+
+<div class="eu-tenders">
+    <nav class="navbar">
+        <div class="text-eu-tenders">
+            <a href="https://ted.europa.eu/en/" target="_blank">EU tenders</a>
+        </div>
         <div id="topbar-nav" class="navbar-menu">
-                    <div class="text-eu-subtext-text">TED Developer Docs</div>
-                    <div class="text-eu-subtext-label">Documentation for TED developers and eSenders</div>
+
+            <div class="text-eu-subtext-text">
+                <a href="/">TED Developer Docs</a>
+            </div>
+ <div class="text-eu-subtext-label">
+                <a href="/">Documentation for TED developers and eSenders</a>
+            </div>
             <div class="navbar-end">
-                    {{#if env.SEARCH_ENABLED}}
-                    <div class="navbar-item search">
-                        <input id="search-input" type="text" placeholder="Search docs">
-                    </div>
-                    {{/if}}
+                {{#if env.SEARCH_ENABLED}}
+                <div class="navbar-item search">
+                    <input id="search-input" type="text" placeholder="Search docs">
+                </div>
+                {{/if}}
             </div>
         </div>
     </nav>
diff --git a/src/partials/main.hbs b/src/partials/main.hbs
index d3e2411..40b20bf 100644
--- a/src/partials/main.hbs
+++ b/src/partials/main.hbs
@@ -1,11 +1,25 @@
 <main class="article">
 {{> toolbar}}
   <div class="content">
-{{#if (eq page.layout '404')}}
-{{> article-404}}
-{{else}}
-{{> toc}}
-{{> article}}
-{{/if}}
+    {{#if (eq page.layout '404')}}
+    {{> article-404}}
+    {{else}}
+    {{> toc}}
+    {{> article}}
+    <div id="widgetContainer">
+      {{> widget}}
+    </div>
+    {{/if}}
   </div>
 </main>
+
+<script>
+  // Get the current URL
+  var url = window.location.href;
+
+  // Check if the URL ends with 'home/index.html'
+  if (!url.endsWith('/home/index.html')) {
+    // If it doesn't, hide the widget
+    document.getElementById('widgetContainer').style.display = 'none';
+  }
+</script>
\ No newline at end of file
diff --git a/src/partials/nav-scripts.hbs b/src/partials/nav-scripts.hbs
new file mode 100644
index 0000000..e45dab9
--- /dev/null
+++ b/src/partials/nav-scripts.hbs
@@ -0,0 +1 @@
+<script src="{{{uiRootPath}}}/js/07-scrollable-header-nav.js"></script>
diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
index 7e0f091..7181033 100644
--- a/src/partials/nav.hbs
+++ b/src/partials/nav.hbs
@@ -1,3 +1,4 @@
+{{> nav-scripts}}
 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
diff --git a/src/partials/widget.hbs b/src/partials/widget.hbs
new file mode 100644
index 0000000..0376d52
--- /dev/null
+++ b/src/partials/widget.hbs
@@ -0,0 +1,11 @@
+<article class="widget">
+<div class="widget-title">
+    <p>Access other sites in the TED family</p>
+  </div>
+  <div class="links">
+    <a href="https://enotices2.ted.europa.eu/" target="_blank">eNotices2</a>
+    <a href="https://developer.ted.europa.eu/" target="_blank">TED Developer Portal</a>
+    <a href="https://ted.europa.eu/" target="_blank">TED Website</a>
+    {{!-- <a href="#">Link 3</a> --}}
+  </div>
+</article>