diff --git a/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx b/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx
index 5903977..14bd9c2 100644
--- a/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx
+++ b/app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx
@@ -1,27 +1,31 @@
-// import { FC } from 'react';
-import { MapPinIcon } from '@heroicons/react/24/solid'
+import { FC } from 'react';
+import { MapPinIcon } from '@heroicons/react/24/solid';
+import { HeroTypes } from './types';
 
-// export const Hero = ({ name, image, organizer, datime, location }) => (
-export const Hero = () => (
-  <section className={`flex h-80 w-full place-items-end bg-[url('https://www.slingacademy.com/wp-content/uploads/2022/10/hero-image-example.webp')] md:h-96`}>
-    <div className="mx-auto flex w-full max-w-screen-xl px-4 py-8 md:grid-cols-12 lg:gap-8 xl:gap-0">
-      <div className="mr-auto flex w-full flex-col place-self-center">
-        <h1 className="mb-4 max-w-2xl text-2xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
-          Javascript Meetup — Enero
-        </h1>
-        <div className="flex w-full justify-between">
-          <div className="flex grow flex-col">
-            <p className='font-thin'>por <span className='underline'>Javascript Chile</span></p>
-            <p className='font-thin'>Jueves, 27 Enero, 2024 | 6:30 PM</p>
-          </div>
-          <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
-            <MapPinIcon className="h-8 w-8" />
-            <p>
-              Hub Providencia, Calle Falsa, 1234, Santiago
-            </p>
+export const Hero: FC<HeroTypes> = ({ name, organizer, datetime, location }) => {
+  return (
+    <section className={`flex h-80 w-full place-items-end bg-[url(https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80)] bg-cover bg-center bg-no-repeat md:h-96`}>
+      <div className='flex h-full w-full flex-col justify-end bg-slate-100/75 dark:bg-slate-900/75'>
+        <div className="mx-auto flex w-full max-w-screen-xl px-4 py-8 md:grid-cols-12 lg:gap-8 xl:gap-0">
+          <div className="mr-auto flex w-full flex-col place-self-center">
+            <h1 className="mb-4 max-w-2xl text-xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
+              {name}
+            </h1>
+            <div className="flex w-full justify-between">
+              <div className="flex grow flex-col">
+                <p className='font-thin'>por <span className='underline'>{organizer}</span></p>
+                <p className='font-thin'>{datetime}</p>
+              </div>
+              <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
+                <MapPinIcon className="h-8 w-8" />
+                <p>
+                  {location}
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
diff --git a/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts b/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts
index db84f56..b3ea211 100644
--- a/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts
+++ b/app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts
@@ -1,6 +1,5 @@
 export type HeroTypes = {
   name: string;
-  image: string;
   location: string;
   organizer: string;
   datetime: string;
diff --git a/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx b/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx
new file mode 100644
index 0000000..1c4d8f4
--- /dev/null
+++ b/app/(transition)/(root)/events/[id]/_components/Register/Register.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/button';
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+
+export const Register = () => {
+  return (
+    <section className="flex w-full flex-col gap-2 bg-slate-900 p-6 dark:bg-slate-50">
+      <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">Registro</h2>
+      <ol>
+        <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">El evento requiere aprobación de los organizadores</span>
+        </li>
+        <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">Apúrate! Quedan pocas entradas</span>
+        </li>
+      </ol>
+      <p className="text-slate-50 dark:text-slate-900">Para registrarte, por favor haz click en el botón.</p>
+      <Button variant={'secondary'} size={'lg'}>Registrarse</Button>
+    </section>
+  );
+};
diff --git a/app/(transition)/(root)/events/[id]/page.tsx b/app/(transition)/(root)/events/[id]/page.tsx
index 8cecdb1..826a039 100644
--- a/app/(transition)/(root)/events/[id]/page.tsx
+++ b/app/(transition)/(root)/events/[id]/page.tsx
@@ -5,10 +5,10 @@ import {
   FetchExampleEventsQuery,
 } from "../../../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
 import { Hero } from "./_components/Hero/Hero";
+import { Register } from "./_components/Register/Register";
 
 const event = {
   name: 'Javascript Meetup — Enero',
-  image: 'https://www.slingacademy.com/wp-content/uploads/2022/10/hero-image-example.webp',
   organizer: 'Javascript Chile',
   datetime: 'Jueves, 27 Enero, 2024 | 6:30 PM',
   location: 'Hub Providencia, Calle Falsa, 1234, Santiago'
@@ -20,8 +20,11 @@ export default async function Event() {
     query: FetchExampleEventsDocument,
   });
   return (
-    <main className="flex w-full flex-col items-center justify-between px-6 pt-7 transition-all md:px-10 lg:pt-14 xl:px-0">
-      <Hero {...event} />
+    <main className="flex w-full flex-col items-center justify-between px-6 pt-7 transition-all md:px-10 lg:pt-14">
+      <div className="w-full">
+        <Hero {...event} />
+        <Register />
+      </div>
     </main>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 07403cb..560098b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,7 +58,7 @@
         "eslint-plugin-tailwindcss": "^3.13.0",
         "graphql-config": "^5.0.3",
         "prettier": "^3.1.1",
-        "prettier-plugin-tailwindcss": "^0.3.0",
+        "prettier-plugin-tailwindcss": "^0.4.0",
         "ts-node": "^10.9.1",
         "typescript": "^5.1.6"
       },
@@ -10297,9 +10297,9 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz",
-      "integrity": "sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz",
+      "integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==",
       "dev": true,
       "engines": {
         "node": ">=12.17.0"
@@ -10310,7 +10310,7 @@
         "@shopify/prettier-plugin-liquid": "*",
         "@shufo/prettier-plugin-blade": "*",
         "@trivago/prettier-plugin-sort-imports": "*",
-        "prettier": ">=2.2.0",
+        "prettier": "^2.2 || ^3.0",
         "prettier-plugin-astro": "*",
         "prettier-plugin-css-order": "*",
         "prettier-plugin-import-sort": "*",
diff --git a/package.json b/package.json
index 7ee7063..c61d7a3 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "eslint-plugin-tailwindcss": "^3.13.0",
     "graphql-config": "^5.0.3",
     "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"
   },
diff --git a/src/components/Navbar/ThemeSwitcher.tsx b/src/components/Navbar/ThemeSwitcher.tsx
index b6ee497..c95640b 100644
--- a/src/components/Navbar/ThemeSwitcher.tsx
+++ b/src/components/Navbar/ThemeSwitcher.tsx
@@ -33,7 +33,7 @@ export function ThemeSwitcher() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] text-foreground rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 text-foreground transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>