diff --git a/_includes/header.html b/_includes/header.html
index 7d673a4..e0565fd 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,21 +1,11 @@
-<header class="header" style="background-image: url('{{ site.baseurl }}/assets/images/btr-texture.png');"> <!-- set bg url here so we can apply site.baseurl -->
-  <div class="container">
-    <div class="header-area-wrapper">
-      <div class="header-menu">
-        <ul class="header-menu-list ls-40">
-        {% for lang in site.languages %}
-          {% if forloop.index0 == 0 %}
-            <li><a href="{{ page.url | relative_url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li>
-          {% else %}
-            <li><a href="{{ lang + page.url | relative_url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li>
-          {% endif %}
-        {% endfor %}
-        </ul>
-      </div>
+<header class="header">
+  <div class="header-container">
+    <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
+    <div class="title">{% t site_name %}</div>
+    <div class="language-selector">
+      <img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
+      <span class="language-code">{{ site.lang | upcase }}</span>
+      <img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
     </div>
   </div>
-  <div class="header-content">
-    <img src="{{ site.baseurl }}/assets/images/paddy.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
-    <div class="header-title">{% t butter_box_title %}</div>
-  </div>
 </header>
\ No newline at end of file
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 9a74dc7..99205ff 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -46,52 +46,54 @@ a:active {
 // -------------------------
 .container {
   width: 100%;
-  max-width: 400px;
+  max-width: 1144px;
   margin: 0 auto;
 }
 
 .header {
-  position: relative;
-  background-color: $gold;
-  // Set background image in HTML so we can use site.baseurl
-  background-size: 170px;
-  padding: 0 0 100px 0;
-  text-align: center;
-  border-radius: 0 0 20px 20px;
-  z-index: 1;
+  height: 48px;
+  // center content vertically
+  display: flex;
+  align-items: center;
 
-  // Language selector
-  &-wrapper {
+  .header-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
-  }
-  .header-menu {
-    &-list {
-      padding-left: 0;
-      list-style: none;
-      li {
-        display: inline-block;
-        &.active {
-          font-weight: 600;
-        }
-        &:not(:last-child) {
-          margin: 10px;
-        }
-      }
-    }
+    width: 100%;
+    padding: 0 20px;
   }
 
+  .title {
+    text-align: left;
+    font-size: 14;
+    font-weight: 600;
+    margin: auto;
+    width: -webkit-fill-available;
+  }
+  
+  .language-selector {
+    align-items: center;
+    background-color: #F4F3F2;
+    border-radius: 16px;
+    display: flex;
+    height: 32px;
+    padding: 0 10px;
+    width: 100px;
+  }
+
+  .language-code {
+    margin: 0 8px;
+  }
 }
 
 .header-content {
   position: relative;
-  z-index: 2;
 }
 
 .header-image {
-  width: 150px;
+  height: 28px;
+  width: 28px;
+  margin-right: 20px;
 }
 
 .header-title {
@@ -102,24 +104,39 @@ a:active {
 }
 
 .content {
-  position: relative;
-  top: -100px;
   padding: 20px;
-  z-index: 2;
+}
+
+.card-set {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* Default to 2 columns */
+  gap: 10px; /* Adjust the gap between the cards */
+}
+
+@media (min-width: 900px) {
+  .card-set {
+    grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */
+  }
+}
+
+h1.homepage-title {
+  margin: 30px 0;
 }
 
 .card {
+  align-items: center;
   background-color: white;
-  padding: 20px;
-  margin: 10px 0;
+  border: 1px solid #E1E1DE;
   border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-align: center;
-  font-size: 1.2em;
   color: #333;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  font-size: 16px;
+  height: 160px;
+  justify-content: center;
+  margin: 10px 0;
+  padding: 20px;
+  text-align: center;
 }
 
 .card-icon {
diff --git a/assets/images/caret-down.svg b/assets/images/caret-down.svg
new file mode 100644
index 0000000..187d202
--- /dev/null
+++ b/assets/images/caret-down.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.52876 6.19543C3.78911 5.93508 4.21122 5.93508 4.47157 6.19542L8.00016 9.72402L11.5288 6.19542C11.7891 5.93507 12.2112 5.93507 12.4716 6.19542C12.7319 6.45577 12.7319 6.87788 12.4716 7.13823L8.47157 11.1382C8.21122 11.3986 7.78911 11.3986 7.52876 11.1382L3.52876 7.13823C3.26841 6.87788 3.26841 6.45577 3.52876 6.19543Z" fill="black"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/assets/images/globe.svg b/assets/images/globe.svg
new file mode 100644
index 0000000..fe1e5aa
--- /dev/null
+++ b/assets/images/globe.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 12H21" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/index.html b/index.html
index 357593c..3d1dd99 100644
--- a/index.html
+++ b/index.html
@@ -6,35 +6,28 @@ layout: default
 
 <div class="container">
   <div class="content">
-    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
-    <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}">
-      <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
-          {% t explore %}
-      </div>
+  <h1 class="homepage-title">{% t butter_box_title %}</h1>
+  <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
+  <div class="card-set">
+    <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
+      class="card">
+      <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
+      {% t explore %}
     </a>
-    <div id="usb-butter-placeholder">
-      <div class="card">
-          {% t explore_missing %}
-      </div>
+    <div id="usb-butter-placeholder" class="card">
+      {% t explore_missing %}
     </div>
-    <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">
-      <div class="card">
-        <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
-        {% t message_board %}
-      </div>
+    <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
+      <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
+      {% t message_board %}
     </a>
-    <a href="{{ site.baseurl }}/apps">
-      <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
-          {% t app_store %}
-      </div>
+    <a href="{{ site.baseurl }}/apps" class="card">
+      <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
+      {% t app_store %}
     </a>
-    <a href="{{ site.baseurl }}/maps">
-      <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
-          {% t offline_maps %}
-      </div>
+    <a href="{{ site.baseurl }}/maps" class="card">
+      <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
+      {% t offline_maps %}
     </a>
   </div>
-</div>
\ No newline at end of file
+</div></div>
\ No newline at end of file