diff --git a/src/assets/navbar/logo-sgcu.svg b/src/assets/navbar/logo-sgcu.svg
new file mode 100644
index 0000000..1ddea58
--- /dev/null
+++ b/src/assets/navbar/logo-sgcu.svg
@@ -0,0 +1,16 @@
+<svg width="59" height="98" viewBox="0 0 59 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Clip path group">
+<mask id="mask0_702_746" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="59" height="98">
+<g id="clip0_3103_513">
+<path id="Vector" d="M58.8 0H0V98H58.8V0Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_702_746)">
+<g id="Group">
+<path id="Vector_2" d="M47.9612 75.19C47.0383 74.8827 46.0754 74.821 45.1182 74.7304C44.9237 74.7116 44.7311 74.6767 44.5015 74.6445C44.5485 74.3925 44.5809 74.1964 44.6213 74.0023C45.0157 72.1245 45.1278 70.2306 44.8566 68.3301C44.5073 65.8857 43.5705 63.6722 42.103 61.6793C42.0182 61.5654 41.9593 61.4327 41.873 61.2785C42.051 61.2178 42.1754 61.1722 42.3033 61.1319C44.7519 60.3689 47.1238 59.4183 49.2624 57.9974C51.6686 56.3988 54.0213 54.7193 56.3952 53.0721C56.4561 53.0299 56.4915 52.9509 56.5485 52.8757C56.4642 52.8028 56.406 52.7422 56.3382 52.6942C54.6761 51.5319 53.0383 50.3346 51.3458 49.2183C47.9789 46.9979 44.3717 45.295 40.4062 44.4081C40.0646 44.3317 39.8338 44.125 39.7102 43.8069C39.6366 43.6193 39.5815 43.4241 39.5303 43.2288C39.0835 41.5386 38.644 39.8457 38.1931 38.1562C36.4435 31.5982 34.6763 25.045 32.9443 18.482C31.9546 14.7306 31.0327 10.9616 30.0607 7.20635C29.4961 5.02421 28.8923 2.85282 28.3022 0.677523C28.2806 0.597499 28.2168 0.52821 28.1186 0.363281C24.2551 15.0761 20.4201 29.6864 16.5929 44.2634C16.0667 44.3847 15.6062 44.4859 15.1476 44.5953C12.0716 45.3341 9.25964 46.6749 6.58708 48.3283C4.39958 49.6809 2.32988 51.2 0.270985 52.7353C0.183602 52.8009 0.113892 52.8914 0 53.0065C2.18948 54.7953 4.39761 56.4859 6.78541 57.9348C9.17617 59.3861 11.7113 60.5151 14.478 61.252C14.1541 61.7653 13.8762 62.2014 13.6013 62.6399C12.3082 64.703 11.5237 66.9357 11.3833 69.3697C11.291 70.9702 11.4697 72.558 11.725 74.137C11.7535 74.3134 11.7633 74.4941 11.7888 74.7412C11.5551 74.7412 11.3745 74.7343 11.1938 74.7419C10.4849 74.7753 9.7692 74.7684 9.0672 74.8589C7.53163 75.058 6.08048 75.5617 4.66959 76.1805C4.50169 76.2538 4.34754 76.365 4.19832 76.4744C4.00784 76.6148 3.91259 76.8139 3.95777 77.049C4.10013 77.7848 4.25232 78.5187 4.41333 79.3181C5.18994 79.0174 5.86251 78.7423 6.54486 78.4964C7.75939 78.0591 9.00045 77.738 10.3014 77.6755C11.0554 77.6394 11.7898 77.705 12.5007 77.9655C13.6877 78.3997 14.3229 79.2821 14.3465 80.5319C14.3544 80.9692 14.3592 81.4073 14.3603 81.8458C14.3632 84.3029 14.3642 86.7603 14.3642 89.2185C14.3642 90.0667 13.9813 90.6893 13.2478 91.1236C12.6028 91.5061 11.886 91.6369 11.1663 91.7002C9.72502 91.8264 8.34259 91.546 7.01028 90.9897C6.58415 90.8113 6.37503 90.5301 6.38093 90.0656C6.39267 89.1395 6.38385 88.2135 6.38778 87.2874C6.38778 87.1535 6.40446 87.0181 6.431 86.8873C6.55665 86.2635 6.80898 86.0272 7.44619 85.9463C7.62981 85.9229 7.81832 85.9279 8.00486 85.9267C8.86887 85.9248 9.73288 85.9267 10.5969 85.9229C10.7766 85.9229 10.9572 85.9014 11.1791 85.8868C11.1791 84.9627 11.1821 84.0892 11.1772 83.2168C11.1762 82.9602 10.9906 82.9387 10.7874 82.9387C9.70341 82.9425 8.6185 82.9287 7.53455 82.9475C6.8188 82.9602 6.12759 83.1133 5.47567 83.4236C4.1011 84.0777 3.43837 85.2143 3.34607 86.6725C3.24004 88.352 3.23905 90.0353 3.32349 91.7197C3.34902 92.2265 3.53459 92.6001 3.97838 92.8284C4.62441 93.1614 5.26655 93.5097 5.93712 93.7859C8.43196 94.8117 10.9945 95.0097 13.5885 94.2232C16.0362 93.4813 17.4746 91.7539 17.4923 89.0225C17.5099 86.2781 17.5149 83.5329 17.4893 80.7889C17.4707 78.7481 16.7029 77.0609 14.9611 75.882C14.8423 75.8019 14.7392 75.6994 14.5644 75.5541C14.8875 75.3998 15.1349 75.2652 15.3951 75.1585C16.2709 74.8014 17.1526 74.4611 18.0284 74.1017C20.6714 73.0176 23.3126 71.9323 25.9517 70.8401C27.5619 70.1738 29.1318 70.2294 30.7185 70.9652C32.1902 71.6473 33.6925 72.2661 35.1927 72.8848C36.8323 73.5612 38.4848 74.2041 40.1324 74.862C40.3307 74.941 40.5476 74.9967 40.6743 75.2786C40.4309 75.3822 40.2079 75.4896 39.976 75.5736C39.595 75.711 39.2025 75.8176 38.8254 75.9657C38.4818 76.1015 38.416 76.2331 38.4661 76.5925C38.5643 77.2922 38.6683 77.9908 38.7804 78.6874C38.7969 78.7941 38.8659 78.8927 38.9186 79.0116C39.0288 78.9832 39.1112 78.9706 39.1879 78.9414C40.2325 78.5325 41.3183 78.2827 42.4219 78.0925C43.6071 77.8872 44.7892 77.6689 46.0006 77.7322C47.3407 77.8024 48.5082 78.6759 48.8067 79.9143C49.0336 80.8522 49.1014 81.8301 48.8814 82.7688C48.4169 84.7498 47.8769 86.7124 47.3634 88.6819C47.1681 89.4303 46.9559 90.1761 46.7595 90.9245C46.6585 91.3108 46.4659 91.635 46.0469 91.6868C45.6532 91.7343 45.2488 91.6963 44.8412 91.6963C44.7811 91.4846 44.7126 91.3258 44.6949 91.1627C44.6105 90.4112 44.5497 89.6566 44.4611 88.9055C44.369 88.1206 44.3031 87.3292 44.1383 86.5593C43.8729 85.3256 43.2123 84.3673 41.8927 84.0999C41.0857 83.9369 40.251 83.9008 39.4255 83.8425C39.0689 83.8168 38.9383 83.9538 38.9198 84.3263C38.8882 84.9481 38.8882 85.5707 38.8863 86.1933C38.8844 86.6686 38.9552 86.7338 39.4517 86.7496C39.7738 86.7592 40.0958 86.7446 40.417 86.7622C40.962 86.7914 41.1643 86.9897 41.2409 87.5245C41.2644 87.6902 41.3114 87.8532 41.3322 88.0194C41.5129 89.4859 41.6873 90.9537 41.8711 92.4195C41.9192 92.8023 41.9801 93.1829 42.0498 93.5615C42.1214 93.9559 42.3776 94.1615 42.7674 94.2405C43.2154 94.3314 43.658 94.4457 44.1036 94.5451C45.0138 94.748 45.9221 94.7277 46.8145 94.4603C48.4631 93.9654 49.3822 92.7992 49.8151 91.1938C50.0813 90.2064 50.359 89.2216 50.6259 88.2338C51.1906 86.1454 51.8778 84.0865 52.0342 81.9041C52.0939 81.0716 52.0615 80.253 51.872 79.4497C51.3693 77.3137 50.0624 75.8859 47.9624 75.1862L47.9612 75.19ZM8.86394 50.6185C9.70441 50.0369 10.643 49.6525 11.5934 49.2992C14.0068 48.4011 16.4987 47.8012 19.0318 47.3531C21.0514 46.996 23.0818 46.755 25.1358 46.7512C25.5384 46.7512 25.9399 46.8026 26.3808 46.8329V51.1348C25.9821 51.2384 9.20856 51.2771 8.30531 51.1797C8.42702 50.9123 8.64993 50.7669 8.86394 50.6185ZM26.3317 59.2065C24.8157 59.1187 23.3224 59.032 21.7112 58.938C23.1702 57.6694 24.7303 56.7579 26.3022 55.8338C26.421 56.23 26.4416 58.5801 26.3317 59.2065ZM8.87965 55.144C8.74122 55.0658 8.62339 54.9514 8.49674 54.854C8.51442 54.8187 8.53307 54.7838 8.55075 54.7497H21.2851C21.1849 54.9925 20.9817 55.0822 20.8236 55.2142C19.994 55.9032 19.1221 56.5492 18.3455 57.2938C17.5139 58.0902 16.6234 58.2989 15.5198 57.9985C13.1683 57.3563 10.9867 56.3401 8.87965 55.1448V55.144ZM25.7661 67.246C24.371 67.8015 22.9777 68.3616 21.5855 68.9217C19.5021 69.7599 17.4196 70.6004 15.3362 71.4386C15.1977 71.4942 15.0554 71.5399 14.8355 71.6193C14.8355 71.3116 14.8178 71.0757 14.8384 70.8444C14.9336 69.7591 14.9238 68.6631 15.184 67.5944C15.6013 65.8788 16.4417 64.38 17.5374 63.0097C17.7053 62.7987 17.8889 62.6008 18.0578 62.3909C18.2659 62.1312 18.5271 62.0338 18.8609 62.0622C19.5688 62.1217 20.2777 62.1589 20.9866 62.2145C22.6381 62.343 24.2895 62.4757 25.9409 62.6096C26.0735 62.6204 26.2041 62.6426 26.3827 62.6652C26.3945 62.8417 26.4142 63.004 26.4142 63.1647C26.4161 64.207 26.3935 65.2504 26.421 66.2927C26.4348 66.7972 26.207 67.0715 25.7691 67.246H25.7661ZM26.4652 31.7504C26.4593 32.9615 26.4348 34.1726 26.4289 35.3837C26.4181 37.6888 26.4142 39.9938 26.4073 42.2982C26.4073 42.4328 26.4142 42.5682 26.3975 42.701C26.3503 43.0719 26.2041 43.2419 25.8339 43.3109C25.5531 43.3639 25.2654 43.3873 24.9807 43.4095C24.6105 43.4387 24.2394 43.4575 23.8673 43.4751C22.7058 43.5296 21.5433 43.5821 20.3003 43.6401C22.2424 36.1039 24.1638 28.647 26.0892 21.1911C26.1127 21.1013 26.1785 21.0232 26.2256 20.9403C26.2767 20.9412 26.3278 20.9422 26.3788 20.9432C26.422 21.1803 26.5025 21.4185 26.5025 21.6556C26.4966 25.0206 26.4829 28.3845 26.4652 31.7494V31.7504ZM47.5549 55.0335C45.1436 56.4165 42.638 57.5708 39.9093 58.2034C39.5107 58.2962 39.1836 58.2375 38.8705 57.9847C37.609 56.9689 36.3434 55.9588 35.0817 54.9438C35.0611 54.9273 35.0611 54.8851 35.0435 54.8306C35.0955 54.8022 35.1515 54.7466 35.2074 54.7466C39.4017 54.7427 43.5963 54.7427 47.9231 54.7427C47.7405 54.8881 47.6569 54.9748 47.556 55.0328L47.5549 55.0335ZM29.9635 20.6368C29.9998 20.629 30.0165 20.6211 30.0322 20.6231C30.046 20.6251 30.0656 20.6358 30.0685 20.6455C32.0263 28.1718 33.9831 35.6989 35.9379 43.225C35.9585 43.3052 35.9664 43.3899 35.9713 43.4739C35.9733 43.5031 35.9487 43.5346 35.9134 43.6243C33.9644 43.5139 31.9949 43.4038 29.9645 43.2887V20.6368H29.9635ZM29.8888 47.4195C29.8888 47.2361 29.8888 47.0516 29.8888 46.7727C30.259 46.7727 30.5594 46.757 30.8589 46.7754C32.2953 46.8613 33.7347 46.915 35.1652 47.0566C39.5638 47.4897 43.7288 48.6708 47.5302 50.9748C47.6019 51.0186 47.6758 51.0615 47.7424 51.1114C47.7629 51.1271 47.7659 51.1682 47.7964 51.251C47.6019 51.2645 47.4224 51.2879 47.2436 51.2879C41.7209 51.2909 36.1981 51.2921 30.6753 51.2929C30.6586 51.2929 30.6409 51.2929 30.6242 51.2929C30.0185 51.286 29.8692 51.1379 29.8722 50.5513C29.8781 49.5079 29.8829 48.4637 29.8888 47.4206V47.4195ZM29.9723 55.8844C30.0106 55.8629 30.0489 55.8418 30.0872 55.8211C31.5128 56.7706 32.9384 57.7192 34.3621 58.6718C34.4082 58.7028 34.4259 58.778 34.4465 58.816C34.4268 58.8601 34.421 58.8759 34.4121 58.8904C34.4033 58.905 34.3955 58.9227 34.3817 58.9296C34.3513 58.9441 34.3188 58.9587 34.2865 58.9606C32.9728 59.0327 31.6601 59.1049 30.3464 59.1735C30.2492 59.1781 30.15 59.1605 29.9851 59.1478C29.9595 58.048 29.9782 56.9658 29.9713 55.8844H29.9723ZM41.4501 71.2054C41.4431 71.2882 41.4223 71.3703 41.4046 71.4524C41.4019 71.4651 41.3811 71.4739 41.3361 71.5119C41.2348 71.4816 41.1073 71.4543 40.9875 71.4064C37.9261 70.1834 34.8648 68.9596 31.8044 67.7351C31.3498 67.5533 30.8982 67.363 30.4436 67.1835C30.044 67.0255 29.882 66.7278 29.8879 66.3131C29.9016 65.303 29.9085 64.2941 29.9193 63.284C29.9252 62.7393 30.0283 62.6426 30.5634 62.6039C32.3365 62.4757 34.1088 62.3422 35.881 62.2095C36.3709 62.1734 36.8608 62.1374 37.3498 62.0952C37.7847 62.058 38.1343 62.1888 38.4278 62.5287C39.657 63.9542 40.578 65.5462 41.0907 67.3584C41.4458 68.6171 41.5629 69.9007 41.4489 71.2034L41.4501 71.2054Z" fill="white"/>
+<path id="Vector_3" d="M35.0328 75.0578H32.0618C32.0618 75.3183 32.0618 75.5339 32.0618 75.7499C32.0618 79.4522 32.0599 83.1549 32.0609 86.8575C32.0609 87.9006 32.0628 88.9448 32.0726 89.9883C32.0775 90.4831 31.8713 90.8081 31.3981 90.9983C29.8468 91.6221 28.2523 91.9087 26.5891 91.6052C25.4188 91.3915 24.4399 90.851 24.1394 89.3921C24.0462 88.9383 24.0776 88.4549 24.0776 87.9858C24.0776 83.7951 24.0845 79.6045 24.0864 75.4131C24.0864 75.2861 24.054 75.1603 24.0324 75.0053C23.1831 75.0053 22.3731 75.0022 21.5622 75.0053C21.031 75.0072 20.9848 75.054 20.9642 75.5769C20.9593 75.695 20.9642 75.8124 20.9642 75.9302C20.9613 77.1083 20.9504 78.286 20.9573 79.4652C20.9779 82.7969 20.974 86.1294 21.0437 89.4604C21.084 91.3585 21.9971 92.7998 23.7045 93.689C25.7025 94.729 27.8115 94.9837 30.0118 94.4843C31.5758 94.129 33.0191 93.4596 34.4545 92.7764C34.9013 92.5635 35.1006 92.1803 35.0996 91.6689C35.0927 86.317 35.0976 80.964 35.0957 75.6122C35.0957 75.4345 35.0564 75.2569 35.0328 75.0578Z" fill="white"/>
+<path id="Vector_4" d="M54.5078 90.5527C53.2286 90.5504 52.3804 91.6944 52.447 92.599C52.442 93.7663 53.3572 94.6912 54.5178 94.6924C55.6695 94.6935 56.6317 93.7429 56.6228 92.6135C56.6139 91.4661 55.6683 90.5547 54.5078 90.5527Z" fill="white"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/src/assets/navbar/menu-close.svg b/src/assets/navbar/menu-close.svg
new file mode 100644
index 0000000..45c1abc
--- /dev/null
+++ b/src/assets/navbar/menu-close.svg
@@ -0,0 +1,15 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1">
+<circle id="Ellipse 3" cx="21" cy="21" r="20.5" stroke="white"/>
+<g id="Line 6">
+<line x1="29.6171" y1="29.3243" x2="12.6466" y2="12.3537" stroke="white"/>
+<line x1="29.6171" y1="29.3243" x2="12.6466" y2="12.3537" stroke="white"/>
+<line x1="29.6171" y1="29.3243" x2="12.6466" y2="12.3537" stroke="white"/>
+</g>
+<g id="Line 7">
+<line x1="12.6464" y1="28.6171" x2="29.617" y2="11.6466" stroke="white"/>
+<line x1="12.6464" y1="28.6171" x2="29.617" y2="11.6466" stroke="white"/>
+<line x1="12.6464" y1="28.6171" x2="29.617" y2="11.6466" stroke="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/navbar/menu-idle.svg b/src/assets/navbar/menu-idle.svg
new file mode 100644
index 0000000..0938140
--- /dev/null
+++ b/src/assets/navbar/menu-idle.svg
@@ -0,0 +1,6 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="41" height="41" rx="20.5" stroke="white" stroke-miterlimit="8.20551" stroke-linejoin="round"/>
+<line x1="9" y1="13.5" x2="33" y2="13.5" stroke="white"/>
+<line x1="9" y1="21.5" x2="33" y2="21.5" stroke="white"/>
+<line x1="9" y1="29.5" x2="33" y2="29.5" stroke="white"/>
+</svg>
diff --git a/src/assets/navbar/rightArrow.png b/src/assets/navbar/rightArrow.png
new file mode 100644
index 0000000..e41f5eb
Binary files /dev/null and b/src/assets/navbar/rightArrow.png differ
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
new file mode 100644
index 0000000..311dc99
--- /dev/null
+++ b/src/components/Navbar.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+  let open = false;
+  let hoverHome = false;
+  let hoverProduct = false;
+  let hoverJoin = false;
+  let hoverContact = false;
+
+  const SGCU = "src/assets/navbar/logo-sgcu.svg";
+  let MENU_HAMBURGER = "src/assets/navbar/menu-idle.svg";
+  let MENU_CLOSE = "src/assets/navbar/menu-close.svg";
+  let RIGHT_ARROW = "src/assets/navbar/rightArrow.png";
+</script>
+
+<nav id="nav" class="fixed w-full bg-stone-950 px-4 text-white lg:px-10">
+  <div class="bg-blue flex justify-between py-4">
+    <img src={SGCU} alt="pic" class="h-8 lg:h-24" />
+    <div class="flex flex-row items-center">
+      <p class="font-['Space Grotesk'] mr-2 text-base font-light lg:mr-6">
+        Menu
+      </p>
+      <button
+        on:click={() => {
+          open = !open;
+        }}
+      >
+        {#if open}
+          <img src={MENU_CLOSE} alt="" class="h-8 lg:h-12" />
+        {:else}
+          <img src={MENU_HAMBURGER} alt="" class="h-8 lg:h-12" />
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  {#if open}
+    <div
+      class="font-['JetBrains Mono'] transfr relative mt-[33.33%] flex min-h-screen animate-sliding-left flex-col gap-10 px-4 align-middle text-4xl font-light lg:mt-12 lg:justify-start lg:text-9xl"
+    >
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="menu-container hover:ml-7"
+        on:mouseenter={() => {
+          hoverHome = true;
+        }}
+        on:mouseleave={() => {
+          hoverHome = false;
+        }}
+      >
+        <a href="/" class="flex {hoverHome ? 'hover-menu' : ''}">
+          <img
+            src={RIGHT_ARROW}
+            alt=""
+            class="h-9 lg:h-32 {hoverHome ? 'block' : 'hidden'}"
+          />
+          <p>H</p>
+          <p>O</p>
+          <p>M</p>
+          <p>E</p>
+        </a>
+      </div>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="menu-container hover:ml-6"
+        on:mouseenter={() => {
+          hoverProduct = true;
+        }}
+        on:mouseleave={() => {
+          hoverProduct = false;
+        }}
+      >
+        <a href="/project" class="flex {hoverProduct ? 'hover-menu' : ''}">
+          <img
+            src={RIGHT_ARROW}
+            alt=""
+            class="h-9 lg:h-32 {hoverProduct ? 'block' : 'hidden'}"
+          />
+          <p>P</p>
+          <p>R</p>
+          <p>O</p>
+          <p>J</p>
+          <p>E</p>
+          <p>C</p>
+          <p>T</p>
+        </a>
+      </div>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="menu-container hover:ml-6"
+        on:mouseenter={() => {
+          hoverJoin = true;
+        }}
+        on:mouseleave={() => {
+          hoverJoin = false;
+        }}
+      >
+        <a href="/join" class="flex {hoverJoin ? 'hover-menu' : ''}">
+          <img
+            src={RIGHT_ARROW}
+            alt=""
+            class="h-9 lg:h-32 {hoverJoin ? 'block' : 'hidden'}"
+          />
+          <p>J</p>
+          <p>O</p>
+          <p>I</p>
+          <p>N</p>
+        </a>
+      </div>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="menu-container hover:ml-6"
+        on:mouseenter={() => {
+          hoverContact = true;
+        }}
+        on:mouseleave={() => {
+          hoverContact = false;
+        }}
+      >
+        <a href="/contact" class="flex {hoverContact ? 'hover-menu' : ''} ">
+          <img
+            src={RIGHT_ARROW}
+            alt=""
+            class="h-9 lg:h-32 {hoverContact ? 'block' : 'hidden'}"
+          />
+          <p>C</p>
+          <p>O</p>
+          <p>N</p>
+          <p>T</p>
+          <p>A</p>
+          <p>C</p>
+          <p>T</p>
+        </a>
+      </div>
+    </div>
+  {/if}
+</nav>
+
+<style lang="postcss">
+  .menu-container {
+    @apply flex cursor-pointer items-center duration-700;
+  }
+  .hover-menu > p {
+    @apply -scale-x-100 duration-700;
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 883b2ef..16d728a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import "@fontsource-variable/space-grotesk";
 import "@fontsource/noto-sans-thai-looped";
+import Navbar from "../components/Navbar.svelte";
 
 interface Props {
   title: string;
@@ -20,6 +21,7 @@ const { title } = Astro.props;
     <title>{title}</title>
   </head>
   <body>
+    <Navbar client:load />
     <slot />
   </body>
 </html>