diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
new file mode 100644
index 0000000000..64c8677441
--- /dev/null
+++ b/CODING_STANDARDS.md
@@ -0,0 +1,265 @@
+# Coding Standards
+
+## Declaration Rules
+
+### Using Explanatory Names for Variables
+
+    // Bad
+    let x = 10; // What does "x" represent?
+
+    // Good
+    let numberOfUsers = 10; // Clearly states what the variable represents
+
+    // Bad
+    let y = true; // What does "y" represent?
+
+    // Good
+    let isLoggedIn = true; // Clearly states the user's login status
+
+### Using Verbs for Boolean Variables
+
+    // Bad
+    let loggedIn = false;
+    let userAccess = true;
+
+    // Good
+    let isLoggedIn = false;
+    let canAccess = true;
+    let isActive = true;
+    let hasPermission = false;
+
+### Declarations on Top
+
+    function exampleFunction() {
+        let x; // Declare variable at the top
+        let y; // Declare variable at the top
+
+        // Function body
+        // Code that uses variables x and y
+    }
+
+### One Declaration per Line
+
+    \\Bad
+    let x,y,z;
+
+    \\Good
+    let x;
+    let y;
+    let z;
+
+### Initialize Variables
+
+    let hasBorder = false;
+    let repeatedTimes = 0;
+    let images = [];
+
+### Declare Arrays with Const
+
+    \\Bad
+    let images = ['img1', 'img2', 'img3'];
+    images = 3; \\Converted images to number
+
+    \\Good
+    const images = ['img1', 'img2', 'img3'];
+
+### End Switch Case's with Defaults
+
+    switch (new Date().getDay()) {
+    	case  0:
+    		day = "Sunday";
+    		break;
+    	case  1:
+    		day = "Monday";
+    		break;
+    	default:
+    		day = "Unknown";
+    }
+
+### Avoid Number, String, and Boolean as Objects
+
+Always treat numbers, strings, or booleans as primitive values. Not as objects.
+Declaring these types as objects, slows down execution speed, and produces nasty side effects:
+
+    // Example
+    let x = "John";
+    let y = new String("John");
+    (x === y) // is false because x is a string and y is an object.
+
+    // Bad
+    const num = new  Number(10);
+    const str = new  String("Hello");
+    const bool = new  Boolean(true);
+
+    // Good
+    const num = 10;
+    const str = "Hello";
+    const bool = true;
+
+## Spacing
+
+-   Indentation with tabs.
+-   No whitespace at the end of line or on blank lines.
+-   Lines should usually be no longer than 80 characters, and should not exceed 120 (counting tabs as 4 spaces).
+-   No filler spaces in empty constructs (e.g., {}, [], fn()).
+-   There should be a new line at the end of each file.
+-   All function bodies are indented by one tab, even if the entire file is wrapped in a closure.
+
+## Ordering
+
+Ensuring that each function is defined before it is used is a good practice for code readability and maintainability.
+
+    // Define functions before they are used
+    function validateUserData(userData) {
+        // Logic to validate user data
+    }
+
+    function sanitizeUserData(userData) {
+        validateUserData()
+    }
+
+    function saveUserData(userData) {
+        sanitizeUserData()
+    }
+
+### Imports order
+
+1.  React import
+2.  Library imports (Alphabetical order)
+3.  Absolute imports from the project (Alphabetical order)
+4.  Relative imports (Alphabetical order)
+5.  Import \* as
+6.  Import \<some file>.\<some extension>
+
+### Array and Object Declarations
+
+    // Preferred
+    var obj = {
+    	ready: 9,
+    	when: 4,
+    	'you are': 15,
+    };
+
+    var arr = [
+    	9,
+    	4,
+    	15,
+    ];
+
+    // Acceptable for small objects and arrays
+    var obj = { ready: 9, when: 4, 'you are': 15 };
+    var arr = [ 9, 4, 15 ];
+
+## Semicolons
+
+Use them. Never rely on Automatic Semicolon Insertion (ASI).
+
+## Equality
+
+### Use === Comparison
+
+    0 == ""; // true
+    1 == "1"; // true
+    1 == true; // true
+
+    0 === ""; // false
+    1 === "1"; // false
+    1 === true; // false
+
+## React
+
+### Breakdown Components
+
+Breaking down components refers to decomposing complex systems or functionalities into smaller, more manageable parts or components. This practice helps improve code organization, readability, and maintainability.
+
+    // Bad
+    function processUserData(userData) {
+        // Complex logic to process user data
+    }
+
+    // Good
+    function validateUserData(userData) {
+        // Logic to validate user data
+    }
+
+    function sanitizeUserData(userData) {
+        // Logic to sanitize user data
+    }
+
+    function saveUserData(userData) {
+        // Logic to save user data
+    }
+
+### Use Functional Components
+
+Using functional components instead of class components whenever possible is wise because functional components are easier to read and write. Functional components are generally faster and more efficient than class components because they don't require a constructor or lifecycle methods.
+
+    // Good:
+    const MyComponent = () => {
+        return (
+            <div>
+                {/* JSX */}
+            </div>
+        );
+    };
+
+### Avoid Using Inline Styles
+
+Avoiding inline styles is a best practice in web development because it promotes separation of concerns, improves maintainability, and makes it easier to manage styles across an application. Instead of applying styles directly in HTML elements, it's recommended to use external stylesheets or CSS-in-JS solutions.
+
+    // Bad:
+    const MyComponent = () => {
+        return (
+            <div style={{ color: 'red', fontSize: '16px' }}>
+                {/* Content */}
+            </div>
+        );
+    };
+    // Good:
+    import './MyComponent.css';
+
+    const MyComponent = () => {
+    return (
+            <div className="my-component">
+                {/* Content */}
+            </div>
+        );
+    };
+
+### Passing Objects Instead of Multiple Props
+
+Especially when there are more than **4 props**, can enhance code readability and maintainability.
+
+    //Bad
+    const updateTodo = (id, name, completed, date, user) => {
+    	 //...
+    }
+
+    // Good
+    const todoItem = {
+    	id: 1,
+    	name: "Morning Task",
+    	completed: false,
+    	date: new Date(),
+    	user: "Optimus"
+    }
+
+    const updateTodo = (todoItem) => {
+    	//...
+    }
+
+### Avoid default export
+
+Using named exports provides better **clarity** when importing components, making the codebase more organized and easier to navigate.
+
+-   Named imports work well with tree shaking.
+-   Refactoring becomes easier.
+-   Easier to identify and understand the dependencies of a module.
+
+## Utils
+
+### Avoid Using eval()
+
+The `eval()` function is used to run text as code. In almost all cases, it should not be necessary to use it.
+
+Because it allows arbitrary code to be run, it also represents a security problem.
diff --git a/README.md b/README.md
index f54f2da431..1d3ada88bd 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ export default function MyComponent() {
 
 ## Theming
 
-PrimeReact has two theming has modes; styled or unstyled.
+PrimeReact has two theming modes; styled or unstyled.
 
 **Styled Mode**
 
diff --git a/components/doc/chart/combodoc.js b/components/doc/chart/combodoc.js
index ccd0a92740..8b9d7d7081 100644
--- a/components/doc/chart/combodoc.js
+++ b/components/doc/chart/combodoc.js
@@ -248,7 +248,7 @@ export default function ComboDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Different chart types can be combined in the same graph usign the <i>type</i> option of a dataset.
+                    Different chart types can be combined in the same graph using the <i>type</i> option of a dataset.
                 </p>
             </DocSectionText>
             <div className="card">
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index 5457ecd3ff..fda578fbf5 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -664,6 +664,23 @@
                     ],
                     "returnType": "object",
                     "description": "Returns the values of locale options."
+                },
+                "ariaLabel": {
+                    "name": "ariaLabel",
+                    "parameters": [
+                        {
+                            "name": "ariaKey",
+                            "type": "string",
+                            "description": "Key of the ARIA label to look up in the locale."
+                        },
+                        {
+                            "name": "options",
+                            "type": "any",
+                            "description": "JSON options like { page: 2, user: \"John\", role: \"Admin\" }."
+                        }
+                    ],
+                    "returnType": "string",
+                    "description": "Finds an ARIA label in the locale by key and replaces options if provided."
                 }
             }
         },
@@ -10012,14 +10029,6 @@
                             "default": "",
                             "description": "Used to get the child elements of the component."
                         },
-                        {
-                            "name": "className",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Style class of the element."
-                        },
                         {
                             "name": "data",
                             "optional": true,
@@ -10036,14 +10045,6 @@
                             "default": "",
                             "description": "Height of the chart in non-responsive mode."
                         },
-                        {
-                            "name": "id",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Unique identifier of the element."
-                        },
                         {
                             "name": "options",
                             "optional": true,
@@ -10076,14 +10077,6 @@
                             "default": "",
                             "description": "Used to configure passthrough(pt) options of the component."
                         },
-                        {
-                            "name": "style",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "CSSProperties",
-                            "default": "",
-                            "description": "Inline style of the element."
-                        },
                         {
                             "name": "type",
                             "optional": true,
@@ -11899,6 +11892,14 @@
                             "default": "",
                             "description": "Inline style of the body."
                         },
+                        {
+                            "name": "cellEditValidateOnClose",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator\nbefore cell editor is closed. If cellEditorValidator returns false, editor stays open."
+                        },
                         {
                             "name": "cellEditValidatorEvent",
                             "optional": true,
@@ -54867,6 +54868,22 @@
                             "default": "",
                             "description": "Order to sort the data by default."
                         },
+                        {
+                            "name": "stateKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of a stateful table to use in state storage."
+                        },
+                        {
+                            "name": "stateStorage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"custom\" | \"local\" | \"session\"",
+                            "default": "session",
+                            "description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"."
+                        },
                         {
                             "name": "stripedRows",
                             "optional": true,
@@ -54944,6 +54961,25 @@
                 "callbacks": {
                     "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
                     "values": [
+                        {
+                            "name": "customRestoreState",
+                            "parameters": [],
+                            "returnType": "undefined | object",
+                            "description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object."
+                        },
+                        {
+                            "name": "customSaveState",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "The object to be stored."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "A function to implement custom saveState with stateStorage=\"custom\"."
+                        },
                         {
                             "name": "onCollapse",
                             "parameters": [
@@ -55126,6 +55162,32 @@
                             "returnType": "void",
                             "description": "Callback to invoke on sort."
                         },
+                        {
+                            "name": "onStateRestore",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is restored."
+                        },
+                        {
+                            "name": "onStateSave",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is saved."
+                        },
                         {
                             "name": "onToggle",
                             "parameters": [
@@ -56572,7 +56634,7 @@
             "values": {
                 "IconOptions": {
                     "values": "AdditionalProps & Object",
-                    "description": "Icon options passed to any icon.\nComponentProps are props from the owning component.\nAdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example."
+                    "description": "Icon options passed to any icon."
                 },
                 "IconType": {
                     "values": "React.ReactNode | Function"
diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js
index f636b0776e..c72986bea7 100644
--- a/components/doc/customicons/imagedoc.js
+++ b/components/doc/customicons/imagedoc.js
@@ -11,7 +11,7 @@ export function ImageDoc(props) {
     return (
         <>
             <DocSectionText {...props}>
-                <p>Any time of image can be used as an icon.</p>
+                <p>Any type of image can be used as an icon.</p>
             </DocSectionText>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index d4e86effd3..8101676d41 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -21,7 +21,7 @@ export function HeadlessDoc(props) {
     onHide={() => setVisible(false)}
     content={({ closeIconRef, hide }) => (
         <div className="min-h-screen flex relative lg:static surface-ground">
-            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                 <div className="flex flex-column h-full">
                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                         <span className="inline-flex align-items-center gap-2">
@@ -215,7 +215,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -422,7 +422,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -622,7 +622,7 @@ export default function HeadlessDemo() {
                     onHide={() => setVisible(false)}
                     content={({ closeIconRef, hide }) => (
                         <div className="min-h-screen flex relative lg:static surface-ground">
-                            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                                 <div className="flex flex-column h-full">
                                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                         <span className="inline-flex align-items-center gap-2">
diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js
index 946adce8e7..6df01e91e6 100644
--- a/components/doc/theming/primeflexdoc.js
+++ b/components/doc/theming/primeflexdoc.js
@@ -18,7 +18,7 @@ export function PrimeFlexDoc(props) {
             <DocSectionText {...props}>
                 <p>
                     <a href="https://primeflex.org">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and
-                    tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeReact theme being used. PrimeReact follows the
+                    tailwind however PrimeFlex has benefits like integration with PrimeReact themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeReact theme being used. PrimeReact follows the
                     CSS utility approach of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primereact.org">PrimeBlocks for PrimeReact</a> project as well.
                 </p>
 
diff --git a/components/doc/theming/scaledoc.js b/components/doc/theming/scaledoc.js
index 7d30cc577b..11147b9959 100644
--- a/components/doc/theming/scaledoc.js
+++ b/components/doc/theming/scaledoc.js
@@ -15,7 +15,7 @@ html {
             <DocSectionText {...props}>
                 <p>
                     PrimeReact utilizes <i>rem</i> units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your
-                    document. Code below sets the scale of the components based on <i>16px</i>. If you reqire bigger or smaller components, just change this variable and components will scale accordingly.
+                    document. Code below sets the scale of the components based on <i>16px</i>. If you require bigger or smaller components, just change this variable and components will scale accordingly.
                 </p>
             </DocSectionText>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
diff --git a/components/doc/treetable/statefuldoc.js b/components/doc/treetable/statefuldoc.js
new file mode 100644
index 0000000000..58e80c3b38
--- /dev/null
+++ b/components/doc/treetable/statefuldoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function StatefulDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}>
+    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function StatefulDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}
+                    paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function StatefulDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}
+                    paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.</p>
+                <p>
+                    Change the state of the table e.g paginate or expand rows, navigate away and then return to this table again to test this feature. The setting is set as <i>session</i> with the <i>stateStorage</i> property so that Table retains
+                    the state until the browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'} paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name" sortable />
+                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size" sortable />
+                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type" sortable />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 5bf989b090..986ec24a96 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -729,6 +729,14 @@ export declare function localeOption(key: string, locale: string): any;
  */
 export declare function localeOptions(locale: string): object;
 
+/**
+ * Finds an ARIA label in the locale by key and replaces options if provided.
+ * @param {string} ariaKey - Key of the ARIA label to look up in the locale.
+ * @param {Object} options - JSON options like { page: 2, user: "John", role: "Admin" }.
+ * @returns {string} The ARIA label with replaced values.
+ */
+export declare function ariaLabel(ariaKey: string, options: any): string;
+
 // Locale Options
 export interface LocaleOptions {
     /**
diff --git a/components/lib/chart/chart.d.ts b/components/lib/chart/chart.d.ts
index 890b11c0d8..c1f9cfcba5 100644
--- a/components/lib/chart/chart.d.ts
+++ b/components/lib/chart/chart.d.ts
@@ -45,11 +45,7 @@ export interface ChartPassThroughOptions {
  * Defines valid properties in Chart component.
  * @group Properties
  */
-export interface ChartProps {
-    /**
-     * Unique identifier of the element.
-     */
-    id?: string | undefined;
+export interface ChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content' | 'pt'> {
     /**
      * Type of the chart.
      */
@@ -74,14 +70,6 @@ export interface ChartProps {
      * Height of the chart in non-responsive mode.
      */
     height?: string | undefined;
-    /**
-     * Inline style of the element.
-     */
-    style?: React.CSSProperties | undefined;
-    /**
-     * Style class of the element.
-     */
-    className?: string | undefined;
     /**
      * ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.
      * @default options.plugins.title.text
diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js
index 3290702847..737bf7ac6a 100644
--- a/components/lib/column/ColumnBase.js
+++ b/components/lib/column/ColumnBase.js
@@ -10,6 +10,7 @@ export const ColumnBase = ComponentBase.extend({
         body: null,
         bodyClassName: null,
         bodyStyle: null,
+        cellEditValidateOnClose: false,
         cellEditValidator: null,
         cellEditValidatorEvent: 'click',
         className: null,
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index a5513a6624..a1168511f6 100644
--- a/components/lib/column/column.d.ts
+++ b/components/lib/column/column.d.ts
@@ -808,6 +808,12 @@ export interface ColumnProps {
      * Inline style of the body.
      */
     bodyStyle?: React.CSSProperties | undefined;
+    /**
+     * When enabled and cellEditorValidator is set, force to call cellEditorValidator
+     * before cell editor is closed. If cellEditorValidator returns false, editor stays open.
+     * @defaultValue false
+     */
+    cellEditValidateOnClose?: boolean | undefined;
     /**
      * Event to trigger the validation, possible values are "click" and "blur".
      * @defaultValue click
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 9dd17bb34c..9ab5617d47 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -25,6 +25,7 @@ export const BodyCell = React.memo((props) => {
     const selfClick = React.useRef(false);
     const tabindexTimeout = React.useRef(null);
     const initFocusTimeout = React.useRef(null);
+    const editingRowDataStateRef = React.useRef(null);
     const { ptm, ptmo, cx } = props.ptCallbacks;
 
     const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
@@ -58,6 +59,10 @@ export const BodyCell = React.memo((props) => {
         return getColumnProp('editor');
     };
 
+    const cellEditValidateOnClose = () => {
+        return getColumnProp('cellEditValidateOnClose');
+    };
+
     const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
         type: 'click',
         listener: (e) => {
@@ -153,43 +158,41 @@ export const BodyCell = React.memo((props) => {
             unbindDocumentClickListener();
             OverlayService.off('overlay-click', overlayEventListener.current);
             overlayEventListener.current = null;
+            editingRowDataStateRef.current = null;
             selfClick.current = false;
         }, 1);
     };
 
     const switchCellToViewMode = (event, submit) => {
         const callbackParams = getCellCallbackParams(event);
+        const newRowData = { ...editingRowDataStateRef.current };
+        const newValue = resolveFieldData(newRowData);
+        const params = { ...callbackParams, newRowData, newValue };
+        const onCellEditCancel = getColumnProp('onCellEditCancel');
+        const cellEditValidator = getColumnProp('cellEditValidator');
+        const onCellEditComplete = getColumnProp('onCellEditComplete');
+
+        if (!submit && onCellEditCancel) {
+            onCellEditCancel(params);
+        }
 
-        setEditingRowDataState((prev) => {
-            const newRowData = prev;
-            const newValue = resolveFieldData(newRowData);
-            const params = { ...callbackParams, newRowData, newValue };
-            const onCellEditCancel = getColumnProp('onCellEditCancel');
-            const cellEditValidator = getColumnProp('cellEditValidator');
-            const onCellEditComplete = getColumnProp('onCellEditComplete');
-
-            if (!submit && onCellEditCancel) {
-                onCellEditCancel(params);
-            }
+        let valid = true;
 
-            let valid = true;
+        if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
+            valid = cellEditValidator(params);
+        }
 
-            if (!submit && cellEditValidator) {
-                valid = cellEditValidator(params);
+        if (valid) {
+            if (submit && onCellEditComplete) {
+                onCellEditComplete(params);
             }
 
-            if (valid) {
-                if (submit && onCellEditComplete) {
-                    setTimeout(() => onCellEditComplete(params));
-                }
-
-                closeCell(event);
-            } else {
-                event.preventDefault();
-            }
+            closeCell(event);
+        } else {
+            event.preventDefault();
+        }
 
-            return newRowData;
-        });
+        setEditingRowDataState(newRowData);
     };
 
     const findNextSelectableCell = (cell) => {
@@ -519,6 +522,12 @@ export const BodyCell = React.memo((props) => {
         }
     }, [props.editingMeta]);
 
+    React.useEffect(() => {
+        if (editingRowDataState) {
+            editingRowDataStateRef.current = editingRowDataState;
+        }
+    }, [editingRowDataState]);
+
     React.useEffect(() => {
         if (props.editMode === 'cell' || props.editMode === 'row') {
             const callbackParams = getCellCallbackParams();
@@ -628,13 +637,16 @@ export const BodyCell = React.memo((props) => {
             );
         } else if (rowReorder) {
             const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true;
+
+            const customIcon = getColumnProp('rowReorderIcon');
             const rowReorderIconProps = mergeProps(
                 {
                     className: cx('rowReorderIcon')
                 },
-                getColumnPTOptions('rowReorderIcon')
+                customIcon ? null : getColumnPTOptions('rowReorderIcon')
             );
-            const rowReorderIcon = getColumnProp('rowReorderIcon') || <BarsIcon {...rowReorderIconProps} />;
+
+            const rowReorderIcon = customIcon || <BarsIcon {...rowReorderIconProps} />;
 
             content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null;
         } else if (expander) {
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
index 64f22f14e2..c72af3eb10 100644
--- a/components/lib/datatable/BodyRow.js
+++ b/components/lib/datatable/BodyRow.js
@@ -269,7 +269,7 @@ export const BodyRow = React.memo((props) => {
                 focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
             } else {
                 rows[0].tabIndex = '0';
-                focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
+                focusedItem !== rows[0] && (rows[props.rowIndex].tabIndex = '-1');
             }
         }
     };
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 0c35e77741..a20afd3a12 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -13,6 +13,7 @@ import { DataTableBase } from './DataTableBase';
 import { TableBody } from './TableBody';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
+import { getStorage } from '../../utils/utils';
 
 export const DataTable = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -175,24 +176,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         return columns;
     };
 
-    const getStorage = () => {
-        switch (props.stateStorage) {
-            case 'local':
-                return window.localStorage;
-
-            case 'session':
-                return window.sessionStorage;
-
-            case 'custom':
-                return null;
-
-            default:
-                throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
-        }
-    };
-
     const saveState = () => {
-        let state = {};
+        const state = {};
 
         if (props.paginator) {
             state.first = getFirst();
@@ -237,7 +222,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 props.customSaveState(state);
             }
         } else {
-            const storage = getStorage();
+            const storage = getStorage(props.stateStorage);
 
             if (ObjectUtils.isNotEmpty(state)) {
                 storage.setItem(props.stateKey, JSON.stringify(state));
@@ -250,7 +235,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     const clearState = () => {
-        const storage = getStorage();
+        const storage = getStorage(props.stateStorage);
 
         if (storage && props.stateKey) {
             storage.removeItem(props.stateKey);
@@ -265,7 +250,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 restoredState = props.customRestoreState();
             }
         } else {
-            const storage = getStorage();
+            const storage = getStorage(props.stateStorage);
             const stateString = storage.getItem(props.stateKey);
             const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
 
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index 1225d46ebe..f29a344ff5 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -608,6 +608,7 @@ export const TableBody = React.memo(
 
             if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
                 event.currentTarget.draggable = true;
+                event.target.draggable = false;
             } else {
                 event.currentTarget.draggable = false;
             }
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 9e27e43a00..f8216b4387 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -449,7 +449,8 @@ export const Dialog = React.forwardRef((inProps, ref) => {
                     type: 'button',
                     className: cx('closeButton'),
                     'aria-label': ariaLabel,
-                    onClick: onClose
+                    onClick: onClose,
+                    onKeyDown: (ev) => ev.stopPropagation()
                 },
                 ptm('closeButton')
             );
diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
index d3a88ac409..c90dfc9847 100644
--- a/components/lib/dialog/DialogBase.js
+++ b/components/lib/dialog/DialogBase.js
@@ -45,15 +45,15 @@ const styles = `
         background-color: transparent;
         transition-property: background-color;
     }
-    
+
     .p-dialog-visible {
         display: flex;
     }
-    
+
     .p-dialog-mask.p-component-overlay {
         pointer-events: auto;
     }
-    
+
     .p-dialog {
         display: flex;
         flex-direction: column;
@@ -62,29 +62,29 @@ const styles = `
         transform: scale(1);
         position: relative;
     }
-    
+
     .p-dialog-content {
         overflow-y: auto;
         flex-grow: 1;
     }
-    
+
     .p-dialog-header {
         display: flex;
         align-items: center;
         flex-shrink: 0;
     }
-    
+
     .p-dialog-footer {
         flex-shrink: 0;
     }
-    
+
     .p-dialog .p-dialog-header-icons {
         display: flex;
         align-items: center;
         align-self: flex-start;
         flex-shrink: 0;
     }
-    
+
     .p-dialog .p-dialog-header-icon {
         display: flex;
         align-items: center;
@@ -92,39 +92,39 @@ const styles = `
         overflow: hidden;
         position: relative;
     }
-    
+
     .p-dialog .p-dialog-title {
         flex-grow: 1;
     }
-    
+
     /* Fluid */
     .p-fluid .p-dialog-footer .p-button {
         width: auto;
     }
-    
+
     /* Animation */
     /* Center */
     .p-dialog-enter {
         opacity: 0;
         transform: scale(0.7);
     }
-    
+
     .p-dialog-enter-active {
         opacity: 1;
         transform: scale(1);
         transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
     }
-    
+
     .p-dialog-enter-done {
         transform: none;
     }
-    
+
     .p-dialog-exit-active {
         opacity: 0;
         transform: scale(0.7);
         transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
     }
-    
+
     /* Top, Bottom, Left, Right, Top* and Bottom* */
     .p-dialog-top .p-dialog,
     .p-dialog-bottom .p-dialog,
@@ -136,17 +136,17 @@ const styles = `
     .p-dialog-bottom-right .p-dialog {
         margin: 0.75em;
     }
-    
+
     .p-dialog-top .p-dialog-enter,
     .p-dialog-top .p-dialog-exit-active {
         transform: translate3d(0px, -100%, 0px);
     }
-    
+
     .p-dialog-bottom .p-dialog-enter,
     .p-dialog-bottom .p-dialog-exit-active {
         transform: translate3d(0px, 100%, 0px);
     }
-    
+
     .p-dialog-left .p-dialog-enter,
     .p-dialog-left .p-dialog-exit-active,
     .p-dialog-top-left .p-dialog-enter,
@@ -155,7 +155,7 @@ const styles = `
     .p-dialog-bottom-left .p-dialog-exit-active {
         transform: translate3d(-100%, 0px, 0px);
     }
-    
+
     .p-dialog-right .p-dialog-enter,
     .p-dialog-right .p-dialog-exit-active,
     .p-dialog-top-right .p-dialog-enter,
@@ -164,7 +164,7 @@ const styles = `
     .p-dialog-bottom-right .p-dialog-exit-active {
         transform: translate3d(100%, 0px, 0px);
     }
-    
+
     .p-dialog-top .p-dialog-enter-active,
     .p-dialog-bottom .p-dialog-enter-active,
     .p-dialog-left .p-dialog-enter-active,
@@ -176,7 +176,7 @@ const styles = `
         transform: translate3d(0px, 0px, 0px);
         transition: all 0.3s ease-out;
     }
-    
+
     .p-dialog-top .p-dialog-exit-active,
     .p-dialog-bottom .p-dialog-exit-active,
     .p-dialog-left .p-dialog-exit-active,
@@ -187,7 +187,7 @@ const styles = `
     .p-dialog-bottom-right .p-dialog-exit-active {
         transition: all 0.3s ease-out;
     }
-    
+
     /* Maximize */
     .p-dialog-maximized {
         transition: none;
@@ -199,16 +199,16 @@ const styles = `
         top: 0px !important;
         left: 0px !important;
     }
-    
+
     .p-dialog-maximized .p-dialog-content {
         flex-grow: 1;
     }
-    
+
     .p-confirm-dialog .p-dialog-content {
         display: flex;
         align-items: center;
     }
-    
+
     /* Resizable */
     .p-dialog .p-resizable-handle {
         position: absolute;
@@ -220,10 +220,10 @@ const styles = `
         right: 1px;
         bottom: 1px;
     }
-    
+
     .p-dialog-draggable .p-dialog-header {
         cursor: move;
-    }        
+    }
 }
 `;
 
diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
index f70f2426a8..e630768e9c 100644
--- a/components/lib/dropdown/DropdownItem.js
+++ b/components/lib/dropdown/DropdownItem.js
@@ -57,7 +57,7 @@ export const DropdownItem = React.memo((props) => {
                 {
                     className: cx('checkIcon')
                 },
-                getPTOptions('checIcon')
+                getPTOptions('checkIcon')
             );
 
             return <CheckIcon {...checkIconProps} />;
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 2072814fc1..0ac2945cd7 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -93,7 +93,7 @@ export const DropdownPanel = React.memo(
 
             style = { ...style, ...option.style };
 
-            if (option.group && props.optionGroupLabel) {
+            if (option.group && option.optionGroup && props.optionGroupLabel) {
                 const { optionGroupLabel } = props;
                 const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
                 const key = index + '_' + props.getOptionGroupRenderKey(option);
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index d5224ddb69..617f5f8218 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -672,7 +672,8 @@ export const InputNumber = React.memo(
             if (sign.isMinusSign) {
                 const isNewMinusSign = minusCharIndex === -1;
 
-                if (isNewMinusSign && (selectionStart === 0 || selectionStart === currencyCharIndex + 1)) {
+                // #6522 - Selected negative value can't be overwritten with a minus ('-') symbol
+                if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) {
                     newValueStr = inputValue;
 
                     if (isNewMinusSign || selectionEnd !== 0) {
@@ -1133,7 +1134,7 @@ export const InputNumber = React.memo(
         useUpdateEffect(() => {
             constructParser();
             changeValue();
-        }, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
+        }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
 
         useUpdateEffect(() => {
             changeValue();
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index 16af969df4..cd32c8eebf 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useState } from 'react';
 import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps } from '../hooks/Hooks';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
 import { ObjectUtils } from '../utils/Utils';
 import { InputOtpBase } from './BaseInputOtp';
@@ -79,6 +79,10 @@ export const InputOtp = React.memo(
         };
 
         const onInput = (event, index) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
             if (event.nativeEvent.inputType === 'insertFromPaste') {
                 return; // handled in onPaste
             }
@@ -93,6 +97,10 @@ export const InputOtp = React.memo(
         };
 
         const onPaste = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
             let paste = event.clipboardData.getData('text');
 
             if (paste.length) {
@@ -117,6 +125,15 @@ export const InputOtp = React.memo(
         };
 
         const onKeydown = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            // special keys should be ignored, if it is CTRL+V is handled in onPaste
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+
             switch (event.code) {
                 case 'ArrowLeft': {
                     moveToPrevInput(event);
@@ -146,8 +163,14 @@ export const InputOtp = React.memo(
                     break;
                 }
 
+                case 'Tab':
+
+                case 'Enter': {
+                    break;
+                }
+
                 default: {
-                    // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
+                    //Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
                     if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) {
                         event.preventDefault();
                     }
@@ -157,6 +180,12 @@ export const InputOtp = React.memo(
             }
         };
 
+        useUpdateEffect(() => {
+            const value = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+
+            setTokens(value);
+        }, [props.value]);
+
         const createInputElements = (remainingInputs) => {
             if (remainingInputs <= 0) {
                 return [];
diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js
index bd9f7462ef..791846d0bd 100644
--- a/components/lib/keyfilter/KeyFilter.js
+++ b/components/lib/keyfilter/KeyFilter.js
@@ -34,7 +34,7 @@ export const KeyFilter = {
             return;
         }
 
-        if (e.ctrlKey || e.altKey) {
+        if (e.ctrlKey || e.altKey || e.metaKey) {
             return;
         }
 
diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js
index 430467cf34..fb92fd1615 100644
--- a/components/lib/metergroup/MeterGroup.js
+++ b/components/lib/metergroup/MeterGroup.js
@@ -126,12 +126,13 @@ export const MeterGroup = (inProps) => {
                     );
 
                     const labelIcon = item.icon ? <i {...labelIconProps} /> : <span {...labelListIconProps} />;
+                    const itemPercentage = calculatePercentage(item.value);
 
                     return (
                         <li key={index} {...labelItemProps}>
                             {labelIcon}
                             <span {...labelProps}>
-                                {item?.label} {item?.value && `(${item?.value}%)`}
+                                {item?.label} {`(${itemPercentage}%)`}
                             </span>
                         </li>
                     );
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 1daa91423a..cfcf0f826e 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -894,6 +894,7 @@ export const MultiSelect = React.memo(
                         }
                     };
                     const label = getLabelByValue(val);
+                    const labelKey = label + '_' + i;
                     const iconProps = mergeProps(
                         {
                             key: i,
@@ -913,14 +914,13 @@ export const MultiSelect = React.memo(
 
                     const tokenLabelProps = mergeProps(
                         {
-                            key: label + i,
                             className: cx('tokenLabel')
                         },
                         ptm('tokenLabel', context)
                     );
 
                     return (
-                        <div {...tokenProps} key={label}>
+                        <div {...tokenProps} key={labelKey}>
                             <span {...tokenLabelProps}>{label}</span>
                             {icon}
                         </div>
diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
index 0fbe09d72f..31625b5c41 100644
--- a/components/lib/paginator/PageLinks.js
+++ b/components/lib/paginator/PageLinks.js
@@ -73,7 +73,7 @@ export const PageLinks = React.memo((inProps) => {
                     },
                     page: pageLink - 1,
                     currentPage: props.page,
-                    totalPages: props.pageCount,
+                    totalPages: props.totalPages,
                     ariaLabel: ariaLabel('pageLabel', { page: pageLink }),
                     ariaCurrent: pageLink - 1 === props.page ? 'true' : undefined,
                     element,
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index ff2e4eb189..169b515f12 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -79,16 +79,16 @@ export const PanelMenu = React.memo(
             return ObjectUtils.equals(item, activeItemState);
         };
 
-        const getPanelId = (index) => {
+        const generatePanelId = (index) => {
             return `${idState}_${index}`;
         };
 
-        const getHeaderId = (index) => {
-            return `${getPanelId(index)}_header`;
+        const generateHeaderId = (itemId, index) => {
+            return `${itemId || generatePanelId(index)}_header`;
         };
 
-        const getContentId = (index) => {
-            return `${getPanelId(index)}_content`;
+        const generateContentId = (itemId, index) => {
+            return `${itemId || generatePanelId(index)}_content`;
         };
 
         const onHeaderKeyDown = (event, item) => {
@@ -299,8 +299,8 @@ export const PanelMenu = React.memo(
             const headerActionProps = mergeProps(
                 {
                     href: item.url || '#',
-                    className: cx('headerAction'),
-                    tabIndex: '-1'
+                    tabIndex: '-1',
+                    className: cx('headerAction')
                 },
                 getPTOptions(item, 'headerAction', index)
             );
@@ -332,6 +332,7 @@ export const PanelMenu = React.memo(
             const panelProps = mergeProps(
                 {
                     key: key,
+                    id: item?.id || generatePanelId(index),
                     className: cx('panel', { item }),
                     style: item.style
                 },
@@ -340,12 +341,12 @@ export const PanelMenu = React.memo(
 
             const headerProps = mergeProps(
                 {
-                    id: getHeaderId(index),
+                    id: generateHeaderId(item?.id, index),
                     className: cx('header', { active, item }),
                     'aria-label': item.label,
                     'aria-expanded': active,
                     'aria-disabled': item.disabled,
-                    'aria-controls': getContentId(index),
+                    'aria-controls': generateContentId(item?.id, index),
                     tabIndex: item.disabled ? null : '0',
                     onClick: (event) => onItemClick(event, item),
                     onKeyDown: (event) => onHeaderKeyDown(event, item),
@@ -375,7 +376,7 @@ export const PanelMenu = React.memo(
                 {
                     className: cx('toggleableContent', { active }),
                     role: 'region',
-                    'aria-labelledby': getHeaderId(index)
+                    'aria-labelledby': generateHeaderId(item?.id, index)
                 },
                 getPTOptions(item, 'toggleableContent', index)
             );
@@ -398,10 +399,10 @@ export const PanelMenu = React.memo(
                         <div {...headerContentProps}>{content}</div>
                     </div>
                     <CSSTransition nodeRef={menuContentRef} {...transitionProps}>
-                        <div id={getContentId(index)} ref={menuContentRef} {...toggleableContentProps}>
+                        <div id={generateContentId(item?.id, index)} ref={menuContentRef} {...toggleableContentProps}>
                             <div {...menuContentProps}>
                                 <PanelMenuList
-                                    panelId={getPanelId(index)}
+                                    panelId={item?.id || generatePanelId(index)}
                                     menuProps={props}
                                     onToggle={changeExpandedKeys}
                                     onHeaderFocus={updateFocusedHeader}
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index fa87272fa1..bdf17b5766 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -466,7 +466,7 @@ export const Password = React.memo(
                 invalid: props.invalid,
                 variant: props.variant,
                 style: props.inputStyle,
-                tabIndex: props.tabIndex,
+                tabIndex: props.tabIndex || '0',
                 tooltip: props.tooltip,
                 tooltipOptions: props.tooltipOptions,
                 type: type,
@@ -483,8 +483,8 @@ export const Password = React.memo(
         if (icon) {
             input = (
                 <IconField className={cx('iconField')} pt={ptm('iconField')} __parentMetadata={{ parent: metaData }}>
-                    <InputIcon>{icon}</InputIcon>
                     {input}
+                    <InputIcon>{icon}</InputIcon>
                 </IconField>
             );
         }
diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
index bcfd63832d..bd6ce97861 100644
--- a/components/lib/tabview/TabViewBase.js
+++ b/components/lib/tabview/TabViewBase.js
@@ -23,85 +23,6 @@ const classes = {
     }
 };
 
-const styles = `
-@layer primereact {
-    .p-tabview-nav-container {
-        position: relative;
-    }
-    
-    .p-tabview-scrollable .p-tabview-nav-container {
-        overflow: hidden;
-    }
-    
-    .p-tabview-nav-content {
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-        overscroll-behavior: contain auto;
-        position: relative;
-    }
-    
-    .p-tabview-nav {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        flex: 1 1 auto;
-    }
-    
-    .p-tabview-nav-link {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        overflow: hidden;
-    }
-    
-    .p-tabview-ink-bar {
-        display: none;
-        z-index: 1;
-    }
-    
-    .p-tabview-nav-link:focus {
-        z-index: 1;
-    }
-    
-    .p-tabview-close {
-        z-index: 1;
-    }
-    
-    .p-tabview-title {
-        line-height: 1;
-        white-space: nowrap;
-    }
-    
-    .p-tabview-nav-btn {
-        position: absolute;
-        top: 0;
-        z-index: 2;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-tabview-nav-prev {
-        left: 0;
-    }
-    
-    .p-tabview-nav-next {
-        right: 0;
-    }
-    
-    .p-tabview-nav-content::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
 const inlineStyles = {
     tab: {
         header: ({ headerStyle, _style }) => ({ ...(headerStyle || {}), ...(_style || {}) }),
@@ -129,7 +50,6 @@ export const TabViewBase = ComponentBase.extend({
     },
     css: {
         classes,
-        styles,
         inlineStyles
     }
 });
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 489ea2709c..d108f6a537 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -12,7 +12,7 @@ export const Tooltip = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = TooltipBase.getProps(inProps, context);
         const [visibleState, setVisibleState] = React.useState(false);
-        const [positionState, setPositionState] = React.useState(props.position);
+        const [positionState, setPositionState] = React.useState(props.position || 'right');
         const [classNameState, setClassNameState] = React.useState('');
         const metaData = {
             props,
@@ -449,7 +449,7 @@ export const Tooltip = React.memo(
                 bindWindowResizeListener();
                 bindOverlayScrollListener();
             } else {
-                setPositionState(props.position);
+                setPositionState(props.position || 'right');
                 setClassNameState('');
                 currentTargetRef.current = null;
                 containerSize.current = null;
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index ba51125892..fc6d5a8b7e 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterMatchMode, FilterService, PrimeReactContext } from '../api/Api';
 import { ColumnBase } from '../column/ColumnBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useEventListener, useUpdateEffect, useMergeProps } from '../hooks/Hooks';
+import { useEventListener, useUpdateEffect, useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ArrowDownIcon } from '../icons/arrowdown';
 import { ArrowUpIcon } from '../icons/arrowup';
 import { SpinnerIcon } from '../icons/spinner';
@@ -13,6 +13,7 @@ import { TreeTableBody } from './TreeTableBody';
 import { TreeTableFooter } from './TreeTableFooter';
 import { TreeTableHeader } from './TreeTableHeader';
 import { TreeTableScrollableView } from './TreeTableScrollableView';
+import { getStorage } from '../../utils/utils';
 
 export const TreeTable = React.forwardRef((inProps, ref) => {
     const mergeProps = useMergeProps();
@@ -83,6 +84,185 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         }
     });
 
+    const isCustomStateStorage = () => {
+        return props.stateStorage === 'custom';
+    };
+
+    const isStateful = () => {
+        return props.stateKey != null || isCustomStateStorage();
+    };
+
+    const saveState = () => {
+        let state = {};
+
+        if (props.paginator) {
+            state.first = getFirst();
+            state.rows = getRows();
+        }
+
+        const sortField = getSortField();
+
+        if (sortField) {
+            state.sortField = sortField;
+            state.sortOrder = getSortOrder();
+        }
+
+        const multiSortMeta = getMultiSortMeta();
+
+        if (multiSortMeta) {
+            state.multiSortMeta = multiSortMeta;
+        }
+
+        if (hasFilter()) {
+            state.filters = getFilters();
+        }
+
+        if (props.reorderableColumns) {
+            state.columnOrder = columnOrderState;
+        }
+
+        state.expandedKeysState = expandedKeysState;
+
+        if (props.selectionKeys && props.onSelectionChange) {
+            state.selectionKeys = props.selectionKeys;
+        }
+
+        if (isCustomStateStorage()) {
+            if (props.customSaveState) {
+                props.customSaveState(state);
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+
+            if (ObjectUtils.isNotEmpty(state)) {
+                storage.setItem(props.stateKey, JSON.stringify(state));
+            }
+        }
+
+        if (props.onStateSave) {
+            props.onStateSave(state);
+        }
+    };
+
+    const clearState = () => {
+        const storage = getStorage(props.stateStorage);
+
+        if (storage && props.stateKey) {
+            storage.removeItem(props.stateKey);
+        }
+    };
+
+    const restoreState = () => {
+        let restoredState = {};
+
+        if (isCustomStateStorage()) {
+            if (props.customRestoreState) {
+                restoredState = props.customRestoreState();
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+            const stateString = storage.getItem(props.stateKey);
+            const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
+
+            const reviver = function (key, value) {
+                return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
+            };
+
+            if (stateString) {
+                restoredState = JSON.parse(stateString, reviver);
+            }
+        }
+
+        _restoreState(restoredState);
+    };
+
+    const restoreTableState = (restoredState) => {
+        _restoreState(restoredState);
+    };
+
+    const _restoreState = (restoredState = {}) => {
+        if (ObjectUtils.isNotEmpty(restoredState)) {
+            if (props.paginator) {
+                if (props.onPage) {
+                    const getOnPageParams = (first, rows) => {
+                        const totalRecords = getTotalRecords(processedData());
+                        const pageCount = Math.ceil(totalRecords / rows) || 1;
+                        const page = Math.floor(first / rows);
+
+                        return { first, rows, page, pageCount };
+                    };
+
+                    props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
+                } else {
+                    setFirstState(restoredState.first);
+                    setRowsState(restoredState.rows);
+                }
+            }
+
+            if (restoredState.sortField) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            sortField: restoredState.sortField,
+                            sortOrder: restoredState.sortOrder
+                        })
+                    );
+                } else {
+                    setSortFieldState(restoredState.sortField);
+                    setSortOrderState(restoredState.sortOrder);
+                }
+            }
+
+            if (restoredState.multiSortMeta) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            multiSortMeta: restoredState.multiSortMeta
+                        })
+                    );
+                } else {
+                    setMultiSortMetaState(restoredState.multiSortMeta);
+                }
+            }
+
+            if (restoredState.filters) {
+                if (props.onFilter) {
+                    props.onFilter(
+                        createEvent({
+                            filters: restoredState.filters
+                        })
+                    );
+                } else {
+                    setFiltersState(cloneFilters(restoredState.filters));
+                }
+            }
+
+            if (props.reorderableColumns) {
+                setColumnOrderState(restoredState.columnOrder);
+            }
+
+            if (restoredState.expandedKeysState) {
+                if (props.onToggle) {
+                    props.onRowToggle({
+                        data: restoredState.expandedKeysState
+                    });
+                } else {
+                    setExpandedKeysState(restoredState.expandedKeysState);
+                }
+            }
+
+            if (restoredState.selectionKeys && props.onSelectionChange) {
+                props.onSelectionChange({
+                    value: restoredState.selectionKeys
+                });
+            }
+
+            if (props.onStateRestore) {
+                props.onStateRestore(restoredState);
+            }
+        }
+    };
+
     const onToggle = (event) => {
         const { originalEvent, value, navigateFocusToChild } = event;
 
@@ -337,6 +517,41 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         }
     };
 
+    const cloneFilters = (filters) => {
+        filters = filters || props.filters;
+        let cloned = {};
+
+        if (filters) {
+            Object.entries(filters).forEach(([prop, value]) => {
+                cloned[prop] = value;
+            });
+        } else {
+            const columns = getColumns();
+
+            cloned = columns.reduce((filters, col) => {
+                const field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
+                const filterFunction = getColumnProp(col, 'filterFunction');
+                const dataType = getColumnProp(col, 'dataType');
+                const matchMode =
+                    getColumnProp(col, 'filterMatchMode') ||
+                    ((context && context.filterMatchModeOptions[dataType]) || PrimeReact.filterMatchModeOptions[dataType]
+                        ? (context && context.filterMatchModeOptions[dataType][0]) || PrimeReact.filterMatchModeOptions[dataType][0]
+                        : FilterMatchMode.STARTS_WITH);
+                let constraint = { value: null, matchMode };
+
+                if (filterFunction) {
+                    FilterService.register(`custom_${field}`, (...args) => filterFunction(...args, { column: col }));
+                }
+
+                filters[field] = constraint;
+
+                return filters;
+            }, {});
+        }
+
+        return cloned;
+    };
+
     const hasFilter = () => {
         return ObjectUtils.isNotEmpty(getFilters());
     };
@@ -437,6 +652,10 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                     delta: delta
                 });
             }
+
+            if (isStateful()) {
+                saveState();
+            }
         }
 
         resizerHelperRef.current.style.display = 'none';
@@ -900,6 +1119,18 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
         return data;
     };
 
+    useMountEffect(() => {
+        if (isStateful()) {
+            restoreState();
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (isStateful()) {
+            saveState();
+        }
+    });
+
     useUpdateEffect(() => {
         if (childFocusEvent.current) {
             const nodeElement = childFocusEvent.current.target;
@@ -915,10 +1146,26 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         props,
+        clearState,
         filter,
-        getElement: () => elementRef.current
+        getElement: () => elementRef.current,
+        restoreState,
+        restoreTableState,
+        saveState
     }));
 
+    const createEvent = (event) => {
+        return {
+            first: getFirst(),
+            rows: getRows(),
+            sortField: getSortField(),
+            sortOrder: getSortOrder(),
+            multiSortMeta: getMultiSortMeta(),
+            filters: getFilters(),
+            ...event
+        };
+    };
+
     const createTableHeader = (columns, columnGroup) => {
         const sortField = getSortField();
         const sortOrder = getSortOrder();
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index 29912dc233..d7fe38ed1b 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -83,6 +83,8 @@ export const TreeTableBase = ComponentBase.extend({
         columnResizeMode: 'fit',
         contextMenuSelectionKey: null,
         currentPageReportTemplate: '({currentPage} of {totalPages})',
+        customRestoreState: null,
+        customSaveState: null,
         defaultSortOrder: 1,
         emptyMessage: null,
         expandedKeys: null,
@@ -120,6 +122,8 @@ export const TreeTableBase = ComponentBase.extend({
         onSelect: null,
         onSelectionChange: null,
         onSort: null,
+        onStateRestore: null,
+        onStateSave: null,
         onToggle: null,
         onUnselect: null,
         onValueChange: null,
@@ -152,6 +156,8 @@ export const TreeTableBase = ComponentBase.extend({
         sortIcon: null,
         sortMode: 'single',
         sortOrder: null,
+        stateKey: null,
+        stateStorage: null,
         stripedRows: false,
         style: null,
         tabIndex: 0,
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts
index b6dc664262..6ad7c23a65 100644
--- a/components/lib/treetable/treetable.d.ts
+++ b/components/lib/treetable/treetable.d.ts
@@ -842,6 +842,15 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * Order to sort the data by default.
      */
     sortOrder?: 1 | 0 | -1 | undefined | null;
+    /**
+     * Unique identifier of a stateful table to use in state storage.
+     */
+    stateKey?: string | undefined;
+    /**
+     * Defines where a stateful table keeps its state, valid values are "session" for sessionStorage, "local" for localStorage and "custom".
+     * @defaultValue session
+     */
+    stateStorage?: 'session' | 'local' | 'custom' | undefined;
     /**
      * Whether to displays rows with alternating colors.
      * @defaultValue false
@@ -876,6 +885,16 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * An array of treenodes to display.
      */
     value?: TreeNode[] | undefined;
+    /**
+     * A function to implement custom restoreState with stateStorage="custom". Need to return state object.
+     * @return {object | undefined} Returns the state object.
+     */
+    customRestoreState?(): object | undefined;
+    /**
+     * A function to implement custom saveState with stateStorage="custom".
+     * @param {object} state - The object to be stored.
+     */
+    customSaveState?(state: object): void;
     /**
      * Callback to invoke when a column is reordered.
      * @param {TreeTableColReorderEvent} event - Custom column reorder event.
@@ -946,6 +965,16 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * @param {TreeTableSortEvent} event - Custom sort event.
      */
     onSort?(event: TreeTableSortEvent): void;
+    /**
+     * Callback to invoke table state is restored.
+     * @param {object} state - Table state.
+     */
+    onStateRestore?(state: object): void;
+    /**
+     * Callback to invoke table state is saved.
+     * @param {object} state - Table state.
+     */
+    onStateSave?(state: object): void;
     /**
      * Callback to invoke when a node is toggled.
      * @param {TreeTableToggleEvent} event - Custom toggle event.
diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
index 01e5378692..3c40163b32 100644
--- a/components/lib/utils/utils.d.ts
+++ b/components/lib/utils/utils.d.ts
@@ -177,20 +177,23 @@ export declare namespace ZIndexUtils {
 
 /**
  * Icon options passed to any icon.
- * ComponentProps are props from the owning component.
- * AdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example.
+ * @template ComponentProps Props from the owning component.
+ * @template AdditionalProps Any custom properties of an icon like SortIcon of the Datatable for example.
  */
 export type IconOptions<ComponentProps, AdditionalProps> = AdditionalProps & {
     /**
-     * Icon specific properties.
+     * Icon specific properties. Size property allows FontAwesome to work properly.
+     * @type {(React.HTMLProps<unknown> & { size?: string }) | (React.SVGProps<unknown> & { size?: string })}
      */
-    iconProps: React.HTMLProps<any> | React.SVGProps<any>;
+    iconProps: (React.HTMLProps<unknown> & { size?: string }) | (React.SVGProps<unknown> & { size?: string });
     /**
      * The element representing the icon.
+     * @type {React.ReactNode}
      */
     element: React.ReactNode;
     /**
      * Properties of the owning component.
+     * @type {ComponentProps}
      */
     props?: ComponentProps;
     [key: string]: any;
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index 349915172a..64862de642 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -568,7 +568,29 @@ export const VirtualScroller = React.memo(
         }, [numToleratedItemsState]);
 
         useUpdateEffect(() => {
-            if (!prevProps.items || prevProps.items.length !== (props.items || []).length) {
+            // Check if the previous/current rows array exists
+            const prevRowsExist = prevProps.items !== undefined && prevProps.items !== null;
+            const currentRowsExist = props.items !== undefined && props.items !== null;
+
+            // Get the length of the previous/current rows array, or 0 if it doesn't exist
+            const prevRowsLength = prevRowsExist ? prevProps.items.length : 0;
+            const currentRowsLength = currentRowsExist ? props.items.length : 0;
+
+            // Check if the length of the rows arrays has changed
+            let valuesChanged = prevRowsLength !== currentRowsLength;
+
+            // If both is true, we also need to check the lengths of the first element (assuming it's a matrix)
+            if (both && !valuesChanged) {
+                // Get the length of the columns or 0
+                const prevColumnsLength = prevRowsExist && prevProps.items.length > 0 ? prevProps.items[0].length : 0;
+                const currentColumnsLength = currentRowsExist && props.items.length > 0 ? props.items[0].length : 0;
+
+                // Check if the length of the columns has changed
+                valuesChanged = prevColumnsLength !== currentColumnsLength;
+            }
+
+            // If the previous items array doesn't exist or if any values have changed, call the init function
+            if (!prevRowsExist || valuesChanged) {
                 init();
             }
 
diff --git a/components/news/newssection.js b/components/news/newssection.js
index d6068c043d..d244a43f6a 100644
--- a/components/news/newssection.js
+++ b/components/news/newssection.js
@@ -14,12 +14,12 @@ export default function NewsSection() {
             const item = JSON.parse(itemString);
 
             if (!item.hiddenNews || item.hiddenNews !== News.id) {
-                showNews(News);
+                // showNews(News);
             } else {
                 hideNews();
             }
         } else {
-            showNews(News);
+            // showNews(News);
         }
     });
 
diff --git a/components/utils/utils.js b/components/utils/utils.js
index 2003b45e10..b24ebfb1d3 100644
--- a/components/utils/utils.js
+++ b/components/utils/utils.js
@@ -15,3 +15,19 @@ export const switchTheme = (currentTheme, newTheme, linkElementId, callback) =>
     });
     linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
 };
+
+export const getStorage = (stateStorageProp) => {
+    switch (stateStorageProp) {
+        case 'local':
+            return window.localStorage;
+
+        case 'session':
+            return window.sessionStorage;
+
+        case 'custom':
+            return null;
+
+        default:
+            throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+    }
+};
diff --git a/data/news.json b/data/news.json
index 82cb051fa4..d75534541a 100644
--- a/data/news.json
+++ b/data/news.json
@@ -1,6 +1,6 @@
 {
-    "id": 47,
-    "content": "🌸 Spring Sale: Save Up to 50% on Premium Templates and More. ",
+    "id": 48,
+    "content": "Sakai | Free Admin Template.",
     "linkText": "Learn More",
-    "linkHref": "https://www.primefaces.org/store"
+    "linkHref": "https://sakai.primereact.org"
 }
diff --git a/package-lock.json b/package-lock.json
index d53ebc513c..87a63854e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.6.4",
+    "version": "10.6.5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.6.4",
+            "version": "10.6.5",
             "dependencies": {
                 "@docsearch/react": "3.5.2",
                 "chart.js": "4.4.2",
diff --git a/package.json b/package.json
index 73a00256db..fa6a922912 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
         "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package",
         "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api",
         "dev:link": "NPM_LINK=true NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
-        "dev:link:windows": "set NPM_LINK=true && set NODE_ENV=production&& set INPUT_DIR=components/lib/&& set OUTPUT_DIR=dist/&& npm run build:package:dev",
-        "build:package:dev": "npm run build:check && rollup -c --watch && gulp build-resources && npm run build:api",
+        "dev:link:windows": "set \"NPM_LINK=true\" && set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package:dev",
+        "build:package:dev": "npm run build:check && gulp build-resources && npm run build:api && rollup -c --watch",
         "build:api": "npm run apiwebtypes && npm run apidoc",
         "build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check",
         "security:check": "npm audit --production --audit-level high",
diff --git a/pages/support/index.js b/pages/support/index.js
index 022aeb8b61..f98bae3009 100644
--- a/pages/support/index.js
+++ b/pages/support/index.js
@@ -65,10 +65,6 @@ const SupportPage = () => {
                             <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">PrimeBlocks - Enterprise License</span>
                         </li>
-                        <li className="flex align-items-center mb-3">
-                            <i className="pi pi-check-circle mr-3 text-green-500" />
-                            <span className="line-height-3">Theme Designer - Extended License</span>
-                        </li>
                         <li className="flex align-items-center mb-3">
                             <i className="pi pi-check-circle mr-3 text-green-500" />
                             <span className="line-height-3">Figma UI Kit - Enterprise License</span>
diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js
index 7d461170a6..0bfdbadb6a 100644
--- a/pages/templates/apollo/index.js
+++ b/pages/templates/apollo/index.js
@@ -172,13 +172,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$59',
-            discountPrice: '$39',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$590',
-            discountPrice: '$390',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js
index b248f3e900..f083a70539 100644
--- a/pages/templates/atlantis/index.js
+++ b/pages/templates/atlantis/index.js
@@ -147,13 +147,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$59',
-            discountPrice: '$39',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$590',
-            discountPrice: '$390',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js
index 1208baf1ce..f98bc66cab 100644
--- a/pages/templates/avalon/index.js
+++ b/pages/templates/avalon/index.js
@@ -171,13 +171,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$49',
-            discountPrice: '$29',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$490',
-            discountPrice: '$290',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js
index cda58d6f1e..d5991a33f9 100644
--- a/pages/templates/diamond/index.js
+++ b/pages/templates/diamond/index.js
@@ -153,13 +153,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$59',
-            discountPrice: '$39',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$590',
-            discountPrice: '$390',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js
index 4514e529b3..8675dfe51f 100644
--- a/pages/templates/freya/index.js
+++ b/pages/templates/freya/index.js
@@ -147,13 +147,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$59',
-            discountPrice: '$39',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$590',
-            discountPrice: '$390',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js
index d2e7b70ea0..f31b496689 100644
--- a/pages/templates/ultima/index.js
+++ b/pages/templates/ultima/index.js
@@ -147,13 +147,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$59',
-            discountPrice: '$39',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$590',
-            discountPrice: '$390',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js
index 8220bc0f4a..c803314dd8 100644
--- a/pages/templates/verona/index.js
+++ b/pages/templates/verona/index.js
@@ -176,13 +176,11 @@ const license = {
         {
             title: 'Basic License',
             price: '$49',
-            discountPrice: '$29',
             included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
         },
         {
             title: 'Extended License',
             price: '$490',
-            discountPrice: '$290',
             included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
         }
     ]
diff --git a/pages/treetable/index.js b/pages/treetable/index.js
index 2eb25707ef..a937d23992 100644
--- a/pages/treetable/index.js
+++ b/pages/treetable/index.js
@@ -30,6 +30,7 @@ import { SingleColumnDoc } from '@/components/doc/treetable/sort/singlecolumndoc
 import { TemplateDoc } from '@/components/doc/treetable/templatedoc';
 import { StyledDoc } from '@/components/doc/treetable/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/treetable/theming/tailwinddoc';
+import { StatefulDoc } from '@/components/doc/treetable/statefuldoc';
 
 const TreeTableDemo = () => {
     const docs = [
@@ -193,7 +194,11 @@ const TreeTableDemo = () => {
             label: 'Context Menu',
             component: ContextMenuDoc
         },
-
+        {
+            id: 'stateful',
+            label: 'Stateful',
+            component: StatefulDoc
+        },
         {
             id: 'accessibility',
             label: 'Accessibility',
diff --git a/pages/uikit/index.js b/pages/uikit/index.js
index ed13440a5b..a561f5c50e 100644
--- a/pages/uikit/index.js
+++ b/pages/uikit/index.js
@@ -164,8 +164,7 @@ const UIKitPage = (props) => {
                                         <div className="text-600 font-medium">For individual designers</div>
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <div className="flex gap-3 flex-wrap">
-                                            <span className="text-2xl font-bold text-900 line-through text-color-secondary">$99</span>
-                                            <span className="text-2xl font-bold text-900">$49</span>
+                                            <span className="text-2xl font-bold text-900">$99</span>
                                         </div>
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
@@ -209,8 +208,7 @@ const UIKitPage = (props) => {
                                         <div className="text-600 font-medium">For small teams</div>
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <div className="flex gap-3 flex-wrap">
-                                            <span className="text-2xl font-bold text-900 line-through text-color-secondary">$249</span>
-                                            <span className="text-2xl font-bold text-900">$149</span>
+                                            <span className="text-2xl font-bold text-900">$249</span>
                                         </div>
                                         <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
                                         <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index e8f1386a7e..fac11bfa67 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 5976baa7da..1ac25d3639 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 9b9dca8061..20399a9050 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index fd9f29cd20..859d39faa3 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4717,6 +4717,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e3f3fe;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index dd90fb688e..e8a9ae7893 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -639,6 +639,7 @@
     border: 1px solid #3f4b5b;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #3f4b5b;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 1px #f0e6f5;
     border-color: #c298d8;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #151515;
     background: #c298d8;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #3f4b5b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #3f4b5b;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #3f4b5b;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #3f4b5b;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f19ea6;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.15s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f19ea6;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2083,6 +2073,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
@@ -4606,6 +4605,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #c298d8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3f4b5b;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #c298d8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
@@ -4615,6 +4717,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #f0e6f5;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 2b812214c0..5942ab4554 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -4717,6 +4717,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #dee2e6;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 958904640b..f8b3e08823 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -599,10 +599,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
@@ -639,6 +639,7 @@
     border: 1px solid #ced4da;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: #ced4da;
@@ -649,6 +650,15 @@
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
     border-color: #883cae;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -689,38 +699,29 @@
     transition: box-shadow 0.15s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.5rem 1.5rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #ffffff;
     background: #883cae;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
     background: #e9ecef;
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #efefef;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #efefef;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #efefef;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1317,6 +1318,7 @@
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: #ced4da;
@@ -1330,6 +1332,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #dc3545;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
     color: #6c757d;
     transition-duration: 0.15s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #dc3545;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: #495057;
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: #495057;
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2083,6 +2073,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.5rem 0.75rem;
     transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
@@ -4606,6 +4605,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #883cae;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #212529;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #883cae;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
@@ -4615,6 +4717,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #dee2e6;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index e1b5f800fe..ec2d677319 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -4629,6 +4629,68 @@
     outline-offset: 0;
     box-shadow: inset 0 0 0 1px #605e5c;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 0 none;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index a18b380af0..be66f0a089 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #fbbf24;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index d47c1cf5f9..1e9f1008a3 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #60a5fa;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 1e4e7c6f82..03948fb60f 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #22d3ee;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 39794e9976..a8d62e5920 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #34d399;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index dd8c4d020e..976da3ce7f 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #818cf8;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 2e748dcdb4..0774850d1f 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #f472b6;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index f7b1f8a305..a97ca2da78 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #424b57;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #2dd4bf;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 84539d6f9d..0587b74131 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fef08a;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #f59e0b;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 83ab2c8574..6129b89864 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #3b82f6;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 5cbada14d3..b054147512 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a5f3fc;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #06b6d4;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index 4ef7804c00..2939cd65fd 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #10b981;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 6103f730b0..ad2a370f76 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c7d2fe;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #6366f1;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 6df317fea9..ab974c948e 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #fbcfe8;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #ec4899;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index b0ba6ba210..d2e6565a1e 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -4700,6 +4700,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #99f6e4;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
@@ -6936,15 +6998,6 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
-  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #14b8a6;
-    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index baafb141ef..a7520e7515 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 104d274cd2..e71fb82bfa 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 7c0f306968..46fec49cdc 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index cb751f55e8..370f57e02a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem white;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index f7723d86e1..7d008fbd5a 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -659,6 +659,7 @@
     border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #CE93D8;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 1rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #CE93D8;
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: hsla(0, 0%, 100%, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44435;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44435;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 1rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 3rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 3rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 1rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 3rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 3rem;
   }
@@ -2094,6 +2084,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 2rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-treeselect .p-treeselect-label {
     padding: 1rem 1rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -4617,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -4626,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: solid rgba(255, 255, 255, 0.12);
@@ -8087,6 +8251,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 11da14af14..1dcbd52c90 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -241,7 +241,7 @@
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
   color: rgba(255, 255, 255, 0.87);
-  background: hsla(0deg, 0%, 100%, 0.04);
+  background: hsla(0, 0%, 100%, 0.04);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 1rem 1rem;
@@ -419,7 +419,7 @@
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
     color: #9FA8DA;
@@ -445,7 +445,7 @@
     padding: 0.5rem;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     border-radius: 4px;
   }
   .p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
     background: #1e1e1e;
     font-weight: 500;
     margin: 0;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
@@ -546,13 +546,13 @@
   }
   .p-datepicker .p-datepicker-buttonbar {
     padding: 1rem 0;
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     padding: 0.5rem;
   }
   .p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
     background: rgba(159, 168, 218, 0.16);
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-    border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,7 +656,7 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -671,13 +671,13 @@
     border-color: #9FA8DA;
   }
   .p-cascadeselect.p-variant-filled {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-cascadeselect.p-variant-filled:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-cascadeselect.p-variant-filled:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
@@ -734,7 +734,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
     padding: 1rem 1rem;
@@ -772,11 +772,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -795,7 +795,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -835,25 +835,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -873,13 +873,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -939,12 +939,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
   .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-    background: hsla(0deg, 0%, 100%, 0.24);
+    background: hsla(0, 0%, 100%, 0.24);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1059,7 +1059,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1074,13 +1074,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1122,7 +1122,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1164,7 +1164,7 @@
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1186,14 +1186,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
-    border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
     padding: 1rem 1rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1289,7 +1289,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 0.5rem;
     outline-color: transparent;
@@ -1311,7 +1311,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1331,7 +1331,7 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 1rem 1rem;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
@@ -1350,13 +1350,13 @@
     border-color: #f44435;
   }
   .p-inputtext.p-variant-filled {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-inputtext.p-variant-filled:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-inputtext.p-variant-filled:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
@@ -1396,13 +1396,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1471,14 +1471,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1531,15 +1531,15 @@
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1571,7 +1571,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1667,7 +1667,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1682,13 +1682,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 1rem 1rem;
@@ -1700,7 +1700,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1729,7 +1729,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1793,7 +1793,7 @@
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1875,11 +1875,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1918,25 +1918,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
@@ -2028,7 +2028,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2068,7 +2068,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
   }
@@ -2085,13 +2085,13 @@
     padding-right: 2rem;
   }
   .p-treeselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-treeselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-treeselect .p-treeselect-label {
     padding: 1rem 1rem;
@@ -2103,7 +2103,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2133,7 +2133,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2184,13 +2184,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3583,7 +3583,7 @@
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
     outline: 0 none;
@@ -3591,12 +3591,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-column-filter-overlay-menu .p-column-filter-operator {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3605,7 +3605,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 1rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3669,12 +3669,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3687,10 +3687,10 @@
     background: rgba(255, 255, 255, 0.02);
   }
   .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3854,12 +3854,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3988,11 +3988,11 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -4531,7 +4531,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4541,7 +4541,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4603,10 +4603,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4614,7 +4614,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-stepper .p-stepper-nav {
     display: flex;
@@ -4728,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: solid rgba(255, 255, 255, 0.12);
@@ -5132,7 +5194,7 @@
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5153,7 +5215,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5295,7 +5357,7 @@
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5335,7 +5397,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5396,7 +5458,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5446,7 +5508,7 @@
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5533,7 +5595,7 @@
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5568,7 +5630,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5648,7 +5710,7 @@
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5676,7 +5738,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5705,7 +5767,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5771,7 +5833,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5821,7 +5883,7 @@
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
       color: rgba(255, 255, 255, 0.87);
-      background: hsla(0deg, 0%, 100%, 0.12);
+      background: hsla(0, 0%, 100%, 0.12);
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
       color: rgba(255, 255, 255, 0.87);
@@ -5982,7 +6044,7 @@
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6006,7 +6068,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6083,7 +6145,7 @@
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6124,7 +6186,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -6174,7 +6236,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -6280,7 +6342,7 @@
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6301,7 +6363,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6692,7 +6754,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6718,7 +6780,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 1rem;
@@ -7020,8 +7082,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7031,13 +7093,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7266,7 +7328,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     background: #1e1e1e;
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7316,7 +7378,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7343,8 +7405,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7354,13 +7416,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7421,8 +7483,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7432,13 +7494,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7480,7 +7542,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7499,7 +7561,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7508,7 +7570,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7554,8 +7616,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7565,13 +7627,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7641,8 +7703,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7652,13 +7714,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7704,20 +7766,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
   }
   .p-input-filled .p-inputtext:enabled:focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7737,8 +7799,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7883,8 +7945,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7894,13 +7956,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -8051,7 +8113,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8060,7 +8122,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8317,8 +8379,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8328,13 +8390,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index b3bbec11b5..562e4e64e5 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -659,6 +659,7 @@
     border: 1px solid rgba(0, 0, 0, 0.38);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #673AB7;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 1rem 1rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #673AB7;
     background: rgba(103, 58, 183, 0.12);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
     background: rgba(0, 0, 0, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f5f5f5;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #ececec;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #dcdcdc;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #b00020;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
     color: rgba(0, 0, 0, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #b00020;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 1rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 3rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 3rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 1rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 3rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 3rem;
   }
@@ -2094,6 +2084,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 2rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 1rem 1rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -4617,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -4626,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: solid rgba(0, 0, 0, 0.12);
@@ -8087,6 +8251,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #673AB7;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index a63a95d3d5..82f3d31c23 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -4728,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: solid rgba(0, 0, 0, 0.12);
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index f3f5f02562..2699cf1b7e 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -659,6 +659,7 @@
     border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #CE93D8;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 0.75rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #CE93D8;
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: hsla(0, 0%, 100%, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.75rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: hsla(0, 0%, 100%, 0.06);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0, 0%, 100%, 0.08);
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0, 0%, 100%, 0.1);
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #f44435;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
     color: rgba(255, 255, 255, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #f44435;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2094,6 +2084,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -4617,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: hsla(0, 0%, 100%, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
@@ -4626,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: solid rgba(255, 255, 255, 0.12);
@@ -8087,6 +8251,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index a1beb60c86..4990ea9bc3 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -241,7 +241,7 @@
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
   color: rgba(255, 255, 255, 0.87);
-  background: hsla(0deg, 0%, 100%, 0.04);
+  background: hsla(0, 0%, 100%, 0.04);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 0.75rem 0.75rem;
@@ -419,7 +419,7 @@
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
     color: #9FA8DA;
@@ -445,7 +445,7 @@
     padding: 0.5rem;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     border-radius: 4px;
   }
   .p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
     background: #1e1e1e;
     font-weight: 500;
     margin: 0;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
   }
@@ -546,13 +546,13 @@
   }
   .p-datepicker .p-datepicker-buttonbar {
     padding: 0.75rem 0;
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-datepicker .p-datepicker-buttonbar .p-button {
     width: auto;
   }
   .p-datepicker .p-timepicker {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     padding: 0.5rem;
   }
   .p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
     background: rgba(159, 168, 218, 0.16);
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-    border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     padding-top: 0;
@@ -656,7 +656,7 @@
   }
   .p-cascadeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -671,13 +671,13 @@
     border-color: #9FA8DA;
   }
   .p-cascadeselect.p-variant-filled {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-cascadeselect.p-variant-filled:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-cascadeselect.p-variant-filled:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
@@ -734,7 +734,7 @@
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
     padding: 0.75rem 0.75rem;
@@ -772,11 +772,11 @@
     height: 18px;
   }
   .p-checkbox .p-checkbox-input {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 4px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -795,7 +795,7 @@
     height: 14px;
   }
   .p-checkbox .p-checkbox-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 18px;
     height: 18px;
@@ -835,25 +835,25 @@
     border-color: #f44435;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -873,13 +873,13 @@
     align-items: center;
   }
   .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
     background: #9FA8DA;
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     background: #9FA8DA;
@@ -939,12 +939,12 @@
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
   .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-    background: hsla(0deg, 0%, 100%, 0.24);
+    background: hsla(0, 0%, 100%, 0.24);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1059,7 +1059,7 @@
   }
   .p-dropdown {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1074,13 +1074,13 @@
     border-color: #9FA8DA;
   }
   .p-dropdown.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
     background-color: transparent;
@@ -1122,7 +1122,7 @@
   }
   .p-dropdown-panel .p-dropdown-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1164,7 +1164,7 @@
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
     position: relative;
@@ -1186,14 +1186,14 @@
   .p-inputgroup-addon {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
-    border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
     padding: 0.75rem 0.75rem;
     min-width: 2.357rem;
   }
   .p-inputgroup-addon:last-child {
-    border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
   }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1289,7 +1289,7 @@
     border-radius: 0.5rem;
   }
   .p-inputswitch .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 0.5rem;
     outline-color: transparent;
@@ -1311,7 +1311,7 @@
     transform: translateX(1.5rem);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
   }
   .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
     background: rgba(159, 168, 218, 0.5);
@@ -1331,7 +1331,7 @@
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     padding: 0.75rem 0.75rem;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
@@ -1350,13 +1350,13 @@
     border-color: #f44435;
   }
   .p-inputtext.p-variant-filled {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-inputtext.p-variant-filled:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-inputtext.p-variant-filled:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
@@ -1396,13 +1396,13 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-input-filled .p-inputtext {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-inputtext:enabled:focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-inputtext-sm .p-inputtext {
     font-size: 0.875rem;
@@ -1471,14 +1471,14 @@
   .p-listbox {
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #1e1e1e;
     margin: 0;
@@ -1531,15 +1531,15 @@
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-listbox.p-focus {
     outline: 0 none;
@@ -1571,7 +1571,7 @@
   }
   .p-mention-panel .p-mention-items .p-mention-item:hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
     color: #9FA8DA;
@@ -1667,7 +1667,7 @@
   }
   .p-multiselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
     outline-color: transparent;
@@ -1682,13 +1682,13 @@
     border-color: #9FA8DA;
   }
   .p-multiselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1700,7 +1700,7 @@
   .p-multiselect.p-multiselect-chip .p-multiselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -1729,7 +1729,7 @@
   }
   .p-multiselect-panel .p-multiselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -1793,7 +1793,7 @@
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
@@ -1875,11 +1875,11 @@
     opacity: 0;
     z-index: 1;
     outline: 0 none;
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     border-radius: 50%;
   }
   .p-radiobutton .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
     background: #1e1e1e;
     width: 20px;
     height: 20px;
@@ -1918,25 +1918,25 @@
     border-color: #f44435;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.06);
+    background-color: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
     background: #121212;
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
     background: #121212;
@@ -2028,7 +2028,7 @@
     border-color: #f44435;
   }
   .p-slider {
-    background: hsla(0deg, 0%, 100%, 0.3);
+    background: hsla(0, 0%, 100%, 0.3);
     border: 0 none;
     border-radius: 4px;
   }
@@ -2068,7 +2068,7 @@
   }
   .p-treeselect {
     background: #1e1e1e;
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
   }
@@ -2085,13 +2085,13 @@
     padding-right: 1.75rem;
   }
   .p-treeselect.p-variant-filled {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-treeselect.p-variant-filled:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
@@ -2103,7 +2103,7 @@
   .p-treeselect.p-treeselect-chip .p-treeselect-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
@@ -2133,7 +2133,7 @@
   }
   .p-treeselect-panel .p-treeselect-header {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -2184,13 +2184,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect {
-    background: hsla(0deg, 0%, 100%, 0.06);
+    background: hsla(0, 0%, 100%, 0.06);
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
   }
   .p-togglebutton {
     position: relative;
@@ -3583,7 +3583,7 @@
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
     outline: 0 none;
@@ -3591,12 +3591,12 @@
     box-shadow: none;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-column-filter-overlay-menu .p-column-filter-operator {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     background: #2b2b2b;
     margin: 0;
@@ -3605,7 +3605,7 @@
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint {
     padding: 0.75rem;
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
@@ -3669,12 +3669,12 @@
     transition: transform 0.2s, none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #9FA8DA;
@@ -3687,10 +3687,10 @@
     background: rgba(255, 255, 255, 0.02);
   }
   .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3854,12 +3854,12 @@
     transition: transform 0.2s, none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #9FA8DA;
@@ -3988,11 +3988,11 @@
     color: #9FA8DA;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
     color: rgba(255, 255, 255, 0.87);
   }
   .p-tree .p-tree-filter-container {
@@ -4531,7 +4531,7 @@
     padding: 0 1.25rem;
   }
   .p-divider.p-divider-horizontal:before {
-    border-top: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-horizontal .p-divider-content {
     padding: 0 0.5rem;
@@ -4541,7 +4541,7 @@
     padding: 1.25rem 0;
   }
   .p-divider.p-divider-vertical:before {
-    border-left: 1px hsla(0deg, 0%, 100%, 0.12);
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
   }
   .p-divider.p-divider-vertical .p-divider-content {
     padding: 0.5rem 0;
@@ -4603,10 +4603,10 @@
   }
   .p-splitter .p-splitter-gutter {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    background: hsla(0deg, 0%, 100%, 0.04);
+    background: hsla(0, 0%, 100%, 0.04);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -4614,7 +4614,7 @@
     box-shadow: none;
   }
   .p-splitter .p-splitter-gutter-resizing {
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-stepper .p-stepper-nav {
     display: flex;
@@ -4728,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: solid rgba(255, 255, 255, 0.12);
@@ -5132,7 +5194,7 @@
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5153,7 +5215,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-contextmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-contextmenu .p-submenu-icon {
@@ -5295,7 +5357,7 @@
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5335,7 +5397,7 @@
     width: 12.5rem;
   }
   .p-megamenu .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-vertical {
@@ -5396,7 +5458,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5446,7 +5508,7 @@
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5533,7 +5595,7 @@
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5568,7 +5630,7 @@
     border-top-left-radius: 0;
   }
   .p-menu .p-menu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar {
@@ -5648,7 +5710,7 @@
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -5676,7 +5738,7 @@
     width: 12.5rem;
   }
   .p-menubar .p-submenu-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar .p-submenu-list .p-submenu-icon {
@@ -5705,7 +5767,7 @@
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5771,7 +5833,7 @@
       width: 100%;
     }
     .p-menubar .p-menubar-root-list .p-menu-separator {
-      border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+      border-top: 1px solid hsla(0, 0%, 100%, 0.12);
       margin: 0.5rem 0;
     }
     .p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5821,7 +5883,7 @@
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
       color: rgba(255, 255, 255, 0.87);
-      background: hsla(0deg, 0%, 100%, 0.12);
+      background: hsla(0, 0%, 100%, 0.12);
     }
     .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
       color: rgba(255, 255, 255, 0.87);
@@ -5982,7 +6044,7 @@
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6006,7 +6068,7 @@
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6083,7 +6145,7 @@
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6124,7 +6186,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-slidemenu .p-slidemenu-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-slidemenu .p-slidemenu-icon {
@@ -6174,7 +6236,7 @@
   }
   .p-steps .p-steps-item:before {
     content: " ";
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     width: 100%;
     top: 50%;
     left: 0;
@@ -6280,7 +6342,7 @@
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
     color: rgba(255, 255, 255, 0.87);
-    background: hsla(0deg, 0%, 100%, 0.12);
+    background: hsla(0, 0%, 100%, 0.12);
   }
   .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
     color: rgba(255, 255, 255, 0.87);
@@ -6301,7 +6363,7 @@
     color: rgba(255, 255, 255, 0.6);
   }
   .p-tieredmenu .p-menuitem-separator {
-    border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
     margin: 0.5rem 0;
   }
   .p-tieredmenu .p-submenu-icon {
@@ -6692,7 +6754,7 @@
     height: 1.5rem;
   }
   .p-avatar {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     border-radius: 4px;
   }
   .p-avatar.p-avatar-lg {
@@ -6718,7 +6780,7 @@
     border: 2px solid #1e1e1e;
   }
   .p-chip {
-    background-color: hsla(0deg, 0%, 100%, 0.12);
+    background-color: hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
     padding: 0 0.75rem;
@@ -7020,8 +7082,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7031,13 +7093,13 @@
     background: transparent;
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7266,7 +7328,7 @@
     background-color: rgba(255, 255, 255, 0.16);
   }
   .p-calendar-w-btn {
-    border: 1px solid hsla(0deg, 0%, 100%, 0.3);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
     background: #1e1e1e;
     border-radius: 4px;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7316,7 +7378,7 @@
     order: 3;
   }
   .p-datepicker table th {
-    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
     color: rgba(255, 255, 255, 0.38);
     font-weight: 400;
     font-size: 0.875rem;
@@ -7343,8 +7405,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7354,13 +7416,13 @@
     background: transparent;
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7421,8 +7483,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7432,13 +7494,13 @@
     background: transparent;
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7480,7 +7542,7 @@
     border-radius: 2px;
   }
   .p-checkbox .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
     border-radius: 2px;
     position: relative;
   }
@@ -7499,7 +7561,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7508,7 +7570,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    border-color: hsla(0deg, 0%, 100%, 0.7);
+    border-color: hsla(0, 0%, 100%, 0.7);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7554,8 +7616,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7565,13 +7627,13 @@
     background: transparent;
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7641,8 +7703,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7652,13 +7714,13 @@
     background: transparent;
   }
   .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7704,20 +7766,20 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
   }
   .p-input-filled .p-inputtext:enabled:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
   }
   .p-input-filled .p-inputtext:enabled:focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -7737,8 +7799,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7883,8 +7945,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -7894,13 +7956,13 @@
     background: transparent;
   }
   .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
@@ -8051,7 +8113,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8060,7 +8122,7 @@
     box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    border: 2px solid hsla(0deg, 0%, 100%, 0.7);
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
     box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8317,8 +8379,8 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: 1px solid transparent;
-    background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
-    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
     background-size: 0 2px, 100% 1px;
     background-position: 50% 100%, 50% 100%;
     background-origin: border-box;
@@ -8328,13 +8390,13 @@
     background: transparent;
   }
   .p-input-filled .p-treeselect:not(.p-disabled):hover {
-    background-color: hsla(0deg, 0%, 100%, 0.08);
+    background-color: hsla(0, 0%, 100%, 0.08);
     border-color: transparent;
     background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
   }
   .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
     box-shadow: none;
-    background-color: hsla(0deg, 0%, 100%, 0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     border-color: transparent;
     background-size: 100% 2px, 100% 1px;
   }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 6c46aa41f6..973f5719bf 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -619,10 +619,10 @@
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
     padding-left: 0;
+    border-left: 0 none;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
-    border-left: 0 none;
   }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -659,6 +659,7 @@
     border: 1px solid rgba(0, 0, 0, 0.38);
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-cascadeselect:not(.p-disabled):hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
     box-shadow: none;
     border-color: #673AB7;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-cascadeselect .p-cascadeselect-label {
     background: transparent;
     border: 0 none;
@@ -709,38 +719,29 @@
     transition: none;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-    padding: 0.75rem 0.75rem;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
   }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
     color: #673AB7;
     background: rgba(103, 58, 183, 0.12);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
     background: rgba(0, 0, 0, 0.04);
   }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.75rem;
+  }
   .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-  .p-input-filled .p-cascadeselect {
-    background: #f5f5f5;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-    background-color: #ececec;
-  }
-  .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-    background-color: #dcdcdc;
-  }
   .p-checkbox {
     position: relative;
     display: inline-flex;
@@ -1334,6 +1335,7 @@
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     appearance: none;
     border-radius: 4px;
+    outline-color: transparent;
   }
   .p-inputtext:enabled:hover {
     border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
   .p-inputtext.p-invalid.p-component {
     border-color: #b00020;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
     color: rgba(0, 0, 0, 0.6);
     transition-duration: 0.2s;
   }
-  .p-float-label > label.p-error {
+  .p-float-label > .p-invalid + label {
     color: #b00020;
   }
-  .p-input-icon-left > i:first-of-type,
-  .p-input-icon-left > svg:first-of-type,
-  .p-input-icon-left > .p-input-prefix {
-    left: 0.75rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-left > .p-inputtext {
-    padding-left: 2.5rem;
-  }
-  .p-input-icon-left.p-float-label > label {
-    left: 2.5rem;
-  }
-  .p-input-icon-right > i:last-of-type,
-  .p-input-icon-right > svg:last-of-type,
-  .p-input-icon-right > .p-input-suffix {
-    right: 0.75rem;
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-  }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
   }
@@ -2094,6 +2084,15 @@
   .p-treeselect.p-treeselect-clearable .p-treeselect-label {
     padding-right: 1.75rem;
   }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
     transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -4617,6 +4616,109 @@
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
@@ -4626,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: solid rgba(0, 0, 0, 0.12);
@@ -8087,6 +8251,24 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #673AB7;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
   .p-steps {
     padding: 1rem 0;
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 42c00049c3..d851bdb639 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -4728,6 +4728,68 @@
     outline-offset: 0;
     box-shadow: none;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: solid rgba(0, 0, 0, 0.12);
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 9ade6b171c..dfb5a34db3 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -4682,6 +4682,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #c0d0e0;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 2px solid #e5e9f0;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 0a102933ab..862928e335 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #90c9f5;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #dee2e6;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 76348dd30c..4ad8388007 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -4635,6 +4635,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index aefcb692e9..e60daec707 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 18a1ccb348..0dd4617d29 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -4644,6 +4644,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #8dcdff;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 1f52f3d164..8181032451 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -4635,6 +4635,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #e4e9ec;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 0 none;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index e074ed953e..3d4c9f5062 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a6d5fa;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #dee2e6;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index e448b16e51..6beacb008a 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #b7e0b8;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #dee2e6;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index a55d5b2e0a..98346ced96 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #ffe69c;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #dee2e6;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 3043f87dc3..343b1e63c1 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -10,7 +10,7 @@
   --text-color: rgba(255, 255, 255, 0.87);
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #b19df7;
-  --primary-color-text: hsl(234deg, 15%, 13%);
+  --primary-color-text: hsl(234, 15%, 13%);
   --surface-0: #1d1e27;
   --surface-50: #34343d;
   --surface-100: #4a4b52;
@@ -786,7 +786,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -805,7 +805,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -822,7 +822,7 @@
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
     outline: 0 none;
@@ -1891,7 +1891,7 @@
     width: 12px;
     height: 12px;
     transition-duration: 0.2s;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-radiobutton.p-highlight .p-radiobutton-box {
     border-color: #b19df7;
@@ -1905,7 +1905,7 @@
     background: #9378f4;
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
     outline: 0 none;
@@ -2008,20 +2008,20 @@
   .p-selectbutton .p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-selectbutton.p-invalid > .p-button {
     border-color: #ff9a9a;
@@ -2232,11 +2232,11 @@
   .p-togglebutton.p-highlight .p-button {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton.p-highlight .p-button .p-button-icon-left,
   .p-togglebutton.p-highlight .p-button .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
     background: rgba(255, 255, 255, 0.03);
@@ -2250,11 +2250,11 @@
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
     outline: 0 none;
@@ -2266,7 +2266,7 @@
     border-color: #ff9a9a;
   }
   .p-button {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     background: #b19df7;
     border: 1px solid #b19df7;
     padding: 0.75rem 1.25rem;
@@ -2276,12 +2276,12 @@
   }
   .p-button:not(:disabled):hover {
     background: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     border-color: #a28af5;
   }
   .p-button:not(:disabled):active {
     background: #9378f4;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     border-color: #9378f4;
   }
   .p-button.p-button-outlined {
@@ -2363,7 +2363,7 @@
     height: 1rem;
     line-height: 1rem;
     color: #b19df7;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-button.p-button-raised {
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
@@ -4365,7 +4365,7 @@
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
-    background-color: hsl(234deg, 15%, 13%);
+    background-color: hsl(234, 15%, 13%);
   }
   .p-timeline .p-timeline-event-connector {
     background-color: #3e4053;
@@ -4702,6 +4702,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e0d8fc;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #3e4053;
@@ -4905,7 +4967,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     width: 2rem;
     height: 2rem;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -4916,7 +4978,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close:enabled:hover {
     background: #a28af5;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
   }
   .p-overlaypanel:after {
     border: solid transparent;
@@ -6730,7 +6792,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
@@ -6844,7 +6906,7 @@
     background: #b19df7;
   }
   .p-progressbar .p-progressbar-label {
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     line-height: 1.5rem;
   }
   .p-terminal {
@@ -6860,7 +6922,7 @@
   }
   .p-badge {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;
@@ -6901,7 +6963,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234deg, 15%, 13%);
+    color: hsl(234, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 7895cbeeda..c03ecef86d 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -4702,6 +4702,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #c7bbfa;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #dfe7ef;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index c43100d430..2349f6bffb 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -4688,6 +4688,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #6366f1;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #e5e7eb;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 07c4243d02..8a29843612 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #304562;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 66c67999a7..cc8679db73 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #304562;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index e67b6dd8a4..9031897ea2 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #304562;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 49f6a443aa..a0f2b3d145 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -4734,6 +4734,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #9eade6;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #263238;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 5befd15f69..452ea3e38a 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -4734,6 +4734,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 0.1rem #bbc7ee;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: #ffffff;
     border: 1px solid #ebebeb;