diff --git a/src/app/components/home/ModalSubmit.tsx b/src/app/components/home/ModalSubmit.tsx
new file mode 100644
index 0000000..b5c063d
--- /dev/null
+++ b/src/app/components/home/ModalSubmit.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from "next/navigation";
+
+const ModalSubmit = ({
+  buttonDisabled,
+  porfolioName,
+  budget,
+  objective,
+}: {
+  buttonDisabled: boolean;
+  porfolioName: string;
+  budget: string;
+  objective: string;
+}) => {
+  const router = useRouter();
+  function createPortfolio() {
+    // TODO: This will be a server action that will create a new portfolio in the database
+    // That endpoint will return a uuid which will be the new portfolio's id
+    const id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
+
+    router.push(
+      `/portfolio/${id}?name=${porfolioName}&budget=${budget}&objective=${objective}`
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-gray-300 disabled:opacity-50"
+      onClick={createPortfolio}
+      disabled={buttonDisabled}
+    >
+      Create
+    </button>
+  );
+};
+
+export default ModalSubmit;
diff --git a/src/app/components/portfolio/AddNew.tsx b/src/app/components/portfolio/AddNew.tsx
new file mode 100644
index 0000000..7eb2a19
--- /dev/null
+++ b/src/app/components/portfolio/AddNew.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Menu } from "@headlessui/react";
+import Link from "next/link";
+
+export default function AddNew() {
+  return (
+    <Menu as="div" className="relative">
+      <Menu.Button className="rounded-md bg-brandmidblue text-white hover:bg-brandblue">
+        <div className="mx-8">Add New</div>
+      </Menu.Button>
+      <Menu.Items className="hover:bg-brandtan absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">
+        <Menu.Item>
+          <Link
+            href="/search"
+            className="flex px-4 py-2 text-sm text-gray-700 justify-start"
+          >
+            Add Unit
+          </Link>
+        </Menu.Item>
+        <Menu.Item>
+          <button
+            disabled={true}
+            className="flex px-4 py-2 text-sm text-gray-500 bg-gray-100 w-full justify-start"
+          >
+            Upload CSV
+          </button>
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
+  );
+}
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
new file mode 100644
index 0000000..3fa8314
--- /dev/null
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -0,0 +1,106 @@
+import AddNew from "../../components/portfolio/AddNew";
+
+export default async function Page({
+  params,
+  searchParams,
+}: {
+  params: { slug: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  // This is temp until we retrieve this data from the frontend
+  // TODO: Update the objects to contains objective + any other required information
+  const Portfolios = [
+    {
+      id: "f290f1ee-6c54-4b01-90e6-d701748f0851",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
+      title: "Portfolio 1",
+      budget: "£500k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
+      title: "Portfolio 2",
+      budget: "150k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
+      title: "Portfolio 3",
+      budget: "£1m",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
+      title: "Portfolio 4",
+      budget: "£2m",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
+      title: "Portfolio 5",
+      budget: "£25k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
+      title: "Portfolio 6",
+      budget: "£10k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
+      title: "Portfolio 7",
+      budget: "£33k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
+      title: "Portfolio 8",
+      budget: "£670k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
+      title: "Portfolio 9",
+      budget: "£240k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
+      title: "Portfolio 10",
+      budget: "93k",
+    },
+  ];
+  const demo_id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
+
+  console.log(params);
+  console.log(searchParams);
+  let page_config;
+  let pageName;
+  if (params.slug === demo_id) {
+    page_config = {
+      properties: [],
+      ...searchParams,
+    };
+    pageName = searchParams.name;
+  } else {
+    page_config = Portfolios.filter((portfolio) => {
+      return portfolio.id == params.slug;
+    })[0];
+    pageName = page_config.name;
+  }
+
+  // TODO: Add the porfolio summary information on the left
+  //       Add an empty state for when there are no properties
+  //       Create populated state for when there are properties
+
+  console.log(page_config);
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <h1 className="text-3xl font-bold mt-3">Portfolio: {pageName}</h1>
+      </div>
+      <div className="flex justify-center">
+        <div className="grid w-full max-w-7xl ">
+          <div className="flex justify-end">
+            <AddNew />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
new file mode 100644
index 0000000..20e48f4
--- /dev/null
+++ b/src/app/search/page.tsx
@@ -0,0 +1,3 @@
+export default function Search() {
+  return <>Hi</>;
+}