diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 46dce01ebb..dca5624211 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -9,8 +9,8 @@ function Header(props: Props) {
     const { icon, title, colors } = props;
 
     return (
-        <Container>
-            <StyledHeader>
+        <StyledHeader>
+            <Container>
                 <LogoMark>
                     <Logo as={icon} color={colors.main} />
                     <Title>{title}</Title>
@@ -19,17 +19,23 @@ function Header(props: Props) {
                 <Link as="a" href="#">
                     Built by 0x
                 </Link>
-            </StyledHeader>
-        </Container>
+            </Container>
+        </StyledHeader>
     );
 }
 
 const StyledHeader = styled.header`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding-top: 3.75rem;
     padding-bottom: 0.875rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    ${Container} {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 `;
 
 const LogoMark = styled.div`
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 60f859a552..5ba469fca5 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -19,9 +19,14 @@ function Hero(props: Props) {
 }
 
 const StyledHero = styled.section`
-    margin: 0 auto;
     text-align: center;
+    margin: 0 auto;
+    padding-top: 9.375rem;
+    padding-bottom: 2rem;
     max-width: 590px;
+    min-height: min-content;
+    max-height: 37.5rem;
+    height: 80vh;
 `;
 
 const Subtitle = styled.h2`