diff --git a/ui/src/components/FileExplorer.svelte b/ui/src/components/FileExplorer.svelte
index b5911d8f..46f6e7e1 100755
--- a/ui/src/components/FileExplorer.svelte
+++ b/ui/src/components/FileExplorer.svelte
@@ -9,8 +9,6 @@
 	export let retrieveFiles;
 	export let version;
 
-	// $: console.log(dataset, version);
-
 	let createWriteStream;
 	let files = null;
 	let tree = null;
@@ -40,7 +38,6 @@
 		// const streamsaver = await import("streamsaver");
 		// createWriteStream = streamsaver.createWriteStream;
 		files = await retrieveFiles(data.id, version.version_id);
-		console.log(files);
 		tree = buildFileTree(files);
 		currentLevel = tree;
 		loading = false;
@@ -92,7 +89,6 @@
 			onDetails = false;
 			currentPath = currentPath.slice(0, currentPath.length - 1);
 		}
-		console.log(folderIndex, navigationStack.length);
 		for (let i = 0; navigationStack.length - folderIndex > 0; i++) {
 			goBack();
 		}
diff --git a/ui/src/components/Leaderboard.svelte b/ui/src/components/Leaderboard.svelte
index 9fcceaa9..261c826c 100755
--- a/ui/src/components/Leaderboard.svelte
+++ b/ui/src/components/Leaderboard.svelte
@@ -1,25 +1,32 @@
 <script>
     export let leaderboard;
     export let field = "datasets";
-    export let msgText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolor asperiores repellendus quod id cupiditate consequatur tenetur corporis nesciunt. Commodi dignissimos repellendus laudantium quasi nesciunt porro corporis quidem rerum assumenda.";
+    export let msgText =
+        "Ingest datasets into EOTDL and climb up the leaderboard!";
     export let textOnLeft = false;
     export let textOnRight = false;
     $: leaderboard = leaderboard?.filter((l) => l[field] > 0);
 </script>
 
 <div class="w-full grid place-items-center">
-    <div class="w-full overflow-x-auto py-10 px-5 flex sm:flex-row flex-col justify-center items-center">
-        <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6 sm:hidden">Top contributors</h2>
-        {#if textOnLeft}        
-            <div class="sm:p-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
-                <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6">Top contributors</h2>
+    <div
+        class="w-full overflow-x-auto py-10 px-5 flex sm:flex-row flex-col justify-center"
+    >
+        <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6 sm:hidden">
+            Top contributors
+        </h2>
+        {#if textOnLeft}
+            <div class="sm:flex-col sm:w-96 w-500px] hidden sm:flex">
+                <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6">
+                    Top contributors
+                </h2>
                 <p>{msgText}</p>
             </div>
         {/if}
         <table class="w-full sm:max-w-2xl max-w-40 max-h-64 max-w">
             <thead>
                 <tr class="bg-[rgb(0,50,71)] text-white h-12">
-                    <th class="px-4"/>
+                    <th class="px-4" />
                     <th class="text-left px-4">Name</th>
                     <th class="px-4">{field}</th>
                 </tr>
@@ -27,9 +34,17 @@
             <tbody>
                 {#if leaderboard?.length > 0}
                     {#each leaderboard as user, i}
-                        <tr class={i % 2 ? "active bg-[rgb(74,191,167)] h-12 text-white" : "bg-white h-12"}>
+                        <tr
+                            class={i % 2
+                                ? "active bg-[rgb(74,191,167)] h-12 text-white"
+                                : "bg-white h-12"}
+                        >
                             <th class="px-4">{i + 1}</th>
-                            <td><p class="sm:w-[400px] w-[225px] px-4">{user.name}</p></td>
+                            <td
+                                ><p class="sm:w-[400px] w-[225px] px-4">
+                                    {user.name}
+                                </p></td
+                            >
                             <td class="text-center">{user[field]}</td>
                         </tr>
                     {/each}
@@ -52,11 +67,13 @@
                 {/if}
             </tbody>
         </table>
-        {#if textOnRight}    
-            <div class="sm:p-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
-                <h2 class="text-2xl font-bold text-[rgb(0,50,71)] pb-6">Top contributors</h2>
+        {#if textOnRight}
+            <div class="sm:pl-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
+                <h2 class="text-2xl font-bold text-[rgb(0,50,71)] pb-6">
+                    Top contributors
+                </h2>
                 <p>{msgText}</p>
-            </div>  
+            </div>
         {/if}
     </div>
 </div>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 4c9f99e9..99589c25 100755
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-  import HeroBackgorund from "./HeroBackgorund.svelte";
   import Hero from "./Hero.svelte";
   import Consortium from "./Consortium.svelte";
   import RecentDatasets from "./RecentDatasets.svelte";
@@ -22,7 +21,6 @@
 </svelte:head>
 
 <div class="w-full flex flex-col items-center">
-  <HeroBackgorund/>
   <Hero />
   <RecentDatasets />
   <PopularDatasets />
diff --git a/ui/src/routes/Consortium.svelte b/ui/src/routes/Consortium.svelte
index ef537053..80251b75 100755
--- a/ui/src/routes/Consortium.svelte
+++ b/ui/src/routes/Consortium.svelte
@@ -1,19 +1,18 @@
 <div
   class="grid sm:grid-rows-[100px,100px] grid-cols-1 max-w-5xl px-5 py-28 w-full"
 >
-
-  <div class="flex sm:flex-row flex-col h-full">
-    <h2 class="mb-10 text-2xl font-bold pt-10">Initiated By</h2>
+  <div class="flex sm:flex-row flex-col h-full sm:gap-12">
+    <h2 class="mb-10 text-md font-bold pt-10">Initiated By</h2>
     <img
       src="/logos/philab-esa_logo.jpg"
       alt="ESA logo"
       class="h-[120px] m-auto sm:m-0 sm:pl-12"
     />
   </div>
-  <div class="sm:flex sm:mb-0 mb-12">
-    <h2 class="text-2xl font-bold pt-8">Implemented By</h2>
+  <div class="sm:flex sm:mb-0 mb-12 sm:gap-12">
+    <h2 class="text-md font-bold pt-8">Implemented By</h2>
     <div
-      class="flex flex-wrap gap-5 items-center justify-center md:justify-start"
+      class="flex flex-wrap gap-5 items-center justify-center md:justify-start mt-8 sm:mt-0"
     >
       <a href="https://earthpulse.ai/" target="_blank" rel="noreferrer">
         <img src="/logos/ep_logo.svg" alt="earthpulse logo" class="h-[60px]" />
diff --git a/ui/src/routes/DatasetsLeaderboard.svelte b/ui/src/routes/DatasetsLeaderboard.svelte
index 239091db..b8412a88 100755
--- a/ui/src/routes/DatasetsLeaderboard.svelte
+++ b/ui/src/routes/DatasetsLeaderboard.svelte
@@ -9,6 +9,6 @@
 	});
 </script>
 
-<div class="mt-[100px] w-full">
-	<Leaderboard leaderboard={data} textOnLeft={true}/>
+<div class="sm:my-[100px] w-full">
+	<Leaderboard leaderboard={data} textOnLeft={true} />
 </div>
diff --git a/ui/src/routes/Hero.svelte b/ui/src/routes/Hero.svelte
index 885b5da0..ecdfd19b 100755
--- a/ui/src/routes/Hero.svelte
+++ b/ui/src/routes/Hero.svelte
@@ -1,11 +1,17 @@
 <div
-  class="py-[80px] w-full md:py-[100px] min-h-[400px] flex flex-col items-center mt-[80px] md:mt-24 mb-24"
+  class="py-[80px] w-full md:py-[100px] min-h-[400px] flex flex-col items-center mb-12"
+  style="background: url('backgrounds/Group-1190.png') center center/cover"
 >
-  <div class="gap-3 max-w-[450px] text-center text-white flex flex-col items-center px-4">
-    <h1 class="text-5xl font-bold leading-[50px]">Earth Observation Training Data Lab</h1>
+  <div
+    class="gap-3 max-w-[450px] text-center text-white flex flex-col items-center px-4 mt-[80px] md:mt-24"
+  >
+    <h1 class="text-5xl font-bold leading-[50px]">
+      Earth Observation Training Data Lab
+    </h1>
+    <!-- <img src="https://github.com/earthpulse/eotdl/raw/main/eotdl/eotdl.png" /> -->
     <p class="py-6 leading-5">
       Create, share and use training datasets for Earth Observation Machine
-      Learning applications <br> with our open source tools.
+      Learning applications <br /> with our open source tools.
     </p>
     <span class="flex flex-row gap-1">
       <a
diff --git a/ui/src/routes/ModelsLeaderboard.svelte b/ui/src/routes/ModelsLeaderboard.svelte
index fdab9d5d..d9e3591e 100755
--- a/ui/src/routes/ModelsLeaderboard.svelte
+++ b/ui/src/routes/ModelsLeaderboard.svelte
@@ -9,6 +9,11 @@
 	});
 </script>
 
-<div class="mt-[100px] w-full">
-	<Leaderboard leaderboard={data} field="models" textOnRight={true}/>
+<div class="sm:my-[100px] w-full">
+	<Leaderboard
+		leaderboard={data}
+		field="models"
+		textOnRight={true}
+		msgText="Ingest models into EOTDL and climb up the leaderboard!"
+	/>
 </div>
diff --git a/ui/src/routes/Nav2.svelte b/ui/src/routes/Nav2.svelte
index 6ccb2e3a..b5c624fa 100755
--- a/ui/src/routes/Nav2.svelte
+++ b/ui/src/routes/Nav2.svelte
@@ -34,100 +34,79 @@
         { href: "https://github.com/earthpulse/eotdl", label: "Github" },
         { href: "https://platform.ai4eo.eu/", label: "AI4EO" },
     ];
-    
 </script>
 
-<div class="flex flex-row sm:justify-between w-full justify-center">
-    <!-- {#if $page.url.pathname == "/"}
-        <div class="w-full p-3 bg-red-400 grid items-center">
-            <p class="m-auto max-w-6xl">
-                Meet us at the upcoming
-                <a
-                    class="text-white hover:underline"
-                    href="https://www.bigdatafromspace2023.org"
-                    target="_blank"
-                    rel="noopener noreferrer">BiDS'23</a
-                >
-                event, that will take place on 6-9 November 2023 in Vienna, Austria.
-                A <span class="underline">hands-on tutorial session </span>on
-                EOTDL will take place on November 6th from 9:00 to 12:30, and
-                everyone is welcome to join! More information
-                <a
-                    class="text-white hover:underline"
-                    href="https://www.bigdatafromspace2023.org/satellite-events"
-                    target="_blank"
-                    rel="noopener noreferrer">here</a
-                >.
-            </p>
-        </div>
-    {/if} -->
+<div class="grid place-items-center w-full">
     <ul
-        class="flex flex-row gap-14 w-fit max-w-6xl p-3 items-center pl-[18vh]"
+        class="flex flex-row gap-6 w-full justify-end max-w-6xl p-3 text-blue-500 items-center uppercase"
     >
         {#each links as link}
             <li
-                class="hidden font-bold lg:flex 
-                {$page.url.pathname == "/" ? "text-gray-300 hover:text-white" : "text-slate-600 hover:text-slate-800"} 
-                gap-1 text-[15px] items-center"
+                class="{$page.url.pathname == '/'
+                    ? 'text-gray-300 hover:text-white'
+                    : 'text-slate-600 hover:text-slate-800'}  
+                hidden lg:block text-slate-500 gap-2 text-sm"
             >
-                <svelte:component this={link.icon} />
                 <a
                     href={link.href}
-                    class="hover:underline flex flex-row gap-1 items-center"
+                    class="hover:underline flex floex-row gap-1 items-center"
                 >
-                {link.label}
+                    <svelte:component this={link.icon} class="h-4 w-4" />
+                    {link.label}
                 </a>
             </li>
         {/each}
-    </ul>
-    <ul class="flex flex-row gap-6 w-fit max-w-6xl p-3 text-blue-500 items-center sm:pr-[25vh]">
         <li>
             {#if $user}
                 <a
                     href={loading ? "" : "/api/auth/logout"}
-                    class="border-2 {$page.url.pathname == "/" ? "text-gray-300 hover:border-white border-slate-400" : "text-slate-600 border-slate-400 hover:border-slate-800"} rounded-md px-2"
+                    class="border-2 rounded-md px-2 hover:border-gray-300 {$page
+                        .url.pathname == '/'
+                        ? 'text-gray-300 hover:border-white border-slate-400'
+                        : 'text-slate-600 border-slate-400 hover:border-slate-800'}"
                     >Sign Out</a
                 >
             {:else}
                 <a
                     href={loading ? "" : "/api/auth/login"}
-                    class="border-2 {$page.url.pathname == "/" ? "text-gray-300 hover:border-white border-slate-400" : "text-slate-600 border-slate-400 hover:border-slate-800"} rounded-md px-2 "
+                    class="border-2 rounded-md px-2 hover:border-gray-300 {$page
+                        .url.pathname == '/'
+                        ? 'text-gray-300 hover:border-white border-slate-400'
+                        : 'text-slate-600 border-slate-400 hover:border-slate-800'}"
                     >Sign In</a
                 >
             {/if}
         </li>
         <li>
-            {#if $user}
-                <a href={$user ? "/profile" : ""}>
-                    <div
-                       class={$user ? "tooltip tooltip-bottom" : ""}
-                        data-tip={$user ? "Profile" : "Profile"}
-                    >
-                        <div class="avatar">
-                            <div class="w-10 rounded-full">
-                                <img
-                                    src={$user?.picture || "/avatar.webp"}
-                                    alt="avatar"
-                                />
-                            </div>
+            <a href={$user ? "/profile" : ""}>
+                <div
+                    class={$user ? "tooltip tooltip-bottom" : ""}
+                    data-tip={$user ? "Profile" : "Profile"}
+                >
+                    <div class="avatar">
+                        <div class="w-10 rounded-full">
+                            <img
+                                src={$user?.picture || "/avatar.webp"}
+                                alt="avatar"
+                            />
                         </div>
                     </div>
-                </a>
-            {/if}
+                </div>
+            </a>
         </li>
         <button tabindex="0" class="dropdown dropdown-end cursor-pointer">
             <div>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-7 w-7"
+                    class="h-5 w-5"
                     fill="none"
                     viewBox="0 0 24 24"
-                    stroke="{$page.url.pathname == "/" ? "white" : "black"}"
+                    stroke={$page.url.pathname == "/" ? "white" : "black"}
                     ><path
                         stroke-linecap="round"
                         stroke-linejoin="round"
-                        stroke-width="1"
-                        d="M 4 6 h 16 M 4 12 h 16 M 4 18 h 16"
+                        stroke-width="2"
+                        d="M4 6h16M4 12h16M4 18h7"
                     /></svg
                 >
             </div>
@@ -162,3 +141,107 @@
         </button>
     </ul>
 </div>
+
+<!-- <div class="grid place-items-center w-full">
+    <ul
+        class="flex flex-row gap-6 w-full justify-end max-w-6xl p-3 text-blue-500 items-center uppercase"
+    >
+        {#each links as link}
+            <li
+                class="hidden font-bold lg:flex
+                {$page.url.pathname == '/'
+                    ? 'text-gray-300 hover:text-white'
+                    : 'text-slate-600 hover:text-slate-800'} 
+                gap-1 text-[15px] items-center"
+            >
+                <svelte:component this={link.icon} />
+                <a
+                    href={link.href}
+                    class="hover:underline flex flex-row gap-1 items-center"
+                >
+                    {link.label}
+                </a>
+            </li>
+        {/each}
+    </ul>
+
+    <li>
+        {#if $user}
+            <a
+                href={loading ? "" : "/api/auth/logout"}
+                class="border-2 {$page.url.pathname == '/'
+                    ? 'text-gray-300 hover:border-white border-slate-400'
+                    : 'text-slate-600 border-slate-400 hover:border-slate-800'} rounded-md px-2"
+                >Sign Out</a
+            >
+        {:else}
+            <a
+                href={loading ? "" : "/api/auth/login"}
+                class="border-2 {$page.url.pathname == '/'
+                    ? 'text-gray-300 hover:border-white border-slate-400'
+                    : 'text-slate-600 border-slate-400 hover:border-slate-800'} rounded-md px-2"
+                >Sign In</a
+            >
+        {/if}
+    </li>
+    <li>
+        {#if $user}
+            <a href={$user ? "/profile" : ""}>
+                <div
+                    class={$user ? "tooltip tooltip-bottom" : ""}
+                    data-tip={$user ? "Profile" : "Profile"}
+                >
+                    <div class="avatar">
+                        <div class="w-10 rounded-full">
+                            <img
+                                src={$user?.picture || "/avatar.webp"}
+                                alt="avatar"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </a>
+        {/if}
+    </li>
+    <button tabindex="0" class="dropdown dropdown-end cursor-pointer">
+        <div>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-7 w-7"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke={$page.url.pathname == "/" ? "white" : "black"}
+                ><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1"
+                    d="M 4 6 h 16 M 4 12 h 16 M 4 18 h 16"
+                /></svg
+            >
+        </div>
+        <ul
+            class="px-7 text-black dropdown-content border py-4 flex flex-col gap-2 rounded mt-4 text-sm bg-slate-100"
+        >
+            {#each links as link}
+                <li class="lg:hidden block">
+                    <a href={link.href} class="hover:underline">{link.label}</a>
+                </li>
+            {/each}
+            {#each secondary_links as link}
+                <li>
+                    <a href={link.href} class="hover:underline">{link.label}</a>
+                </li>
+            {/each}
+            {#each external_links as link}
+                <li>
+                    <a
+                        href={link.href}
+                        class="hover:underline"
+                        target="_blank"
+                        rel="noopener noreferrer">{link.label}</a
+                    >
+                </li>
+            {/each}
+        </ul>
+    </button>
+</div> -->
diff --git a/ui/src/routes/datasets/+page.svelte b/ui/src/routes/datasets/+page.svelte
index d1fbac3e..206278fc 100755
--- a/ui/src/routes/datasets/+page.svelte
+++ b/ui/src/routes/datasets/+page.svelte
@@ -54,8 +54,6 @@
 				selected_qualities?.includes(dataset.quality),
 			);
 		}
-		console.log(filtered_datasets);
-
 	}
 
 	const toggleLike = () => {