diff --git a/frontend/components/overview.tsx b/frontend/components/overview.tsx
index 20756cf..6bd26f5 100644
--- a/frontend/components/overview.tsx
+++ b/frontend/components/overview.tsx
@@ -1,105 +1,65 @@
 import Image from "next/image";
 import Connect from "../public/connect-icon.svg";
 import Switchboard from "../public/switchboard-icon.svg";
+import Fusion from "../public/fusion-icon.png";
 import Link from "next/link";
-export default function Overview({ name }: { name: string }) {
+import { Environment } from "../pages";
+export default function Overview({ name, env }: { name: string; env: Environment }) {
     return (
-        <div className="flex flex-col gap-4 max-w-xl items-start px-12">
+        <div className="flex flex-col gap-4 items-start px-12">
             <div className="group relative">
-                <h3 className="mt-3 text-lg font-semibold text-gray-900 group-hover:text-gray-600">
+                <h3 className="mt-3 text-xl font-semibold text-gray-900 group-hover:text-gray-600">
                     <span className="absolute inset-0"></span>
                     {name}
                 </h3>
             </div>
-            <div className="flex flex-row">
-                <div className="flex flex-0  w-3">
-                    <h2 className="text-base font-semibold text-gray-900 -rotate-90">Prod</h2>
-                </div>
-                <div className="flex flex-col grow flex-1">
-                    <div className="relative flex items-center gap-x-4">
-                        <Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
-                        <div className="text-sm">
-                            <p className="font-semibold text-gray-900">
-                                <Link href={`https://apps.powerhouse.io/${name.toLocaleLowerCase()}/connect/`} target="_blank">
-                                    <span className="absolute inset-0"></span>
-                                    Connect
-                                </Link>
-                            </p>
+
+            <div className="flex flex-row gap-8">
+                {Object.keys(env).map((envName) => (
+                    <div className="flex flex-col gap-4" key={envName}>
+                        <div className="flex flex-0 ">
+                            <h2 className="text-base font-semibold text-gray-900 ">{envName}</h2>
                         </div>
-                    </div>
-                    <div className="relative flex items-center gap-x-4">
-                        <Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
-                        <div className="text-sm">
-                            <p className="font-semibold text-gray-900">
-                                <Link href={`https://apps.powerhouse.io/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
-                                    <span className="absolute inset-0"></span>
-                                    Switchboard
-                                </Link>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="flex flex-row">
-                <div className="flex flex-0  w-3">
-                    <h2 className="text-base font-semibold text-gray-900 -rotate-90">Stage</h2>
-                </div>
-                <div className="flex flex-col grow flex-1">
-                    <div className="relative flex items-center gap-x-4">
-                        <Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
-                        <div className="text-sm">
-                            <p className="font-semibold text-gray-900">
-                                <Link href={`https://apps.powerhouse.io/staging/${name.toLocaleLowerCase()}/connect/`} target="_blank">
-                                    <span className="absolute inset-0"></span>
-                                    Connect
-                                </Link>
-                            </p>
-                        </div>
-                    </div>
-                    <div className="relative flex items-center gap-x-4">
-                        <Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
-                        <div className="text-sm">
-                            <p className="font-semibold text-gray-900">
-                                <Link href={`https://apps.powerhouse.io/staging/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
-                                    <span className="absolute inset-0"></span>
-                                    Switchboard
-                                </Link>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {name === "Powerhouse" && (
-                <div className="flex flex-row">
-                    <div className="flex flex-0  w-3">
-                        <h2 className="text-base font-semibold text-gray-900 -rotate-90">Dev</h2>
-                    </div>
-                    <div className="flex flex-col grow flex-1">
-                        <div className="relative flex items-center gap-x-4">
-                            <Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
-                            <div className="text-sm">
-                                <p className="font-semibold text-gray-900">
-                                    <Link href={`https://apps.powerhouse.io/develop/${name.toLocaleLowerCase()}/connect/`} target="_blank">
-                                        <span className="absolute inset-0"></span>
-                                        Connect
-                                    </Link>
-                                </p>
+                        <div className="flex flex-col grow flex-1">
+                            <div className="relative flex items-center gap-x-4">
+                                <Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
+                                <div className="text-sm">
+                                    <p className="font-semibold text-gray-900">
+                                        <Link href={env[envName].connect} target="_blank">
+                                            <span className="absolute inset-0"></span>
+                                            Connect
+                                        </Link>
+                                    </p>
+                                </div>
                             </div>
-                        </div>
-                        <div className="relative flex items-center gap-x-4">
-                            <Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
-                            <div className="text-sm">
-                                <p className="font-semibold text-gray-900">
-                                    <Link href={`https://apps.powerhouse.io/develop/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
-                                        <span className="absolute inset-0"></span>
-                                        Switchboard
-                                    </Link>
-                                </p>
+                            <div className="relative flex items-center gap-x-4">
+                                <Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
+                                <div className="text-sm">
+                                    <p className="font-semibold text-gray-900">
+                                        <Link href={env[envName].switchboard} target="_blank">
+                                            <span className="absolute inset-0"></span>
+                                            Switchboard
+                                        </Link>
+                                    </p>
+                                </div>
                             </div>
+                            {env[envName].fusion && (
+                                <div className="relative flex items-center gap-x-4">
+                                    <Image width="32" height="32" alt="MakerDAO" src={Fusion} className="h-10 w-10 rounded-full bg-gray-50" />
+                                    <div className="text-sm">
+                                        <p className="font-semibold text-gray-900">
+                                            <Link href={env[envName].fusion} target="_blank">
+                                                <span className="absolute inset-0"></span>
+                                                Fusion
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     </div>
-                </div>
-            )}
+                ))}
+            </div>
         </div>
     );
 }
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index d833b05..cd371b7 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -6,79 +6,123 @@ import Renown from "../public/renown-icon.svg";
 import Fusion from "../public/fusion-icon.png";
 import Academy from "../public/academy-icon.svg";
 import Link from "next/link";
+
+export interface Environment {
+    production: {
+        connect: string;
+        switchboard: string;
+        fusion?: string;
+    };
+    staging?: {
+        connect: string;
+        switchboard: string;
+        fusion?: string;
+    };
+    develop?: {
+        connect: string;
+        switchboard: string;
+        fusion?: string;
+    };
+}
 const Home: NextPage = () => {
+    const environmentKeys = ["Powerhouse", "Sky.money"] as const;
+    type EnvironmentKey = (typeof environmentKeys)[number];
+
+    const environments: Record<EnvironmentKey, Environment> = {
+        Powerhouse: {
+            production: {
+                connect: "https://connect.phd",
+                switchboard: "https://switchboard.phd",
+                // fusion: "https://apps.powerhouse.io/powerhouse/fusion",
+            },
+            staging: {
+                connect: "https://staging.connect.phd",
+                switchboard: "https://staging.switchboard.phd",
+                // fusion: "https://apps.powerhouse.io/staging/powerhouse/fusion",
+            },
+            develop: {
+                connect: "https://apps.powerhouse.io/develop/powerhouse/connect/",
+                switchboard: "https://apps.powerhouse.io/develop/powerhouse/switchboard",
+            },
+        },
+        "Sky.money": {
+            production: {
+                connect: "https://connect.sky.money",
+                switchboard: "https://switchboard.sky.money",
+                fusion: "https://fusion.sky.money",
+            },
+            staging: {
+                connect: "https://connect-staging.sky.money",
+                switchboard: "https://switchboard-staging.sky.money",
+                fusion: "https://fusion-staging.sky.money",
+            },
+        },
+    };
+
     return (
-        <div className="container-fluid">
-            <div className="bg-white py-24 sm:py-32">
-                <div className="mx-auto max-w-4xl   flex flex-col gap-8">
-                    <div className="mx-auto max-w-2xl lg:mx-0 flex flex-row gap-4">
-                        <Image src={Powerhouse} alt="Powerhouse" width="40" height="40" />
-                        <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Apps of Powerhouse</h2>
-                        {/* <p className="mt-2 text-lg leading-8 text-gray-600">Learn how to grow your business with our expert advice.</p> */}
+        <div className="container mx-auto bg-white py-24 sm:py-32 flex flex-col gap-8">
+            <div className="mx-auto max-w-2xl lg:mx-0 flex flex-row gap-4">
+                <Image src={Powerhouse} alt="Powerhouse" width="40" height="40" />
+                <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Apps of Powerhouse</h2>
+                {/* <p className="mt-2 text-lg leading-8 text-gray-600">Learn how to grow your business with our expert advice.</p> */}
+            </div>
+            <div className="flex flex-row gap-4">
+                <div className="relative flex items-center gap-x-4 px-12">
+                    <Image width="32" height="32" alt="Sky.money" src={Renown} className="h-10 w-10 rounded-full bg-gray-50" />
+                    <div className="text-sm leading-6">
+                        <p className="font-semibold text-gray-900">
+                            <Link href={`https://www.renown.id`} target="_blank">
+                                <span className="absolute inset-0"></span>
+                                Renown
+                            </Link>
+                        </p>
                     </div>
-                    <div className="grid lg:grid-cols-3 gap-x-8 grid-cols-1">
-                        <div className="relative flex items-center gap-x-4 px-12">
-                            <Image width="32" height="32" alt="MakerDAO" src={Renown} className="h-10 w-10 rounded-full bg-gray-50" />
-                            <div className="text-sm leading-6">
-                                <p className="font-semibold text-gray-900">
-                                    <Link href={`https://apps.powerhouse.io/renown`} target="_blank">
-                                        <span className="absolute inset-0"></span>
-                                        Renown
-                                    </Link>
-                                </p>
-                            </div>
-                        </div>
-                        <div className="relative flex items-center gap-x-4 px-12">
-                            <Image width="32" height="32" alt="MakerDAO" src={Academy} className="h-10 w-10 rounded-full bg-gray-50" />
-                            <div className="text-sm leading-6">
-                                <p className="font-semibold text-gray-900">
-                                    <span className="absolute inset-0"></span>
-                                    Academy
-                                </p>
-                            </div>
-                        </div>
-                        <div className="relative flex items-center gap-x-4 px-12">
-                            <Image width="32" height="32" alt="MakerDAO" src={Fusion} className="h-10 w-10 rounded-full bg-gray-50" />
-                            <div className="text-sm leading-6">
-                                <p className="font-semibold text-gray-900">
-                                    <span className="absolute inset-0"></span>
-                                    Fusion
-                                </p>
-                            </div>
-                        </div>
+                </div>
+                <div className="relative flex items-center gap-x-4 px-12">
+                    <Image width="32" height="32" alt="Sky.money" src={Academy} className="h-10 w-10 rounded-full bg-gray-50" />
+                    <div className="text-sm leading-6">
+                        <p className="font-semibold text-gray-900">
+                            <span className="absolute inset-0"></span>
+                            Academy
+                        </p>
                     </div>
-                    <div className="grid mx-autogrid grid-cols-1 gap-8  lg:mx-0 lg:max-w-none lg:grid-cols-3 border-t border-gray-200">
-                        <Overview name="Powerhouse" />
-                        <Overview name="MakerDAO" />
-                        <Overview name="Arbitrum" />
+                </div>
+
+            </div>
+
+            <div className="flex flex-col gap-8">
+                {environmentKeys.map((name) => (
+                    <Overview name={name} key={name} env={environments[name]} />
+                ))}
+            </div>
+
+            <div className="pl-16 pt-8 border-t border-gray-200 flex flex-col gap-4">
+                <div className="relative flex items-center gap-x-4">
+                    <Image width="25" height="25" alt="Sky.money" src={`/storybook.png`} className="h-8 w-8  bg-gray-50" />
+                    <div className="text-sm">
+                        <p className="font-semibold text-gray-900">
+                            <Link href={`https://powerhouse-design-system.vercel.app/`} target="_blank">
+                                <span className="absolute inset-0"></span>
+                                Design System
+                            </Link>
+                        </p>
                     </div>
-                    <div className="pl-16 pt-8 border-t border-gray-200 flex flex-col gap-4">
-                        <div className="relative flex items-center gap-x-4">
-                            <Image width="25" height="25" alt="MakerDAO" src={`/storybook.png`} className="h-8 w-8  bg-gray-50" />
-                            <div className="text-sm">
-                                <p className="font-semibold text-gray-900">
-                                    <Link href={`https://powerhouse-design-system.vercel.app/`} target="_blank">
-                                        <span className="absolute inset-0"></span>
-                                        Design System
-                                    </Link>
-                                </p>
-                            </div>
-                        </div>
-                        <div className="relative flex items-center gap-x-4">
-                            <Image width="25" height="25" alt="MakerDAO" src={`/storybook.png`} className="h-8 w-8  bg-gray-50" />
-                            <div className="text-sm">
-                                <p className="font-semibold text-gray-900">
-                                    <Link href={`https://document-model-libs.vercel.app/`} target="_blank">
-                                        <span className="absolute inset-0"></span>
-                                        Document Model Libs
-                                    </Link>
-                                </p>
-                            </div>
-                        </div>
+                </div>
+                <div className="relative flex items-center gap-x-4">
+                    <Image width="25" height="25" alt="Sky.money" src={`/storybook.png`} className="h-8 w-8  bg-gray-50" />
+                    <div className="text-sm">
+                        <p className="font-semibold text-gray-900">
+                            <Link href={`https://document-model-libs.vercel.app/`} target="_blank">
+                                <span className="absolute inset-0"></span>
+                                Document Model Libs
+                            </Link>
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
+
+
     );
 };