diff --git a/app/page.tsx b/app/page.tsx
index e8778b7..b99dfe5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,9 @@
+import Hero from "@/components/Hero";
+
 export default function Home() {
-  return <main className=""></main>;
+  return (
+    <main className="bg-background px-20">
+      <Hero />
+    </main>
+  );
 }
diff --git a/components/Hero.tsx b/components/Hero.tsx
new file mode 100644
index 0000000..854e84a
--- /dev/null
+++ b/components/Hero.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import logo from "@/public/cesium.svg";
+
+export default function Hero() {
+  return (
+    <div className="mt-32 flex items-center justify-center gap-36">
+      <div className="w-[530px] flex-col items-center justify-center">
+        <div className="mb-6 text-8xl font-semibold">CeSIUM</div>
+        <div className="text-2xl font-semibold">
+          Centro de Estudante de Engenharia Informática da Universidade do Minho
+        </div>
+      </div>
+      <div className="relative">
+        <Image src={logo} alt="" width={300} height={343} priority />
+        <Image
+          className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-150 transform rounded-lg object-cover opacity-40 blur-3xl filter"
+          src={logo}
+          alt=""
+          width={300}
+          height={343}
+          priority
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 0d37fdd..312593f 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,14 +1,14 @@
 import Image from "next/image";
 
-import logo from "@/public/cesium.png";
+import logo from "@/public/cesium-lettering.png";
 import Link from "next/link";
 
 const navbar: string[] = ["HOME", "TEAM", "LOGS", "EVENTS", "ABOUT US"];
 
 export default function Navbar() {
   return (
-    <div className="flex items-center justify-between px-16">
-      <Image src={logo} alt="" width={150} height={200} priority unoptimized />
+    <div className="flex items-center justify-between px-20">
+      <Image src={logo} alt="" width={150} height={200} priority />
       <div className="flex w-[50%] items-center justify-between">
         {navbar.map((title) => (
           <Link
diff --git a/public/cesium.png b/public/cesium-lettering.png
similarity index 100%
rename from public/cesium.png
rename to public/cesium-lettering.png
diff --git a/public/cesium.svg b/public/cesium.svg
new file mode 100644
index 0000000..b434b63
--- /dev/null
+++ b/public/cesium.svg
@@ -0,0 +1 @@
+<svg id="Camada_1" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.29 549.18"><defs><style>.cls-1{fill:#ff794d;}</style></defs><title>cesium</title><polygon class="cls-1" points="171.29 39.06 335.29 133.65 240.24 190.35 157.65 142.82 89.65 181.88 239.53 268.47 472.94 134.12 239.76 0 171.29 39.06"/><polygon class="cls-1" points="157.41 47.06 7.76 134.24 75.77 173.65 157.41 126.59 240.24 173.65 307.76 134.24 157.41 47.06"/><polygon class="cls-1" points="479.29 146.35 246.82 280.47 246.82 359.53 479.29 225.41 479.29 146.35"/><polygon class="cls-1" points="410.35 288.24 410.35 359.53 472.94 323.88 410.35 288.24"/><polygon class="cls-1" points="479.29 336.94 329.18 423.06 329.18 501.88 479.29 414.82 479.29 336.94"/><polygon class="cls-1" points="246.82 376 246.82 549.18 315.29 509.41 315.29 414.82 397.65 367.06 397.65 288.24 246.82 376"/><path class="cls-1" d="M232.59,457.41s1.65,96,0,94.59S68.35,457.41,68.35,457.41v78.35L301.29,670.35V496.94Z" transform="translate(-68.35 -121.18)"/><polygon class="cls-1" points="68.23 280.94 68.23 185.65 0 146.35 0 320 150.59 406.35 151.53 328.94 68.23 280.94"/><polygon class="cls-1" points="82.12 193.65 82.12 272.94 232.94 359.53 232.94 280.94 82.12 193.65"/></svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 45fb258..ed75534 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,7 +18,7 @@ module.exports = {
       "5xl": ["3rem", { lineHeight: "3.5rem" }],
       "6xl": ["4rem", { lineHeight: "1" }],
       "7xl": ["5rem", { lineHeight: "1" }],
-      "8xl": ["6rem", { lineHeight: "1" }],
+      "8xl": ["7rem", { lineHeight: "1" }],
       "9xl": ["8rem", { lineHeight: "1" }],
     },
     extend: {
@@ -40,6 +40,7 @@ module.exports = {
           800: "#ED8661",
           900: "#ED8661",
         },
+        background: "EDE9E8",
       },
     },
   },