diff --git a/src/app/components/During.tsx b/src/app/components/During.tsx
index c47db069..008f56a3 100644
--- a/src/app/components/During.tsx
+++ b/src/app/components/During.tsx
@@ -3,6 +3,7 @@ import { Section } from "@/app/genericComponents/General";
 import { Body, SectionTitle } from "@/app/genericComponents/Typography";
 import {
   MobileBreakpoint,
+  MaxScreenSize,
   SpacingM,
   SpacingS,
 } from "@/app/genericComponents/tokens";
@@ -54,6 +55,11 @@ const MapImageBase = styled.img`
   max-width: 100vw;
   left: 50%;
   transform: translateX(-50%);
+
+  @media (min-width: ${MaxScreenSize}) {
+    width: ${MaxScreenSize};
+    max-width: ${MaxScreenSize};
+  }
 `;
 
 const MobileMapImage = styled(MapImageBase)`
diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index 16dd663e..33a24ab3 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import styled, { keyframes } from "styled-components";
 import {
+  MaxScreenSize,
   MobileBreakpoint,
   MobileTitleS,
   SpacingL,
@@ -49,27 +50,32 @@ const flapHidden = keyframes`
 
 const HeroContainer = styled.div`
   position: relative;
-  width: 100vw;
-  min-height: 180vh;
-  overflow-x: hidden;
+  width: 100%;
+  max-width: ${MaxScreenSize};
+  margin: 0 auto;
+`;
+
+const DragonViewport = styled.div`
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 2;
 
   @media (max-width: ${MobileBreakpoint}) {
-    min-height: 100vh;
+    top: 120px;
   }
 `;
 
 const DragonWrapper = styled.div`
-  position: absolute;
-  z-index: 2;
-  top: 10%;
-  right: 10%;
+  position: relative;
   width: 250px;
   height: 180px;
   animation: ${flyRoundTrip} 40s linear infinite;
+  will-change: transform;
 
   @media (max-width: ${MobileBreakpoint}) {
-    top: 120px;
-    right: 10px;
     width: 100px;
     height: 80px;
   }
@@ -77,10 +83,7 @@ const DragonWrapper = styled.div`
 
 const DragonFrame = styled.div`
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 
   img {
     object-fit: contain;
@@ -114,10 +117,8 @@ const LeftCloud = styled(BaseCloud)`
   height: 100px;
 
   @media (max-width: ${MobileBreakpoint}) {
-    top: 10%;
-    left: 2%;
-    width: 120px;
-    height: 70px;
+    top: 20%;
+    left: 3%;
   }
 `;
 
@@ -128,10 +129,7 @@ const RightCloud = styled(BaseCloud)`
   height: 110px;
 
   @media (max-width: ${MobileBreakpoint}) {
-    top: 20%;
-    right: 2%;
-    width: 100px;
-    height: 60px;
+    right: 1%;
   }
 `;
 
@@ -166,7 +164,6 @@ const LogoContainer = styled.div`
 
 const DesktopLogo = styled.div`
   margin-top: 260px;
-  display: block;
 
   @media (max-width: ${MobileBreakpoint}) {
     display: none;
@@ -184,7 +181,7 @@ const MobileLogo = styled.div`
 
 const CharactersSection = styled.div`
   position: relative;
-  margin-top: 620px;
+  margin-top: 520px;
   margin-bottom: ${SpacingL};
   z-index: 3;
 
@@ -304,102 +301,93 @@ const CharacterLabel = styled.div`
 
 export default function Hero() {
   return (
-    <HeroContainer>
-      <LeftCloud>
-        <Image src="/cloud.svg" fill alt="Cloud" />
-      </LeftCloud>
-
-      <CenterCloudLeft>
-        <Image src="/cloud.svg" fill alt="Cloud" />
-      </CenterCloudLeft>
-
-      <CenterCloudRight>
-        <Image src="/cloud.svg" fill alt="Cloud" />
-      </CenterCloudRight>
-
-      <RightCloud>
-        <Image src="/cloud.svg" fill alt="Cloud" />
-      </RightCloud>
-
-      <DragonWrapper>
-        <DragonFrame>
-          <Image src="/drac_1.svg" fill alt="Dragon Frame 1" />
-        </DragonFrame>
-        <DragonFrame>
-          <Image src="/drac_2.svg" fill alt="Dragon Frame 2" />
-        </DragonFrame>
-      </DragonWrapper>
-
-      <LogoContainer>
-        <DesktopLogo>
-          <Image
-            src="/main_logo_desktop.svg"
-            width={700}
-            height={260}
-            alt="Hack UPC"
-            priority
-            style={{ maxWidth: "90vw", height: "auto" }}
-          />
-        </DesktopLogo>
-
-        <MobileLogo>
-          <Image
-            src="/main_logo.svg"
-            width={550}
-            height={250}
-            alt="Hack UPC"
-            priority
-            style={{ maxWidth: "90vw", height: "auto" }}
-          />
-        </MobileLogo>
-      </LogoContainer>
-
-      <CharactersSection>
-        <RibbonContainer>
-          <RibbonImageWrapper>
+    <>
+      <DragonViewport>
+        <DragonWrapper>
+          <DragonFrame>
+            <Image src="/drac_1.svg" fill alt="Dragon Frame 1" />
+          </DragonFrame>
+          <DragonFrame>
+            <Image src="/drac_2.svg" fill alt="Dragon Frame 2" />
+          </DragonFrame>
+        </DragonWrapper>
+      </DragonViewport>
+
+      <HeroContainer>
+        <LeftCloud>
+          <Image src="/cloud.svg" fill alt="Cloud" />
+        </LeftCloud>
+
+        <CenterCloudLeft>
+          <Image src="/cloud.svg" fill alt="Cloud" />
+        </CenterCloudLeft>
+
+        <CenterCloudRight>
+          <Image src="/cloud.svg" fill alt="Cloud" />
+        </CenterCloudRight>
+
+        <RightCloud>
+          <Image src="/cloud.svg" fill alt="Cloud" />
+        </RightCloud>
+
+        <LogoContainer>
+          <DesktopLogo>
+            <Image
+              src="/main_logo_desktop.svg"
+              width={700}
+              height={260}
+              alt="Hack UPC"
+              priority
+            />
+          </DesktopLogo>
+
+          <MobileLogo>
             <Image
-              src="/choose_character.svg"
-              fill
-              alt="Choose Your Character"
-              style={{ objectFit: "contain" }}
+              src="/main_logo.svg"
+              width={374}
+              height={170}
+              alt="Hack UPC"
+              priority
             />
-          </RibbonImageWrapper>
-        </RibbonContainer>
-
-        <CharacterGrid>
-          <CharacterCard
-            href="https://my.hackupc.com/user/signup/hacker/"
-            target="_blank"
-          >
-            <StackedImages>
-              <ArchBg src="/arch.svg" fill alt="Arch" />
-              <CharacterImg
-                src="/cavaller.svg"
-                width={150}
-                height={150}
-                alt="Hacker"
-              />
-            </StackedImages>
-            <CharacterLabel>HACKER</CharacterLabel>
-          </CharacterCard>
-
-          <CharacterCard
-            href="https://my.hackupc.com/user/signup/volunteer/"
-            target="_blank"
-          >
-            <StackedImages>
-              <ArchBg src="/arch.svg" fill alt="Arch" />
-              <CharacterImg
-                src="/princesa.svg"
-                width={150}
-                height={150}
-                alt="Volunteer"
-              />
-            </StackedImages>
-            <CharacterLabel>VOLUNTEER</CharacterLabel>
-          </CharacterCard>
-        </CharacterGrid>
-      </CharactersSection>
-    </HeroContainer>
+          </MobileLogo>
+        </LogoContainer>
+
+        <CharactersSection>
+          <RibbonContainer>
+            <RibbonImageWrapper>
+              <Image src="/choose_character.svg" fill alt="Choose character" />
+            </RibbonImageWrapper>
+          </RibbonContainer>
+
+          <CharacterGrid>
+            <CharacterCard href="#" target="_blank">
+              <StackedImages>
+                <ArchBg src="/arch.svg" fill alt="Arch" />
+                <CharacterImg
+                  src="/cavaller.svg"
+                  width={150}
+                  height={150}
+                  alt=""
+                />
+              </StackedImages>
+              <CharacterLabel>HACKER</CharacterLabel>
+            </CharacterCard>
+
+            <CharacterCard href="#" target="_blank">
+              <StackedImages>
+                <ArchBg src="/arch.svg" fill alt="Arch" />
+                <CharacterImg
+                  src="/princesa.svg"
+                  width={150}
+                  height={150}
+                  alt=""
+                />
+              </StackedImages>
+              <CharacterLabel>VOLUNTEER</CharacterLabel>
+            </CharacterCard>
+          </CharacterGrid>
+        </CharactersSection>
+      </HeroContainer>
+    </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index a1674dcf..4208f23f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -18,6 +18,12 @@ body {
   background-image: url("/maons.svg");
   background-repeat: repeat;
 
+  @media (min-width: 2300px) {
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: cover;
+  }
+
   @media (max-width: 640px) {
     background-image: url("/maons_mobile.svg");
   }