diff --git a/packages/web/src/components/astro/HeroComponent.astro b/packages/web/src/components/astro/HeroComponent.astro
index e051fb9f..4e4d5346 100644
--- a/packages/web/src/components/astro/HeroComponent.astro
+++ b/packages/web/src/components/astro/HeroComponent.astro
@@ -9,15 +9,15 @@ import { Stack, Grid } from "../solidjs/index.ts";
   stackGap="0px"
 >
   <div class="flex justify-center items-center flex-col">
-    <Grid
+    <Grid.Root
       style={{ "border-bottom": "none" }}
-      crossRow={1}
-      crossColumn={0}
       smGridColumns={8}
       mdGridColumns={10}
       lgGridColumns={12}
-    />
-    <Grid
+    >
+      <Grid.Cross crossRow={1} crossColumn={0} />
+    </Grid.Root>
+    <Grid.Root
       class="before:!border-t-0"
       style={{ "border-bottom": "none" }}
       smGridColumns={1}
@@ -25,13 +25,15 @@ import { Stack, Grid } from "../solidjs/index.ts";
       lgGridColumns={3}
       heroHeading={true}
     />
-    <Grid
+    <Grid.Root
       style={{ "border-bottom": "none" }}
       class="before:!border-t-0"
       smGridColumns={8}
       gridRows={5}
       mdGridColumns={10}
       lgGridColumns={12}
-    />
+    >
+      <Grid.Cross crossRow={-1} crossColumn={-1} />
+    </Grid.Root>
   </div>
 </Stack>
diff --git a/packages/web/src/components/solidjs/index.ts b/packages/web/src/components/solidjs/index.ts
index 71772c58..196b3836 100644
--- a/packages/web/src/components/solidjs/index.ts
+++ b/packages/web/src/components/solidjs/index.ts
@@ -1,2 +1,2 @@
 export * from "./Stack"
-export * from "./Grid"
+export { default as Grid } from "./Grid"