diff --git a/assets/css/app.css b/assets/css/app.css
index 1c550c92..20c3b1fa 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -11,17 +11,17 @@ h2 {
   @apply font-ibm-plex text-2xl mb-4;
 }
 .blocks-grid {
-  @apply grid grid-cols-6 gap-8;
+  @apply grid lg:grid-cols-6 gap-1 lg:gap-8 py-5 lg:py-0;
 }
 .transactions-grid {
-  @apply grid grid-cols-7 gap-8;
+  @apply grid lg:grid-cols-7 gap-1 lg:gap-8 py-5 lg:py-0;
 }
-.blocks-grid li,
-.transactions-grid li {
+.blocks-grid > div,
+.transactions-grid > div {
   @apply py-2;
 }
 .table-block {
-  @apply flex flex-col overflow-x-hidden text-sm py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331];
+  @apply flex flex-col overflow-x-hidden text-sm lg:py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331];
 }
 .table-header {
   @apply text-sm flex justify-between items-baseline py-2;
@@ -30,7 +30,10 @@ h2 {
   @apply font-semibold text-lg;
 }
 .table-th {
-  @apply font-ibm-plex text-sm pb-2 text-gray-400;
+  @apply hidden lg:grid font-ibm-plex text-sm pb-2 text-gray-400;
+}
+.list-h {
+  @apply font-ibm-plex text-sm pb-2 text-gray-400 lg:hidden;
 }
 form {
   @apply relative;
diff --git a/assets/js/app.js b/assets/js/app.js
index 50ce464e..1cc3f98f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -36,6 +36,20 @@ const setYear = () => {
   copyright.innerHTML = `LambdaClass © ${new Date().getFullYear()}`;
 };
 setYear();
+
+// Hamburger menu
+const hamburgerMenu = () => {
+  const hamburger = document.getElementById("hamburger");
+  const options = document.querySelector("#menu-options");
+  hamburger.addEventListener("click", () => {
+    options.classList.toggle("open");
+    options.classList.toggle("opacity-0");
+    options.classList.toggle("pointer-events-none");
+    document.body.classList.toggle("overflow-hidden");
+  });
+};
+hamburgerMenu();
+
 // connect if there are any LiveViews on the page
 liveSocket.connect();
 
diff --git a/lib/starknet_explorer_web/components/layouts/app.html.heex b/lib/starknet_explorer_web/components/layouts/app.html.heex
index 07f80fcb..86648243 100644
--- a/lib/starknet_explorer_web/components/layouts/app.html.heex
+++ b/lib/starknet_explorer_web/components/layouts/app.html.heex
@@ -1,21 +1,27 @@
-<main class="min-h-screen py-24">
-  <header class="absolute top-0 left-0 right-0 bg-[#111118]/80 flex justify-between items-center px-10 py-5">
-    <div class="flex justify-center items-center gap-4">
-      <a href="/" class="text-lg">
+<main class="px-5 md:px-10 lg:px-5 min-h-screen py-24">
+  <header>
+    <nav class="absolute top-0 left-0 w-screen flex justify-between items-center px-5 lg:px-10 py-5">
+      <a href="/" class="z-50 text-lg">
         <span class="uppercase">Starknet</span>
         <span class="font-semibold">Explorer</span>
       </a>
-    </div>
-    <div class="flex items-center gap-10">
-      <a href="/blocks" class="hover:text-se-blue transition-all duration-300"> Blocks </a>
-      <a href="/transactions" class="hover:text-se-blue transition-all duration-300">
-        Transactions
-      </a>
-      <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
-        id: "search-bar",
-        flash: @flash
-      ) %>
-    </div>
+      <img id="hamburger" class="z-50 lg:hidden" src={~p"/images/menu.svg"} />
+      <div
+        id="menu-options"
+        class="absolute lg:relative top-0 left-0 w-screen lg:w-auto h-screen lg:h-auto transition-all duration-300 opacity-0 lg:opacity-100 pointer-events-none lg:pointer-events-auto flex flex-col lg:flex-row justify-start items-center gap-5 bg-[#111118]/95 my-16 lg:my-0 py-10 lg:py-0 border-t lg:border-t-0"
+      >
+        <a href="/blocks" class="hover:text-se-blue transition-all duration-300">
+          Blocks
+        </a>
+        <a href="/transactions" class="hover:text-se-blue transition-all duration-300">
+          Transactions
+        </a>
+        <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
+          id: "search-bar",
+          flash: @flash
+        ) %>
+      </div>
+    </nav>
   </header>
   <div><.flash_group flash={@flash} /> <%= @inner_content %></div>
 </main>
diff --git a/lib/starknet_explorer_web/components/layouts/root.html.heex b/lib/starknet_explorer_web/components/layouts/root.html.heex
index 13b2ec48..3c6f5492 100644
--- a/lib/starknet_explorer_web/components/layouts/root.html.heex
+++ b/lib/starknet_explorer_web/components/layouts/root.html.heex
@@ -11,7 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-[#111118] text-white antialiased relative">
+  <body class="bg-[#111118] text-white antialiased relative lg:overflow-auto">
     <%= @inner_content %>
     <footer class="absolute bottom-0 left-0 right-0 flex justify-center items-center mt-10 py-4 text-gray-500">
       <p id="copyright"></p>
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 3027b4da..1c8140ea 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -20,7 +20,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
       <h1>Welcome to</h1>
       <h2>Starknet Explorer</h2>
     </div>
-    <div class="mx-auto max-w-6xl grid grid-cols-2 gap-10 mt-10">
+    <div class="mx-auto max-w-6xl grid lg:grid-cols-2 gap-10 mt-10">
       <div>
         <div class="table-header">
           <div class="table-title">Latest Blocks</div>
@@ -32,33 +32,44 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
           </a>
         </div>
         <div class="table-block">
-          <ul class="blocks-grid table-th">
-            <li scope="col">Number</li>
-            <li class="col-span-2" scope="col">Block Hash</li>
-            <li class="col-span-2" scope="col">Status</li>
-            <li scope="col">Age</li>
-          </ul>
+          <div class="blocks-grid table-th">
+            <div scope="col">Number</div>
+            <div class="col-span-2" scope="col">Block Hash</div>
+            <div class="col-span-2" scope="col">Status</div>
+            <div scope="col">Age</div>
+          </div>
           <div id="blocks">
             <%= for block <- Enum.take(@blocks, 15) do %>
-              <ul id={"block-#{block["block_number"]}"} class="blocks-grid border-t border-gray-600">
-                <li scope="row">
+              <div
+                id={"block-#{block["block_number"]}"}
+                class="blocks-grid border-t first-of-type:border-t-0 lg:first-of-type:border-t border-gray-600"
+              >
+                <div scope="row">
+                  <div class="list-h">Number</div>
                   <%= live_redirect(to_string(block["block_number"]),
                     to: "/block/#{block["block_number"]}",
                     class:
-                      "text-se-lilac hover:text-se-hover-lilac transition-all duration-300 underline-none font-medium"
+                      "text-se-lilac hover:text-se-hover-lilac transition-all duration-300 underline-none"
                   ) %>
-                </li>
-                <li class="col-span-2" scope="row">
+                </div>
+                <div class="col-span-2" scope="row">
+                  <div class="list-h">Block Hash</div>
                   <%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
                     to: "/block/#{block["block_hash"]}",
                     class:
-                      "text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none font-medium",
+                      "text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none",
                     title: block["block_hash"]
                   ) %>
-                </li>
-                <li class="col-span-2" scope="row"><%= block["status"] %></li>
-                <li scope="row"><%= Utils.get_block_age(block) %></li>
-              </ul>
+                </div>
+                <div class="col-span-2" scope="row">
+                  <div class="list-h">Status</div>
+                  <%= block["status"] %>
+                </div>
+                <div scope="row">
+                  <div class="list-h">Age</div>
+                  <%= Utils.get_block_age(block) %>
+                </div>
+              </div>
             <% end %>
           </div>
         </div>
@@ -75,30 +86,38 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
         </div>
         <div class="table-block">
           <div class="table-th">
-            <ul class="transactions-grid">
-              <li class="col-span-2" scope="col">Transaction Hash</li>
-              <li class="col-span-2" scope="col">Type</li>
-              <li class="col-span-2" scope="col">Status</li>
-              <li scope="col">Age</li>
-            </ul>
+            <div class="transactions-grid">
+              <div class="col-span-2" scope="col">Transaction Hash</div>
+              <div class="col-span-2" scope="col">Type</div>
+              <div class="col-span-2" scope="col">Status</div>
+              <div scope="col">Age</div>
+            </div>
           </div>
           <div id="transactions">
             <%= for block <- @latest_block do %>
               <%= for {transaction, idx} <- Enum.take(Enum.with_index(block["transactions"]), 15) do %>
-                <ul id={"transaction-#{idx}"} class="transactions-grid border-t border-gray-600">
-                  <li class="col-span-2" scope="row">
+                <div id={"transaction-#{idx}"} class="transactions-grid border-t border-gray-600">
+                  <div class="col-span-2" scope="row">
+                    <div class="list-h">Transaction Hash</div>
                     <%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
                       to: "/transactions/#{transaction["transaction_hash"]}",
                       class:
-                        "text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none font-medium"
+                        "text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none"
                     ) %>
-                  </li>
-                  <li class="col-span-2" scope="row">
+                  </div>
+                  <div class="col-span-2" scope="row">
+                    <div class="list-h">Type</div>
                     <%= transaction["type"] %>
-                  </li>
-                  <li class="col-span-2" scope="row"><%= block["status"] %></li>
-                  <li scope="row"><%= Utils.get_block_age(block) %></li>
-                </ul>
+                  </div>
+                  <div class="col-span-2" scope="row">
+                    <div class="list-h">Status</div>
+                    <%= block["status"] %>
+                  </div>
+                  <div scope="row">
+                    <div class="list-h">Age</div>
+                    <%= Utils.get_block_age(block) %>
+                  </div>
+                </div>
               <% end %>
             <% end %>
           </div>
diff --git a/priv/static/images/menu.svg b/priv/static/images/menu.svg
new file mode 100644
index 00000000..a39b4b9f
--- /dev/null
+++ b/priv/static/images/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bcbeff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>