diff --git a/react-ui/.gitignore b/react-ui/.gitignore
old mode 100644
new mode 100755
diff --git a/react-ui/.prettierrc b/react-ui/.prettierrc
old mode 100644
new mode 100755
index 5438d4a98727965b66613cddb34065f69b3615af..7ed67eff4d2578f56329ecd9ee767f0e8a9cedbb
--- a/react-ui/.prettierrc
+++ b/react-ui/.prettierrc
@@ -3,5 +3,5 @@
     "singleQuote": true,
     "trailingComma": "es5",
     "tabWidth": 4,
-    "printWidth": 100
+    "printWidth": 80
 }
diff --git a/react-ui/README.md b/react-ui/README.md
old mode 100644
new mode 100755
diff --git a/react-ui/assets/logo.svg b/react-ui/assets/logo.svg
old mode 100644
new mode 100755
diff --git a/react-ui/dist/assets/logo-Bj6KFr1z.svg b/react-ui/dist/assets/logo-Bj6KFr1z.svg
old mode 100644
new mode 100755
diff --git a/react-ui/dist/favicon.ico b/react-ui/dist/favicon.ico
old mode 100644
new mode 100755
diff --git a/react-ui/dist/fonts/Inter.ttf b/react-ui/dist/fonts/Inter.ttf
old mode 100644
new mode 100755
diff --git a/react-ui/dist/index.html b/react-ui/dist/index.html
old mode 100644
new mode 100755
diff --git a/react-ui/dist/logo.png b/react-ui/dist/logo.png
old mode 100644
new mode 100755
diff --git a/react-ui/dist/logo.svg b/react-ui/dist/logo.svg
old mode 100644
new mode 100755
diff --git a/react-ui/dist/manifest.json b/react-ui/dist/manifest.json
old mode 100644
new mode 100755
diff --git a/react-ui/dist/robots.txt b/react-ui/dist/robots.txt
old mode 100644
new mode 100755
diff --git a/react-ui/docker/wasm/Dockerfile b/react-ui/docker/wasm/Dockerfile
old mode 100644
new mode 100755
diff --git a/react-ui/docs/README.md b/react-ui/docs/README.md
old mode 100644
new mode 100755
diff --git a/react-ui/docs/design.md b/react-ui/docs/design.md
old mode 100644
new mode 100755
diff --git a/react-ui/docs/development.md b/react-ui/docs/development.md
old mode 100644
new mode 100755
diff --git a/react-ui/docs/routine_pattern.md b/react-ui/docs/routine_pattern.md
old mode 100644
new mode 100755
diff --git a/react-ui/docs/routine_pattern.png b/react-ui/docs/routine_pattern.png
old mode 100644
new mode 100755
diff --git a/react-ui/eslint.config.js b/react-ui/eslint.config.js
old mode 100644
new mode 100755
diff --git a/react-ui/index.html b/react-ui/index.html
old mode 100644
new mode 100755
diff --git a/react-ui/package.json b/react-ui/package.json
old mode 100644
new mode 100755
index 439250704b056b81d9be27a973f18adfef03f485..57c152ac44a6c74831a9c557480329db170957ad
--- a/react-ui/package.json
+++ b/react-ui/package.json
@@ -79,6 +79,7 @@
         "globals": "^15.9.0",
         "prettier": "^3.3.3",
         "sass": "1.77.6",
+        "sass-embedded": "^1.80.6",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.0.1",
         "vite": "^5.4.9",
diff --git a/react-ui/public/favicon.ico b/react-ui/public/favicon.ico
old mode 100644
new mode 100755
diff --git a/react-ui/public/fonts/Inter.ttf b/react-ui/public/fonts/Inter.ttf
old mode 100644
new mode 100755
diff --git a/react-ui/public/logo.png b/react-ui/public/logo.png
old mode 100644
new mode 100755
diff --git a/react-ui/public/logo.svg b/react-ui/public/logo.svg
old mode 100644
new mode 100755
diff --git a/react-ui/public/manifest.json b/react-ui/public/manifest.json
old mode 100644
new mode 100755
diff --git a/react-ui/public/robots.txt b/react-ui/public/robots.txt
old mode 100644
new mode 100755
diff --git a/react-ui/scripts/openapi-config.json b/react-ui/scripts/openapi-config.json
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/index.module.ts b/react-ui/src/components/devices/index.module.ts
new file mode 100755
index 0000000000000000000000000000000000000000..5ef9299bda082cc2a810e86daa20372a9c11cfce
--- /dev/null
+++ b/react-ui/src/components/devices/index.module.ts
@@ -0,0 +1,5 @@
+import { fetchSelectedMneThunk } from './routines/mne.routine'
+
+const routines = {
+    fetchSelectedMneThunk: fetchSelectedMneThunk,
+}
diff --git a/react-ui/src/components/devices/reducer/device.reducer.ts b/react-ui/src/components/devices/reducer/device.reducer.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/routines/device.routine.ts b/react-ui/src/components/devices/routines/device.routine.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/routines/index.ts b/react-ui/src/components/devices/routines/index.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/routines/mne.routine.ts b/react-ui/src/components/devices/routines/mne.routine.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/view/device.scss b/react-ui/src/components/devices/view/device.scss
old mode 100644
new mode 100755
index afebc6fe5b971eb35d9b4f62b8800017599b45e3..540cd4d01d67ba3e11b5e8d18c654dceb160ee95
--- a/react-ui/src/components/devices/view/device.scss
+++ b/react-ui/src/components/devices/view/device.scss
@@ -1,26 +1,27 @@
-@import '/src/shared/style/colors.scss';
+@import "/src/shared/style/colors.scss";
 
-thead {
-    font-size: 0.9em;
-}
-
-tr:hover > td {
-    background-color: lighten(map-get($theme-colors, primary), 30%) !important;
-    cursor: pointer;
-}
+.device-table {
+    & thead {
+        font-size: 0.9em;
+    }
 
-tr.active > td {
-    background-color: lighten(map-get($theme-colors, primary), 5%) !important;
+    & tr:hover > td {
+        background-color: map-get($theme-colors, "primary::hover");
+        cursor: pointer;
+    }
 
-    color: map-get($theme-colors, 'black') !important;
-}
+    & tr.active > td {
+        background-color: lighten(map-get($theme-colors, primary), 5%) !important;
+        color: map-get($theme-colors, "black") !important;
+    }
 
-tr > td {
-    color: map-get($theme-colors, 'dark') !important;
-}
+    & tr > td {
+        color: map-get($theme-colors, "dark") !important;
+    }
 
-tr:nth-child(2n + 1) > td {
-    background-color: lighten(map-get($theme-colors, primary), 38%);
+    & tr:nth-child(2n + 1) > td {
+        background-color: lighten(map-get($theme-colors, primary), 38%);
+    }
 }
 
 .c-box {
diff --git a/react-ui/src/components/devices/view/device.view.table.tsx b/react-ui/src/components/devices/view/device.view.table.tsx
old mode 100644
new mode 100755
index 933b50a8af6712e785058fa90c9aaa7fcbc98cc1..312caab60d858b0931e50154c2c6e796e0405e47
--- a/react-ui/src/components/devices/view/device.view.table.tsx
+++ b/react-ui/src/components/devices/view/device.view.table.tsx
@@ -42,7 +42,7 @@ export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) =
 
 
     return (
-        <Table striped responsive>
+        <Table striped responsive className="device-table">
             <thead>
                 <tr>
                     <th>{t('device.table.header.name')}</th>
diff --git a/react-ui/src/components/devices/view/device.view.tabs.tsx b/react-ui/src/components/devices/view/device.view.tabs.tsx
old mode 100644
new mode 100755
index 05e854651e192dfad0c3bd56abdebab3795ea812..d492c90b7453caa99a48d00a63cbaca2642b5722
--- a/react-ui/src/components/devices/view/device.view.tabs.tsx
+++ b/react-ui/src/components/devices/view/device.view.tabs.tsx
@@ -1,5 +1,5 @@
 import { useAppSelector } from "@hooks";
-import ReactJson from 'react-json-view';
+import { JsonViewer } from "../../../shared/components/json_viewer/view/json_viewer.view";
 import { useDeviceTabsViewModel } from "../view_model/device.tabs.viewmodel";
 
 export enum DeviceViewTabValues {
@@ -9,7 +9,7 @@ export enum DeviceViewTabValues {
 
 export const DeviceViewTabs = (activeTab: DeviceViewTabValues) => {
     const { selectedDevice } = useAppSelector(state => state.device);
-    const { yang } = useDeviceTabsViewModel();
+    const { jsonYang } = useDeviceTabsViewModel();
 
     const metadataTab = () => {
         return (
@@ -22,8 +22,10 @@ export const DeviceViewTabs = (activeTab: DeviceViewTabValues) => {
     const yangModelTab = () => {
         return (
             <>
-                {selectedDevice?.json &&
-                    <ReactJson src={selectedDevice.json} name={false} collapsed={false} quotesOnKeys={false} />
+                {jsonYang &&
+                    <JsonViewer json={jsonYang} />
+
+                    //<ReactJson src={selectedDevice.json} name={false} collapsed={true} quotesOnKeys={false} />
                 }
             </>
         );
diff --git a/react-ui/src/components/devices/view/device.view.tsx b/react-ui/src/components/devices/view/device.view.tsx
old mode 100644
new mode 100755
index 0d04b959c6be3f26b64b819a25521e3f99b72ebc..2602463bba8e51a8be7aff14b50008d0c9ad32ce
--- a/react-ui/src/components/devices/view/device.view.tsx
+++ b/react-ui/src/components/devices/view/device.view.tsx
@@ -13,34 +13,49 @@ function DeviceView() {
 
     return (
         <div className='m-4 pt-4'>
-            <Container className="bg-white rounded c-box" fluid>
+            <Container fluid>
                 <Row>
-                    <Col sm={7} className='border-right mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
-                    <Col sm={5} className='mt-4'>
-                        <Nav className='justify-content-around'>
-                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
-                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
-                        </Nav>
-                    </Col>
-                </Row>
+                    <Col sm={5}>
+                        <Container className='bg-white rounded c-box'>
+                            <Row>
+                                <Col sm={12} className='mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
+                            </Row>
 
-                <Row className='align-items-center'>
-                    <Col sm={3}>
-                        <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
-                            <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
-                        </Form.Group>
-                    </Col>
-                    <Col sm={{ span: 2, offset: 2 }} className='border-right pt-2'>
-                        <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
-                    </Col>
-                </Row>
+                            <Row className='align-items-center'>
+                                <Col sm={6}>
+                                    <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
+                                        <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
+                                    </Form.Group>
+                                </Col>
+                                <Col sm={{ span: 3, offset: 3 }} className='pt-2'>
+                                    <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
+                                </Col>
+                            </Row>
 
-                <Row className='align-items-start'>
-                    <Col sm={7} className='pt-2 border-right'>
-                        {DeviceViewTable(searchRef)}
+                            <Row className='align-items-start'>
+                                <Col sm={12} className='pt-2'>
+                                    {DeviceViewTable(searchRef)}
+                                </Col>
+                            </Row>
+                        </Container>
                     </Col>
-                    <Col sm={5} className='pt-2'>
-                        {DeviceViewTabs(activeTab)}
+                    <Col sm={7}>
+                        <Container className='bg-white rounded c-box'>
+                            <Row>
+                                <Col sm={12} className='mt-4'>
+                                    <Nav className='justify-content-around'>
+                                        <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
+                                        <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
+                                    </Nav>
+                                </Col>
+                            </Row>
+
+                            <Row className='align-items-start'>
+                                <Col sm={12} className='pt-2'>
+                                    {DeviceViewTabs(activeTab)}
+                                </Col>
+                            </Row>
+                        </Container>
                     </Col>
                 </Row>
             </Container>
diff --git a/react-ui/src/components/devices/view_model/device.table.viewmodel.ts b/react-ui/src/components/devices/view_model/device.table.viewmodel.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/devices/view_model/device.tabs.viewmodel.ts b/react-ui/src/components/devices/view_model/device.tabs.viewmodel.ts
old mode 100644
new mode 100755
index e15f7c72126187fba97daa036ce424dc9aa722be..4a60567b68e78e571577d7f74fb0729df47008cb
--- a/react-ui/src/components/devices/view_model/device.tabs.viewmodel.ts
+++ b/react-ui/src/components/devices/view_model/device.tabs.viewmodel.ts
@@ -1,6 +1,5 @@
 import { useAppSelector } from '@hooks'
-import { useYangParser } from '@utils/yang_parser/yang_parser'
-import { useEffect, useRef } from 'react'
+import { useMemo } from 'react'
 
 export enum DeviceViewTabValues {
     METADATA = 'metadata',
@@ -9,24 +8,25 @@ export enum DeviceViewTabValues {
 
 export const useDeviceTabsViewModel = () => {
     const { selectedDevice } = useAppSelector((state) => state.device)
-    const { parse } = useYangParser()
-    const yang = useRef<JSON | null>()
 
-    useEffect(() => {
-        const serializedYang = selectedDevice?.mne?.model
+    const getYangModelJSON = (): JSON | null => {
+        if (!selectedDevice?.json) {
+            return null
+        }
+
+        const key = Object.keys(selectedDevice.json).at(1) as keyof typeof selectedDevice.json
+        const innerJson = selectedDevice.json[key]
 
-        if (!serializedYang) {
-            return
+        if (!(innerJson instanceof Object)) {
+            return null
         }
 
-        console.log(serializedYang)
+        return innerJson
+    }
 
-        // parse(serializedYang).then((json) => {
-        //     yang.current = json
-        // })
-    }, [selectedDevice, parse])
+    const jsonYang = useMemo<JSON | null>(getYangModelJSON, [selectedDevice])
 
     return {
-        yang,
+        jsonYang,
     }
 }
diff --git a/react-ui/src/components/devices/view_model/device.viewmodel.ts b/react-ui/src/components/devices/view_model/device.viewmodel.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/login/layouts/login.layout.tsx b/react-ui/src/components/login/layouts/login.layout.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/login/view/login.scss b/react-ui/src/components/login/view/login.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/components/login/view/login.view.tsx b/react-ui/src/components/login/view/login.view.tsx
old mode 100644
new mode 100755
index 0db0ea2067b3e6ded138236ce03ff6311765fe1e..e393bb4b35f82e32d48517e9b84690b4c0e4c16c
--- a/react-ui/src/components/login/view/login.view.tsx
+++ b/react-ui/src/components/login/view/login.view.tsx
@@ -47,6 +47,7 @@ const LoginView = ({ children }) => {
                                 ref={usernameRef}
                                 required
                                 autoComplete='on'
+                                autoFocus={true}
                             />
                             <Form.Control.Feedback type="invalid">
                                 {t('global.form.empty_field')}
diff --git a/react-ui/src/components/login/viewmodel/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/hooks.ts b/react-ui/src/hooks.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/i18n/config.js b/react-ui/src/i18n/config.js
old mode 100644
new mode 100755
diff --git a/react-ui/src/i18n/locales/de/translations.json b/react-ui/src/i18n/locales/de/translations.json
old mode 100644
new mode 100755
diff --git a/react-ui/src/i18n/locales/en/translations.json b/react-ui/src/i18n/locales/en/translations.json
old mode 100644
new mode 100755
diff --git a/react-ui/src/index.scss b/react-ui/src/index.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/index.tsx b/react-ui/src/index.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/routes.tsx b/react-ui/src/routes.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/setupTests.js b/react-ui/src/setupTests.js
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/api/api.ts b/react-ui/src/shared/api/api.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/components/README.md b/react-ui/src/shared/components/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6694ec6f80f62e45808f1c1d7bc7a08915c42886
--- /dev/null
+++ b/react-ui/src/shared/components/README.md
@@ -0,0 +1,3 @@
+#### Documentation
+
+Shared components are components that will be reused. Each shared component is completely isolated by other components as well as the rest of the project.  
\ No newline at end of file
diff --git a/react-ui/src/shared/components/json_viewer/reducer/json_viewer.reducer.ts b/react-ui/src/shared/components/json_viewer/reducer/json_viewer.reducer.ts
new file mode 100755
index 0000000000000000000000000000000000000000..cdd0351b14300c438493e81e97ad4936efa33527
--- /dev/null
+++ b/react-ui/src/shared/components/json_viewer/reducer/json_viewer.reducer.ts
@@ -0,0 +1,90 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+
+export enum CollapseValues {
+    TOGGLE,
+    FALSE,
+    TRUE
+}
+
+const CollapseActions = {
+    [CollapseValues.TOGGLE]: (collapse: boolean) => { return collapse = !collapse },
+    [CollapseValues.FALSE]: () => { return false },
+    [CollapseValues.TRUE]: () => { return true },
+}
+
+type Identifier = {
+    key: string,
+    nested: number
+}
+
+
+// containg object location and collapsed information
+interface CollapsedItem {
+    identifier: Identifier
+    collapsed: boolean
+}
+
+export interface ReducerState {
+    breadcrumbs: Array<string>,
+
+    /**
+     * Meta container containg identifier of
+     * all non collapsed json objects
+     */
+    collapseContainer: Array<CollapsedItem>
+}
+
+const initialState: ReducerState = {
+    breadcrumbs: [],
+    collapseContainer: [],
+}
+
+export const compareIdentifier = (a: Identifier, b: Identifier): boolean => {
+    return a.key === b.key && a.nested === b.nested;
+}
+
+/**
+ * Every component instance has its own id.
+ * This id is getting used as key to define the respective object container
+ */
+const JsonViewerSlice = createSlice({
+    name: 'json_viewer',
+    initialState,
+    reducers: {
+        toggleCollapse: (state, { payload }: PayloadAction<{ identifier: Identifier, collapse: CollapseValues }>) => {
+            const { identifier, collapse } = payload
+
+            // potentially find already collapsed
+            let i = state.collapseContainer.findIndex(i => compareIdentifier(identifier, i.identifier))
+
+
+            if (i === -1) {
+                console.log('new ' + payload.key + " => " + payload.nested + ' end')
+                // create new collapse
+                const newItem = { identifier, collapsed: true }
+                state.collapseContainer = [...state.collapseContainer, newItem]
+                return;
+            }
+
+            // update nested attribute
+            state.collapseContainer = state.collapseContainer.map((item, index) => {
+                if (index !== i) {
+                    return item
+                }
+
+                return {
+                    ...item,
+                    collapsed: CollapseActions[collapse](item.collapsed)
+                }
+            })
+        },
+        setBreadcrumbs: (state, { payload }: PayloadAction<Array<string>>) => {
+            state.breadcrumbs = payload
+        },
+    },
+})
+
+export const { toggleCollapse, setBreadcrumbs } = JsonViewerSlice.actions
+
+
+export default JsonViewerSlice.reducer
diff --git a/react-ui/src/shared/components/json_viewer/view/json_viewer.scss b/react-ui/src/shared/components/json_viewer/view/json_viewer.scss
new file mode 100755
index 0000000000000000000000000000000000000000..387290aafaa6d2e9b2575a54c77f5dda00dfc25f
--- /dev/null
+++ b/react-ui/src/shared/components/json_viewer/view/json_viewer.scss
@@ -0,0 +1,47 @@
+@import "/src/shared/style/colors.scss";
+
+.list-group-tr {
+    list-style-type: none;
+    margin: 0;
+    padding: 0 0;
+}
+
+.list-item-td {
+    & > td {
+        color: lighten(map-get($map: $theme-colors, $key: "black"), 20%) !important;
+        background-color: white !important;
+        border: 0;
+        padding: 0.1em 0 !important;
+    }
+
+    & > td:nth-child(2) {
+        text-align: left;
+    }
+
+    &:hover > td {
+        background-color: map-get($theme-colors, "primary::hover") !important;
+    }
+}
+
+.list-item-td.object {
+    & > td {
+        color: map-get($map: $theme-colors, $key: "black") !important;
+    }
+
+    &:not(:first-child) > td {
+        padding-top: 0.5em !important;
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.list-item-td:not(.object) > td:first-child {
+    border-left: 2px solid black;
+    padding-left: 0.2em !important;
+}
+
+td .icon {
+    font-size: 0.8em;
+}
diff --git a/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx b/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx
new file mode 100755
index 0000000000000000000000000000000000000000..39bdb8738a1cf605c55bbdbed87ade432a6a037e
--- /dev/null
+++ b/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx
@@ -0,0 +1,91 @@
+import { faAlignRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useAppDispatch } from "@hooks"
+import React, { Suspense, useMemo } from "react"
+import { Table } from "react-bootstrap"
+import { useJsonViewer } from "../viewmodel/json_viewer.viewmodel"
+import './json_viewer.scss'
+
+type JsonViewerProbs = {
+    json: JSON
+}
+
+export const JsonViewer = ({ json }: JsonViewerProbs) => {
+    const { getSubset, breadcrumbs, isCollapsed, collapseable, collapse } = useJsonViewer();
+    const dispatch = useAppDispatch();
+
+    const breadcrumbHTML = useMemo(() => {
+        return (
+            <nav aria-label="breadcrumb">
+                <ol className="breadcrumb">
+                    {breadcrumbs.map(breadcrumb => (
+                        <li key={breadcrumb} className="breadcrumb-item"><a href="#">{breadcrumb}</a></li>
+                    ))}
+                </ol>
+            </nav>
+        )
+    }, [breadcrumbs])
+
+
+    const renderInner = (innerJson: JSON, nested: number = 0): JSX.Element => {
+        return Object.entries(innerJson).map(([key, value]): JSX.Element => {
+            const isObject = value instanceof Object;
+            const readableValue = isObject ? '' : value;
+
+            const collapsed = isCollapsed(key, nested);
+
+            const icon = isObject ?
+                <span className={collapsed ? 'fa-rotate-90' : ''}>&gt;</span> : <FontAwesomeIcon className="icon fa-rotate-180" icon={faAlignRight} size="xs" />
+
+
+            // determine the margin-left: n indent
+            let tabs = 0.0;
+            for (let i = 0; i < nested; i++) {
+                tabs += 0.3;
+            }
+
+            return (
+                <React.Fragment key={`${nested}-${key}`}>
+                    <tr className={"list-item-td " + key + " " + nested + " " + (isObject ? 'object' : '')} onClick={() => { isObject ? collapse(key, nested, value) : null }} >
+                        <td style={{ marginLeft: tabs + 'em' }} className={"d-flex align-items-center "}>{icon}<span>&ensp;{key}</span></td>
+                        <td>{readableValue}</td>
+                        <td className="text-end">comands</td>
+                    </tr >
+                    {isObject && collapsed ? renderInner(value, nested + 1) : ''}
+                </React.Fragment >
+            )
+        })
+    }
+
+
+    const renderJson = (json: JSON): JSX.Element => {
+        return (
+            <Table className="list-group-tr">
+                <tbody>
+                    {
+                        renderInner(json)
+                    }
+                </tbody>
+            </Table >
+        )
+    }
+
+
+    const hierarchyHTML = useMemo(() => {
+        const subset = getSubset(json);
+        return (
+            <>
+                <Suspense fallback={<div>loading...</div>}>
+                    {renderJson(subset)}
+                </Suspense>
+            </>
+        )
+    }, [json, collapseable])
+
+    return (
+        <div>
+            {breadcrumbHTML}
+            {hierarchyHTML}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/react-ui/src/shared/components/json_viewer/viewmodel/json_viewer.viewmodel.tsx b/react-ui/src/shared/components/json_viewer/viewmodel/json_viewer.viewmodel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d7ccd5d5a0dceb88248e3d000e15c80b9c07b522
--- /dev/null
+++ b/react-ui/src/shared/components/json_viewer/viewmodel/json_viewer.viewmodel.tsx
@@ -0,0 +1,55 @@
+import { useAppDispatch, useAppSelector } from "@hooks";
+import { compareIdentifier, toggleCollapse } from "../reducer/json_viewer.reducer";
+
+export enum CollapseValues {
+    TOGGLE,
+    FALSE,
+    TRUE
+}
+
+
+export const useJsonViewer = () => {
+    const { breadcrumbs, collapseContainer } = useAppSelector(state => state.json_viwer)
+    const dispatch = useAppDispatch();
+
+
+    const getSubset = (json: JSON) => {
+        const subset = breadcrumbs.reduce((nested, key) => nested?.[key], json);
+
+        let inner = subset;
+        const keys: Array<string> = [];
+        while (Object.keys(inner).length === 1) {
+            const key: string = Object.keys(inner)[0];
+            inner = inner[key];
+            keys.push(key);
+        }
+
+        //dispatch(setBreadcrumbs([...breadcrumbs, ...keys]))
+        return inner
+    }
+
+    const isCollapsed = (key: string, nested: number): boolean => {
+        const item = collapseContainer
+            .filter(({ identifier, collapsed }) => compareIdentifier(identifier, { key, nested }) && collapsed);
+        return !!item.length;
+    }
+
+    const collapse = (key: string, nested: number, json: Object, collapseState: CollapseValues = CollapseValues.TOGGLE) => {
+        const identifier = { key, nested };
+        dispatch(toggleCollapse({ identifier, collapse: collapseState }))
+
+        const keys = Object.keys(json)
+        if (keys.length === 1) {
+            collapse(keys[0], nested + 1, json[keys[0]], CollapseValues.TRUE)
+        }
+
+    }
+
+    return {
+        getSubset,
+        breadcrumbs,
+        collapseable: collapseContainer,
+        isCollapsed,
+        collapse
+    }
+}
\ No newline at end of file
diff --git a/react-ui/src/shared/helper/coookie.ts b/react-ui/src/shared/helper/coookie.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/icons/icons.ts b/react-ui/src/shared/icons/icons.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/layouts/basic.layout.tsx b/react-ui/src/shared/layouts/basic.layout.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/provider/auth.provider.tsx b/react-ui/src/shared/provider/auth.provider.tsx
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/reducer/routine.reducer.ts b/react-ui/src/shared/reducer/routine.reducer.ts
old mode 100644
new mode 100755
index 4ff9fce92926890791d51525efa59a9ac1a3769b..c7f9a43c1054161d9b91eaa78867b3d73fca41b4
--- a/react-ui/src/shared/reducer/routine.reducer.ts
+++ b/react-ui/src/shared/reducer/routine.reducer.ts
@@ -1,6 +1,5 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { RoutineManager } from '@utils/routine.manager'
-import { REHYDRATE } from 'redux-persist'
 import { RootState } from '../../stores'
 import { startListening } from '../../stores/middleware/listener.middleware'
 import { setToken } from './user.reducer'
@@ -74,19 +73,21 @@ startListening({
 })
 
 // on rehydrate add all persistet routines
-startListening({
-    predicate: ({ type }) => type === REHYDRATE,
-    effect: async (_, listenerApi) => {
-        const { routine } = listenerApi.getState() as RootState
-        for (const [_, thunk] of Object.entries<ThunkEntity>(routine.thunks)) {
-            if (!thunk) {
-                continue
-            }
-            const dto: ThunkEntityDTO = thunk
-            listenerApi.dispatch(addRoutine(dto))
-        }
-    },
-})
+// TODO -> thunk does not have the thunk function object due to its coming from the store that ignores the value.
+// at this point we have to figure out how to get the thunk function out of the "string" name
+// startListening({
+//     predicate: ({ type }) => type === REHYDRATE,
+//     effect: async (_, listenerApi) => {
+//         const { routine } = listenerApi.getState() as RootState
+//         for (const [_, thunk] of Object.entries<ThunkEntity>(routine.thunks)) {
+//             if (!thunk) {
+//                 continue
+//             }
+//             const dto: ThunkEntityDTO = thunk
+//             listenerApi.dispatch(addRoutine(dto))
+//         }
+//     },
+// })
 
 // add new routine
 startListening({
diff --git a/react-ui/src/shared/reducer/user.reducer.ts b/react-ui/src/shared/reducer/user.reducer.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/style/box.scss b/react-ui/src/shared/style/box.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/style/colors.scss b/react-ui/src/shared/style/colors.scss
old mode 100644
new mode 100755
index 80e75f8b74483b5e5b2fa7d3a3a5dac2619f59ea..749af9e8eb8e86b0169c7f2a652dc0bada992181
--- a/react-ui/src/shared/style/colors.scss
+++ b/react-ui/src/shared/style/colors.scss
@@ -1,5 +1,6 @@
 $theme-colors: (
   'primary': #b350e0,
+  'primary::hover': #ddaff3af,
   'bg-primary': #E1E1E1,
   'danger': #ffdcdc,
   'warning': #dbd116,
diff --git a/react-ui/src/shared/style/fonts.scss b/react-ui/src/shared/style/fonts.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/style/index.scss b/react-ui/src/shared/style/index.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/style/toast.scss b/react-ui/src/shared/style/toast.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/style/utils.scss b/react-ui/src/shared/style/utils.scss
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/routine.manager.ts b/react-ui/src/shared/utils/routine.manager.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/.gitignore b/react-ui/src/shared/utils/yang_parser/go/.gitignore
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/assets/wasm_exec.d.ts.generated b/react-ui/src/shared/utils/yang_parser/go/assets/wasm_exec.d.ts.generated
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/go.env b/react-ui/src/shared/utils/yang_parser/go/go.env
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/go.mod b/react-ui/src/shared/utils/yang_parser/go/go.mod
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/go.sum b/react-ui/src/shared/utils/yang_parser/go/go.sum
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/go/yang_parser.go b/react-ui/src/shared/utils/yang_parser/go/yang_parser.go
old mode 100644
new mode 100755
diff --git a/react-ui/src/shared/utils/yang_parser/yang_parser.ts b/react-ui/src/shared/utils/yang_parser/yang_parser.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/stores/api.store.ts b/react-ui/src/stores/api.store.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/stores/index.ts b/react-ui/src/stores/index.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/stores/middleware/api.listener.middleware.ts b/react-ui/src/stores/middleware/api.listener.middleware.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/stores/middleware/listener.middleware.ts b/react-ui/src/stores/middleware/listener.middleware.ts
old mode 100644
new mode 100755
diff --git a/react-ui/src/stores/persist.store.ts b/react-ui/src/stores/persist.store.ts
old mode 100644
new mode 100755
index c97edc465da3b650c1b1c38637d9764f9f55239c..e12467ed9a3533da0cc1574e4fb9809e3858cb57
--- a/react-ui/src/stores/persist.store.ts
+++ b/react-ui/src/stores/persist.store.ts
@@ -1,4 +1,5 @@
 import deviceReducer from '@component/devices/reducer/device.reducer'
+import jsonViewerReducer from '@shared/components/json_viewer/reducer/json_viewer.reducer'
 import routineReducer from '@shared/reducer/routine.reducer'
 import userReducer from '@shared/reducer/user.reducer'
 import { combineReducers } from 'redux'
@@ -17,6 +18,7 @@ const rootReducer = combineReducers({
     user: userReducer,
     device: deviceReducer,
     routine: routineReducer,
+    json_viwer: jsonViewerReducer,
     [emptySplitApi.reducerPath]: emptySplitApi.reducer,
 })
 
diff --git a/react-ui/tsconfig.eslint.json b/react-ui/tsconfig.eslint.json
old mode 100644
new mode 100755
diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json
old mode 100644
new mode 100755
diff --git a/react-ui/tsconfig.node.json b/react-ui/tsconfig.node.json
old mode 100644
new mode 100755
diff --git a/react-ui/vite.config.mjs b/react-ui/vite.config.mjs
old mode 100644
new mode 100755
diff --git a/react-ui/yarn.lock b/react-ui/yarn.lock
old mode 100644
new mode 100755
index a521727444a7650740e01e334be0eae4ba4092d3..5d2d968a7de0924327faef7de1466e23c6cd4f94
--- a/react-ui/yarn.lock
+++ b/react-ui/yarn.lock
@@ -1204,6 +1204,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@bufbuild/protobuf@^2.0.0":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-2.2.2.tgz#1a6d89603fb215dc4d4178052d05b30b83c75402"
+  integrity sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A==
+
 "@csstools/normalize.css@*":
   version "12.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.1.1.tgz#f0ad221b7280f3fc814689786fd9ee092776ef8f"
@@ -3742,6 +3747,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-builder@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-builder/-/buffer-builder-0.2.0.tgz#3322cd307d8296dab1f604618593b261a3fade8f"
+  integrity sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3989,6 +3999,11 @@ colorette@^2.0.10:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+colorjs.io@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.5.2.tgz#63b20139b007591ebc3359932bef84628eb3fcef"
+  integrity sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -9450,6 +9465,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.4.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
@@ -9489,6 +9511,140 @@ sanitize.css@*:
   resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
   integrity sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==
 
+sass-embedded-android-arm64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.80.6.tgz#748df1f7deabea3a81c2c647661d9696090e1b81"
+  integrity sha512-4rC4ZGM/k4ENVjLXnK3JTst8e8FI9MHSol2Fl7dCdYyJ3KLnlt4qL4AEYfU8zq1tcBb7CBOSZVR+CzCKubnXdg==
+
+sass-embedded-android-arm@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-android-arm/-/sass-embedded-android-arm-1.80.6.tgz#1fa2e08e5b2a77709f6e8cb8186c801ee140c0a9"
+  integrity sha512-UeUKMTRsnz4/dh7IzvhjONxa4/jmVp539CHDd8VZOsqg9M3HcNJNIkUzQWbuwZ+nSlWrTuo7Tvn3XlypopCBzw==
+
+sass-embedded-android-ia32@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.80.6.tgz#43674c98454a3adb5da3cca0ba23340128bfbdff"
+  integrity sha512-Lxz2SXE2KdHnynuHF+D6flDvrd55/zaEAWUeka9MxEr6FmR66d8UBOIy5ETwCSUd//S/SE5Jl6oTnHppgD1zNA==
+
+sass-embedded-android-riscv64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.80.6.tgz#59c9d53b1c800b53221d56cf55d9cf84b4418bac"
+  integrity sha512-hKdxY/oOqB+JJhSoBTDM5DJO1j/xtxQgayh2cLCCUx37IQQe3SEdc3V2JFf/4mIo5peaS4cjqwwSATF+l2zaXg==
+
+sass-embedded-android-x64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-android-x64/-/sass-embedded-android-x64-1.80.6.tgz#a06a9f55f904c3ba628a3ae03c244f134f4f2bb1"
+  integrity sha512-Eap2Fi3kTx/rVLBsOnOp5RYPr5+lFjTZ652zR24dmYFe9/sDgasakJIOPjOvD2bRuL9z0uWEY1AXVeeOPeZKrg==
+
+sass-embedded-darwin-arm64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.80.6.tgz#81a7019c92a8c8f76f7f98dfe15f6adfaf621e92"
+  integrity sha512-0mnAx8Vq6Gxj3PQt3imgITfK33hhqrSKpyHSuab71gZZni5opsdtoggq2JawW+1taRFTEZwbZJLKZ0MBDbwCCA==
+
+sass-embedded-darwin-x64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.80.6.tgz#d1b551443930658bfa4cc92ca026d4b22023ce9d"
+  integrity sha512-Ib20yNZFOrJ7YVT+ltoe+JQNKPcRclM3iLAK69XZZYcSeFM/72SCoQBAaVGIpT23dxDp7FXiE4lO602c3xTRwQ==
+
+sass-embedded-linux-arm64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.80.6.tgz#fe6255bbbe55590fb6405f098431b3841221a1b0"
+  integrity sha512-n5r98pBXawrQQKaxIYCMM1zDpnngsqxTkOrmvsYLFiAMCSbR0lWf/7sBB33k/Pm0D6dsbp3jpHilCoQNKI3jIw==
+
+sass-embedded-linux-arm@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.80.6.tgz#a6603b1ec087762a1128e836fd36851050b537b4"
+  integrity sha512-QR0Q6TZox/ThuU2r9c0s3fKCgU2rXAEocpitdgxFp6tta+GsQlMFV3oON2unAa8Bwnuxkmf0YOaK0Oy/TwzkXw==
+
+sass-embedded-linux-ia32@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.80.6.tgz#bedb53348f7e384ceabc9e0158b086045779af07"
+  integrity sha512-O6dWZdcOkryRdDCxVMGOeVowgblpDgVcAuRtZ1F1X7XfbpDriTQm64D+9vVZIrywYSPoJfQMJJ662cr0wUs9IQ==
+
+sass-embedded-linux-musl-arm64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.80.6.tgz#0f0e0bb68c90f0ae920d9a06760241f3f58c7a76"
+  integrity sha512-VeUSHUi3MAsvOlg9QI4X/2j04h1659aE+7qKP/282CYBTrGkjFGSXZhIki9WKWDgIpDiSInRYXfQQRWhPhjCDg==
+
+sass-embedded-linux-musl-arm@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.80.6.tgz#41039f857684ee3470ec9e0d310add5f6f1b694d"
+  integrity sha512-X9FC8s8fvQGRiXc+eATlZ57N44Iq3nNa0M0ugi3ysdJwkaNYvOeS4QzBHKQAaw3QiTqdxTnLUHHVBkyzdCi9pw==
+
+sass-embedded-linux-musl-ia32@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.80.6.tgz#8ff88c78ba3503a19d59c5b8fa172fdea00a67f8"
+  integrity sha512-GqitS2Nab8ah0+wfCqaxW1hnI1piC08FimL6+lM9YWK5DbCOOF82IapbvJOy0feUmd/wNnHmyNTgE9h0zVMFdQ==
+
+sass-embedded-linux-musl-riscv64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.80.6.tgz#aaa086a6ce9718d0fd7cbe584c0f2bf81bef3122"
+  integrity sha512-ySs15z7QSRRQK/aByEEqaJLYW/sTpfynefNPZCtsVNVEzNRwy+DRpxNChtxo+QjKq97ocXETbdG5KLik7QOTJg==
+
+sass-embedded-linux-musl-x64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.80.6.tgz#ea0bb093837be3b6f473b9a1b5d09c4633f8e504"
+  integrity sha512-DzeNqU/SN0mWFznoOH4RtVGcrg3Eoa41pUQhKMtrhNbCmIE1zNDunUiAEVTNpdHJF4nxf7ELUPXWmStM31CbUQ==
+
+sass-embedded-linux-riscv64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.80.6.tgz#bc19c15796a3b3a3d67ea626058b3bab48344b1d"
+  integrity sha512-AyoHJ3icV9xuJjq1YzJqpEj2XfiC/KBkVYTUrCELKiXP0DN1gi/BpUwZNCAgCM3CyEdMef4LQM/ztCYJxYzdyg==
+
+sass-embedded-linux-x64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.80.6.tgz#db076fdf0bc3c1382c8f73c8d396293b893b31ef"
+  integrity sha512-EohsE9CEqx0ycylnsEj/0DNPG99Tb0qAVZspiAs5xHFCJjXOFfp3cRQu0BRf+lZ1b72IhPFXymzVtojvzUHb7g==
+
+sass-embedded-win32-arm64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.80.6.tgz#e889c421b0b31e1297414dd89448385fe443d5e2"
+  integrity sha512-29wETQi1ykeVvpd4zMVokpQKFSOZskGJzZawuuNCdo7BHjHKIRDsqbz8YT1CewHPBshI0hfD21fenmjxYjGXPQ==
+
+sass-embedded-win32-ia32@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.80.6.tgz#0934f3598e4fbe701b5e4e4d2a1fa6ef952f7024"
+  integrity sha512-1s3OpK2iTIfIL/a91QhAQnffsbuWfnsM8Lx4Fxt0f7ErnxjCV6q8MUFTV/UhcLtLyTFnPCA62DLjp2KGCjMI9A==
+
+sass-embedded-win32-x64@1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.80.6.tgz#b7357b399c12cbb80dab2bee6f541b88a6015d76"
+  integrity sha512-0pH4Zr9silHkcmLPC0ghnD3DI0vMsjA7dKvGR32/RbbjOSvHV5cDQRLiuVJAPp34dfMA7kJd1ysSchRdH0igAQ==
+
+sass-embedded@^1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass-embedded/-/sass-embedded-1.80.6.tgz#efd66c12c7f117c2dcb558e8bf6bd00cc5cd49b2"
+  integrity sha512-Og4aqBnaA3oJfIpHaLuNATAqzBRgUJDYJy2X15V59cot2wYOtiT/ciPnyuq1o7vpDEeOkHhEd+mSviSlXoETug==
+  dependencies:
+    "@bufbuild/protobuf" "^2.0.0"
+    buffer-builder "^0.2.0"
+    colorjs.io "^0.5.0"
+    immutable "^4.0.0"
+    rxjs "^7.4.0"
+    supports-color "^8.1.1"
+    varint "^6.0.0"
+  optionalDependencies:
+    sass-embedded-android-arm "1.80.6"
+    sass-embedded-android-arm64 "1.80.6"
+    sass-embedded-android-ia32 "1.80.6"
+    sass-embedded-android-riscv64 "1.80.6"
+    sass-embedded-android-x64 "1.80.6"
+    sass-embedded-darwin-arm64 "1.80.6"
+    sass-embedded-darwin-x64 "1.80.6"
+    sass-embedded-linux-arm "1.80.6"
+    sass-embedded-linux-arm64 "1.80.6"
+    sass-embedded-linux-ia32 "1.80.6"
+    sass-embedded-linux-musl-arm "1.80.6"
+    sass-embedded-linux-musl-arm64 "1.80.6"
+    sass-embedded-linux-musl-ia32 "1.80.6"
+    sass-embedded-linux-musl-riscv64 "1.80.6"
+    sass-embedded-linux-musl-x64 "1.80.6"
+    sass-embedded-linux-riscv64 "1.80.6"
+    sass-embedded-linux-x64 "1.80.6"
+    sass-embedded-win32-arm64 "1.80.6"
+    sass-embedded-win32-ia32 "1.80.6"
+    sass-embedded-win32-x64 "1.80.6"
+
 sass-loader@^12.3.0:
   version "12.6.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
@@ -10132,7 +10288,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
+supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -10430,6 +10586,11 @@ tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
+tslib@^2.1.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -10733,6 +10894,11 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+varint@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0"
+  integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"