diff --git a/Website/src/app/@modal/(.)select_track/page.tsx b/Website/src/app/@modal/(.)select_track/page.tsx
new file mode 100644
index 0000000..a804254
--- /dev/null
+++ b/Website/src/app/@modal/(.)select_track/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { SelectionDialog } from "@/app/components/track_selection";
+
+/**
+ * The stand-alone track selection page
+ */
+export default function SelectTrackModal() {
+ // obtain a "completed" state
+ // const [completed, setCompleted] = useState(false);
+
+ return ;
+}
diff --git a/Website/src/app/@modal/default.tsx b/Website/src/app/@modal/default.tsx
new file mode 100644
index 0000000..1c7818b
--- /dev/null
+++ b/Website/src/app/@modal/default.tsx
@@ -0,0 +1,6 @@
+/**
+ * By default, there is no modal present
+ */
+export default function Default() {
+ return null;
+}
diff --git a/Website/src/app/layout.tsx b/Website/src/app/layout.tsx
index 4812dc2..384e4f6 100644
--- a/Website/src/app/layout.tsx
+++ b/Website/src/app/layout.tsx
@@ -11,7 +11,7 @@ export const metadata = meta_info;
* The Layout to use on all pages in the app-directory.
* Effectively defers to BaseLayout with minimal adjustments.
*/
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) {
const token = cookies().get("token")?.value;
const username = token ? inlineTry(() => getUsername(token)) : undefined;
@@ -20,6 +20,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
{children}
+ {
+ /* Add any modals beneath the page layout. They will need to layer themselves over the content. */
+ modal
+ }