diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css
index dd1e6c6e..addeb5c2 100644
--- a/cigaradvisor/blocks/article-teaser/article-teaser.css
+++ b/cigaradvisor/blocks/article-teaser/article-teaser.css
@@ -45,7 +45,7 @@
   font-weight: 600;
   background-color: #3c3a3b;
   font-size: 12px;
-  z-index: 9999;
+  z-index: 999;
   text-decoration: none;
 }
 
diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 11a1b696..989219e4 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,275 +1,650 @@
-/* header and nav layout */
-header .nav-wrapper {
-  background-color: var(--background-color);
-  width: 100%;
-  z-index: 2;
-  position: fixed;
-}
-
-header nav {
-  box-sizing: border-box;
-  display: grid;
-  grid-template:
-    'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
-  align-items: center;
-  gap: 0 2em;
-  margin: auto;
-  max-width: 1264px;
-  height: var(--nav-height);
-  padding: 0 1rem;
-  font-family: var(--body-font-family);
-}
-
-header nav[aria-expanded="true"] {
-  grid-template:
-    'hamburger brand' var(--nav-height)
-    'sections sections' 1fr
-    'tools tools' var(--nav-height) / auto 1fr;
-  overflow-y: auto;
-  min-height: 100vh;
-}
-
-@media (min-width: 600px) {
-  header nav {
-    padding: 0 2rem;
-  }
-}
-
-@media (min-width: 900px) {
-  header nav {
+/* stylelint-disable no-descending-specificity */
+.header.block nav {
+    display: none;
+}
+
+.header.block .nav-wrapper p {
+    color: var(--tan);
+    text-transform: uppercase;
+    margin: 0 auto;
+    font-size: 12px;
+}
+
+.header.block nav .default-content-wrapper {
+    display: block;
+    width: 100%;
+}
+
+.header.block nav .top-nav {
+    background-color: var(--clr-dark-gray);
+    min-height: 60px;
+    align-items: center;
+    height: 60px;
+}
+
+.header.block nav .brand-logo {
+    z-index: 1000;
+}
+
+
+.header.block nav .top-nav .top-nav-content {
+    display: flex;
+    max-width: 1080px;
+    margin: 0 auto;
+    height: 100%;
+}
+
+.header.block nav .top-nav-left,
+.top-nav-right {
+    width: calc(50% - 80px);
+    padding: 0 10px;
     display: flex;
+    justify-content: center;
+
+}
+
+.header.block nav .top-nav-left {
+    float: left;
+    justify-content: center;
+    align-items: center;
+}
+
+.header.block nav .top-nav-right {
+    float: right;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 10px;
+}
+
+.header.block nav .top-nav-right .twitter::before{
+    content: '\e61b';
+    font-family: var(--ff-fontawesome);
+    color: var(--tan);
+    font-size: 24px;
+}
+
+.header.block nav .top-nav-right .facebook::before{
+    content: '\f39e';
+    font-family: var(--ff-fontawesome);
+    color: var(--tan);
+    font-size: 24px;
+}
+
+.header.block nav .top-nav-right .instagram::before{
+    content: '\f16d';
+    font-family: var(--ff-fontawesome);
+    color: var(--tan);
+    font-size: 24px;
+}
+
+.header.block nav .top-nav-right .youtube::before{
+    content: '\f167';
+    font-family: var(--ff-fontawesome);
+    color: var(--tan);
+    font-size: 24px;
+}
+
+.header.block nav .top-nav-right .pinterest::before{
+    content: '\f231';
+    font-family: var(--ff-fontawesome);
+    color: var(--tan);
+    font-size: 24px;
+}
+
+
+.header.block nav .top-nav-left ul {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
-  }
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    padding-right: 25px;
+}
 
-  header nav[aria-expanded="true"] {
-    min-height: 0;
-    overflow: visible;
-  }
+.header.block nav .top-nav-left ul li {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
 }
 
-header nav p {
-  margin: 0;
-  line-height: 1;
+.header.block nav .top-nav-left ul li span {
+    display: block;
+    width: 25px;
+    height: 25px;
+    margin-right: 5px;
 }
 
-header nav a:any-link {
-  color: currentcolor;
+.header.block nav .top-nav-right ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 5px;
 }
 
-/* hamburger */
-header nav .nav-hamburger {
-  grid-area: hamburger;
-  height: 22px;
-  display: flex;
-  align-items: center;
+.header.block nav .top-nav-right ul li {
+    flex: 0 0 auto;
+    margin: 0 8px;
+    font-weight: 400;
+    font-size: 14px;
 }
 
-header nav .nav-hamburger button {
-  height: 22px;
-  margin: 0;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  background-color: var(--background-color);
-  color: inherit;
-  overflow: initial;
-  text-overflow: initial;
-  white-space: initial;
+.header.block nav .top-nav-right .default-content-wrapper {
+    width: auto;
 }
 
-header nav .nav-hamburger-icon,
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  width: 20px;
+.header.block nav .default-content-wrapper ul a {
+    text-transform: uppercase;
+    color: var(--clr-white);
+    font-size: 14px;
+    font-weight: 400;
 }
 
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  content: '';
-  position: absolute;
-  background: currentcolor;
+
+/* Primary navigation */
+.header.block nav .primary-nav {
+    display: flex;
+    flex-grow: 1;
+    background-color: rgb(255 255 255 / 70%);    border: none;
+    position: static;
+    top: auto;
+    bottom: auto;
+    right: auto;
+    overflow: visible;
+    width: auto;
+    max-width: none;
+    padding-top: 10px;
+    transform: none;
+    transition: none;
+    z-index: auto;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon,
-header nav[aria-expanded="false"] .nav-hamburger-icon::before,
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  height: 2px;
-  border-radius: 2px;
-  background: currentcolor;
+.header.block nav .primary-nav ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    list-style-type: none;
+    padding: 0;
+    max-width: 1080px;
+    margin: 10px auto 0;
+    align-items: center;
+    width: 100%;
+    text-align: center;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon::before {
-  top: -6px;
+.header.block nav .primary-nav ul li {
+    display: flex;
+    flex: 0 0 auto;
+    margin-top: 0;
+    font-size: 14px;
+    font-family: var(--ff-open-sans);
+    font-weight: 600;
+    color: var(--clr-dark-gray);
+    cursor: default;
+    padding-bottom: 0.65em;
 }
 
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  top: 6px;
+.header.block nav .primary-nav.solid-nav {
+    background-color: var(--silver);
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon {
-  height: 22px;
+.header.block nav .primary-nav ul li a {
+    padding: 10px 20px;
+    font-family: montserrat, sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    background-color: transparent;
+    border: 2px solid transparent;
+    color: var(--clr-dark-gray);
+    margin: 0;
+    cursor: pointer;
+    font-size: 14px;
+    position: relative;
+    z-index: 111;
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon::before,
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: 3px;
-  left: 1px;
-  transform: rotate(45deg);
-  transform-origin: 2px 1px;
-  width: 24px;
-  height: 2px;
-  border-radius: 2px;
+.header.block nav .icon-search{
+    padding: 0 20px;
 }
 
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: unset;
-  bottom: 3px;
-  transform: rotate(-45deg);
+.header.block nav .icon-search img{
+    width: 18px;
+    height: 18px;
 }
 
-@media (min-width: 900px) {
-  header nav .nav-hamburger {
+.header.block nav .primary-nav ul li>a:hover{
+    border-color: var(--tan);
+}
+
+.header.block nav .primary-nav ul li a::after {
     display: none;
+    content: "";
+    position: absolute;
     visibility: hidden;
-  }
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: var(--clr-white);
 }
 
-/* brand */
-header .nav-brand {
-  grid-area: brand;
-  flex-basis: 128px;
-  font-size: var(--heading-font-size-s);
-  font-weight: 700;
-  line-height: 1;
+.header.block nav .primary-nav .nav-drop:not([data-secondarynav='search-box']) span::after {
+    font-size: 16px;
+    content: '\f107';
+    font-family: FontAwesome, Arial, sans-serif;
+    margin-left: 10px;
 }
 
-header nav .nav-brand img {
-  width: 128px;
-  height: auto;
+/* Secondary navigation */
+.header.block nav .secondary-nav-box {
+    display: none;
+    background-color: var(--clr-white);
+    border: 2px solid var(--tan);
+    left: 0;
+    right: 0;
+    width: 100%;
+    max-width: 1080px;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 110;
 }
 
-/* sections */
-header nav .nav-sections {
-  grid-area: sections;
-  flex: 1 1 auto;
-  display: none;
-  visibility: hidden;
-  background-color: var(--overlay-color);
+.header.block nav .secondary-nav-box>ul {
+    column-count: 3;
+    width: 100%;
+    padding: 3em;
 }
 
-header nav[aria-expanded="true"] .nav-sections {
-  display: block;
-  visibility: visible;
-  align-self: start;
+.header.block nav .secondary-nav-box.browse-categories ul li {
+    line-height: 2;
+    font-size: 14px;
+    font-family: var(--ff-open-sans);
+    font-weight: 600;
+    color: var(--clr-dark-gray);
+    cursor: default;
 }
 
-header nav .nav-sections ul  {
-  list-style: none;
-  padding-left: 0;
-  font-size: var(--body-font-size-s);
-  font-weight: 500;
+.header.block nav .secondary-nav-box.browse-categories ul li a {
+    color: var(--tan);
+    font-size: 16px;
+    text-transform: uppercase;
+    font-family: montserrat, sans-serif;
+    font-weight: 600;
 }
 
-header nav .nav-sections ul > li {
-  font-weight: 700;
+/* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned */
+.header.block nav .secondary-nav-box ul li span img,
+.header.block nav .secondary-nav-box.shop-cigars ul li a {
+    display: block;
+    text-align: center;
 }
 
-header nav .nav-sections ul > li > ul {
-  margin-top: 0;
+.header.block nav .secondary-nav-box.shop-cigars ul li a {
+    margin: 14px 0;
 }
 
-header nav .nav-sections ul > li > ul > li {
-  font-weight: 500;
+.header.block nav .secondary-nav-box.shop-cigars ul {
+    padding: 16px;
 }
 
-@media (min-width: 900px) {
-  header nav .nav-sections {
-    display: block;
-    visibility: visible;
-    white-space: nowrap;
-  }
+/* make above img centered */
+.header.block nav .secondary-nav-box ul li span img {
+    margin: 0 auto;
+    width: auto;
+    height: auto;
+}
+
+.header.block nav .secondary-nav-box.search-box {
+    border: none;
+    left: calc(60%);
+    padding: 0;
+    background-color: transparent;
+    margin-right: 25%;
+}
+
+.header.block nav .secondary-nav-box.search-box form::before {
+    display: none;
+    line-height: 2.5em;
+}
 
-  header nav[aria-expanded="true"] .nav-sections {
-    align-self: unset;
-  }
+.header.block nav .secondary-nav-box.search-box form::placeholder {
+    color: var(--clr-dark-gray);
+}
 
-  header nav .nav-sections .nav-drop {
+.header.block nav .secondary-nav-box.search-box form {
+    margin-right: 0;
+    float: right;
     position: relative;
-    padding-right: 16px;
-    cursor: pointer;
-  }
+    top: auto;
+    left: auto;
+    width: 20em;
+    height: auto;
+    font-size: .875em;
+    box-sizing: content-box;
+}
 
-  header nav .nav-sections .nav-drop::after {
-    content: '';
+.header.block nav .secondary-nav-box.search-box form label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    border: 0;
     display: inline-block;
+}
+
+.header.block nav .secondary-nav-box.search-box form input {
+    width: 100%;
+    padding-left: .8em;
+    padding-right: 2.571em;
+    border-radius: 0;
+    text-transform: capitalize;
+    border: 1px solid var(--tan);
+}
+
+.header.block nav .secondary-nav-box.search-box form button {
+    color: var(--clr-white);
+    width: auto;
+    background-color: var(--clr-dark-gray);
+    padding-left: 10px;
+    padding-right: 10px;
     position: absolute;
-    top: .5em;
-    right: 2px;
-    transform: rotate(135deg);
-    width: 6px;
-    height: 6px;
-    border: 2px solid currentcolor;
-    border-radius: 0 1px 0 0;
-    border-width: 2px 2px 0 0;
-  }
-
-  header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
-    top: unset;
-    bottom: .5em;
-    transform: rotate(315deg);
-  }
-
-  header nav .nav-sections ul {
+    top: 0;
+    right: 0;
+    height: 2.85rem;
+    line-height: 2.85rem;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+}
+
+.header.block nav .primary-nav ul li:last-child {
+    border: 2px solid transparent;
+    cursor: pointer;
+}
+
+/* Mobile navigation */
+.header.block .mobile-nav {
+    height: 100%;
+    display: flex;
+        flex-direction: column;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-wrapper {
+    background-color: var(--clr-white);
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 110;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    top: 6em;
+    border-right: 1px solid var(--very-light-grey);
+    bottom: 0;
+    right: 100%;
+    overflow: auto;
+    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-wrapper.nav-content-open{
+    transform: translate3d(-100%,0,0);}
+
+.header.block .mobile-nav .mobile-primary-nav-wrapper > * {
+    flex: 0 0 auto;
+}
+
+.header.block .mobile-nav .mobile-top-nav {
+    padding: 0 10px;
+    background-color: var(--clr-dark-gray);
+    height: auto;
+}
+
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper {
+    display: flex;
+}
+
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul {
     display: flex;
-    gap: 2em;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
     margin: 0;
-    font-size: var(--body-font-size-xs);
-  }
+    width: 65%;
+    min-height: 30px;
+}
 
-  header nav .nav-sections .default-content-wrapper > ul > li {
-    flex: 0 1 auto;
-    position: relative;
-    font-weight: 500;
-  }
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper p {
+   width: 35%;
+   font-size: 10px;
+}
+
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li {
+  margin: 2px;
+  flex: 1 1 auto;
+  border-left: 1px solid var(--tan);
+  justify-content: center;
+  display: flex;
+}
+
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li a{
+    margin: 0 auto;
+    width: 30px;
+    height: 25px;
+}
+
+.header.block .mobile-nav .mobile-primary-nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    margin: 0;
+    width: 100%;
+    background-color: rgb(255 255 255);
+    padding: 20px 0 5px;
+}
+
+.header.block .mobile-nav .mobile-primary-nav .nav-hamburger, .search{
+    width: 1.25em;
+    height: 1.25em;
+    font-size: 2em;
+    text-align: center;
+    color: var(--grey);
+}
+
+.header.block .mobile-nav .nav-hamburger i::before {
+    content: "\f0c9"; 
+    color: var(--tan);
+}
+
+.header.block .mobile-nav .fa-search::before {
+    content: "\f002";
+    color: var(--tan);
+}
+
+/* mobile primary nav */
+.header.block .mobile-nav .mobile-primary-nav-content{
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    margin: 0;
+    width: 100%;
+    padding-top: 15px;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-content ul{
+    list-style: none;
+    margin: 5px auto;
+    width: 100%;
+    background-color: rgb(255 255 255);
+    padding: 0 15px;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-content ul li{
+    display: block;
+    align-items: center;
+    border-bottom: 1px solid var(--light-grey);
+    min-height: 3.5rem;
+    font-family: --var(ff-open-sans);
+    font-weight: 600;
+    color: var(--clr-dark-gray);
+    font-size: 12px;
+    cursor: default;
+}
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul {
+.header.block .mobile-nav .mobile-primary-nav-content ul li div{
     display: none;
+    flex-direction: column;
+    align-items: left;
+    min-height: 3.5rem;
+    font-family: --var(ff-open-sans);
+    font-weight: 600;
+    color: var(--clr-dark-gray);
+    font-size: 12px;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-content ul li a{
+    background-color: transparent;
+    align-items: center;
+    border: none;
+    text-transform: uppercase;
     position: relative;
-  }
+    color: var(--clr-dark-gray);
+    line-height: 2.5em;
+    padding: 0 .3em 0 0;
+    text-align: left;
+    font-weight: 700;
+    cursor: pointer;
+    margin: 0 auto;
+    top: 10px;
+    font-size: 16px;
+}
 
-  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
-    display: block;
-    position: absolute;
-    left: -1em;
-    width: 200px;
-    margin-top: 12px;
-    padding: 1em;
-    background-color: var(--highlight-background-color);
-    white-space: initial;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
-    content: '';
-    position: absolute;
-    top: -8px;
-    left: 8px;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--highlight-background-color);
-  }
+.header.block .mobile-nav .mobile-primary-nav-content .nav-drop:not([data-secondarynav='search-box']) span::after {
+    float: right;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-content>ul>li:last-child {
+    display: none;
+}
+
+.header.block .mobile-nav .mobile-primary-nav-wrapper .mobile-social-nav ul {
+    display: flex;
+}
+
+.header.block .mobile-nav .secondary-nav-box ul{
+    padding: 12px 0;
+    margin: 0;
+    border: none;
+}
+
+.header.block .mobile-nav .nav-drop:not([data-secondarynav='search-box']) span::after {
+    font-size: 16px;
+    content: '\f107';
+    font-family: FontAwesome, Arial, sans-serif;
+    margin-left: 10px;
+}
+
+.header.block .mobile-nav .secondary-nav-box ul li{
+    border: none;
+}
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
-    padding: 8px 0;
-  }
+.header.block .mobile-nav .secondary-nav-box ul li a{
+    border: none;
+    padding: 0.65em 0;
+    color: rgb(20 20 20);
+    font-size: 12px;
 }
 
-/* tools */
-header nav .nav-tools {
-  grid-area: tools;
+.header.block .mobile-nav .secondary-nav-box ul li span{
+    display: none;
+}
+
+.header.block .mobile-nav .mobile-social-nav {
+    margin-top: 20px;
+    padding-top: 24px;
+}
+
+.header.block .mobile-nav .mobile-social-nav ul{
+    display: flex;
 }
+
+.header.block .mobile-nav .mobile-social-nav ul li{
+    flex: 1 1 auto;
+    margin-right: 10px;
+}
+
+.header.block .mobile-nav .mobile-social-nav ul li img{
+    height: 36px;
+    width: 36px;
+}
+
+.header.block .mobile-nav .mobile-social-nav .twitter::before{
+    content: '\e61b';
+    font-family: var(--ff-fontawesome);
+    color: var(--dark-grey);
+    font-size: 36px;
+}
+
+.header.block .mobile-nav .mobile-social-nav .facebook::before{
+    content: '\f39e';
+    font-family: var(--ff-fontawesome);
+    color: var(--dark-grey);
+    font-size: 36px;
+}
+
+.header.block .mobile-nav .mobile-social-nav .instagram::before{
+    content: '\f16d';
+    font-family: var(--ff-fontawesome);
+    color: var(--dark-grey);
+    font-size: 36px;
+}
+
+.header.block .mobile-nav .mobile-social-nav .youtube::before{
+    content: '\f167';
+    font-family: var(--ff-fontawesome);
+    color: var(--dark-grey);
+    font-size: 36px;
+}
+
+.header.block .mobile-nav .mobile-social-nav .pinterest::before{
+    content: '\f231';
+    font-family: var(--ff-fontawesome);
+    color: var(--dark-grey);
+    font-size: 36px;
+}
+
+@media screen and (min-width: 900px) {
+    .header.block nav {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .header.block .mobile-nav {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 775c5138..1e8ac8a0 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -1,148 +1,209 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
-
-function closeOnEscape(e) {
-  if (e.code === 'Escape') {
-    const nav = document.getElementById('nav');
-    const navSections = nav.querySelector('.nav-sections');
-    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
-    if (navSectionExpanded && isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleAllNavSections(navSections);
-      navSectionExpanded.focus();
-    } else if (!isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleMenu(nav, navSections);
-      nav.querySelector('button').focus();
-    }
-  }
-}
-
-function openOnKeydown(e) {
-  const focused = document.activeElement;
-  const isNavDrop = focused.className === 'nav-drop';
-  if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) {
-    const dropExpanded = focused.getAttribute('aria-expanded') === 'true';
-    // eslint-disable-next-line no-use-before-define
-    toggleAllNavSections(focused.closest('.nav-sections'));
-    focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true');
-  }
-}
-
-function focusNavSection() {
-  document.activeElement.addEventListener('keydown', openOnKeydown);
-}
+import { decorateSocialLinks, decorateExternalLink } from '../../scripts/scripts.js';
 
 /**
- * Toggles all nav sections
- * @param {Element} sections The container element
- * @param {Boolean} expanded Whether the element should be expanded or collapsed
- */
-function toggleAllNavSections(sections, expanded = false) {
-  sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => {
-    section.setAttribute('aria-expanded', expanded);
-  });
-}
-
-/**
- * Toggles the entire nav
- * @param {Element} nav The container element
- * @param {Element} navSections The nav sections within the container element
- * @param {*} forceExpanded Optional param to force nav expand behavior when not null
- */
-function toggleMenu(nav, navSections, forceExpanded = null) {
-  const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
-  const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
-  nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-  toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
-  button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
-  // enable nav dropdown keyboard accessibility
-  const navDrops = navSections.querySelectorAll('.nav-drop');
-  if (isDesktop.matches) {
-    navDrops.forEach((drop) => {
-      if (!drop.hasAttribute('tabindex')) {
-        drop.setAttribute('role', 'button');
-        drop.setAttribute('tabindex', 0);
-        drop.addEventListener('focus', focusNavSection);
-      }
-    });
-  } else {
-    navDrops.forEach((drop) => {
-      drop.removeAttribute('role');
-      drop.removeAttribute('tabindex');
-      drop.removeEventListener('focus', focusNavSection);
-    });
-  }
-  // enable menu collapse on escape keypress
-  if (!expanded || isDesktop.matches) {
-    // collapse menu on escape press
-    window.addEventListener('keydown', closeOnEscape);
-  } else {
-    window.removeEventListener('keydown', closeOnEscape);
-  }
-}
-
-/**
- * decorates the header, mainly the nav
- * @param {Element} block The header block element
+ * Decorates the header block with navigation elements.
+ * @param {HTMLElement} block - The header block element.
+ * @returns {Promise<void>} - A promise that resolves once the decoration is complete.
  */
 export default async function decorate(block) {
   // load nav as fragment
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta).pathname : '/cigaradvisor/nav';
   const fragment = await loadFragment(navPath);
-
   // decorate nav DOM
   const nav = document.createElement('nav');
   nav.id = 'nav';
-  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
 
-  const classes = ['brand', 'sections', 'tools'];
-  classes.forEach((c, i) => {
-    const section = nav.children[i];
-    if (section) section.classList.add(`nav-${c}`);
+  // add a separate div for mobile nav
+  const mobileNav = document.createElement('div');
+  mobileNav.className = 'mobile-nav';
+
+  const topNav = document.createElement('div');
+  topNav.className = 'top-nav';
+
+  const mobileTopNav = document.createElement('div');
+  mobileTopNav.className = 'mobile-top-nav';
+
+  mobileNav.append(mobileTopNav);
+
+  const topNavContent = document.createElement('div');
+  topNavContent.className = 'top-nav-content';
+  const topNavLeft = fragment.children[0];
+
+  const mobileTopNavContent = topNavLeft.cloneNode(true);
+
+  mobileTopNavContent.querySelectorAll('li').forEach((li) => {
+    const link = li.querySelector('a').getAttribute('href');
+    li.querySelector('a').remove();
+    const a = document.createElement('a');
+    a.setAttribute('href', link);
+    a.innerHTML = li.innerHTML;
+    li.innerHTML = '';
+    li.append(a);
   });
 
-  const navBrand = nav.querySelector('.nav-brand');
-  const brandLink = navBrand.querySelector('.button');
-  if (brandLink) {
-    brandLink.className = '';
-    brandLink.closest('.button-container').className = '';
-  }
-
-  const navSections = nav.querySelector('.nav-sections');
-  if (navSections) {
-    navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
-      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-      navSection.addEventListener('click', () => {
-        if (isDesktop.matches) {
-          const expanded = navSection.getAttribute('aria-expanded') === 'true';
-          toggleAllNavSections(navSections);
-          navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-        }
-      });
-    });
-  }
+  mobileTopNavContent.class = 'mobile-top-nav-content';
+  mobileTopNav.append(mobileTopNavContent);
 
-  // hamburger for mobile
-  const hamburger = document.createElement('div');
+  const mobilePrimaryNav = document.createElement('div');
+  mobilePrimaryNav.className = 'mobile-primary-nav';
+  const hamburger = document.createElement('a');
   hamburger.classList.add('nav-hamburger');
-  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
-      <span class="nav-hamburger-icon"></span>
-    </button>`;
-  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
-  nav.prepend(hamburger);
-  nav.setAttribute('aria-expanded', 'false');
-  // prevent mobile nav behavior on window resize
-  toggleMenu(nav, navSections, isDesktop.matches);
-  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+  hamburger.setAttribute('href', '#');
+  hamburger.setAttribute('title', 'Toggle navigation');
+  hamburger.innerHTML = '<i class="fa fa-bars"></i>';
+  mobilePrimaryNav.append(hamburger);
+  const mobileLogo = document.createElement('a');
+  mobileLogo.className = 'mobile-logo';
+  mobileLogo.setAttribute('href', '/cigaradvisor');
+  mobileLogo.setAttribute('title', 'Cigar Advisor Homepage');
+  mobileLogo.innerHTML = '<img src="/cigaradvisor/images/header/mobile-logo.png" alt="Cigar Advisor Logo">';
+  mobilePrimaryNav.append(mobileLogo);
+  const search = document.createElement('a');
+  search.className = 'search';
+  search.setAttribute('href', '/cigaradvisor/?s=');
+  search.setAttribute('title', 'Search');
+  search.innerHTML = '<i class="fa fa-search"></i>';
+  mobilePrimaryNav.append(search);
+  mobileNav.append(mobilePrimaryNav);
+
+  topNavLeft.classList.add('top-nav-left');
+  topNavContent.append(topNavLeft);
+  const brand = document.createElement('div');
+  brand.innerHTML = `<a href="/cigaradvisor" rel="home" class="layout__logo lg-andUp" title="Cigar Advisor Homepage">
+  <img src="/cigaradvisor/images/header/desktop-logo.png" alt="Cigar Advisor Logo">
+  </a>`;
+  brand.className = 'brand-logo';
+  topNavContent.append(brand);
+  const topNavRight = fragment.children[0];
+  decorateSocialLinks(topNavRight);
+  const socialNavMobile = topNavRight.cloneNode(true);
+  socialNavMobile.className = 'mobile-social-nav';
+  topNavRight.classList.add('top-nav-right');
+  topNavContent.append(topNavRight);
+  topNav.append(topNavContent);
+  nav.append(topNav);
+  const primaryNav = fragment.children[0];
+  primaryNav.className = 'primary-nav';
+  nav.append(primaryNav);
+
+  const navHeight = 60;
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > navHeight) {
+      primaryNav.classList.add('solid-nav');
+    } else {
+      primaryNav.classList.remove('solid-nav');
+    }
+  });
+
+  const mobilePrimaryNavContent = document.createElement('div');
+  mobilePrimaryNavContent.className = 'mobile-primary-nav-content';
+  const ul = document.createElement('ul');
 
+  // add nav-drop class to nav items with dropdowns
+  primaryNav.querySelectorAll('.default-content-wrapper > ul > li').forEach((li) => {
+    let mobileLi;
+    if (li.querySelector('ul')) {
+      const a = document.createElement('a');
+      a.setAttribute('href', '#');
+      const secondaryNavBox = document.createElement('div');
+      const text = li.childNodes[0].textContent;
+      a.innerHTML = `<span> ${text} </span>`;
+      li.childNodes[0].textContent = '';
+      const textToClass = text.trim().toLowerCase().replace(/\s/g, '-');
+      secondaryNavBox.className = `secondary-nav-box ${textToClass}`;
+      secondaryNavBox.append(li.querySelector('ul'));
+      li.className = 'nav-drop';
+      li.setAttribute('aria-expanded', 'false');
+      li.setAttribute('data-secondarynav', textToClass);
+      nav.append(secondaryNavBox);
+      li.append(a);
+      mobileLi = li.cloneNode(true);
+      mobileLi.append(secondaryNavBox.cloneNode(true));
+      ul.append(mobileLi);
+    } else {
+      mobileLi = li.cloneNode(true);
+      ul.append(mobileLi);
+    }
+  });
+
+  mobilePrimaryNavContent.append(ul);
+  const mobilePrimaryNavWrapper = document.createElement('div');
+  mobilePrimaryNavWrapper.className = 'mobile-primary-nav-wrapper nav-content-open';
+  mobilePrimaryNavWrapper.append(mobilePrimaryNavContent);
+  mobilePrimaryNavWrapper.append(socialNavMobile);
+  mobileNav.append(mobilePrimaryNavWrapper);
+
+  hamburger.addEventListener('click', () => {
+    mobilePrimaryNavWrapper.classList.toggle('nav-content-open');
+  });
+
+  const lastChild = primaryNav.querySelector('li:last-child');
+  lastChild.className = 'nav-drop';
+  lastChild.setAttribute('data-secondarynav', 'search-box');
+  lastChild.setAttribute('aria-expanded', 'false');
+  const searchBox = document.createElement('div');
+  searchBox.className = 'secondary-nav-box search-box';
+  searchBox.innerHTML = `<form action="/cigaradvisor/" class="search search--header lg-andUp">
+  <label class="sr-only" for="header-search-term">Search</label>
+  <input type="search" class="search__input predictiveSearch" id="header-search-term" maxlength="255" placeholder="Search here" name="s" autocomplete="off">
+  <button type="submit" class="search__submit" value="Submit" title="Submit">Submit</button>
+  </form>`;
+  nav.append(searchBox);
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
+  navWrapper.append(mobileNav);
   block.append(navWrapper);
+  decorateExternalLink(block);
+
+  const navDrops = nav.querySelectorAll('.nav-drop');
+  navDrops.forEach((drop) => {
+    drop.addEventListener('click', () => {
+      const secondaryNavBox = nav.querySelectorAll('.secondary-nav-box');
+      secondaryNavBox.forEach((box) => {
+        box.style.display = 'none';
+      });
+      navDrops.forEach((d) => {
+        if (d !== drop && d.getAttribute('aria-expanded') === 'true') {
+          d.setAttribute('aria-expanded', 'false');
+        }
+      });
+      const targetSecondaryNavClass = drop.dataset.secondarynav;
+      const targetSecondaryNavBox = nav.querySelector(`.${targetSecondaryNavClass}`);
+      if (drop.getAttribute('aria-expanded') === 'false') {
+        targetSecondaryNavBox.style.display = 'block';
+        drop.setAttribute('aria-expanded', 'true');
+      } else {
+        targetSecondaryNavBox.style.display = 'none';
+        drop.setAttribute('aria-expanded', 'false');
+      }
+    });
+  });
+
+  const mobileNavDrops = mobileNav.querySelectorAll('.nav-drop');
+  mobileNavDrops.forEach((drop) => {
+    drop.addEventListener('click', () => {
+      const secondaryNavBox = mobileNav.querySelectorAll('.secondary-nav-box');
+      secondaryNavBox.forEach((box) => {
+        box.style.display = 'none';
+      });
+      mobileNavDrops.forEach((d) => {
+        if (d !== drop && d.getAttribute('aria-expanded') === 'true') {
+          d.setAttribute('aria-expanded', 'false');
+        }
+      });
+      const targetSecondaryNavClass = drop.dataset.secondarynav;
+      const targetSecondaryNavBox = mobileNav.querySelector(`.${targetSecondaryNavClass}`);
+      if (drop.getAttribute('aria-expanded') === 'false') {
+        targetSecondaryNavBox.style.display = 'flex';
+        drop.setAttribute('aria-expanded', 'true');
+      } else {
+        targetSecondaryNavBox.style.display = 'none';
+        drop.setAttribute('aria-expanded', 'false');
+      }
+    });
+  });
 }
diff --git a/cigaradvisor/icons/search.svg b/cigaradvisor/icons/search.svg
deleted file mode 100644
index 637c677b..00000000
--- a/cigaradvisor/icons/search.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
-    c2.9,2.9,7.5,3.1,10.6,0.6c0,0.1,0,0.1,0,0.1l4.2,4.2c0.5,0.4,1.1,0.4,1.5,0c0.4-0.4,0.4-1,0-1.4L16.9,15.5
-    C16.9,15.5,16.9,15.5,16.9,15.5L16.9,15.5z M14.8,6.3c2.3,2.3,2.3,6.1,0,8.5c-2.3,2.3-6.1,2.3-8.5,0C4,12.5,4,8.7,6.3,6.3
-    C8.7,4,12.5,4,14.8,6.3z"/>
-</svg>
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index a4ddf6f0..eb72e12e 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/cigaradvisor/scripts/scripts.js
@@ -83,6 +83,11 @@ export function decorateMain(main) {
   buildTwoColumnGrid(main);
 }
 
+/**
+ * Checks if the given path is an external URL.
+ * @param {string} path - The path to be checked.
+ * @returns {boolean} - Returns true if the path is an external URL, false otherwise.
+ */
 export function isExternal(path) {
   try {
     const url = new URL(path);
@@ -92,6 +97,34 @@ export function isExternal(path) {
   }
 }
 
+/**
+ * Decorates external links by adding target="_blank" and rel="noopener".
+ * @param {HTMLElement} element - The element containing the external links.
+ */
+export function decorateExternalLink(element) {
+  const anchors = element.querySelectorAll('a');
+  anchors.forEach((a) => {
+    if (isExternal(a.getAttribute('href'))) {
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener');
+    }
+  });
+}
+
+/**
+ * Decorates social links by adding classes based on their text content.
+ * @param {HTMLElement} element - The element containing the social links.
+ */
+export function decorateSocialLinks(element) {
+  const socialLinks = element.querySelectorAll('a');
+  socialLinks.forEach((link) => {
+    const text = link.textContent;
+    const textToClass = text.trim().toLowerCase().replace(/\s/g, '-');
+    link.classList.add(textToClass);
+    link.textContent = '';
+  });
+}
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element
diff --git a/cigaradvisor/styles/lazy-styles.css b/cigaradvisor/styles/lazy-styles.css
index 3cb30e9c..bd0ef008 100644
--- a/cigaradvisor/styles/lazy-styles.css
+++ b/cigaradvisor/styles/lazy-styles.css
@@ -1 +1 @@
-/* add global styles that can be loaded post LCP here */
\ No newline at end of file
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=5.5.1');
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 59514e91..a2c4a773 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -121,12 +121,26 @@
 }
 
 
+@font-face {
+  font-family: "fontawesome-normal-400-fallback";
+  size-adjust: 137.621%;
+  src: local("Arial");
+}
+
 :root {
   /* colors */
-  --clr-white: #fff;
-  --clr-dark-gray: #141414;
   --clr-black: #000;
   --clr-pampas: #e9e4de;
+  --deep-reddish-brown: #673841;
+  --clr-dark-gray: #141414;
+  --clr-white: #fff;
+  --tan: #8e7b5c;
+  --subdued-gold: #b19b5e;
+  --silver: #ccc;
+  --very-light-grey: #ddd;
+  --grey: #333;
+  --light-grey: #d3d3d3;
+  --dark-grey: #3c3a3b;
 
   /* functional-colors */
   --clr-text: var(--clr-dark-gray);
@@ -139,6 +153,7 @@
   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
+  --ff-fontawesome: 'FontAwesome';
 
   /* body sizes */
   --text-size-xs: 12px;
@@ -148,9 +163,32 @@
   --text-size-xl: 24px;
 
   /* heading sizes */
+  --heading-font-size-xxs: 18px;
+  --heading-font-size-xs: 20px;
+  --heading-font-size-s: 24px;
+  --heading-font-size-m: 26px;
+  --heading-font-size-l: 35px;
+  --heading-font-size-xl: 40px;
+
+  /* Font Weights */
+  --font-weight-extrabold: 700;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-thin: 100;
+
+   /* Body */
+   --body-font-size-xxs: 10px;
+   --body-font-size-xs: 12px;
+   --body-font-size-s: 14px;
+   --body-font-size-m: 16px;
+   --body-font-size-l: 18px;
+   --body-font-size-xl: 20px;
+   --body-font-size-xxl: 24px;
 
   /* misc */
-  --nav-height: 64px;
+  --nav-height: 60px;
   --icon-size: var(--text-size-xl);
 }
 
@@ -173,7 +211,9 @@ html {
   line-height: 1.5
 }
 
-*, ::before, ::after{
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -193,13 +233,21 @@ h2 {
   font-size: 12px;
 }
 
-a{
+a {
   font-family: var(--ff-montserrat);
   font-weight: 600;
   color: var(--clr-text);
   font-size: 12px;
   background-color: transparent;
-  text-decoration:none
+  text-decoration: none
+}
+
+p {
+  font-family: var(--ff-opensans);
+  font-weight: 600;
+  color: var(--clr-dark-gray);
+  font-size: 12px;
+  cursor: default
 }
 
 a:hover {
@@ -208,16 +256,61 @@ a:hover {
   outline-width: 0;
 }
 
-a:active, a:hover {
+a:active,
+a:hover {
   outline-width: 0;
 }
 
+ul {
+  list-style-type: none;
+}
+
+li {
+  font-family: var(--ff-opensans);
+  font-weight: 600;
+  color: var(--clr-dark-gray);
+  font-size: 12px;
+  cursor: default;
+}
+
+input {
+  font-size: 1em;
+  font-family: var(--ff-arial);
+  height: 2.85rem;
+  padding: 0 .5em;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  outline: none;
+  border: 1px solid;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+  background-color: var(--clr-white);
+  border-color: var(--very-light-grey);
+  margin: 0;
+}
+
+button {
+  font-family: montserrat, sans-serif;
+  font-weight: 700;
+  color: var(--clr-white);
+  text-transform: uppercase;
+  background-color: var(--tan);
+  border-color: var(--tan);
+  display: inline-block;
+  line-height: 26px;
+  height: 50px;
+  width: 250px;
+  max-height: 50px;
+  max-width: 250px;
+}
+
 .default-content-wrapper {
   color: var(--clr-text);
 }
 
 /* Two-column grid */
-main .section[data-layout="50/50"]{
+main .section[data-layout="50/50"] {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
@@ -228,24 +321,24 @@ main .section[data-layout="50/50"]{
   display: flex;
 }
 
-@media screen and (max-width: 600px){
-  main .section[data-layout="50/50"]{
+@media screen and (max-width: 600px) {
+  main .section[data-layout="50/50"] {
     width: 100%;
     flex-direction: column;
   }
 }
 
-main .section[data-layout="50/50"] > div {
+main .section[data-layout="50/50"]>div {
   display: flex;
   flex-basis: 100%;
   flex-direction: column;
 }
 
-main .section[data-layout="50/50"] .left-grid > div{
+main .section[data-layout="50/50"] .left-grid>div {
   padding: 10px;
 }
 
-main .section[data-layout="50/50"] .right-grid > div{
+main .section[data-layout="50/50"] .right-grid>div {
   padding: 10px;
 }