diff --git a/src/components/applicationsComponents/AppPage.css b/src/components/applicationsComponents/AppPage.css
index 13e0341..d201772 100644
--- a/src/components/applicationsComponents/AppPage.css
+++ b/src/components/applicationsComponents/AppPage.css
@@ -1,8 +1,5 @@
 .appDesc {
-  display: grid;
-  margin: 5%;
-  grid-gap: 1%;
-  grid-auto-flow: row;
+  margin: 2%;
   flex-wrap: wrap;
 }
 
@@ -15,17 +12,8 @@
   }
 }
 
-@media (min-width: 981px) {
-  .appDesc {
-    grid-template-columns: 47% 47%;
-    justify-content: center;
-  }
-}
-
 .box {
-  background-color: rgb(215, 239, 247);
-  border: 2px solid #acacac;
-  padding: 5%;
+  padding: 2%;
   border-radius: 15px;
   align-content: center;
   flex-wrap: wrap;
@@ -34,6 +22,13 @@
 .box tr {
   text-align: left;
   flex-wrap: wrap;
+  border: 1px solid #acacac;
+}
+tr:nth-child(odd) {
+  background-color: rgb(255, 255, 255);
+}
+tr:nth-child(even) {
+  background-color: rgb(249, 249, 249);
 }
 
 .box td {
@@ -65,9 +60,12 @@
 }
 
 table {
+  border: 1px solid #acacac;
   width: 100%;
   max-width: 100%;
   flex-wrap: wrap;
+  border-collapse: collapse;
+  box-shadow: 5% #acacac;
 }
 
 .box .form {
diff --git a/src/components/applicationsComponents/CasApp.tsx b/src/components/applicationsComponents/CasApp.tsx
index 62db62c..1816019 100644
--- a/src/components/applicationsComponents/CasApp.tsx
+++ b/src/components/applicationsComponents/CasApp.tsx
@@ -11,6 +11,7 @@ import {
   updateCASexportedVars,
 } from "../../features/config/configSlice";
 import { TableVars } from "./TableVars";
+import { useState } from "react";
 
 export function CasApp({ name }: { name: string }) {
   const vars = useAppSelector((state) =>
@@ -28,265 +29,288 @@ export function CasApp({ name }: { name: string }) {
       ? state.config.data.config.casAppMetaDataOptions[name]
       : {};
   });
+  const [optionSelected, setOptionSelected] = useState("basic");
   const dispatch = useAppDispatch();
   return (
     <div>
       <strong className="title">{name}</strong>
+      <div className="optionNavbar">
+        <label onClick={() => setOptionSelected("basic")}>
+          {t("Basic Option")}
+        </label>
+        <label onClick={() => setOptionSelected("casAppMetaDataExportedVars")}>
+          {t("casAppMetaDataExportedVars")}
+        </label>
+        <label onClick={() => setOptionSelected("casAppMetaDataMacros")}>
+          {t("casAppMetaDataMacros")}
+        </label>
+        <label onClick={() => setOptionSelected("casAppMetaDataOptions")}>
+          {t("casAppMetaDataOptions")}
+        </label>
+      </div>
       <div className="appDesc">
-        <div className="box">
-          <strong className="title2">{t("casAppMetaDataExportedVars")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newCASexportedVars(name))}
-          >
-            +
-          </button>
-          <table id="exportedVars">
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
-                <th></th>
-              </tr>
-            </thead>
-            {TableVars(
-              name,
-              vars,
-              "exportedVars",
-              delCASexportedVars,
-              updateCASexportedVars
-            )}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newCASexportedVars(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("casAppMetaDataMacros")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newCASAppMetaDataMacros(name))}
-          >
-            +
-          </button>
-          <table id="macros">
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
+        {optionSelected === "casAppMetaDataExportedVars" && (
+          <div className="box">
+            <strong className="title2">
+              {t("casAppMetaDataExportedVars")}
+            </strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newCASexportedVars(name))}
+            >
+              +
+            </button>
+            <table id="exportedVars">
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              {TableVars(
+                name,
+                vars,
+                "exportedVars",
+                delCASexportedVars,
+                updateCASexportedVars
+              )}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newCASexportedVars(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "casAppMetaDataMacros" && (
+          <div className="box">
+            <strong className="title2">{t("casAppMetaDataMacros")}</strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newCASAppMetaDataMacros(name))}
+            >
+              +
+            </button>
+            <table id="macros">
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
 
-                <th></th>
-              </tr>
-            </thead>
-            {TableVars(
-              name,
-              casAppMetaDataMacros,
-              "macros",
-              delCASAppMetaDataMacros,
-              updateCASAppMetaDataMacros
-            )}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newCASAppMetaDataMacros(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("casAppMetaDataOptions")}</strong>
-          <table>
-            <tbody>
-              <tr>
-                <th>{t("casAppMetaDataOptionsDisplayName")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      casAppMetaDataOptions.casAppMetaDataOptionsDisplayName
-                        ? casAppMetaDataOptions.casAppMetaDataOptionsDisplayName
-                        : ""
-                    )}
-                    onChange={(e) =>
-                      dispatch(
-                        updateCASOptions({
-                          name,
-                          option: "casAppMetaDataOptionsDisplayName",
-                          value: e.target.value,
-                        })
-                      )
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("casAppMetaDataOptionsService")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      casAppMetaDataOptions.casAppMetaDataOptionsService
-                        ? casAppMetaDataOptions.casAppMetaDataOptionsService
-                        : ""
-                    )}
-                    onChange={(e) =>
-                      dispatch(
-                        updateCASOptions({
-                          name,
-                          option: "casAppMetaDataOptionsService",
-                          value: e.target.value,
-                        })
-                      )
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("casAppMetaDataOptionsLogout")}</th>
-                <td>
-                  <div>
-                    <label>
-                      <input
-                        type="radio"
-                        name="casAppMetaDataOptionsLogout"
-                        value={1}
-                        checked={
-                          casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
-                          1
-                        }
-                        onChange={() => {
-                          dispatch(
-                            updateCASOptions({
-                              name,
-                              option: "casAppMetaDataOptionsLogout",
-                              value: 1,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("on")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="casAppMetaDataOptionsLogout"
-                        value={0}
-                        checked={
-                          casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
-                          0
-                        }
-                        onChange={() => {
-                          dispatch(
-                            updateCASOptions({
-                              name,
-                              option: "casAppMetaDataOptionsLogout",
-                              value: 0,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("off")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="casAppMetaDataOptionsLogout"
-                        value={-1}
-                        checked={
-                          casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
-                          -1
-                        }
-                        onChange={() => {
-                          dispatch(
-                            updateCASOptions({
-                              name,
-                              option: "casAppMetaDataOptionsLogout",
-                              value: -1,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("default")}</span>
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <th>{t("casAppMetaDataOptionsAuthnLevel")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="number"
-                    value={String(
-                      casAppMetaDataOptions.casAppMetaDataOptionsAuthnLevel
-                        ? casAppMetaDataOptions.casAppMetaDataOptionsAuthnLevel
-                        : ""
-                    )}
-                    onChange={(e) =>
-                      dispatch(
-                        updateCASOptions({
-                          name,
-                          option: "casAppMetaDataOptionsAuthnLevel",
-                          value: e.target.value,
-                        })
-                      )
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("casAppMetaDataOptionsRule")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      casAppMetaDataOptions.casAppMetaDataOptionsRule
-                        ? casAppMetaDataOptions.casAppMetaDataOptionsRule
-                        : ""
-                    )}
-                    onChange={(e) =>
-                      dispatch(
-                        updateCASOptions({
-                          name,
-                          option: "casAppMetaDataOptionsRule",
-                          value: e.target.value,
-                        })
-                      )
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("casAppMetaDataOptionsComment")}</th>
-                <td>
-                  <textarea
-                    className="form"
-                    value={String(
-                      casAppMetaDataOptions.casAppMetaDataOptionsComment
-                        ? casAppMetaDataOptions.casAppMetaDataOptionsComment
-                        : ""
-                    )}
-                    onChange={(e) =>
-                      dispatch(
-                        updateCASOptions({
-                          name,
-                          option: "casAppMetaDataOptionsComment",
-                          value: e.target.value,
-                        })
-                      )
-                    }
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                  <th></th>
+                </tr>
+              </thead>
+              {TableVars(
+                name,
+                casAppMetaDataMacros,
+                "macros",
+                delCASAppMetaDataMacros,
+                updateCASAppMetaDataMacros
+              )}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newCASAppMetaDataMacros(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "casAppMetaDataOptions" && (
+          <div className="box">
+            <strong className="title2">{t("casAppMetaDataOptions")}</strong>
+            <table>
+              <tbody>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsDisplayName")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        casAppMetaDataOptions.casAppMetaDataOptionsDisplayName
+                          ? casAppMetaDataOptions.casAppMetaDataOptionsDisplayName
+                          : ""
+                      )}
+                      onChange={(e) =>
+                        dispatch(
+                          updateCASOptions({
+                            name,
+                            option: "casAppMetaDataOptionsDisplayName",
+                            value: e.target.value,
+                          })
+                        )
+                      }
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsService")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        casAppMetaDataOptions.casAppMetaDataOptionsService
+                          ? casAppMetaDataOptions.casAppMetaDataOptionsService
+                          : ""
+                      )}
+                      onChange={(e) =>
+                        dispatch(
+                          updateCASOptions({
+                            name,
+                            option: "casAppMetaDataOptionsService",
+                            value: e.target.value,
+                          })
+                        )
+                      }
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsLogout")}</th>
+                  <td>
+                    <div>
+                      <label>
+                        <input
+                          type="radio"
+                          name="casAppMetaDataOptionsLogout"
+                          value={1}
+                          checked={
+                            casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
+                            1
+                          }
+                          onChange={() => {
+                            dispatch(
+                              updateCASOptions({
+                                name,
+                                option: "casAppMetaDataOptionsLogout",
+                                value: 1,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("on")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="casAppMetaDataOptionsLogout"
+                          value={0}
+                          checked={
+                            casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
+                            0
+                          }
+                          onChange={() => {
+                            dispatch(
+                              updateCASOptions({
+                                name,
+                                option: "casAppMetaDataOptionsLogout",
+                                value: 0,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("off")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="casAppMetaDataOptionsLogout"
+                          value={-1}
+                          checked={
+                            casAppMetaDataOptions.casAppMetaDataOptionsLogout ===
+                            -1
+                          }
+                          onChange={() => {
+                            dispatch(
+                              updateCASOptions({
+                                name,
+                                option: "casAppMetaDataOptionsLogout",
+                                value: -1,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("default")}</span>
+                      </label>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsAuthnLevel")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="number"
+                      value={String(
+                        casAppMetaDataOptions.casAppMetaDataOptionsAuthnLevel
+                          ? casAppMetaDataOptions.casAppMetaDataOptionsAuthnLevel
+                          : ""
+                      )}
+                      onChange={(e) =>
+                        dispatch(
+                          updateCASOptions({
+                            name,
+                            option: "casAppMetaDataOptionsAuthnLevel",
+                            value: e.target.value,
+                          })
+                        )
+                      }
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsRule")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        casAppMetaDataOptions.casAppMetaDataOptionsRule
+                          ? casAppMetaDataOptions.casAppMetaDataOptionsRule
+                          : ""
+                      )}
+                      onChange={(e) =>
+                        dispatch(
+                          updateCASOptions({
+                            name,
+                            option: "casAppMetaDataOptionsRule",
+                            value: e.target.value,
+                          })
+                        )
+                      }
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("casAppMetaDataOptionsComment")}</th>
+                  <td>
+                    <textarea
+                      className="form"
+                      value={String(
+                        casAppMetaDataOptions.casAppMetaDataOptionsComment
+                          ? casAppMetaDataOptions.casAppMetaDataOptionsComment
+                          : ""
+                      )}
+                      onChange={(e) =>
+                        dispatch(
+                          updateCASOptions({
+                            name,
+                            option: "casAppMetaDataOptionsComment",
+                            value: e.target.value,
+                          })
+                        )
+                      }
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/applicationsComponents/NativeApp.tsx b/src/components/applicationsComponents/NativeApp.tsx
index 352b605..1917701 100644
--- a/src/components/applicationsComponents/NativeApp.tsx
+++ b/src/components/applicationsComponents/NativeApp.tsx
@@ -13,6 +13,7 @@ import {
   newLocationRule,
   newVhostHeaders,
   newVhostPost,
+  updateDefaultLocationRule,
   updateLocationRule,
   updateVhostHeaders,
   updateVhostOptions,
@@ -20,6 +21,7 @@ import {
 } from "../../features/config/configSlice";
 import { useDispatch } from "react-redux";
 import { TableVars } from "./TableVars";
+import { useState } from "react";
 
 function updateRules(tableID: string) {
   const ruleList = [];
@@ -329,35 +331,163 @@ export function NativeApp({ name }: { name: string }) {
   const options = useAppSelector(
     (state) => state.config.data.config.vhostOptions[name]
   );
+  const [optionSelected, setOptionSelected] = useState("basic");
   const dispatch = useAppDispatch();
   return (
     <div>
       <strong className="title">{name}</strong>
+      <div className="optionNavbar">
+        <label onClick={() => setOptionSelected("basic")}>
+          {t("Basic Option")}
+        </label>
+        <label onClick={() => setOptionSelected("locationRules")}>
+          {t("locationRules")}
+        </label>
+        <label onClick={() => setOptionSelected("exportedHeaders")}>
+          {t("exportedHeaders")}
+        </label>
+        <label onClick={() => setOptionSelected("post")}>{t("post")}</label>
+        <label onClick={() => setOptionSelected("vhostOptions")}>
+          {t("vhostOptions")}
+        </label>
+      </div>
       <div className="appDesc">
-        <div className="box">
-          <strong className="title2">{t("locationRules")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newLocationRule(name))}
-          >
-            +
-          </button>
-          <table id="locationRules">
-            <thead>
-              <tr>
-                <th>{t("vhostComment")}</th>
-                <th>{t("regexp")}</th>
-                <th>{t("rules")}</th>
-                <th>{t("rulesAuthnLevel")}</th>
-                <th></th>
-              </tr>
-            </thead>
-            {NativeRule(name, locationRules)}
-          </table>
-        </div>
-        <div className="box">
-          <div>
-            <strong className="title2">{t("exportedHeaders")}</strong>
+        {optionSelected === "basic" && (
+          <div className="box">
+            <table>
+              <tbody>
+                <tr>
+                  <th>{t("defaultRule")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={"default"}
+                      readOnly
+                    />
+                  </td>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      onChange={(e) =>
+                        dispatch(
+                          updateDefaultLocationRule({
+                            appName: name,
+                            rule: e.target.value,
+                          })
+                        )
+                      }
+                      value={locationRules["default"]}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      type="text"
+                      value={"default"}
+                      className="authLevel"
+                      readOnly
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("maintenance")}</th>
+                  <td>
+                    <div>
+                      <label>
+                        <input
+                          type="radio"
+                          name="maintenance"
+                          value={1}
+                          checked={Boolean(options.vhostMaintenance)}
+                          onChange={() => {
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostMaintenance",
+                                value: true,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("on")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="maintenance"
+                          value={0}
+                          checked={!Boolean(options.vhostMaintenance)}
+                          onChange={() =>
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostMaintenance",
+                                value: false,
+                              })
+                            )
+                          }
+                        />
+                        <span>{t("off")}</span>
+                      </label>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
+        {optionSelected === "locationRules" && (
+          <div className="box">
+            <strong className="title2">{t("locationRules")}</strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newLocationRule(name))}
+            >
+              +
+            </button>
+            <table id="locationRules">
+              <thead>
+                <tr>
+                  <th>{t("vhostComment")}</th>
+                  <th>{t("regexp")}</th>
+                  <th>{t("rules")}</th>
+                  <th>{t("rulesAuthnLevel")}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              {NativeRule(name, locationRules)}
+            </table>
+          </div>
+        )}
+        {(optionSelected === "exportedHeaders" ||
+          optionSelected === "basic") && (
+          <div className="box">
+            <div>
+              <strong className="title2">{t("exportedHeaders")}</strong>
+              <button
+                className="plus"
+                onClick={() => dispatch(newVhostHeaders(name))}
+              >
+                +
+              </button>
+            </div>
+            <table id="exportedHeaders">
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              {TableVars(
+                name,
+                exportedHeaders,
+                "exportedHeaders",
+                delVhostHeader,
+                updateVhostHeaders
+              )}
+            </table>
             <button
               className="plus"
               onClick={() => dispatch(newVhostHeaders(name))}
@@ -365,287 +495,275 @@ export function NativeApp({ name }: { name: string }) {
               +
             </button>
           </div>
-          <table id="exportedHeaders">
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
-                <th></th>
-              </tr>
-            </thead>
-            {TableVars(
-              name,
-              exportedHeaders,
-              "exportedHeaders",
-              delVhostHeader,
-              updateVhostHeaders
-            )}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newVhostHeaders(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("post")}</strong>
-          <button className="plus" onClick={() => dispatch(newVhostPost(name))}>
-            +
-          </button>
-          <table id="post">
-            <thead>
-              <tr>
-                <th>{t("postUrl")}</th>
-                <th>{t("postTargetUrl")}</th>
-                <th>{t("jqueryUrl")}</th>
-                <th>{t("jqueryFormSelector")}</th>
-                <th>{t("jqueryButtonSelector")}</th>
-                <th></th>
-              </tr>
-            </thead>
-            {NativPost(name, post)}
-          </table>
-          <button className="plus" onClick={() => dispatch(newVhostPost(name))}>
-            +
-          </button>
-        </div>
+        )}
+        {optionSelected === "post" && (
+          <div className="box">
+            <strong className="title2">{t("post")}</strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newVhostPost(name))}
+            >
+              +
+            </button>
+            <table id="post">
+              <thead>
+                <tr>
+                  <th>{t("postUrl")}</th>
+                  <th>{t("postTargetUrl")}</th>
+                  <th>{t("jqueryUrl")}</th>
+                  <th>{t("jqueryFormSelector")}</th>
+                  <th>{t("jqueryButtonSelector")}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              {NativPost(name, post)}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newVhostPost(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
 
-        <div className="box">
-          <strong className="title2">{t("vhostOptions")}</strong>
-          <table>
-            <tbody>
-              <tr>
-                <th>{t("port")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="number"
-                    value={String(options.vhostPort)}
-                    onChange={(el) => {
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostPort",
-                          value: el.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostHttps")}</th>
-                <td>
-                  <div>
-                    <label>
-                      <input
-                        type="radio"
-                        name="HTTPS"
-                        checked={options.vhostHttps === 1}
-                        onChange={() => {
-                          dispatch(
-                            updateVhostOptions({
-                              name,
-                              option: "vhostHttps",
-                              value: 1,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("on")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="HTTPS"
-                        checked={options.vhostHttps === 0}
-                        onChange={() => {
-                          dispatch(
-                            updateVhostOptions({
-                              name,
-                              option: "vhostHttps",
-                              value: 0,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("off")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="HTTPS"
-                        checked={options.vhostHttps === -1}
-                        onChange={() => {
-                          dispatch(
-                            updateVhostOptions({
-                              name,
-                              option: "vhostHttps",
-                              value: -1,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("default")}</span>
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <th>{t("maintenance")}</th>
-                <td>
-                  <div>
-                    <label>
-                      <input
-                        type="radio"
-                        name="maintenance"
-                        value={1}
-                        checked={Boolean(options.vhostMaintenance)}
-                        onChange={() => {
-                          dispatch(
-                            updateVhostOptions({
-                              name,
-                              option: "vhostMaintenance",
-                              value: true,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("on")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="maintenance"
-                        value={0}
-                        checked={!Boolean(options.vhostMaintenance)}
-                        onChange={() =>
-                          dispatch(
-                            updateVhostOptions({
-                              name,
-                              option: "vhostMaintenance",
-                              value: false,
-                            })
-                          )
-                        }
-                      />
-                      <span>{t("off")}</span>
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostAliases")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      options.vhostAliases ? options.vhostAliases : ""
-                    )}
-                    onChange={(el) => {
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostAliases",
-                          value: el.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostAccessToTrace")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      options.vhostAccessToTrace
-                        ? options.vhostAccessToTrace
-                        : ""
-                    )}
-                    onChange={(el) => {
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostAccessToTrace",
-                          value: el.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostType")}</th>
-                <td>
-                  <select
-                    name="type"
-                    value={String(options.vhostType)}
-                    onChange={(el) =>
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostType",
-                          value: el.target.value,
-                        })
-                      )
-                    }
-                  >
-                    {attributes.vhostType.select.map((type) => {
-                      return (
-                        <option key={type.k} value={type.k}>
-                          {t(type.v)}
-                        </option>
-                      );
-                    })}
-                  </select>
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostAuthnLevel")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="number"
-                    value={String(options.vhostAuthnLevel)}
-                    onChange={(el) => {
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostAuthnLevel",
-                          value: el.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("vhostServiceTokenTTL")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="number"
-                    value={String(options.vhostServiceTokenTTL)}
-                    onChange={(el) => {
-                      dispatch(
-                        updateVhostOptions({
-                          name,
-                          option: "vhostServiceTokenTTL",
-                          value: el.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        {optionSelected === "vhostOptions" && (
+          <div className="box">
+            <strong className="title2">{t("vhostOptions")}</strong>
+            <table>
+              <tbody>
+                <tr>
+                  <th>{t("port")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="number"
+                      value={String(options.vhostPort)}
+                      onChange={(el) => {
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostPort",
+                            value: el.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostHttps")}</th>
+                  <td>
+                    <div>
+                      <label>
+                        <input
+                          type="radio"
+                          name="HTTPS"
+                          checked={options.vhostHttps === 1}
+                          onChange={() => {
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostHttps",
+                                value: 1,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("on")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="HTTPS"
+                          checked={options.vhostHttps === 0}
+                          onChange={() => {
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostHttps",
+                                value: 0,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("off")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="HTTPS"
+                          checked={options.vhostHttps === -1}
+                          onChange={() => {
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostHttps",
+                                value: -1,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("default")}</span>
+                      </label>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("maintenance")}</th>
+                  <td>
+                    <div>
+                      <label>
+                        <input
+                          type="radio"
+                          name="maintenance"
+                          value={1}
+                          checked={Boolean(options.vhostMaintenance)}
+                          onChange={() => {
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostMaintenance",
+                                value: true,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("on")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="maintenance"
+                          value={0}
+                          checked={!Boolean(options.vhostMaintenance)}
+                          onChange={() =>
+                            dispatch(
+                              updateVhostOptions({
+                                name,
+                                option: "vhostMaintenance",
+                                value: false,
+                              })
+                            )
+                          }
+                        />
+                        <span>{t("off")}</span>
+                      </label>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostAliases")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        options.vhostAliases ? options.vhostAliases : ""
+                      )}
+                      onChange={(el) => {
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostAliases",
+                            value: el.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostAccessToTrace")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        options.vhostAccessToTrace
+                          ? options.vhostAccessToTrace
+                          : ""
+                      )}
+                      onChange={(el) => {
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostAccessToTrace",
+                            value: el.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostType")}</th>
+                  <td>
+                    <select
+                      name="type"
+                      value={String(options.vhostType)}
+                      onChange={(el) =>
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostType",
+                            value: el.target.value,
+                          })
+                        )
+                      }
+                    >
+                      {attributes.vhostType.select.map((type) => {
+                        return (
+                          <option key={type.k} value={type.k}>
+                            {t(type.v)}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostAuthnLevel")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="number"
+                      value={String(options.vhostAuthnLevel)}
+                      onChange={(el) => {
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostAuthnLevel",
+                            value: el.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("vhostServiceTokenTTL")}</th>
+                  <td>
+                    <input
+                      className="form"
+                      type="number"
+                      value={String(options.vhostServiceTokenTTL)}
+                      onChange={(el) => {
+                        dispatch(
+                          updateVhostOptions({
+                            name,
+                            option: "vhostServiceTokenTTL",
+                            value: el.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/applicationsComponents/OIDCApp.tsx b/src/components/applicationsComponents/OIDCApp.tsx
index b75da17..700cdef 100644
--- a/src/components/applicationsComponents/OIDCApp.tsx
+++ b/src/components/applicationsComponents/OIDCApp.tsx
@@ -13,6 +13,7 @@ import {
   updateOidcRPMetaDataExportedVars,
 } from "../../features/config/configSlice";
 import attributes from "../../static/attributes.json";
+import { useState } from "react";
 
 function updateExpAttr(tableID: string) {
   const attrList: Record<string, string> = {};
@@ -127,296 +128,327 @@ function ExportedAttribute(appName: string, vars: Record<string, string>) {
 
 export function OIDCApp({ name }: { name: string }) {
   const data = useAppSelector((state) => state.config.data.config);
+  const [optionSelected, setOptionSelected] = useState("basic");
   const dispatch = useAppDispatch();
   return (
     <div>
       <strong className="title">{name}</strong>
+      <div className="optionNavbar">
+        <label onClick={() => setOptionSelected("basic")}>
+          {t("Basic Option")}
+        </label>
+        <label onClick={() => setOptionSelected("oidcRPMetaDataOptionsBasic")}>
+          {t("oidcRPMetaDataOptionsBasic")}
+        </label>
+        <label onClick={() => setOptionSelected("oidcRPMetaDataExportedVars")}>
+          {t("oidcRPMetaDataExportedVars")}
+        </label>
+        <label onClick={() => setOptionSelected("oidcRPMetaDataMacros")}>
+          {t("oidcRPMetaDataMacros")}
+        </label>
+        <label onClick={() => setOptionSelected("oidcRPMetaDataOptions")}>
+          {t("oidcRPMetaDataOptions")}
+        </label>
+      </div>
       <div className="appDesc">
-        <div className="box">
-          <strong className="title2">{t("oidcRPMetaDataOptionsBasic")}</strong>
-          <table>
-            <tbody>
-              <tr>
-                <th>
-                  {t("oidcRPMetaDataOptionsClientID")}{" "}
-                  {data.oidcRPMetaDataOptions[name]
-                    .oidcRPMetaDataOptionsClientID === ""
-                    ? "⚠️"
-                    : ""}
-                </th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsClientID
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsClientID",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>
-                  {t("oidcRPMetaDataOptionsPublic")}
-                  {data.oidcRPMetaDataOptions[name]
-                    ? data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsPublic ||
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsClientSecret !== ""
-                      ? ""
-                      : "⚠️"
-                    : "⚠️"}
-                </th>
-                <td>
-                  <div>
-                    <label>
-                      <input
-                        type="radio"
-                        name="oidcRPMetaDataOptionsPublic"
-                        value={1}
-                        checked={Boolean(
-                          data.oidcRPMetaDataOptions[name]
-                            ? data.oidcRPMetaDataOptions[name]
-                                .oidcRPMetaDataOptionsPublic
-                            : 0
-                        )}
-                        onChange={() => {
-                          dispatch(
-                            updateOidcMetaDataOptions({
-                              name,
-                              option: "oidcRPMetaDataOptionsPublic",
-                              value: 1,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("on")}</span>
-                    </label>
-                    <label>
-                      <input
-                        type="radio"
-                        name="oidcRPMetaDataOptionsPublic"
-                        value={0}
-                        checked={
-                          !Boolean(
+        {optionSelected === "oidcRPMetaDataOptionsBasic" && (
+          <div className="box">
+            <strong className="title2">
+              {t("oidcRPMetaDataOptionsBasic")}
+            </strong>
+            <table>
+              <tbody>
+                <tr>
+                  <th>
+                    {t("oidcRPMetaDataOptionsClientID")}{" "}
+                    {data.oidcRPMetaDataOptions[name]
+                      .oidcRPMetaDataOptionsClientID === ""
+                      ? "⚠️"
+                      : ""}
+                  </th>
+                  <td>
+                    <input
+                      className="form"
+                      type="text"
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsClientID
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsClientID",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>
+                    {t("oidcRPMetaDataOptionsPublic")}
+                    {data.oidcRPMetaDataOptions[name]
+                      ? data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsPublic ||
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsClientSecret !== ""
+                        ? ""
+                        : "⚠️"
+                      : "⚠️"}
+                  </th>
+                  <td>
+                    <div>
+                      <label>
+                        <input
+                          type="radio"
+                          name="oidcRPMetaDataOptionsPublic"
+                          value={1}
+                          checked={Boolean(
                             data.oidcRPMetaDataOptions[name]
                               ? data.oidcRPMetaDataOptions[name]
                                   .oidcRPMetaDataOptionsPublic
                               : 0
-                          )
-                        }
-                        onChange={() => {
-                          dispatch(
-                            updateOidcMetaDataOptions({
-                              name,
-                              option: "oidcRPMetaDataOptionsPublic",
-                              value: 0,
-                            })
-                          );
-                        }}
-                      />
-                      <span>{t("off")}</span>
-                    </label>
-                  </div>
-                </td>
-              </tr>
+                          )}
+                          onChange={() => {
+                            dispatch(
+                              updateOidcMetaDataOptions({
+                                name,
+                                option: "oidcRPMetaDataOptionsPublic",
+                                value: 1,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("on")}</span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name="oidcRPMetaDataOptionsPublic"
+                          value={0}
+                          checked={
+                            !Boolean(
+                              data.oidcRPMetaDataOptions[name]
+                                ? data.oidcRPMetaDataOptions[name]
+                                    .oidcRPMetaDataOptionsPublic
+                                : 0
+                            )
+                          }
+                          onChange={() => {
+                            dispatch(
+                              updateOidcMetaDataOptions({
+                                name,
+                                option: "oidcRPMetaDataOptionsPublic",
+                                value: 0,
+                              })
+                            );
+                          }}
+                        />
+                        <span>{t("off")}</span>
+                      </label>
+                    </div>
+                  </td>
+                </tr>
 
-              <tr>
-                <th>
-                  {t("oidcRPMetaDataOptionsClientSecret")}
-                  {data.oidcRPMetaDataOptions[name]
-                    ? data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsPublic ||
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsClientSecret !== ""
-                      ? ""
-                      : "⚠️"
-                    : "⚠️"}
-                </th>
-                <td>
-                  <input
-                    className="form"
-                    type={attributes.oidcRPMetaDataOptionsClientSecret.type}
-                    value={String(
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsClientSecret
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsClientSecret",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("oidcRPMetaDataOptionsRedirectUris")}</th>
-                <td>
-                  <input
-                    type={attributes.oidcRPMetaDataOptionsRedirectUris.type}
-                    name="oidcRPMetaDataOptionsRedirectUris"
-                    value={String(
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsRedirectUris
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsRedirectUris",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("oidcRPMetaDataOptionsAuthMethod")}</th>
-                <td>
-                  <input
-                    type={attributes.oidcRPMetaDataOptionsAuthMethod.type}
-                    name="oidcRPMetaDataOptionsAuthMethod"
-                    value={String(
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsAuthMethod
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsAuthMethod",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("oidcRPMetaDataOptionsDisplay")}</th>
-                <td>
-                  <input
-                    type="text"
-                    value={String(
-                      data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsDisplay
-                        ? data.oidcRPMetaDataOptions[name]
-                            .oidcRPMetaDataOptionsDisplay
-                        : ""
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsDisplay",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("oidcRPMetaDataOptionsIcon")}</th>
-                <td>
-                  <input
-                    type={attributes.oidcRPMetaDataOptionsIcon.type}
-                    value={String(
-                      data.oidcRPMetaDataOptions[name].oidcRPMetaDataOptionsIcon
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsIcon",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("oidcRPMetaDataExportedVars")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newOidcRPMetaDataExportedVars(name))}
-          >
-            +
-          </button>
-          <table id="exportedVars">
-            <thead>
-              <tr>
-                <th>{t("claimName")}</th>
-                <th>{t("variableName")}</th>
-                <th>{t("type")}</th>
-                <th>{t("array")}</th>
-              </tr>
-            </thead>
-            {data.oidcRPMetaDataExportedVars
-              ? ExportedAttribute(name, data.oidcRPMetaDataExportedVars[name])
-              : ""}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newOidcRPMetaDataExportedVars(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("oidcRPMetaDataMacros")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newOIDCRPMetaDataMacros(name))}
-          >
-            +
-          </button>
-          <table id="oidcRPMetaDataMacros">
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
-              </tr>
-            </thead>
-            {data.oidcRPMetaDataMacros
-              ? TableVars(
-                  name,
-                  data.oidcRPMetaDataMacros[name],
-                  "oidcRPMetaDataMacros",
-                  delOIDCRPMetaDataMacros,
-                  updateOIDCRPMetaDataMacros
-                )
-              : ""}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newOIDCRPMetaDataMacros(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("oidcRPMetaDataOptions")}</strong>
-          <OptionOidc name={name} />
-        </div>
+                <tr>
+                  <th>
+                    {t("oidcRPMetaDataOptionsClientSecret")}
+                    {data.oidcRPMetaDataOptions[name]
+                      ? data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsPublic ||
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsClientSecret !== ""
+                        ? ""
+                        : "⚠️"
+                      : "⚠️"}
+                  </th>
+                  <td>
+                    <input
+                      className="form"
+                      type={attributes.oidcRPMetaDataOptionsClientSecret.type}
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsClientSecret
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsClientSecret",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("oidcRPMetaDataOptionsRedirectUris")}</th>
+                  <td>
+                    <input
+                      type={attributes.oidcRPMetaDataOptionsRedirectUris.type}
+                      name="oidcRPMetaDataOptionsRedirectUris"
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsRedirectUris
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsRedirectUris",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("oidcRPMetaDataOptionsAuthMethod")}</th>
+                  <td>
+                    <input
+                      type={attributes.oidcRPMetaDataOptionsAuthMethod.type}
+                      name="oidcRPMetaDataOptionsAuthMethod"
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsAuthMethod
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsAuthMethod",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("oidcRPMetaDataOptionsDisplay")}</th>
+                  <td>
+                    <input
+                      type="text"
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsDisplay
+                          ? data.oidcRPMetaDataOptions[name]
+                              .oidcRPMetaDataOptionsDisplay
+                          : ""
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsDisplay",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t("oidcRPMetaDataOptionsIcon")}</th>
+                  <td>
+                    <input
+                      type={attributes.oidcRPMetaDataOptionsIcon.type}
+                      value={String(
+                        data.oidcRPMetaDataOptions[name]
+                          .oidcRPMetaDataOptionsIcon
+                      )}
+                      onChange={(e) => {
+                        dispatch(
+                          updateOidcMetaDataOptions({
+                            name,
+                            option: "oidcRPMetaDataOptionsIcon",
+                            value: e.target.value,
+                          })
+                        );
+                      }}
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
+        {optionSelected === "oidcRPMetaDataExportedVars" && (
+          <div className="box">
+            <strong className="title2">
+              {t("oidcRPMetaDataExportedVars")}
+            </strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newOidcRPMetaDataExportedVars(name))}
+            >
+              +
+            </button>
+            <table id="exportedVars">
+              <thead>
+                <tr>
+                  <th>{t("claimName")}</th>
+                  <th>{t("variableName")}</th>
+                  <th>{t("type")}</th>
+                  <th>{t("array")}</th>
+                </tr>
+              </thead>
+              {data.oidcRPMetaDataExportedVars
+                ? ExportedAttribute(name, data.oidcRPMetaDataExportedVars[name])
+                : ""}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newOidcRPMetaDataExportedVars(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "oidcRPMetaDataMacros" && (
+          <div className="box">
+            <strong className="title2">{t("oidcRPMetaDataMacros")}</strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newOIDCRPMetaDataMacros(name))}
+            >
+              +
+            </button>
+            <table id="oidcRPMetaDataMacros">
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
+                </tr>
+              </thead>
+              {data.oidcRPMetaDataMacros
+                ? TableVars(
+                    name,
+                    data.oidcRPMetaDataMacros[name],
+                    "oidcRPMetaDataMacros",
+                    delOIDCRPMetaDataMacros,
+                    updateOIDCRPMetaDataMacros
+                  )
+                : ""}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newOIDCRPMetaDataMacros(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "oidcRPMetaDataOptions" && (
+          <div className="box">
+            <strong className="title2">{t("oidcRPMetaDataOptions")}</strong>
+            <OptionOidc name={name} />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/applicationsComponents/SAMLApp.tsx b/src/components/applicationsComponents/SAMLApp.tsx
index 9dcaf6a..8fcf07e 100644
--- a/src/components/applicationsComponents/SAMLApp.tsx
+++ b/src/components/applicationsComponents/SAMLApp.tsx
@@ -15,6 +15,7 @@ import {
 import { handleChangeFile } from "../../utils/readFiles";
 import { OptionSaml } from "./OptionSaml";
 import { TableVars } from "./TableVars";
+import { useState } from "react";
 
 function updateExpAttr(tableID: string) {
   const attrList: Record<string, string> = {};
@@ -191,130 +192,158 @@ function ExportedAttribute(appName: string, vars: Record<string, string>) {
 export function SAMLApp({ name }: { name: string }) {
   const data = useAppSelector((state) => state.config.data.config);
 
+  const [optionSelected, setOptionSelected] = useState("basic");
   const dispatch = useAppDispatch();
   return (
     <div>
       <strong className="title">{name}</strong>
+      <div className="optionNavbar">
+        <label onClick={() => setOptionSelected("basic")}>
+          {t("Basic Option")}
+        </label>
+        <label onClick={() => setOptionSelected("samlSPMetaDataXML")}>
+          {t("samlSPMetaDataXML")}
+        </label>
+        <label
+          onClick={() => setOptionSelected("samlSPMetaDataExportedAttributes")}
+        >
+          {t("samlSPMetaDataExportedAttributes")}
+        </label>
+        <label onClick={() => setOptionSelected("samlSPMetaDataMacros")}>
+          {t("samlSPMetaDataMacros")}
+        </label>
+        <label onClick={() => setOptionSelected("samlSPMetaDataOptions")}>
+          {t("samlSPMetaDataOptions")}
+        </label>
+      </div>
       <div className="appDesc">
-        <div className="box">
-          <strong className="title2">
-            {t("samlSPMetaDataXML")}{" "}
-            {name
-              ? data.samlSPMetaDataXML[name]
-                ? data.samlSPMetaDataXML[name].samlSPMetaDataXML === ""
-                  ? "⚠️"
-                  : ""
-                : "⚠️"
-              : "⚠️"}
-          </strong>
-          <div>
-            <textarea
-              placeholder="XML MetaData"
-              onChange={(e) =>
-                dispatch(
-                  updateSamlSPMetadata({
-                    name: name ? name : "",
-                    data: e.target.value,
-                  })
-                )
-              }
-              value={
-                name
-                  ? data.samlSPMetaDataXML[name]
-                    ? data.samlSPMetaDataXML[name].samlSPMetaDataXML
-                    : undefined
-                  : undefined
-              }
-            ></textarea>
-          </div>
-          <div>
-            <input
-              type="file"
-              onChange={(e) => {
-                handleChangeFile(e).then((fileContent) => {
-                  console.log("File content:", fileContent);
+        {optionSelected === "samlSPMetaDataXML" && (
+          <div className="box">
+            <strong className="title2">
+              {t("samlSPMetaDataXML")}{" "}
+              {name
+                ? data.samlSPMetaDataXML[name]
+                  ? data.samlSPMetaDataXML[name].samlSPMetaDataXML === ""
+                    ? "⚠️"
+                    : ""
+                  : "⚠️"
+                : "⚠️"}
+            </strong>
+            <div>
+              <textarea
+                placeholder="XML MetaData"
+                onChange={(e) =>
                   dispatch(
                     updateSamlSPMetadata({
                       name: name ? name : "",
-                      data: fileContent,
+                      data: e.target.value,
                     })
-                  );
-                });
-              }}
-            />
+                  )
+                }
+                value={
+                  name
+                    ? data.samlSPMetaDataXML[name]
+                      ? data.samlSPMetaDataXML[name].samlSPMetaDataXML
+                      : undefined
+                    : undefined
+                }
+              ></textarea>
+            </div>
+            <div>
+              <input
+                type="file"
+                onChange={(e) => {
+                  handleChangeFile(e).then((fileContent) => {
+                    console.log("File content:", fileContent);
+                    dispatch(
+                      updateSamlSPMetadata({
+                        name: name ? name : "",
+                        data: fileContent,
+                      })
+                    );
+                  });
+                }}
+              />
+            </div>
+            <URLLoader appName={name} loadFunction={updateSamlSPMetadata} />
+          </div>
+        )}
+        {optionSelected === "samlSPMetaDataExportedAttributes" && (
+          <div className="box">
+            <strong className="title2">
+              {t("samlSPMetaDataExportedAttributes")}
+            </strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newSamlSPMetadataExportedAttribute(name))}
+            >
+              +
+            </button>
+            <table id="exportedAttribute">
+              <thead>
+                <tr>
+                  <th>{t("variableName")}</th>
+                  <th>{t("attributeName")}</th>
+                  <th>{t("friendlyName")}</th>
+                  <th>{t("mandatory")}</th>
+                  <th>{t("format")}</th>
+                </tr>
+              </thead>
+              {data.samlSPMetaDataExportedAttributes
+                ? ExportedAttribute(
+                    name,
+                    data.samlSPMetaDataExportedAttributes[name]
+                  )
+                : ""}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newSamlSPMetadataExportedAttribute(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "samlSPMetaDataMacros" && (
+          <div className="box">
+            <strong className="title2">{t("samlSPMetaDataMacros")}</strong>
+            <button
+              className="plus"
+              onClick={() => dispatch(newSAMLSPMetaDataMacros(name))}
+            >
+              +
+            </button>
+            <table id="samlSPMetaDataMacros">
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
+                </tr>
+              </thead>
+              {data.samlSPMetaDataMacros
+                ? TableVars(
+                    name,
+                    data.samlSPMetaDataMacros[name],
+                    "samlSPMetaDataMacros",
+                    delSAMLSPMetaDataMacros,
+                    updateSAMLSPMetaDataMacros
+                  )
+                : ""}
+            </table>
+            <button
+              className="plus"
+              onClick={() => dispatch(newSAMLSPMetaDataMacros(name))}
+            >
+              +
+            </button>
+          </div>
+        )}
+        {optionSelected === "samlSPMetaDataOptions" && (
+          <div className="box">
+            <strong className="title2">{t("samlSPMetaDataOptions")}</strong>
+            <OptionSaml name={name} />
           </div>
-          <URLLoader appName={name} loadFunction={updateSamlSPMetadata} />
-        </div>
-        <div className="box">
-          <strong className="title2">
-            {t("samlSPMetaDataExportedAttributes")}
-          </strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newSamlSPMetadataExportedAttribute(name))}
-          >
-            +
-          </button>
-          <table id="exportedAttribute">
-            <thead>
-              <tr>
-                <th>{t("variableName")}</th>
-                <th>{t("attributeName")}</th>
-                <th>{t("friendlyName")}</th>
-                <th>{t("mandatory")}</th>
-                <th>{t("format")}</th>
-              </tr>
-            </thead>
-            {data.samlSPMetaDataExportedAttributes
-              ? ExportedAttribute(
-                  name,
-                  data.samlSPMetaDataExportedAttributes[name]
-                )
-              : ""}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newSamlSPMetadataExportedAttribute(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("samlSPMetaDataMacros")}</strong>
-          <button
-            className="plus"
-            onClick={() => dispatch(newSAMLSPMetaDataMacros(name))}
-          >
-            +
-          </button>
-          <table id="samlSPMetaDataMacros">
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
-              </tr>
-            </thead>
-            {data.samlSPMetaDataMacros
-              ? TableVars(
-                  name,
-                  data.samlSPMetaDataMacros[name],
-                  "samlSPMetaDataMacros",
-                  delSAMLSPMetaDataMacros,
-                  updateSAMLSPMetaDataMacros
-                )
-              : ""}
-          </table>
-          <button
-            className="plus"
-            onClick={() => dispatch(newSAMLSPMetaDataMacros(name))}
-          >
-            +
-          </button>
-        </div>
-        <div className="box">
-          <strong className="title2">{t("samlSPMetaDataOptions")}</strong>
-          <OptionSaml name={name} />
-        </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/features/config/configSlice.ts b/src/features/config/configSlice.ts
index 531abeb..6c91391 100644
--- a/src/features/config/configSlice.ts
+++ b/src/features/config/configSlice.ts
@@ -83,6 +83,13 @@ const configSlice = createSlice({
       state.data.config.locationRules[action.payload.appName] =
         action.payload.locationRules;
     },
+    updateDefaultLocationRule(
+      state,
+      action: PayloadAction<{ appName: string; rule: string }>
+    ) {
+      state.data.config.locationRules[action.payload.appName].default =
+        action.payload.rule;
+    },
     newLocationRule(state, action: PayloadAction<string>) {
       state.data.config.locationRules[action.payload] = {
         ...state.data.config.locationRules[action.payload],
@@ -682,6 +689,7 @@ export const {
   saveSAMLPrivSig,
   saveSAMLPubSig,
   updateLocationRule,
+  updateDefaultLocationRule,
   newLocationRule,
   delLocationRule,
   newVhostHeaders,