From 14c42ecc9752b1d2aab9a31ec41e0e5c32b1ef34 Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Thu, 20 Mar 2025 20:02:45 +0100
Subject: [PATCH] Update synology page

---
 web/app/docs/create-vm/synology/page.tsx | 848 ++++++++++++-----------
 1 file changed, 451 insertions(+), 397 deletions(-)

diff --git a/web/app/docs/create-vm/synology/page.tsx b/web/app/docs/create-vm/synology/page.tsx
index 447ab5a..699f6be 100644
--- a/web/app/docs/create-vm/synology/page.tsx
+++ b/web/app/docs/create-vm/synology/page.tsx
@@ -1,15 +1,15 @@
 "use client"
 
-import type React from "react"
-
 import Image from "next/image"
-import { Wrench, Target, CheckCircle } from "lucide-react"
+import { Wrench, Target, CheckCircle, Github } from "lucide-react"
 import { useState } from "react"
 
 export default function Page() {
+  const [activeLoader, setActiveLoader] = useState("arc")
+
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Create Synology DSM VM using ProxMenux</h1>
+      <h1 className="text-3xl font-bold mb-6">Create VM Synology DSM</h1>
 
       <section className="mb-10">
         <h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2>
@@ -18,19 +18,51 @@ export default function Page() {
           Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM
           boot, giving you the option between three different choices:
         </p>
+
         <ul className="list-disc pl-5 mb-4">
-          <li>AuxXxilium Arc (referred to as "arc")</li>
-          <li>edPill rr (referred to as "rr")</li>
-          <li>TinyCore RedPill M-shell (referred to as "tinycore")</li>
+          <li>
+            <a
+              href="https://github.com/AuxXxilium/arc"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              AuxXxilium Arc
+            </a>{" "}
+            (referred to as "arc")
+          </li>
+          <li>
+            <a
+              href="https://github.com/RROrg/rr"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              RedPill rr
+            </a>{" "}
+            (referred to as "rr")
+          </li>
+          <li>
+            <a
+              href="https://github.com/PeterSuh-Q3/tinycore-redpill"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              TinyCore RedPill M-shell
+            </a>{" "}
+            (referred to as "tinycore")
+          </li>
         </ul>
+
         <p className="mb-4">
           You also have the option to add a custom loader if you prefer to modify or create your own configuration.
         </p>
         <p className="mb-4">
           All loaders are similar although each has its own structure and configuration methods. This guide describes
           the 6 basic steps involved in setting up a Synology DSM loader. The exact steps may vary depending on the
-          loader and/or changes introduced by the developer, so understanding the basic steps similar in all of them
-          will help you know how to build the loader of your choice for the proper functioning of Synology DS.
+          loader and/or changes introduced by the developer, so <strong>understanding the basic steps</strong> similar in all of them
+          will <strong>help you know how to build the loader</strong> of your choice for the proper functioning of Synology DSM.
         </p>
       </section>
 
@@ -40,9 +72,46 @@ export default function Page() {
           Step-by-Step Guide
         </h2>
         <p className="mb-6">
-          This guide will walk you through the process of configuring the loader and setting up the VM. Each step
-          includes screenshots to show how the process looks with the three loaders (arc, rr, and tinycore).
+          This guide will walk you through the process of configuring the loader. Select your
+          loader type below to see the steps for that loader.
         </p>
+
+        {/* Selector de loader global */}
+        <div className="bg-blue-50 p-4 rounded-lg mb-6">
+          <h3 className="text-lg font-semibold mb-2">Select your loader type:</h3>
+          <div className="flex space-x-4">
+            <button
+              onClick={() => setActiveLoader("arc")}
+              className={`px-4 py-2 rounded-md font-medium ${
+                activeLoader === "arc"
+                  ? "bg-blue-500 text-white"
+                  : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              Arc Loader
+            </button>
+            <button
+              onClick={() => setActiveLoader("rr")}
+              className={`px-4 py-2 rounded-md font-medium ${
+                activeLoader === "rr"
+                  ? "bg-blue-500 text-white"
+                  : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              RR Loader
+            </button>
+            <button
+              onClick={() => setActiveLoader("tinycore")}
+              className={`px-4 py-2 rounded-md font-medium ${
+                activeLoader === "tinycore"
+                  ? "bg-blue-500 text-white"
+                  : "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              TinyCore Loader
+            </button>
+          </div>
+        </div>
       </section>
 
       <section className="mb-12 border-b pb-8">
@@ -51,68 +120,98 @@ export default function Page() {
           Start the VM and Access the Main Menu
         </h2>
         <p className="mb-4">
-          Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to
-          select and configure the DSM model you want to build. Once the loader is created, this step will be skipped
-          unless you manually force a reconfiguration from the boot monitor.
+        Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to select 
+        and configure the DSM model you want to build. Once the loader is created, this step will be skipped unless you 
+        manually force a reconfiguration from the boot monitor. All loaders also have the option to configure the loader 
+        via a web interface.
         </p>
 
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
-                    alt="Arc Loader Interface"
-                    caption="Arc Loader Interface"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <div className="bg-gray-50 p-4 rounded-lg mb-6">
-                    <p className="mb-2">
-                      <strong>In the case of RR</strong>, you'll need to manually enter the following command to open
-                      the menu:
-                    </p>
-                    <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
-                      <code>./menu.sh</code>
-                    </pre>
-                  </div>
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
-                    alt="RR Command Example"
-                    caption="RR Command Example: ./menu.sh"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
-                    alt="RR Loader Interface"
-                    caption="RR Loader Interface"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
-                    alt="TinyCore Loader Interface"
-                    caption="TinyCore Loader Interface"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-8">
+
+              <p className="mt-16 mb-2">
+                  <strong>Web interface</strong>, To access the web interface, simply open a web browser and enter 
+                  the IP address shown in the VM's console output. For example, in our case: http://192.169.0.32.
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_0_1.png"
+                alt="Arc Loader Web Interface"
+                caption="Arc Loader Web Interface"
+              />
+
+            <p className="mt-16 mb-2">
+                  <strong>Terminal interface</strong>, Access it directly from the VM's console output.
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
+                alt="Arc Loader Terminal Interface"
+                caption="Arc Loader Terminal Interface"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-8">
+              
+              <p className="mt-16 mb-2">
+                  <strong>Web interface</strong>, To access the web interface, simply open a web browser and enter 
+                  the IP address shown in the VM's console output. For example, in our case: http://192.169.0.33.
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_2.png"
+                alt="RR Command Example"
+                caption="RR Loader Web Interface"
+              />
+
+              <p className="mt-16 mb-2">
+                  <strong>Terminal interface</strong>, Access it directly from the VM's console output by typing <strong>menu.sh</strong> on the screen
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
+                alt="RR Loader Interface"
+                caption="RR Loader Terminal Interface"
+              />
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
+                alt="RR Loader Interface"
+                caption="RR Loader Terminal Interface"
+              />     
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-8">
+
+                <p className="mt-16 mb-2">
+                  <strong>Web interface</strong>, To access the web interface, simply open a web browser and enter 
+                  the IP address shown in the VM's console output. For example, in our case: http://192.169.0.35.
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_0_1.png"
+                alt="TinyCore Loader Interface"
+                caption="TinyCore Loader Web Interface"
+              />
+
+               <p className="mt-16 mb-2">
+                <strong>Terminal interface</strong>, Access it directly from the VM's console output. Keep an eye on 
+                the screen, as at some point it may prompt you to press a key to continue or ask if you want to change the language.
+                </p>
+
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
+                alt="TinyCore Loader Interface"
+                caption="TinyCore Loader Terminal Interface"
+              />
+            </div>
+          )}
+        </div>
       </section>
 
       <section className="mb-12 border-b pb-8">
@@ -124,50 +223,38 @@ export default function Page() {
           After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may
           sometimes need to expand the options to see more models.
         </p>
-        <h3 className="text-lg font-semibold mb-4">Examples:</h3>
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
-                    alt="Arc Model Selection"
-                    caption="Arc Model Selection"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
-                    alt="RR Model Selection"
-                    caption="RR Model Selection"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
-                    alt="TinyCore Model Selection"
-                    caption="TinyCore Model Selection"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
+                alt="Arc Model Selection"
+                caption="Arc Model Selection"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
+                alt="RR Model Selection"
+                caption="RR Model Selection"
+              />
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
+                alt="TinyCore Model Selection"
+                caption="TinyCore Model Selection"
+              />
+            </div>
+          )}
+        </div>
         <p className="mt-4">In our example, we'll choose the SA6400 model.</p>
       </section>
 
@@ -180,69 +267,57 @@ export default function Page() {
           After selecting the model, you need to choose the DSM version you want to install.
         </p>
 
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
-                    alt="Arc Version Selection - Step 1"
-                    caption="Arc Version Selection - Step 1"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
-                    alt="Arc Version Selection - Step 2"
-                    caption="Arc Version Selection - Step 2"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
-                    alt="RR Version Selection - Step 1"
-                    caption="RR Version Selection - Step 1"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
-                    alt="RR Version Selection - Step 2"
-                    caption="RR Version Selection - Step 2"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
-                    alt="RR Version Selection - Step 3"
-                    caption="RR Version Selection - Step 3"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
-                    alt="TinyCore Version Selection - Step 1"
-                    caption="TinyCore Version Selection - Step 1"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
-                    alt="TinyCore Version Selection - Step 2"
-                    caption="TinyCore Version Selection - Step 2"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-16">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
+                alt="Arc Version Selection - Step 1"
+                caption="Arc Version Selection - Step 1"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
+                alt="Arc Version Selection - Step 2"
+                caption="Arc Version Selection - Step 2"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-16">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
+                alt="RR Version Selection - Step 1"
+                caption="RR Version Selection - Step 1"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
+                alt="RR Version Selection - Step 2"
+                caption="RR Version Selection - Step 2"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
+                alt="RR Version Selection - Step 3"
+                caption="RR Version Selection - Step 3"
+              />
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-16">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
+                alt="TinyCore Version Selection - Step 1"
+                caption="TinyCore Version Selection - Step 1"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
+                alt="TinyCore Version Selection - Step 2"
+                caption="TinyCore Version Selection - Step 2"
+              />
+            </div>
+          )}
+        </div>
       </section>
 
       <section className="mb-12 border-b pb-8">
@@ -252,102 +327,91 @@ export default function Page() {
         </h2>
         <p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
 
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <p className="mb-2">
-                    <strong>Arc</strong> gives you the option to configure automatically or manually adjust the
-                    settings.
-                  </p>
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
-                    alt="Arc Auto Configuration"
-                    caption="Arc Auto Configuration"
-                  />
-                  <p className="mb-2">
-                    If we choose not to use automatic mode, we enter the menu to configure different options necessary
-                    for the loader:
-                  </p>
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
-                    alt="Arc Manual Configuration"
-                    caption="Arc Manual Configuration"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
-                    alt="Arc SN/Mac Configuration"
-                    caption="Arc SN/Mac Configuration"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_4.png"
-                    alt="Arc Sata Portmap"
-                    caption="Arc Sata Portmap (use the recommended option)"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
-                    alt="Arc Add-Ons Selection"
-                    caption="Arc Add-Ons Selection"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
-                    alt="RR Add-On Step 1"
-                    caption="RR Add-On Step 1"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png"
-                    alt="RR Add-On Step 2"
-                    caption="RR Add-On Step 2 - Press to add add-ons"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png"
-                    alt="RR Add-On Step 3"
-                    caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
-                    alt="TinyCore SN Configuration"
-                    caption="TinyCore SN Configuration"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
-                    alt="TinyCore Random Option"
-                    caption="TinyCore Random Option - The random option is recommended"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
-                    alt="TinyCore MAC Configuration"
-                    caption="TinyCore MAC Configuration"
-                  />
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
-                    alt="TinyCore VM MAC"
-                    caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-16">
+              <p className="mb-2">
+                <strong>Arc</strong> gives you the option to configure automatically or manually adjust the settings. 
+                If automatic configuration is selected, the loader will start applying the necessary settings and will 
+                automatically reboot once the process is complete.
+              </p>
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
+                alt="Arc Auto Configuration"
+                caption="Arc Auto Configuration"
+              />
+              <p className="mb-2">
+                If we choose not to use automatic mode, we enter the menu to configure different options necessary for
+                the loader:
+              </p>
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
+                alt="Arc Manual Configuration"
+                caption="Arc Manual Configuration"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
+                alt="Arc SN/Mac Configuration"
+                caption="Arc SN/Mac Configuration"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_4.png"
+                alt="Arc Sata Portmap"
+                caption="Arc Sata Portmap (use the recommended option)"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
+                alt="Arc Add-Ons Selection"
+                caption="Arc Add-Ons Selection"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
+                alt="RR Add-On Step 1"
+                caption="RR Add-On Step 1"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png"
+                alt="RR Add-On Step 2"
+                caption="RR Add-On Step 2 - Press to add add-ons"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png"
+                alt="RR Add-On Step 3"
+                caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
+              />
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
+                alt="TinyCore SN Configuration"
+                caption="TinyCore SN Configuration"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
+                alt="TinyCore Random Option"
+                caption="TinyCore Random Option - The random option is recommended"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
+                alt="TinyCore MAC Configuration"
+                caption="TinyCore MAC Configuration"
+              />
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
+                alt="TinyCore VM MAC"
+                caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
+              />
+            </div>
+          )}
+        </div>
       </section>
 
       <section className="mb-12 border-b pb-8">
@@ -360,50 +424,38 @@ export default function Page() {
           take a few minutes depending on the loader and the selected configuration. To start, select the "Build the
           Loader" option.
         </p>
-        <h3 className="text-lg font-semibold mb-4">Examples:</h3>
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
-                    alt="Arc Build Loader"
-                    caption="Arc Build Loader"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
-                    alt="RR Build Loader"
-                    caption="RR Build Loader"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
-                    alt="TinyCore Build Loader"
-                    caption="TinyCore Build Loader"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
+                alt="Arc Build Loader"
+                caption="Arc Build Loader"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
+                alt="RR Build Loader"
+                caption="RR Build Loader"
+              />
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
+                alt="TinyCore Build Loader"
+                caption="TinyCore Build Loader"
+              />
+            </div>
+          )}
+        </div>
       </section>
 
       <section className="mb-12 border-b pb-8">
@@ -415,50 +467,38 @@ export default function Page() {
           Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've
           created and start the DSM installation.
         </p>
-        <h3 className="text-lg font-semibold mb-4">Examples:</h3>
-        <TabGroup
-          tabs={[
-            {
-              id: "arc",
-              label: "Arc Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
-                    alt="Arc Boot Loader"
-                    caption="Arc Boot Loader"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "rr",
-              label: "RR Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
-                    alt="RR Boot Loader"
-                    caption="RR Boot Loader"
-                  />
-                </div>
-              ),
-            },
-            {
-              id: "tinycore",
-              label: "TinyCore Loader",
-              content: (
-                <div className="flex flex-col space-y-8 mt-6">
-                  <ImageWithCaption
-                    src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
-                    alt="TinyCore Boot Loader"
-                    caption="TinyCore Boot Loader"
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
+
+        <div className="mt-6">
+          {activeLoader === "arc" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
+                alt="Arc Boot Loader"
+                caption="Arc Boot Loader"
+              />
+            </div>
+          )}
+
+          {activeLoader === "rr" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
+                alt="RR Boot Loader"
+                caption="RR Boot Loader"
+              />
+            </div>
+          )}
+
+          {activeLoader === "tinycore" && (
+            <div className="flex flex-col space-y-8">
+              <ImageWithCaption
+                src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
+                alt="TinyCore Boot Loader"
+                caption="TinyCore Boot Loader"
+              />
+            </div>
+          )}
+        </div>
       </section>
 
       {/* STARTING DSM INSTALLATION */}
@@ -487,57 +527,71 @@ export default function Page() {
       </section>
 
       <section className="mb-8">
-        <h2 className="text-2xl font-semibold mb-4 flex items-center">
+        <h2 className="text-2xl font-semibold mt-20 mb-4 flex items-center">
           <Target className="h-6 w-6 mr-2 text-blue-500" />
           Tips
         </h2>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc pl-5 space-y-4">
           <li>
             Keep in mind that available options may change depending on the loader version and developer updates. If you
-            encounter issues during the loader creation process, consult the loader documentation. ProxMenux does not
-            provide support for the different loaders.
+            encounter issues during the loader creation process, consult the loader documentation:
           </li>
-          <li>Some loaders offer the possibility of configuration via web with ip:7080 or 7090.</li>
+
+          <div className="flex flex-wrap gap-4 mt-2">
+              <a
+                href="https://github.com/AuxXxilium/arc"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
+              >
+                <Github className="h-5 w-5 mr-2" />
+                Arc Documentation
+              </a>
+              <a
+                href="https://github.com/RROrg/rr"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
+              >
+                <Github className="h-5 w-5 mr-2" />
+                RR Documentation
+              </a>
+              <a
+                href="https://github.com/PeterSuh-Q3/tinycore-redpill"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
+              >
+                <Github className="h-5 w-5 mr-2" />
+                TinyCore Documentation
+              </a>
+            </div>
+
           <li>
             Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more
             recent models.
           </li>
+
+          <div className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4">
+            <p className="font-semibold">Update:</p>
+            <p>
+            Some loaders offer the option to update the loader directly from the menu.
+            </p>
+          </div>
+
+          <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4">
+            <p className="font-semibold">Important:</p>
+            <p>
+            ProxMenux does not provide support for the different loaders.
+            </p>
+          </div>
+
         </ul>
       </section>
     </div>
   )
 }
 
-
-interface Tab {
-  id: string
-  label: string
-  content: React.ReactNode
-}
-
-function TabGroup({ tabs }: { tabs: Tab[] }) {
-  const [activeTab, setActiveTab] = useState(tabs[0].id)
-
-  return (
-    <div className="mt-4">
-      <div className="flex border-b">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2 font-medium text-sm focus:outline-none ${
-              activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-      <div className="mt-4">{tabs.find((tab) => tab.id === activeTab)?.content}</div>
-    </div>
-  )
-}
-
 function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
   return (
     <div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">