diff --git a/onix-gui/app/api/install-layer2/route.js b/onix-gui/app/api/install-layer2/route.js
deleted file mode 100644
index c795226..0000000
--- a/onix-gui/app/api/install-layer2/route.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { exec } from "child_process";
-import { NextResponse } from "next/server";
-
-export async function POST(req) {
-  const request = await req.json();
-  const fileURL = request.yamlUrl;
-  const containerName = request.container;
-
-  const executeShellCommand = (command) => {
-    return new Promise((resolve, reject) => {
-      exec(command, (error, stdout, stderr) => {
-        if (error) {
-          console.error("Error:", error);
-          reject(error);
-          return;
-        }
-        if (stderr) {
-          console.error("Error:", stderr);
-          reject(new Error(stderr));
-          return;
-        }
-        const output = stdout;
-        console.log("Output:", output);
-        resolve(output);
-      });
-    });
-  };
-
-  try {
-    await executeShellCommand(
-      `docker exec ${containerName} wget -P /usr/src/app/schemas/  ${fileURL}`
-    );
-    return NextResponse.json({ status: 200 });
-  } catch (error) {
-    console.error(`exec error: ${error}`);
-    return NextResponse.json({ status: 500 });
-  }
-}
diff --git a/onix-gui/app/yaml-gen/page.js b/onix-gui/app/yaml-gen/page.js
deleted file mode 100644
index b80f556..0000000
--- a/onix-gui/app/yaml-gen/page.js
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client";
-import { useState } from "react";
-import { Ubuntu_Mono } from "next/font/google";
-import PrimaryButton from "@/components/Buttons/PrimaryButton";
-import InputField from "@/components/InputField/InputField";
-import Slider from "@/components/Slider/Slider";
-import styles from "../page.module.css";
-import { toast } from "react-toastify";
-
-import Link from "next/link";
-
-const ubuntuMono = Ubuntu_Mono({
-  weight: "400",
-  style: "normal",
-  subsets: ["latin"],
-});
-
-export default function CheckYaml() {
-  const [domainName, setDomainName] = useState("");
-  const [versionNumber, setversionNumber] = useState("");
-  const [checked, setChecked] = useState(false);
-  const [showDownloadLayer2Button, setShowDownloadLayer2Button] =
-    useState(false);
-  const [propertyLink, setPropertyLink] = useState("");
-
-  const handleYamlChange = (event) => {
-    setPropertyLink(event.target.value);
-  };
-  const handledomainNameChange = (event) => {
-    setDomainName(event.target.value);
-  };
-  const handleVersionChange = (event) => {
-    setversionNumber(event.target.value);
-  };
-  const nameGenerator = async () => {
-    const parts = domainName.split(":");
-    const domainNameWithoutVersion = parts[0];
-    const domainVersion = parts[1] || "";
-    const filename = `${domainNameWithoutVersion}_${domainVersion}_${versionNumber}.yaml`;
-    return filename;
-  };
-  const handleDownload = async () => {
-    const userInput = prompt("Enter the URL of the Layer 2 Config file");
-    try {
-      const response = await fetch("/api/install-layer2", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ checked, userInput }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        console.log(data);
-        const FileFound = data.message;
-        if (FileFound == false) {
-          setShowDownloadLayer2Button(true);
-          toast.update(toastId, {
-            render: "No Layer 2 Config Present 🤯",
-            type: "error",
-            isLoading: false,
-            autoClose: 5000,
-          });
-        } else {
-          toast.update(toastId, {
-            render: "Yaml File Present 👌",
-            type: "success",
-            isLoading: false,
-            autoClose: 5000,
-          });
-        }
-      } else {
-        console.error("Failed to check yaml");
-        toast.update(toastId, {
-          render: "Container Not Found 🤯",
-          type: "error",
-          isLoading: false,
-          autoClose: 5000,
-        });
-      }
-    } catch (error) {
-      console.error("An error occurred:", error);
-    }
-  };
-
-  const handleOnclick = async () => {
-    const fileName = await nameGenerator();
-    const toastId = toast.loading("Checking for layer2 yaml file");
-    try {
-      const response = await fetch("/api/check-layer2", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ checked, fileName }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        const FileFound = data.message;
-        if (FileFound == false) {
-          setShowDownloadLayer2Button(true);
-          toast.update(toastId, {
-            render: "No Layer 2 Config Present 🤯",
-            type: "error",
-            isLoading: false,
-            autoClose: 5000,
-          });
-        } else {
-          toast.update(toastId, {
-            render: "Yaml File Present 👌",
-            type: "success",
-            isLoading: false,
-            autoClose: 5000,
-          });
-        }
-      } else {
-        console.error("Failed to check yaml");
-        toast.update(toastId, {
-          render: "Container Not Found 🤯",
-          type: "error",
-          isLoading: false,
-          autoClose: 5000,
-        });
-      }
-    } catch (error) {
-      console.error("An error occurred:", error);
-    }
-  };
-  return (
-    <>
-      <main className={ubuntuMono.className}>
-        <button
-          onClick={() => window.history.back()}
-          className={styles.backButton}
-        >
-          Back
-        </button>
-
-        <div className={styles.mainContainer}>
-          <p className={styles.mainText}>
-            <b>Yaml File Checker</b>
-          </p>
-
-          <div className={styles.formContainer}>
-            <Slider
-              label={checked ? "BPP" : "BAP"}
-              checked={checked}
-              toggleChecked={setChecked}
-            />
-            <InputField
-              label={"Container Name"}
-              value={checked ? "bpp-network" : "bap-network"}
-              readOnly
-            />
-            <InputField
-              label={"Domain Name"}
-              value={domainName}
-              onChange={handledomainNameChange}
-              placeholder="Retail"
-            />
-            <InputField
-              label={"Version Number"}
-              value={versionNumber}
-              onChange={handleVersionChange}
-              placeholder="1.0.0"
-            />
-
-            <div className={styles.buttonsContainer}>
-              <PrimaryButton label={"Check"} onClick={handleOnclick} />
-            </div>
-            {showDownloadLayer2Button && (
-              <div className={styles.buttonsContainer}>
-                <a href={`/yaml-gen/install-yaml`}>Download Layer 2 Config</a>
-              </div>
-            )}
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
diff --git a/onix-gui/.eslintrc.json b/onix-gui/onix/.eslintrc.json
similarity index 100%
rename from onix-gui/.eslintrc.json
rename to onix-gui/onix/.eslintrc.json
diff --git a/onix-gui/.gitignore b/onix-gui/onix/.gitignore
similarity index 100%
rename from onix-gui/.gitignore
rename to onix-gui/onix/.gitignore
diff --git a/onix-gui/README.md b/onix-gui/onix/README.md
similarity index 68%
rename from onix-gui/README.md
rename to onix-gui/onix/README.md
index 5453b9b..a18038f 100644
--- a/onix-gui/README.md
+++ b/onix-gui/onix/README.md
@@ -6,28 +6,23 @@ The GUI for the beckn-onix cli tool.
 
 1. 4 server/instances
 2. 4 sub-domains mapped to each instance
+3. Local Tunnel
+   `npm i -g localtunnel`
 
 ## User Guide
 
-### Step 1: Clone the beckn-onix-gui repo
+### Step 1: Run the `start.sh` script
 
 ```
-git clone https://github.com/Mishalabdullah/beckn-onix-gui.git
+cd .. && ./start.sh
 ```
 
-### Step 2: Change directory to the nextjs project
+### Step 2: Accessing the GUI.
 
-```
-cd onix-gui
-```
+You will be getting a URL and password as on output of the script. Open the url in the browser and then
+paste the password.
 
-### Step 3: Run nextjs on port 3005
-
-For running the installation script just run this command. The sudo privilages are required when installing packages and configuring the nginx reverse proxy
-
-```
-sudo ./start.sh
-```
+### Step 3: Install and setup your network
 
 Note: Port 3000 is being used by onix, so we're using port 3005 instead.
 
diff --git a/onix-gui/app/Infy_Pending.pdf b/onix-gui/onix/app/Infy_Pending.pdf
similarity index 100%
rename from onix-gui/app/Infy_Pending.pdf
rename to onix-gui/onix/app/Infy_Pending.pdf
diff --git a/onix-gui/app/api/check-layer2/route.js b/onix-gui/onix/app/api/check-layer2/route.js
similarity index 60%
rename from onix-gui/app/api/check-layer2/route.js
rename to onix-gui/onix/app/api/check-layer2/route.js
index 1fb27cf..9ffccdf 100644
--- a/onix-gui/app/api/check-layer2/route.js
+++ b/onix-gui/onix/app/api/check-layer2/route.js
@@ -2,9 +2,8 @@ import { exec } from "child_process";
 import { NextResponse } from "next/server";
 
 export async function POST(req) {
-  const request = await req.json();
-  const containerName = request.checked ? "bpp-network" : "bap-network";
-  const fileToCheck = request.fileName;
+  const checked = await req.json();
+  const containerName = checked.checked ? "bpp-network" : "bap-network";
 
   const executeShellCommand = (command) => {
     return new Promise((resolve, reject) => {
@@ -14,11 +13,13 @@ export async function POST(req) {
           reject(error);
           return;
         }
+
         if (stderr) {
           console.error("Error:", stderr);
           reject(new Error(stderr));
           return;
         }
+
         const output = stdout;
         console.log("Output:", output);
         resolve(output);
@@ -30,6 +31,7 @@ export async function POST(req) {
     const containerExists = await executeShellCommand(
       `docker ps -a --filter "name=${containerName}" --format "{{.Names}}"`
     );
+
     if (!containerExists.trim()) {
       return new NextResponse(`Error: ${containerName} server not present`, {
         status: 500,
@@ -37,30 +39,14 @@ export async function POST(req) {
     }
 
     const result = await executeShellCommand(
-      `docker exec ${containerName} /bin/sh -c "[ -f '/usr/src/app/schemas/${fileToCheck}' ] && echo 'File found' || echo 'File not found'"`
+      `docker exec ${containerName} ls /usr/src/app/schemas/ | grep -v "core" | grep ".yaml" | wc -l`
     );
-    if (result.trim() === "File found") {
-      return NextResponse.json(
-        { message: true },
-        {
-          status: 200,
-        }
-      );
-    } else {
-      return NextResponse.json(
-        { message: false },
-        {
-          status: 200,
-        }
-      );
-    }
+
+    return new NextResponse(result);
   } catch (error) {
     console.error(`exec error: ${error}`);
-    return NextResponse.json(
-      { message: `Error executing shell command: ${error}` },
-      {
-        status: 500,
-      }
-    );
+    return new NextResponse(`Error executing shell command: ${error}`, {
+      status: 500,
+    });
   }
 }
diff --git a/onix-gui/app/api/clonning-repo/route.js b/onix-gui/onix/app/api/clonning-repo/route.js
similarity index 100%
rename from onix-gui/app/api/clonning-repo/route.js
rename to onix-gui/onix/app/api/clonning-repo/route.js
diff --git a/onix-gui/onix/app/api/get-network-participant/route.js b/onix-gui/onix/app/api/get-network-participant/route.js
new file mode 100644
index 0000000..45f68f5
--- /dev/null
+++ b/onix-gui/onix/app/api/get-network-participant/route.js
@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req, res) {
+  const request = await req.json();
+  const registryUrl = request.registryUrl;
+  const body = { type: "BPP" };
+
+  try {
+    const response = await fetch(registryUrl, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+    return NextResponse.json(data, { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "Error making request to registry" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/onix-gui/app/api/install-bap/route.js b/onix-gui/onix/app/api/install-bap/route.js
similarity index 92%
rename from onix-gui/app/api/install-bap/route.js
rename to onix-gui/onix/app/api/install-bap/route.js
index 2c5fb04..9236941 100644
--- a/onix-gui/app/api/install-bap/route.js
+++ b/onix-gui/onix/app/api/install-bap/route.js
@@ -47,10 +47,7 @@ export async function startSupportServices() {
       `docker-compose -f ${pathDir}/install/docker-compose-app.yml up -d redis_db`
     );
     console.log("Result 3:", result3);
-    await executeCommand("docker volume create registry_data_volume");
-    await executeCommand("docker volume create registry_database_volume");
-    await executeCommand("docker volume create gateway_data_volume");
-    await executeCommand("docker volume create gateway_database_volume");
+
     return NextResponse.json({ result1, result2, result3 });
   } catch (error) {
     console.error("An error occurred:", error);
@@ -94,10 +91,10 @@ export async function POST(req) {
     const bppSubscriberId = data.subscriberId;
     const bppSubscriberUrl = data.subscriberUrl;
     const networkconfigurl = data.networkconfigurl;
-
     let updateBppConfigCommand = `bash ${pathDir}/install/scripts/update_bap_config.sh  ${registryUrl} ${bppSubscriberId}  ${bppSubscriberUrl} ${networkconfigurl}`;
     const result1 = await executeCommand(updateBppConfigCommand);
     console.log("Result 1:", result1);
+
     const result3 = await executeCommand(
       `docker-compose -f ${pathDir}/install/docker-compose-v2.yml up -d  "bap-client"`
     );
diff --git a/onix-gui/app/api/install-bpp/route.js b/onix-gui/onix/app/api/install-bpp/route.js
similarity index 93%
rename from onix-gui/app/api/install-bpp/route.js
rename to onix-gui/onix/app/api/install-bpp/route.js
index 2ac5ca0..9943be4 100644
--- a/onix-gui/app/api/install-bpp/route.js
+++ b/onix-gui/onix/app/api/install-bpp/route.js
@@ -47,10 +47,7 @@ export async function startSupportServices() {
       `docker-compose -f ${pathDir}/install/docker-compose-app.yml up -d redis_db`
     );
     console.log("Result 3:", result3);
-    await executeCommand("docker volume create registry_data_volume");
-    await executeCommand("docker volume create registry_database_volume");
-    await executeCommand("docker volume create gateway_data_volume");
-    await executeCommand("docker volume create gateway_database_volume");
+
     return NextResponse.json({ result1, result2, result3 });
   } catch (error) {
     console.error("An error occurred:", error);
diff --git a/onix-gui/app/api/install-gateway/route.js b/onix-gui/onix/app/api/install-gateway/route.js
similarity index 93%
rename from onix-gui/app/api/install-gateway/route.js
rename to onix-gui/onix/app/api/install-gateway/route.js
index 3545f6e..46b150b 100644
--- a/onix-gui/app/api/install-gateway/route.js
+++ b/onix-gui/onix/app/api/install-gateway/route.js
@@ -64,8 +64,7 @@ export async function POST(req, res) {
       `bash ${pathDir}/install/scripts/package_manager.sh`
     );
     console.log("Result 1:", result1);
-    await executeCommand("docker volume create registry_data_volume");
-    await executeCommand("docker volume create registry_database_volume");
+
     const result2 = await executeCommand(
       ` bash ${pathDir}/install/scripts/update_gateway_details.sh ${data.registryUrl} ${data.gatewayUrl}`
     );
@@ -76,7 +75,7 @@ export async function POST(req, res) {
     );
     console.log("Result 3:", result3);
 
-    const result4 = await executeCommand(`sleep 2`);
+    const result4 = await executeCommand(`sleep 10`);
     console.log("Result 4:", result4);
 
     const result5 = await executeCommand(
diff --git a/onix-gui/app/api/install-registry/route.js b/onix-gui/onix/app/api/install-registry/route.js
similarity index 85%
rename from onix-gui/app/api/install-registry/route.js
rename to onix-gui/onix/app/api/install-registry/route.js
index 70c4102..fbffb7b 100644
--- a/onix-gui/app/api/install-registry/route.js
+++ b/onix-gui/onix/app/api/install-registry/route.js
@@ -111,20 +111,6 @@ export async function POST(req, res) {
 
       await fs.writeFile(tempFile, updatedConfigData);
       await fs.rename(tempFile, configFile);
-      await executeCommand("docker volume create registry_data_volume");
-      await executeCommand("docker volume create registry_database_volume");
-      await executeCommand("docker volume create gateway_data_volume");
-      await executeCommand("docker volume create gateway_database_volume");
-      await executeCommand(
-        `docker run --rm -v ${join(
-          pathDir,
-          "install",
-          "registry_data",
-          "config"
-        )}:/source -v registry_data_volume:/target busybox sh -c "cp /source/envvars /target/ && cp /source/logger.properties /target/ && cp /source/swf.properties /target/"`
-      );
-
-      // Start the registry container
       await executeCommand(
         `docker-compose -f ${join(
           pathDir,
diff --git a/onix-gui/app/favicon.ico b/onix-gui/onix/app/favicon.ico
similarity index 100%
rename from onix-gui/app/favicon.ico
rename to onix-gui/onix/app/favicon.ico
diff --git a/onix-gui/app/globals.css b/onix-gui/onix/app/globals.css
similarity index 100%
rename from onix-gui/app/globals.css
rename to onix-gui/onix/app/globals.css
diff --git a/onix-gui/app/install/configure/page.js b/onix-gui/onix/app/install/configure/page.js
similarity index 85%
rename from onix-gui/app/install/configure/page.js
rename to onix-gui/onix/app/install/configure/page.js
index 4da2300..f0749f9 100644
--- a/onix-gui/app/install/configure/page.js
+++ b/onix-gui/onix/app/install/configure/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -28,7 +28,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -37,7 +37,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -46,7 +46,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>
diff --git a/onix-gui/app/install/create/page.js b/onix-gui/onix/app/install/create/page.js
similarity index 84%
rename from onix-gui/app/install/create/page.js
rename to onix-gui/onix/app/install/create/page.js
index 0cf9db7..14e38e6 100644
--- a/onix-gui/app/install/create/page.js
+++ b/onix-gui/onix/app/install/create/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -28,7 +28,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -37,7 +37,7 @@ export default function Home() {
                 className={styles.box}
                 style={{ textDecoration: "underline", color: "white" }}
               >
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -46,7 +46,7 @@ export default function Home() {
                 className={styles.box}
                 style={{ textDecoration: "underline", color: "white" }}
               >
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>
@@ -55,7 +55,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Registry</p>
               </div>
             </Link>
diff --git a/onix-gui/app/install/join/page.js b/onix-gui/onix/app/install/join/page.js
similarity index 86%
rename from onix-gui/app/install/join/page.js
rename to onix-gui/onix/app/install/join/page.js
index 619e14b..5223af5 100644
--- a/onix-gui/app/install/join/page.js
+++ b/onix-gui/onix/app/install/join/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -32,7 +32,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -44,7 +44,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -56,7 +56,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>
diff --git a/onix-gui/app/install/local/page.js b/onix-gui/onix/app/install/local/page.js
similarity index 85%
rename from onix-gui/app/install/local/page.js
rename to onix-gui/onix/app/install/local/page.js
index 7dbd607..a698588 100644
--- a/onix-gui/app/install/local/page.js
+++ b/onix-gui/onix/app/install/local/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -30,7 +30,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -39,7 +39,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -48,7 +48,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>
diff --git a/onix-gui/app/install/merge/page.js b/onix-gui/onix/app/install/merge/page.js
similarity index 76%
rename from onix-gui/app/install/merge/page.js
rename to onix-gui/onix/app/install/merge/page.js
index 7391660..7e256d9 100644
--- a/onix-gui/app/install/merge/page.js
+++ b/onix-gui/onix/app/install/merge/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -15,12 +15,7 @@ export default function Home() {
     <>
       <main className={ubuntuMono.className}>
         <div className={styles.mainContainer}>
-          <button
-            onClick={() => window.history.back()}
-            className={styles.backButton}
-          >
-            Back
-          </button>
+        <button onClick={() => window.history.back()} className={styles.backButton}>Back</button>
           <p className={styles.mainText}>Merge multiple networks</p>
           <div className={styles.boxesContainer}>
             <Link
@@ -28,7 +23,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -37,7 +32,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BAP</p>
               </div>
             </Link>
@@ -46,7 +41,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>BPP</p>
               </div>
             </Link>
diff --git a/onix-gui/app/install/page.js b/onix-gui/onix/app/install/page.js
similarity index 56%
rename from onix-gui/app/install/page.js
rename to onix-gui/onix/app/install/page.js
index a196231..e104190 100644
--- a/onix-gui/app/install/page.js
+++ b/onix-gui/onix/app/install/page.js
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -33,7 +33,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Join an existing network</p>
               </div>
             </Link>
@@ -42,10 +42,39 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Create new production network</p>
               </div>
             </Link>
+            <Link
+              href="/install/local"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.box}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>
+                  Set up a network on your local machine
+                </p>
+              </div>
+            </Link>
+            {/* <Link
+              href="/install/merge"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.box}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Merge multiple networks</p>
+              </div>
+            </Link>
+            <Link
+              href="/install/configure"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.box}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Configure Existing Network</p>
+              </div>
+            </Link> */}
           </div>
         </div>
       </main>
diff --git a/onix-gui/app/layout.js b/onix-gui/onix/app/layout.js
similarity index 100%
rename from onix-gui/app/layout.js
rename to onix-gui/onix/app/layout.js
diff --git a/onix-gui/onix/app/monitor/dashboard/page.js b/onix-gui/onix/app/monitor/dashboard/page.js
new file mode 100644
index 0000000..072b95d
--- /dev/null
+++ b/onix-gui/onix/app/monitor/dashboard/page.js
@@ -0,0 +1,95 @@
+import styles from "../../page.module.css";
+
+const page = () => {
+    const data = [
+        {
+            ip: "192.168.1.1",
+            status: "Live",
+            cpu: "2%",
+            memory: "18.8 MB",
+            uptime: "10 days",
+        },
+        {
+            ip: "10.0.0.1",
+            status: "404",
+            cpu: "0%",
+            memory: "0 MB",
+            uptime: "5 days",
+        },
+        {
+            ip: "172.16.0.1",
+            status: "Live",
+            cpu: "6%",
+            memory: "56.4 MB",
+            uptime: "15 days",
+        },
+        {
+            ip: "192.0.2.1",
+            status: "Live",
+            cpu: "69%",
+            memory: "648.6 MB",
+            uptime: "20 days",
+        },
+        {
+            ip: "198.51.100.1",
+            status: "404",
+            cpu: "0%",
+            memory: "0 MB",
+            uptime: "3 days",
+        },
+        {
+            ip: "203.0.113.1",
+            status: "Live",
+            cpu: ".4%",
+            memory: "3.7 MB",
+            uptime: "8 days",
+        },
+    ];
+    return (
+        <div className={styles.dashboard}>
+            <div className={styles.counts}>
+                <p
+                    style={{
+                        textAlign: "left",
+                    }}
+                    className={styles.count}
+                >
+                    Uptime Network Participants: 10
+                </p>
+                <p
+                    style={{
+                        textAlign: "right",
+                    }}
+                    className={styles.count}
+                >
+                    Uptime Network Participants: 10
+                </p>
+            </div>
+            <h2 className={styles.dashboardHeading}>Dashboard</h2>
+            <table className={styles.dashboardTable}>
+                <thead>
+                    <tr>
+                        <th>S/N</th>
+                        <th>IP / Domain Name</th>
+                        <th>Status</th>
+                        <th>CPU</th>
+                        <th>Memory</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {data.map((item, index) => (
+                        <tr key={index}>
+                            <td>{index + 1}</td>
+                            <td>{item.ip}</td>
+                            <td>{item.status}</td>
+                            <td>{item.cpu}</td>
+                            <td>{item.memory}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default page;
diff --git a/onix-gui/onix/app/monitor/page.js b/onix-gui/onix/app/monitor/page.js
new file mode 100644
index 0000000..5e042e2
--- /dev/null
+++ b/onix-gui/onix/app/monitor/page.js
@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import InputField from "@/components/InputField/InputField";
+import styles from "../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+import SecondaryButton from "@/components/Buttons/SecondaryButton";
+import PrimaryButton from "@/components/Buttons/PrimaryButton";
+import { useRouter } from "next/navigation";
+const ubuntuMono = Ubuntu_Mono({
+  weight: "400",
+  style: "normal",
+  subsets: ["latin"],
+});
+
+export default function Home() {
+  const [registryUrl, setRegistryUrl] = useState("");
+  const router = useRouter();
+  const handleRegistryUrlChange = (event) => {
+    setRegistryUrl(event.target.value);
+  };
+  const handleContinue = async () => {
+    try {
+      const response = await fetch("/api/get-network-participant", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ registryUrl }),
+      });
+
+      if (response.ok) {
+        const networkParticipantsData = await response.json();
+        router.push("/monitor/dashboard");
+        // redirecting to the dashboard page
+      } else {
+        console.log("error fetching participant data");
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+
+  return (
+    <>
+      <main className={ubuntuMono.className}>
+        <div className={styles.mainContainer}>
+          <button
+            onClick={() => window.history.back()}
+            className={styles.backButton}
+          >
+            Back
+          </button>
+          {/* <p className={styles.currentRoute}>ONIX{pathname}</p> */}
+          <p className={styles.mainText}>Network Registry</p>
+          <div className={styles.formContainer}>
+            <InputField
+              value={registryUrl}
+              onChange={handleRegistryUrlChange}
+              label={"Registry URL"}
+            />
+            {/* <InputField label={"Subscriber Id"} /> */}
+            {/* <InputField label={"UniqueKey Id"} /> */}
+            {/* <InputField label={"Network configuration URL"} /> */}
+
+            <div className={styles.buttonsContainer}>
+              {/* <SecondaryButton text={"Cancel"} /> */}
+              <PrimaryButton onClick={handleContinue} text={"Continue"} />
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/onix-gui/app/page.js b/onix-gui/onix/app/page.js
similarity index 81%
rename from onix-gui/app/page.js
rename to onix-gui/onix/app/page.js
index 600fc62..33f3594 100644
--- a/onix-gui/app/page.js
+++ b/onix-gui/onix/app/page.js
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import styles from "./page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-import Image from "next/image";
+
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -25,25 +25,25 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Installation Wizard</p>
               </div>
             </Link>
-            {/* <Link
+            <Link
               href="/monitor"
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={5} height={3} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Network Monitor</p>
               </div>
-            </Link> */}
+            </Link>
             <Link
-              href="/yaml-gen/"
+              href="/yaml-gen/check-yaml"
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
+                <img src="/arrow.png" />
                 <p className={styles.boxText}>Layer 2 Tester </p>
               </div>
             </Link>
diff --git a/onix-gui/app/page.module.css b/onix-gui/onix/app/page.module.css
similarity index 100%
rename from onix-gui/app/page.module.css
rename to onix-gui/onix/app/page.module.css
diff --git a/onix-gui/app/setup/bap/page.js b/onix-gui/onix/app/setup/bap/page.js
similarity index 98%
rename from onix-gui/app/setup/bap/page.js
rename to onix-gui/onix/app/setup/bap/page.js
index 2613e6e..ff4b4f8 100644
--- a/onix-gui/app/setup/bap/page.js
+++ b/onix-gui/onix/app/setup/bap/page.js
@@ -117,7 +117,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
+              <SecondaryButton text={"Cancel"} />
               <PrimaryButton
                 disabled={buttonDisable}
                 onClick={installBap}
diff --git a/onix-gui/app/setup/bpp/page.js b/onix-gui/onix/app/setup/bpp/page.js
similarity index 98%
rename from onix-gui/app/setup/bpp/page.js
rename to onix-gui/onix/app/setup/bpp/page.js
index 3d37d00..db5dedb 100644
--- a/onix-gui/app/setup/bpp/page.js
+++ b/onix-gui/onix/app/setup/bpp/page.js
@@ -131,7 +131,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
+              <SecondaryButton text={"Cancel"} />
               <PrimaryButton
                 disable={buttonDisable}
                 onClick={installBpp}
diff --git a/onix-gui/app/setup/gateway/page.js b/onix-gui/onix/app/setup/gateway/page.js
similarity index 98%
rename from onix-gui/app/setup/gateway/page.js
rename to onix-gui/onix/app/setup/gateway/page.js
index 41be273..910ab6e 100644
--- a/onix-gui/app/setup/gateway/page.js
+++ b/onix-gui/onix/app/setup/gateway/page.js
@@ -115,7 +115,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
+              <SecondaryButton text={"Cancel"} />
               <PrimaryButton onClick={installGateway} text={"Continue"} />
             </div>
           </div>
diff --git a/onix-gui/app/setup/registry/page.js b/onix-gui/onix/app/setup/registry/page.js
similarity index 97%
rename from onix-gui/app/setup/registry/page.js
rename to onix-gui/onix/app/setup/registry/page.js
index 6fce954..8bc57c2 100644
--- a/onix-gui/app/setup/registry/page.js
+++ b/onix-gui/onix/app/setup/registry/page.js
@@ -85,7 +85,7 @@ export default function Home() {
               onChange={handleRegistryUrlChange}
             />
             <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
+              <SecondaryButton text={"Cancel"} />
               <PrimaryButton onClick={installRegistry} text={"Continue"} />
             </div>
           </div>
diff --git a/onix-gui/app/template.csv b/onix-gui/onix/app/template.csv
similarity index 100%
rename from onix-gui/app/template.csv
rename to onix-gui/onix/app/template.csv
diff --git a/onix-gui/app/yaml-gen/install-yaml/page.js b/onix-gui/onix/app/yaml-gen/check-yaml/page.js
similarity index 59%
rename from onix-gui/app/yaml-gen/install-yaml/page.js
rename to onix-gui/onix/app/yaml-gen/check-yaml/page.js
index 22ad80c..4ebbcf6 100644
--- a/onix-gui/app/yaml-gen/install-yaml/page.js
+++ b/onix-gui/onix/app/yaml-gen/check-yaml/page.js
@@ -1,12 +1,12 @@
 "use client";
-import SecondaryButton from "@/components/Buttons/SecondaryButton";
-import styles from "../../page.module.css";
+import { useState } from "react";
 import { Ubuntu_Mono } from "next/font/google";
-import Slider from "@/components/Slider/Slider";
 import PrimaryButton from "@/components/Buttons/PrimaryButton";
 import InputField from "@/components/InputField/InputField";
-import { useState, useCallback } from "react";
+import Slider from "@/components/Slider/Slider";
+import styles from "../../page.module.css";
 import { toast } from "react-toastify";
+import Link from "next/link";
 
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
@@ -14,34 +14,30 @@ const ubuntuMono = Ubuntu_Mono({
   subsets: ["latin"],
 });
 
-export default function InstallYaml() {
-  const [yamlUrl, setYamlUrl] = useState("");
+export default function CheckYaml() {
   const [checked, setChecked] = useState(false);
+  const [propertyLink, setPropertyLink] = useState("");
 
-  const container = checked ? "bpp-network" : "bap-network";
-
-  const handleRegistryUrlChange = (event) => {
-    setYamlUrl(event.target.value);
+  const handleYamlChange = (event) => {
+    setPropertyLink(event.target.value);
   };
 
-  const installYaml = useCallback(async () => {
-    const toastId = toast.loading("Installing Layer 2 Config file...");
-
+  const handleOnclick = async () => {
+    const toastId = toast.loading("Checking for layer2 yaml file");
     try {
-      const response = await fetch("/api/install-layer2", {
+      const response = await fetch("/api/check-layer2", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ container, yamlUrl }),
+        body: JSON.stringify({ checked }),
       });
 
       if (response.ok) {
         const data = await response.json();
-        console.log(data);
-        const FileFound = data.message;
-        if (FileFound == false) {
-          setShowDownloadLayer2Button(true);
+        const yamlFile = data;
+        console.log("YAML", yamlFile);
+        if (yamlFile == 0) {
           toast.update(toastId, {
             render: "No Layer 2 Config Present 🤯",
             type: "error",
@@ -68,19 +64,22 @@ export default function InstallYaml() {
     } catch (error) {
       console.error("An error occurred:", error);
     }
-  });
-
+  };
   return (
     <>
       <main className={ubuntuMono.className}>
+        <button
+          onClick={() => window.history.back()}
+          className={styles.backButton}
+        >
+          Back
+        </button>
+
         <div className={styles.mainContainer}>
-          <button
-            onClick={() => window.history.back()}
-            className={styles.backButton}
-          >
-            Back
-          </button>
-          <p className={styles.mainText}>Install Yaml</p>
+          <p className={styles.mainText}>
+            <b>Yaml File Checker</b>
+          </p>
+
           <div className={styles.formContainer}>
             <Slider
               label={checked ? "BPP" : "BAP"}
@@ -88,14 +87,17 @@ export default function InstallYaml() {
               toggleChecked={setChecked}
             />
             <InputField
-              label={"Enter Layer 2 URL"}
-              value={yamlUrl}
-              onChange={handleRegistryUrlChange}
-              placeholder="https://github/user/repo/blob/main/layer2.yaml"
+              label={"Container Name"}
+              value={checked ? "bpp-network" : "bap-network"}
             />
+            {/* <InputField
+              label={"Yaml  Link"}
+              value={propertyLink}
+              onChange={handleYamlChange}
+            /> */}
+
             <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
-              <PrimaryButton onClick={installYaml} text={"Continue"} />
+              <PrimaryButton text={"Continue"} onClick={handleOnclick} />
             </div>
           </div>
         </div>
diff --git a/onix-gui/onix/app/yaml-gen/option/bap/page.js b/onix-gui/onix/app/yaml-gen/option/bap/page.js
new file mode 100644
index 0000000..974a6a9
--- /dev/null
+++ b/onix-gui/onix/app/yaml-gen/option/bap/page.js
@@ -0,0 +1,64 @@
+"use client";
+
+import InputField from "@/components/InputField/InputField";
+import styles from "../../../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+import SecondaryButton from "@/components/Buttons/SecondaryButton";
+import PrimaryButton from "@/components/Buttons/PrimaryButton";
+import { usePathname } from "next/navigation";
+import { useState, useCallback } from "react";
+import Slider from "@/components/Slider/Slider"
+
+const ubuntuMono = Ubuntu_Mono({
+    weight: "400",
+    style: "normal",
+    subsets: ["latin"],
+});
+
+
+export default function Bap() {
+
+    const [checked, setChecked] = useState(false);
+    const [propertyName, setPropertyName] = useState("");
+    const [propertyLink, setPropertyLink] = useState("");
+    const [propertyOption, setPropertyOption] = useState("");
+
+    return (
+        <>
+            <main className={ubuntuMono.className}>
+                <div className={styles.mainContainer}>
+                    <p className={styles.mainText}>BAP</p>
+                    <div className={styles.formContainer}>
+                        <InputField
+                            label={"Property Name"}
+                            value={propertyName}
+                            onChange={setPropertyName}
+                        />
+                        <InputField
+                            label={"Property Link"}
+                            value={propertyLink}
+                            onChange={setPropertyLink}
+                        />
+
+                        <InputField
+                            label={"Property Option"}
+                            value={propertyOption}
+                            onChange={setPropertyOption}
+                        />
+
+                        <Slider
+                            label={"Is this property mandatory?"}
+                            checked={checked}
+                            toggleChecked={setChecked}
+                        />
+
+                        <div className={styles.buttonsContainer}>
+                            <SecondaryButton text={"Cancel"} />
+                            <PrimaryButton text={"Continue"} />
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/onix-gui/onix/app/yaml-gen/option/bpp/page.js b/onix-gui/onix/app/yaml-gen/option/bpp/page.js
new file mode 100644
index 0000000..c4ff616
--- /dev/null
+++ b/onix-gui/onix/app/yaml-gen/option/bpp/page.js
@@ -0,0 +1,64 @@
+"use client";
+
+import InputField from "@/components/InputField/InputField";
+import styles from "../../../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+import SecondaryButton from "@/components/Buttons/SecondaryButton";
+import PrimaryButton from "@/components/Buttons/PrimaryButton";
+import { usePathname } from "next/navigation";
+import { useState, useCallback } from "react";
+import Slider from "@/components/Slider/Slider"
+
+const ubuntuMono = Ubuntu_Mono({
+    weight: "400",
+    style: "normal",
+    subsets: ["latin"],
+});
+
+
+export default function Bpp() {
+
+    const [checked, setChecked] = useState(false);
+    const [propertyName, setPropertyName] = useState("");
+    const [propertyLink, setPropertyLink] = useState("");
+    const [propertyOption, setPropertyOption] = useState("");
+
+    return (
+        <>
+            <main className={ubuntuMono.className}>
+                <div className={styles.mainContainer}>
+                    <p className={styles.mainText}>BPP</p>
+                    <div className={styles.formContainer}>
+                        <InputField
+                            label={"Property Name"}
+                            value={propertyName}
+                            onChange={setPropertyName}
+                        />
+                        <InputField
+                            label={"Property Link"}
+                            value={propertyLink}
+                            onChange={setPropertyLink}
+                        />
+
+                        <InputField
+                            label={"Property Option"}
+                            value={propertyOption}
+                            onChange={setPropertyOption}
+                        />
+
+                        <Slider
+                            label={"Is this property mandatory?"}
+                            checked={checked}
+                            toggleChecked={setChecked}
+                        />
+
+                        <div className={styles.buttonsContainer}>
+                            <SecondaryButton text={"Cancel"} />
+                            <PrimaryButton text={"Continue"} />
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/onix-gui/onix/app/yaml-gen/option/page.js b/onix-gui/onix/app/yaml-gen/option/page.js
new file mode 100644
index 0000000..b8a9b35
--- /dev/null
+++ b/onix-gui/onix/app/yaml-gen/option/page.js
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import styles from "../../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+
+const ubuntuMono = Ubuntu_Mono({
+    weight: "400",
+    style: "normal",
+    subsets: ["latin"],
+});
+
+
+export default function Option() {
+    return (
+        <>
+            <main className={ubuntuMono.className}>
+                <div className={styles.mainContainer}>
+                    <p className={styles.mainText}><b>Yaml File Generator</b></p>
+                    <div className={styles.boxesContainer}>
+                        <Link
+                            href="./option/bap"
+                            style={{ textDecoration: "underline", color: "white" }}
+                        >
+                            <div className={styles.box}>
+                                <img src="/arrow.png" />
+                                <p className={styles.boxText}>BAP</p>
+                            </div>
+                        </Link>
+                        <Link
+                            href="./option/bpp"
+                            style={{ textDecoration: "underline", color: "white" }}
+                        >
+                            <div className={styles.box}>
+                                <img src="/arrow.png" />
+                                <p className={styles.boxText}>BPP</p>
+                            </div>
+                        </Link>
+                    </div>
+
+                </div>
+            </main>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/onix-gui/onix/app/yaml-gen/page.js b/onix-gui/onix/app/yaml-gen/page.js
new file mode 100644
index 0000000..1fcf514
--- /dev/null
+++ b/onix-gui/onix/app/yaml-gen/page.js
@@ -0,0 +1,122 @@
+import Link from "next/link";
+import styles from "../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+import btnstyles from "@/components/Buttons/Buttons.module.css";
+const ubuntuMono = Ubuntu_Mono({
+  weight: "400",
+  style: "normal",
+  subsets: ["latin"],
+});
+
+export default function YamlGen() {
+  return (
+    <>
+      <main className={ubuntuMono.className}>
+        <div className={styles.mainContainer}>
+          <p className={styles.mainText}>
+            <b>Yaml File Generator</b>
+          </p>
+          <div className={styles.boxesContainer}>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Search</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Select</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Init</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Confirm</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Status</p>
+              </div>
+            </Link>
+          </div>
+          <div className={styles.secondBoxesContainer}>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Track</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Cancel</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Update</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Rating</p>
+              </div>
+            </Link>
+            <Link
+              href="yaml-gen/option"
+              style={{ textDecoration: "underline", color: "white" }}
+            >
+              <div className={styles.smallbox}>
+                <img src="/arrow.png" />
+                <p className={styles.boxText}>Support</p>
+              </div>
+            </Link>
+          </div>
+        </div>
+        <div style={{ padding: "20px" }}>
+          <a className={btnstyles.primaryButton} href="/yaml-gen/check-yaml">
+            Check Yaml Config
+          </a>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/onix-gui/components/Buttons/Buttons.module.css b/onix-gui/onix/components/Buttons/Buttons.module.css
similarity index 100%
rename from onix-gui/components/Buttons/Buttons.module.css
rename to onix-gui/onix/components/Buttons/Buttons.module.css
diff --git a/onix-gui/components/Buttons/PrimaryButton.js b/onix-gui/onix/components/Buttons/PrimaryButton.js
similarity index 100%
rename from onix-gui/components/Buttons/PrimaryButton.js
rename to onix-gui/onix/components/Buttons/PrimaryButton.js
diff --git a/onix-gui/components/Buttons/SecondaryButton.jsx b/onix-gui/onix/components/Buttons/SecondaryButton.jsx
similarity index 100%
rename from onix-gui/components/Buttons/SecondaryButton.jsx
rename to onix-gui/onix/components/Buttons/SecondaryButton.jsx
diff --git a/onix-gui/components/InputField/InputField.jsx b/onix-gui/onix/components/InputField/InputField.jsx
similarity index 76%
rename from onix-gui/components/InputField/InputField.jsx
rename to onix-gui/onix/components/InputField/InputField.jsx
index aac6551..e20ce98 100644
--- a/onix-gui/components/InputField/InputField.jsx
+++ b/onix-gui/onix/components/InputField/InputField.jsx
@@ -1,12 +1,12 @@
 import React from "react";
 import styles from "./InputField.module.css";
 
-const InputField = ({ label, value, onChange, placeholder = "Input Text" }) => {
+const InputField = ({ label, value, onChange }) => {
   return (
     <div className={styles.inputContainer}>
       <label className={styles.inputLabel}>{label}</label>
       <input
-        placeholder={placeholder}
+        placeholder="Input Text"
         className={styles.inputField}
         type="text"
         value={value}
diff --git a/onix-gui/components/InputField/InputField.module.css b/onix-gui/onix/components/InputField/InputField.module.css
similarity index 100%
rename from onix-gui/components/InputField/InputField.module.css
rename to onix-gui/onix/components/InputField/InputField.module.css
diff --git a/onix-gui/components/Slider/Slider.jsx b/onix-gui/onix/components/Slider/Slider.jsx
similarity index 100%
rename from onix-gui/components/Slider/Slider.jsx
rename to onix-gui/onix/components/Slider/Slider.jsx
diff --git a/onix-gui/components/Slider/Slider.module.css b/onix-gui/onix/components/Slider/Slider.module.css
similarity index 100%
rename from onix-gui/components/Slider/Slider.module.css
rename to onix-gui/onix/components/Slider/Slider.module.css
diff --git a/onix-gui/jsconfig.json b/onix-gui/onix/jsconfig.json
similarity index 100%
rename from onix-gui/jsconfig.json
rename to onix-gui/onix/jsconfig.json
diff --git a/onix-gui/next.config.mjs b/onix-gui/onix/next.config.mjs
similarity index 100%
rename from onix-gui/next.config.mjs
rename to onix-gui/onix/next.config.mjs
diff --git a/onix-gui/package-lock.json b/onix-gui/onix/package-lock.json
similarity index 100%
rename from onix-gui/package-lock.json
rename to onix-gui/onix/package-lock.json
diff --git a/onix-gui/package.json b/onix-gui/onix/package.json
similarity index 100%
rename from onix-gui/package.json
rename to onix-gui/onix/package.json
diff --git a/onix-gui/public/arrow.png b/onix-gui/onix/public/arrow.png
similarity index 100%
rename from onix-gui/public/arrow.png
rename to onix-gui/onix/public/arrow.png
diff --git a/onix-gui/scripts/start.sh b/onix-gui/start.sh
similarity index 95%
rename from onix-gui/scripts/start.sh
rename to onix-gui/start.sh
index 6882f30..ac2ecd3 100755
--- a/onix-gui/scripts/start.sh
+++ b/onix-gui/start.sh
@@ -1,11 +1,10 @@
 #!/bin/bash
 
 # Set script variables
-PROJECT_DIR="onix-gui"
+PROJECT_DIR="onix"
 PORT=3005
 TUNNEL_SERVICE="lt"
 
-npm install -g "$TUNNEL_SERVICE" &&
 # Change to the project directory
 cd "$PROJECT_DIR" || exit
 npm i &&