diff --git a/app/[installer-slug]/[install-id]/page.tsx b/app/[installer-slug]/[install-id]/page.tsx
index 30864dc..cc25099 100644
--- a/app/[installer-slug]/[install-id]/page.tsx
+++ b/app/[installer-slug]/[install-id]/page.tsx
@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import {
   createInstall,
   getInstall,
@@ -5,16 +7,66 @@ import {
 } from "@/app/[installer-slug]/actions";
 import { getAppBySlug, getInstaller } from "@/common";
 import { Link } from "@/components";
+
+import { Footer } from "@/components/Footer";
+
 import InstallStepper from "@/components/InstallStepper";
 import { getCloudPlatformRegions } from "@/common";
 
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[install] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[install] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: `Install Details | ${metadata.name}`,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
+
 export default async function Installer({ params, searchParams }) {
   const slug = params?.["installer-slug"];
   const installId = params?.["install-id"];
 
   const [app, installer, install] = await Promise.all([
     getAppBySlug(slug),
-    getInstaller(),
+    getInstaller(searchParams ? searchParams.installerId : null),
     getInstall(installId),
   ]);
   const regions = await getCloudPlatformRegions(app.cloud_platform);
@@ -55,6 +107,7 @@ export default async function Installer({ params, searchParams }) {
           regions={regions}
         />
       </main>
+      <Footer {...installer.metadata} />
     </>
   );
 }
diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
index dd247a6..6aa3b3d 100644
--- a/app/[installer-slug]/page.tsx
+++ b/app/[installer-slug]/page.tsx
@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import {
   createInstall,
   getInstall,
@@ -5,14 +7,62 @@ import {
 } from "@/app/[installer-slug]/actions";
 import { getAppBySlug, getInstaller } from "@/common";
 import { Link } from "@/components";
+import { Footer } from "@/components/Footer";
 import InstallStepper from "@/components/InstallStepper";
 import { getCloudPlatformRegions } from "@/common";
 
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[installer] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[installer] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: `Installer | ${metadata.name}`,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
+
 export default async function Installer({ params, searchParams }) {
   const slug = params?.["installer-slug"];
   const [app, installer] = await Promise.all([
     getAppBySlug(slug),
-    getInstaller(),
+    getInstaller(searchParams ? searchParams.installerId : null),
   ]);
   const regions = await getCloudPlatformRegions(app.cloud_platform);
 
@@ -39,7 +89,6 @@ export default async function Installer({ params, searchParams }) {
           <p>{app?.description}</p>
         </div>
       </header>
-
       <main className="flex-auto" id="steps">
         <InstallStepper
           app={app}
@@ -52,6 +101,7 @@ export default async function Installer({ params, searchParams }) {
           regions={regions}
         />
       </main>
+      <Footer {...installer.metadata} />
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index b14866e..fe96469 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,93 +1,27 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
-import { getInstaller } from "@/common";
-import { Link, PoweredByNuon } from "@/components";
-import { Markdown } from "@/components/Markdown";
 import "./globals.css";
 import theme from "@/theme";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export async function generateMetadata(): Promise<Metadata> {
-  const { metadata } = await getInstaller();
-
-  return {
-    title: metadata.name,
-    description: metadata.description,
-    icons: {
-      icon: metadata.favicon_url,
-      shortcut: metadata.favicon_url,
-    },
-    openGraph: {
-      title: metadata.name,
-      description: metadata.description,
-      type: "website",
-      images: [
-        {
-          url: metadata.og_image_url,
-        },
-      ],
-    },
-    twitter: {
-      title: metadata.name,
-      description: metadata.description,
-      images: [
-        {
-          url: metadata.logo_url,
-        },
-      ],
-    },
-  };
-}
-
-const missingData = {
-  orgName: "Nuon",
-};
-
 export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { metadata } = await getInstaller();
-
   return (
     <html
       className={`${theme.forceDarkMode ? "dark" : ""} bg-white dark:bg-black text-black dark:text-white`}
       lang="en"
     >
       <body className={`${inter.className} w-full h-dvh`}>
-        <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12">
+        <div
+          className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12"
+          id="content-wapper
+        "
+        >
           {children}
-          <footer className="flex items-center justify-between">
-            <div className="flex gap-2 items-center">
-              {metadata.copyright_markdown ? (
-                <Markdown content={metadata.copyright_markdown} />
-              ) : (
-                <>
-                  <span className="text-xs">
-                    &copy; {new Date().getFullYear()}
-                  </span>
-                  <Link
-                    href={metadata.homepage_url}
-                    className="text-xs"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {missingData.orgName}
-                  </Link>
-                </>
-              )}
-            </div>
-            <div className="flex gap-6 items-center">
-              {metadata.footer_markdown ? (
-                <Markdown content={metadata.footer_markdown} />
-              ) : (
-                <PoweredByNuon />
-              )}
-            </div>
-          </footer>
         </div>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 245147a..22a7850 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,58 @@
 import { getInstaller } from "@/common";
 import { Link, Video, Card } from "@/components";
+import { Footer } from "@/components/Footer";
+
+import type { Metadata } from "next";
+
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  searchParams,
+}: Props): Promise<Metadata> {
+  const { metadata } = await getInstaller(
+    searchParams ? searchParams.installerId : null,
+  );
+  console.debug("[index] Generating Metdata");
+
+  // TODO(fd): we need to address this.
+  if (!!!metadata) {
+    console.debug("[index] No Metdata Found");
+    return {};
+  }
+
+  return {
+    title: metadata.name,
+    description: metadata.description,
+    icons: {
+      icon: metadata.favicon_url,
+      shortcut: metadata.favicon_url,
+    },
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      type: "website",
+      images: [
+        {
+          url: metadata.og_image_url,
+        },
+      ],
+    },
+    twitter: {
+      title: metadata.name,
+      description: metadata.description,
+      images: [
+        {
+          url: metadata.logo_url,
+        },
+      ],
+    },
+  };
+}
 
 export default async function Home({ searchParams }) {
-  const { metadata, apps } = await getInstaller();
+  const { metadata, apps } = await getInstaller(searchParams.installerId);
   const queryString = new URLSearchParams(searchParams).toString();
   const demoUrl = metadata.formatted_demo_url || metadata.demo_url;
   const isDemoUrlValid = /^((http|https):\/\/)/.test(demoUrl);
@@ -50,6 +100,7 @@ export default async function Home({ searchParams }) {
             ))}
         </div>
       </main>
+      <Footer {...metadata} />
     </>
   );
 }
diff --git a/common/index.ts b/common/index.ts
index 366e5cd..50216eb 100644
--- a/common/index.ts
+++ b/common/index.ts
@@ -1,17 +1,29 @@
 export const NUON_API_URL =
   process?.env?.NUON_API_URL || "https://ctl.prod.nuon.co";
 
-export async function getInstaller(): Promise<Record<string, any>> {
-  const res = await fetch(
-    `${NUON_API_URL}/v1/installers/${process.env?.NUON_INSTALLER_ID}`,
-    {
-      cache: "no-store",
-      headers: {
-        Authorization: `Bearer ${process?.env?.NUON_API_TOKEN}`,
-        "X-Nuon-Org-ID": process.env?.NUON_ORG_ID || "",
-      },
+export async function getInstaller(
+  installerId: string[] | string | null | undefined, // man, this is why we use any
+): Promise<Record<string, any>> {
+  let nuonInstallerId = process.env?.NUON_INSTALLER_ID;
+  if (installerId !== null && installerId !== undefined) {
+    nuonInstallerId = String(installerId); // cast here to silence the linter
+    console.debug(`Using installerId from arg: ${nuonInstallerId}`);
+  } else {
+    console.debug(`Using installerId from env: ${nuonInstallerId}`);
+  }
+  let url = `${NUON_API_URL}/v1/installers/${nuonInstallerId}`;
+  const res = await fetch(url, {
+    cache: "no-store",
+    headers: {
+      Authorization: `Bearer ${process?.env?.NUON_API_TOKEN}`,
+      "X-Nuon-Org-ID": process.env?.NUON_ORG_ID || "",
     },
-  );
+  });
+  if (res.status > 300) {
+    console.error(
+      `[${res.status}] Encountered an error while fetching installer. url=${url}`,
+    );
+  }
 
   return res.json();
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..07ad107
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,35 @@
+import { Link, PoweredByNuon } from "@/components";
+import { Markdown } from "@/components/Markdown";
+
+const missingData = {
+  orgName: "Nuon",
+};
+
+export const Footer = (metadata: any) => (
+  <footer className="flex items-center justify-between">
+    <div className="flex gap-2 items-center">
+      {metadata.copyright_markdown ? (
+        <Markdown content={metadata.copyright_markdown} />
+      ) : (
+        <>
+          <span className="text-xs">&copy; {new Date().getFullYear()}</span>
+          <Link
+            href={metadata.homepage_url}
+            className="text-xs"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {missingData.orgName}
+          </Link>
+        </>
+      )}
+    </div>
+    <div className="flex gap-6 items-center">
+      {metadata.footer_markdown ? (
+        <Markdown content={metadata.footer_markdown} />
+      ) : (
+        <PoweredByNuon />
+      )}
+    </div>
+  </footer>
+);
diff --git a/package-lock.json b/package-lock.json
index 07da91a..ad9ca21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2714,12 +2714,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -4092,10 +4093,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4913,6 +4915,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -5435,12 +5438,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -7295,6 +7299,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },