diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css
index 6f261a1f..8339f7d5 100644
--- a/components/ShapesBackground.module.css
+++ b/components/ShapesBackground.module.css
@@ -17,6 +17,8 @@
   position: absolute;
   filter: var(--blue);
   opacity: 20%;
+
+  transition: 0.5s;
 }
 
 .homeDots {
diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
index c8fbc7b8..f4527f3c 100644
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@@ -30,16 +30,19 @@ export function ShapesBackground({ getConfig }: Props) {
   );
 }
 
-export type ShapeType =
-  | "asterisk"
-  | "circle"
-  | "cross"
-  | "dots"
-  | "hash"
-  | "plus"
-  | "ring"
-  | "triangle"
-  | "waves";
+export const shapeTypes = [
+  "asterisk",
+  "circle",
+  "cross",
+  "dots",
+  "hash",
+  "plus",
+  "ring",
+  "triangle",
+  "waves",
+] as const;
+
+export type ShapeType = typeof shapeTypes[number];
 
 export type ShapesConfig = {
   [key in ShapeType]?: CSSProperties[];
diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx
index 78a3f6ab..c31518d6 100644
--- a/pages/get-involved.tsx
+++ b/pages/get-involved.tsx
@@ -3,6 +3,11 @@ import React from "react";
 import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 
 import Content from "../content/get-involved.mdx";
 
@@ -33,3 +38,18 @@ export default function GetInvolved() {
     </div>
   );
 }
+
+GetInvolved.getShapesConfig = (() => {
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
+}) as GetShapesConfig;
diff --git a/pages/index.tsx b/pages/index.tsx
index 9c52adfc..5a61f031 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,11 @@ import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { NewsCard } from "@/components/NewsCard";
-import { GetShapesConfig } from "@/components/ShapesBackground";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 
 import AltTab, {
@@ -95,8 +99,16 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
 };
 
 Home.getShapesConfig = (() => {
-  return {
-    triangle: [{ left: "2rem" }, { bottom: "2rem" }],
-    dots: [{ top: "100px", right: "50vw" }],
-  };
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
 }) as GetShapesConfig;