diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx
index c5ef873..786dbe7 100644
--- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx
+++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx
@@ -1,11 +1,7 @@
 import { Fragment } from "react";
 import { FILL, GRID_SIZE } from "../../../../../../../Hero/common/constants";
 import { ELEMENT_ID, Height } from "../../../../../../../Hero/common/entities";
-import {
-  getElementHref,
-  getFillUrl,
-  getViewBox,
-} from "../../../../../../../Hero/common/utils";
+import { getFillUrl, getViewBox } from "../../../../../../../Hero/common/utils";
 import { CoralPinkCircle } from "../../../../../../../Hero/components/Defs/CoralPinkCircle/coralPinkCircle";
 import { SmokeCircle } from "../../../../../../../Hero/components/Defs/SmokeCircle/smokeCircle";
 import { SmokeRect } from "../../../../../../../Hero/components/Defs/SmokeRect/smokeRect";
@@ -34,22 +30,19 @@ export const Hero = ({
       <SmokeCircle gridSize={gridSize} />
       <YellowRect gridShift={3} gridSize={gridSize} />
       <CoralPinkCircle gridSize={gridSize} />
-      {[
-        ELEMENT_ID.PATTERN_SMOKE_RECT,
-        ELEMENT_ID.PATTERN_YELLOW_RECT,
-        ELEMENT_ID.PATTERN_SMOKE_CIRCLE,
-      ].map((elementId) => (
-        <Fragment key={elementId}>
-          <rect
-            fill={getFillUrl(elementId)}
-            height={height}
-            width="100vw"
-            x={0}
-            y={0}
-          />
-        </Fragment>
-      ))}
-      <use href={getElementHref(ELEMENT_ID.GROUP_CORAL_PINK_CIRLCLE)} />
+      {[ELEMENT_ID.PATTERN_SMOKE_RECT, ELEMENT_ID.PATTERN_SMOKE_CIRCLE].map(
+        (elementId) => (
+          <Fragment key={elementId}>
+            <rect
+              fill={getFillUrl(elementId)}
+              height={height}
+              width="100vw"
+              x={0}
+              y={0}
+            />
+          </Fragment>
+        )
+      )}
     </SVG>
   );
 };
diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts
index 5e97aad..0b33942 100644
--- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts
+++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts
@@ -5,9 +5,10 @@ import {
 } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import styled from "@emotion/styled";
+import { Section } from "../../../../../../../common/Section/section";
 import { section, sectionGrid, sectionLayout } from "../../section.styles";
 
-export const Section = styled.section`
+export const StyledSection = styled(Section)`
   ${section};
   background-color: ${smokeLightest};
   overflow: hidden;
@@ -18,7 +19,8 @@ export const Section = styled.section`
 export const SectionLayout = styled.div`
   ${sectionLayout};
   ${sectionGrid};
-  min-height: 184px;
+  align-content: flex-start;
+  min-height: 152px;
   padding: 56px 16px;
 `;
 
diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx
index aff6432..aab53e7 100644
--- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx
+++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx
@@ -2,13 +2,14 @@ import {
   Breadcrumb,
   Breadcrumbs,
 } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs";
-import { ReactNode } from "react";
+import { Fragment, ReactNode } from "react";
+import { calculateGridSize } from "../../../../../Hero/common/utils";
 import { Hero } from "./components/Hero/hero";
 import {
   Head,
   Headline,
-  Section,
   SectionLayout,
+  StyledSection,
   Subhead,
   SubHeadline,
 } from "./sectionHero.styles";
@@ -25,19 +26,23 @@ export const SectionHero = ({
   subHead,
 }: SectionHeroProps): JSX.Element => {
   return (
-    <Section>
-      <Hero />
-      <SectionLayout>
-        <Headline>
-          <Breadcrumbs breadcrumbs={breadcrumbs} />
-          <Head>{head}</Head>
-        </Headline>
-        {subHead && (
-          <SubHeadline>
-            <Subhead>{subHead}</Subhead>
-          </SubHeadline>
-        )}
-      </SectionLayout>
-    </Section>
+    <StyledSection>
+      {(height): JSX.Element => (
+        <Fragment>
+          <Hero gridSize={calculateGridSize(height)} height={height} />
+          <SectionLayout>
+            <Headline>
+              <Breadcrumbs breadcrumbs={breadcrumbs} />
+              <Head>{head}</Head>
+            </Headline>
+            {subHead && (
+              <SubHeadline>
+                <Subhead>{subHead}</Subhead>
+              </SubHeadline>
+            )}
+          </SectionLayout>
+        </Fragment>
+      )}
+    </StyledSection>
   );
 };