diff --git a/react-ui/src/shared/layouts/login.layout.tsx b/react-ui/src/components/login/layouts/login.layout.tsx
similarity index 92%
rename from react-ui/src/shared/layouts/login.layout.tsx
rename to react-ui/src/components/login/layouts/login.layout.tsx
index 43e40aa302e96a61695c95cabbadb6b6c5a60b76..323941a67a811d7717da4ca7ef2689e530f5f410 100644
--- a/react-ui/src/shared/layouts/login.layout.tsx
+++ b/react-ui/src/components/login/layouts/login.layout.tsx
@@ -1,7 +1,7 @@
 import { useAuth } from "@provider/auth.provider";
-import LoginView from "@view/login/login.view";
 import { useEffect } from "react";
 import { useNavigate, useOutlet } from "react-router-dom";
+import LoginView from "../view/login.view";
 
 
 export const LoginLayout = ({ children }) => {
diff --git a/react-ui/src/components/view/login/login.scss b/react-ui/src/components/login/view/login.scss
similarity index 100%
rename from react-ui/src/components/view/login/login.scss
rename to react-ui/src/components/login/view/login.scss
diff --git a/react-ui/src/components/view/login/login.view.tsx b/react-ui/src/components/login/view/login.view.tsx
similarity index 98%
rename from react-ui/src/components/view/login/login.view.tsx
rename to react-ui/src/components/login/view/login.view.tsx
index 405a42f84fed458e4f93863dda334f9d0c8d04f1..0db0ea2067b3e6ded138236ce03ff6311765fe1e 100644
--- a/react-ui/src/components/view/login/login.view.tsx
+++ b/react-ui/src/components/login/view/login.view.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'
 import './login.scss'
 
 import logo from '@assets/logo.svg'
-import useLoginViewModel from '@viewmodel/login.viewmodel'
 import React, { useRef } from 'react'
+import useLoginViewModel from '../viewmodel/login.viewmodel'
 
 const LoginView = ({ children }) => {
     const { t } = useTranslation('common')
diff --git a/react-ui/src/components/view_model/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
similarity index 100%
rename from react-ui/src/components/view_model/login.viewmodel.ts
rename to react-ui/src/components/login/viewmodel/login.viewmodel.ts
diff --git a/react-ui/src/components/routines/device.routine.ts b/react-ui/src/components/routines/device.routine.ts
index 0290f637d3cdfa20f9a2735ab93130377c670ee0..7cafd91b7a9044904a5609f5cdb83c60889a4bb2 100644
--- a/react-ui/src/components/routines/device.routine.ts
+++ b/react-ui/src/components/routines/device.routine.ts
@@ -1,7 +1,7 @@
 import { NetworkElementServiceGetAllFlattenedApiArg, api } from "@api/api";
 import { setDevices } from "@reducer/device.reducer/device.reducer";
-import { setUser } from "@reducer/user.reducer";
 import { createAsyncThunk } from "@reduxjs/toolkit";
+import { setUser } from "@shared/store/user.reducer";
 import { RootState } from "src/stores";
 import { startListening } from "../../stores/middleware/listener.middleware";
 import { FETCH_DEVICE_ACTION } from "./action.routine";
diff --git a/react-ui/src/components/view/device/device.scss b/react-ui/src/components/view/device/device.scss
index d24b0808483573663452cee05a793641154512f5..0890fc92861126198e99eba316dc959b075d2831 100644
--- a/react-ui/src/components/view/device/device.scss
+++ b/react-ui/src/components/view/device/device.scss
@@ -1,25 +1,22 @@
-@import '../../../style/colors.scss';
+@import '/src/shared/style/colors.scss';
 
 thead {
     font-size: 0.9em;
 }
 
-tr:hover > td  {
+tr:hover > td {
     background-color: lighten(map-get($theme-colors, primary), 30%) !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 {
     padding: 2em !important;
     padding-top: 1em !important;
-
 }
 
-
-
 .border-right {
     $border-padding: 2em;
 
@@ -39,7 +36,7 @@ tr:nth-child(2n+1) > td {
     &:hover {
         color: lighten(map-get($theme-colors, primary), 10%);
     }
-    
+
     &:focus {
         border: none !important;
         color: lighten(map-get($theme-colors, primary), 10%);
@@ -49,4 +46,4 @@ tr:nth-child(2n+1) > td {
         color: map-get($theme-colors, primary);
         font-weight: 500;
     }
-}
\ No newline at end of file
+}
diff --git a/react-ui/src/components/view/device/device.view.table.tsx b/react-ui/src/components/view/device/device.view.table.tsx
index 17d4bfd25e598320bc4ab0a2791b3ee558a69d84..16c9c7730e44deaab9caa3a63c001fe771df4746 100644
--- a/react-ui/src/components/view/device/device.view.table.tsx
+++ b/react-ui/src/components/view/device/device.view.table.tsx
@@ -1,8 +1,8 @@
 import { useAppSelector } from "@hooks";
-import { useDeviceTableViewModel } from "@viewmodel/device.table.viewmodel";
 import { MutableRefObject, useCallback } from "react";
 import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import { useDeviceTableViewModel } from "../../view_model/device.table.viewmodel";
 
 export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) => {
     const { devices, pnds } = useAppSelector(state => state.device);
diff --git a/react-ui/src/components/view/device/device.view.tsx b/react-ui/src/components/view/device/device.view.tsx
index c85ce6be6d52e1049ca663e3e0b0f597bd025a8d..c620636bf2ef808ef8fb0c84d2eece2b4cf6b227 100644
--- a/react-ui/src/components/view/device/device.view.tsx
+++ b/react-ui/src/components/view/device/device.view.tsx
@@ -1,10 +1,10 @@
-import { useDeviceViewModel } from '@viewmodel/device.viewmodel';
 import { useRef } from 'react';
 import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import './device.scss';
 import { DeviceViewTable } from './device.view.table';
 import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs';
+import { useDeviceViewModel } from '/src/components/view_model/device.viewmodel';
 
 function DeviceView() {
     const { t } = useTranslation('common');
diff --git a/react-ui/src/index.scss b/react-ui/src/index.scss
index 3526e18bc5234c1c1392bdb5f73c9f6f7a991eee..8dd280e6436cf6df71772494e87cdd950872f16b 100644
--- a/react-ui/src/index.scss
+++ b/react-ui/src/index.scss
@@ -1,10 +1,9 @@
-@import './style/index.scss';
+@import './shared/style/index.scss';
 
 body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
-
-  background-color: map-get($theme-colors, bg-primary) !important;
+    background-color: map-get($theme-colors, bg-primary) !important;
 }
diff --git a/react-ui/src/routes.tsx b/react-ui/src/routes.tsx
index a63d6d87552a05da1c1cebd6d4736f19ae1c96c9..1015d87af2554ebfd8e710cea981841b23f6af1a 100644
--- a/react-ui/src/routes.tsx
+++ b/react-ui/src/routes.tsx
@@ -1,8 +1,8 @@
 import { BasicLayout } from "@layout/basic.layout";
-import { LoginLayout } from "@layout/login.layout";
 import { ProtectedLayout } from "@layout/protected.layout/protected.layout";
-import DeviceView from "@view/device/device.view";
 import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom";
+import { LoginLayout } from "./components/login/layouts/login.layout";
+import DeviceView from "./components/view/device/device.view";
 
 export const DEVICE_URL = '/device/';
 export const LOGIN_URL = '/login';
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
index 47561615d69056a83140f4c6aae1be06abb5237e..ffc4acf0d85109e0c846c8131aedb156a808bb68 100644
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
@@ -1,4 +1,4 @@
-@import "/src/style/colors.scss";
+@import '/src/shared/style/colors.scss';
 
 $sidebar-width: 4.5em;
 
@@ -12,7 +12,7 @@ $sidebar-width: 4.5em;
         color: map-get($theme-colors, primary);
         font-weight: 600;
     }
-    
+
     &.active {
         color: map-get($theme-colors, primary);
         font-weight: 600;
@@ -26,4 +26,4 @@ $sidebar-width: 4.5em;
 
 .main-content {
     margin-left: $sidebar-width;
-}
\ No newline at end of file
+}
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
index faff61c40e62c67b32dddb699cf4fb50dbe4a6ea..0203899842c5edf7f1060d3c1a871564a44c171c 100644
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useAppDispatch, useAppSelector } from '@hooks';
 import { useAuth } from "@provider/auth.provider";
 import { fetchPnds } from '@reducer/device.reducer/device.reducer';
-import { fetchUser } from '@reducer/user.reducer';
 import { DEVICE_URL, LOGIN_URL } from '@routes';
+import { fetchUser } from '@shared/store/user.reducer';
 import React, { useEffect } from "react";
 import { Dropdown } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
diff --git a/react-ui/src/shared/provider/auth.provider.tsx b/react-ui/src/shared/provider/auth.provider.tsx
index d1f472cc7be17408b300d3e6af72e046cd581cea..b6bde926200361ce6a2149d03bc2794593d33796 100644
--- a/react-ui/src/shared/provider/auth.provider.tsx
+++ b/react-ui/src/shared/provider/auth.provider.tsx
@@ -1,11 +1,11 @@
 import { AuthServiceLoginApiArg, AuthServiceLoginApiResponse, useAuthServiceLoginMutation } from "@api/api";
 import { getCookieValue } from "@helper/coookie";
 import { useAppDispatch, useAppSelector } from "@hooks";
-import { setToken } from "@reducer/user.reducer";
 import { DEVICE_URL, LOGIN_URL } from "@routes";
 import { jwtDecode } from "jwt-decode";
 import { createContext, useContext, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import { setToken } from "../store/user.reducer";
 
 interface AuthProviderType {
     login: (username: string, password: string) => void,
diff --git a/react-ui/src/stores/reducer/user.reducer.ts b/react-ui/src/shared/store/user.reducer.ts
similarity index 100%
rename from react-ui/src/stores/reducer/user.reducer.ts
rename to react-ui/src/shared/store/user.reducer.ts
diff --git a/react-ui/src/style/box.scss b/react-ui/src/shared/style/box.scss
similarity index 100%
rename from react-ui/src/style/box.scss
rename to react-ui/src/shared/style/box.scss
diff --git a/react-ui/src/style/colors.scss b/react-ui/src/shared/style/colors.scss
similarity index 100%
rename from react-ui/src/style/colors.scss
rename to react-ui/src/shared/style/colors.scss
diff --git a/react-ui/src/style/fonts.scss b/react-ui/src/shared/style/fonts.scss
similarity index 100%
rename from react-ui/src/style/fonts.scss
rename to react-ui/src/shared/style/fonts.scss
diff --git a/react-ui/src/style/index.scss b/react-ui/src/shared/style/index.scss
similarity index 100%
rename from react-ui/src/style/index.scss
rename to react-ui/src/shared/style/index.scss
diff --git a/react-ui/src/style/toast.scss b/react-ui/src/shared/style/toast.scss
similarity index 100%
rename from react-ui/src/style/toast.scss
rename to react-ui/src/shared/style/toast.scss
diff --git a/react-ui/src/style/utils.scss b/react-ui/src/shared/style/utils.scss
similarity index 100%
rename from react-ui/src/style/utils.scss
rename to react-ui/src/shared/style/utils.scss
diff --git a/react-ui/src/shared/utils/routine.manager.ts b/react-ui/src/shared/utils/routine.manager.ts
index c86e30d4a6f8eeee961e62fbfd0b444a0440a837..449e2c690f874f6b87998ae425df5719648afbd7 100644
--- a/react-ui/src/shared/utils/routine.manager.ts
+++ b/react-ui/src/shared/utils/routine.manager.ts
@@ -1,7 +1,7 @@
+import { fetchDevicesThunk } from '@component/routines/device.routine';
 import { fetchSelectedMneThunk } from '@reducer/device.reducer/mne.subscription';
 import { AsyncThunk } from '@reduxjs/toolkit';
 import { QueryActionCreatorResult } from '@reduxjs/toolkit/query';
-import { fetchDevicesThunk } from '@routine/device.routine';
 
 type Routine = QueryActionCreatorResult<any>;
 
diff --git a/react-ui/src/stores/index.ts b/react-ui/src/stores/index.ts
index 1b3c3335e60549d6bc6934698d099da759ebe46e..f620923b5bb639ae95791669259951078b21c9a6 100644
--- a/react-ui/src/stores/index.ts
+++ b/react-ui/src/stores/index.ts
@@ -1,12 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { setupListeners } from '@reduxjs/toolkit/query'
-import { FETCH_DEVICE_ACTION, FETCH_MNE_ACTION } from '@routine/action.routine'
 import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from 'redux-persist'
 import persistStore from 'redux-persist/es/persistStore'
 import { emptySplitApi } from './api.store'
 import { rtkQueryErrorLogger } from './middleware/devLogging.middleware'
 import { listenerMiddleware } from './middleware/listener.middleware'
 import persistedReducer from './persist.store'
+import { FETCH_DEVICE_ACTION, FETCH_MNE_ACTION } from '/src/components/routines/action.routine'
 
 
 export const store = configureStore({
diff --git a/react-ui/src/stores/persist.store.ts b/react-ui/src/stores/persist.store.ts
index 65ade7d3e85184bef4d8ec10c66acab3e09bdf5a..d66bcf930db9eb5ca1b17a870d4e64c7081bf326 100644
--- a/react-ui/src/stores/persist.store.ts
+++ b/react-ui/src/stores/persist.store.ts
@@ -1,10 +1,10 @@
 import deviceReducer from "@reducer/device.reducer/device.reducer";
 import routineReducer from "@reducer/routine.reducer";
-import userReducer from "@reducer/user.reducer";
 import { combineReducers } from "redux";
 import { persistReducer } from "redux-persist";
 import storage from "redux-persist/es/storage";
 import { emptySplitApi } from "./api.store";
+import userReducer from "/src/shared/store/user.reducer";
 
 
 /** local storage config */
diff --git a/react-ui/src/stores/reducer/device.reducer/device.reducer.ts b/react-ui/src/stores/reducer/device.reducer/device.reducer.ts
index 9f21bcbeb7273bdbb3cab53ff8749bee7f7eeaa3..c9388adc54267801f264796633679053e1ca9803 100644
--- a/react-ui/src/stores/reducer/device.reducer/device.reducer.ts
+++ b/react-ui/src/stores/reducer/device.reducer/device.reducer.ts
@@ -1,6 +1,6 @@
 import { api, NetworkelementFlattenedManagedNetworkElement, NetworkelementManagedNetworkElement, PndPrincipalNetworkDomain, PndServiceGetPndListApiArg } from '@api/api';
+import { DeviceViewTabValues } from '@component/view/device/device.view.tabs';
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { DeviceViewTabValues } from '@view/device/device.view.tabs';
 
 export type Device = NetworkelementFlattenedManagedNetworkElement;
 
diff --git a/react-ui/src/stores/reducer/routine.reducer.ts b/react-ui/src/stores/reducer/routine.reducer.ts
index 85ddd7b2b11a2fc35d5a3d49b38cdc5b3b540574..79e7c86835de54db4fa5840056131dac2416999f 100644
--- a/react-ui/src/stores/reducer/routine.reducer.ts
+++ b/react-ui/src/stores/reducer/routine.reducer.ts
@@ -1,9 +1,9 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { setToken } from '@shared/store/user.reducer';
 import { RoutineDictionary, RoutineManager, THUNK_KEY } from '@utils/routine.manager';
 import { REHYDRATE } from 'redux-persist';
 import { RootState } from '..';
 import { startListening } from '../middleware/listener.middleware';
-import { setToken } from './user.reducer';
 
 
 
diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json
index 6bd0a18b729d68b99f9f632b42a2d8fefa06675c..6cfd61712f98f7193eed31b505fa744c878c3269 100644
--- a/react-ui/tsconfig.json
+++ b/react-ui/tsconfig.json
@@ -24,8 +24,6 @@
         "paths": {
             "@assets/*": ["assets/*"],
             "@api/*": ["src/shared/api/*"],
-            "@viewmodel/*": ["src/components/view_model/*"],
-            "@view/*": ["src/components/view/*"],
             "@reducer/*": ["src/stores/reducer/*"],
             "@provider/*": ["src/shared/provider/*"],
             "@layout/*": ["src/shared/layouts/*"],
@@ -33,8 +31,9 @@
             "@routes": ["src/routes.tsx"],
             "@task/*": ["src/shared/tasks/*"],
             "@helper/*": ["src/shared/helper/*"],
-            "@routine/*": ["src/components/routines/*"],
-            "@utils/*": ["src/shared/utils/*"]
+            "@utils/*": ["src/shared/utils/*"],
+            "@shared/*": ["src/shared/*"],
+            "@component/*": ["src/components/*"]
         }
     },
     "include": [
diff --git a/react-ui/vite.config.mjs b/react-ui/vite.config.mjs
index d36e8cf3a4fddc50ea26a2e19c97a45a88e56961..bdff7502a2017c4d03d780b19d83f4f2589af2a4 100644
--- a/react-ui/vite.config.mjs
+++ b/react-ui/vite.config.mjs
@@ -37,8 +37,6 @@ export default defineConfig({
         alias: {
             '@assets': '/assets',
             '@api': '/src/shared/api',
-            '@viewmodel': '/src/components/view_model',
-            '@view': '/src/components/view',
             '@reducer': '/src/stores/reducer',
             '@provider': '/src/shared/provider',
             '@layout': '/src/shared/layouts',
@@ -46,8 +44,9 @@ export default defineConfig({
             '@task': '/src/shared/tasks',
             '@helper': '/src/shared/helper',
             '@routes': '/src/routes.tsx',
-            '@routine': '/src/components/routines',
             '@utils': '/src/shared/utils',
+            '@shared': '/src/shared',
+            '@component': '/src/components',
         },
     },