diff --git a/ui_src/jsconfig.json b/ui_src/jsconfig.json
new file mode 100644
index 000000000..de27cfd99
--- /dev/null
+++ b/ui_src/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/ui_src/src/App.js b/ui_src/src/App.js
index 59c3ec507..6a564f62a 100644
--- a/ui_src/src/App.js
+++ b/ui_src/src/App.js
@@ -10,7 +10,7 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import './App.scss';
+import 'App.scss';
 
 import { Switch, Route, withRouter } from 'react-router-dom';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -30,42 +30,42 @@ import {
     LOCAL_STORAGE_USER_PASS_BASED_AUTH,
     USER_IMAGE,
     LOCAL_STORAGE_PLAN
-} from './const/localStorageConsts';
-import { CLOUD_URL, HANDLE_REFRESH_INTERVAL, WS_PREFIX } from './config';
-import { isCheckoutCompletedTrue, isCloud } from './services/valueConvertor';
-import { ReactComponent as InfoNotificationIcon } from './assets/images/infoNotificationIcon.svg';
-import { handleRefreshTokenRequest, httpRequest } from './services/http';
-import { ReactComponent as RedirectIcon } from './assets/images/redirectIcon.svg';
-import { ReactComponent as SuccessIcon } from './assets/images/successIcon.svg';
-import { ReactComponent as CloseIcon } from './assets/images/closeNotification.svg';
-import { showMessages, useGetAllowedActions } from './services/genericServices';
-import StationOverview from './domain/stationOverview';
-import { ReactComponent as ErrorIcon } from './assets/images/errorIcon.svg';
-import MessageJourney from './domain/messageJourney';
-import Administration from './domain/administration';
-import { ApiEndpoints } from './const/apiEndpoints';
-import { ReactComponent as WarnIcon } from './assets/images/warnIcon.svg';
-import AppWrapper from './components/appWrapper';
-import StationsList from './domain/stationsList';
-import SchemaManagment from './domain/schema';
-import PrivateRoute from './PrivateRoute';
-import AuthService from './services/auth';
-import Overview from './domain/overview';
-import Loader from './components/loader';
-import Functions from './domain/functions';
-import { Context } from './hooks/store';
-import pathDomains from './router';
-import Users from './domain/users';
-import { planType } from "./const/globalConst";
+} from 'const/localStorageConsts';
+import { CLOUD_URL, HANDLE_REFRESH_INTERVAL, WS_PREFIX } from 'config';
+import { isCheckoutCompletedTrue, isCloud } from 'services/valueConvertor';
+import { ReactComponent as InfoNotificationIcon } from 'assets/images/infoNotificationIcon.svg';
+import { handleRefreshTokenRequest, httpRequest } from 'services/http';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { ReactComponent as SuccessIcon } from 'assets/images/successIcon.svg';
+import { ReactComponent as CloseIcon } from 'assets/images/closeNotification.svg';
+import { showMessages, useGetAllowedActions } from 'services/genericServices';
+import StationOverview from 'domain/stationOverview';
+import { ReactComponent as ErrorIcon } from 'assets/images/errorIcon.svg';
+import MessageJourney from 'domain/messageJourney';
+import Administration from 'domain/administration';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as WarnIcon } from 'assets/images/warnIcon.svg';
+import AppWrapper from 'components/appWrapper';
+import StationsList from 'domain/stationsList';
+import SchemaManagment from 'domain/schema';
+import PrivateRoute from 'PrivateRoute';
+import AuthService from 'services/auth';
+import Overview from 'domain/overview';
+import Loader from 'components/loader';
+import Functions from 'domain/functions';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
+import Users from 'domain/users';
+import { planType } from "const/globalConst";
 
 let SysLogs = undefined;
 let Login = undefined;
 let Signup = undefined;
 
 if (!isCloud()) {
-    SysLogs = require('./domain/sysLogs').default;
-    Login = require('./domain/login').default;
-    Signup = require('./domain/signup').default;
+    SysLogs = require('domain/sysLogs').default;
+    Login = require('domain/login').default;
+    Signup = require('domain/signup').default;
 }
 
 const App = withRouter(() => {
diff --git a/ui_src/src/PrivateRoute.js b/ui_src/src/PrivateRoute.js
index 58185691a..25a6bd9b7 100644
--- a/ui_src/src/PrivateRoute.js
+++ b/ui_src/src/PrivateRoute.js
@@ -11,13 +11,12 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React from 'react';
-import {} from 'react-router-dom';
 import { Route, Redirect } from 'react-router-dom';
 
-import AuthService from './services/auth';
-import { isCloud } from './services/valueConvertor';
-import { CLOUD_URL } from './config';
-import pathDomains from './router';
+import AuthService from 'services/auth';
+import { isCloud } from 'services/valueConvertor';
+import { CLOUD_URL } from 'config';
+import pathDomains from 'router';
 
 function PrivateRoute(props) {
     const { component: Component, ...rest } = props;
diff --git a/ui_src/src/assets/images/TimeFill.svg b/ui_src/src/assets/images/timeFill.svg
similarity index 100%
rename from ui_src/src/assets/images/TimeFill.svg
rename to ui_src/src/assets/images/timeFill.svg
diff --git a/ui_src/src/components/Input/index.js b/ui_src/src/components/Input/index.js
index dc98bfbeb..42c3db8c4 100644
--- a/ui_src/src/components/Input/index.js
+++ b/ui_src/src/components/Input/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import { Input as InputDesign } from 'antd';
 import React from 'react';
 
-import { getBorderRadius, getFontColor, getBackgroundColor, getBorderColor, getBoxShadows } from '../../utils/styleTemplates';
+import { getBorderRadius, getFontColor, getBackgroundColor, getBorderColor, getBoxShadows } from 'utils/styleTemplates';
 
 const Input = (props) => {
     const {
diff --git a/ui_src/src/components/Tabs/index.js b/ui_src/src/components/Tabs/index.js
index b202c925d..13c63c5e0 100644
--- a/ui_src/src/components/Tabs/index.js
+++ b/ui_src/src/components/Tabs/index.js
@@ -19,10 +19,10 @@ import './style.scss';
 import { Tabs } from 'antd';
 import React from 'react';
 
-import TooltipComponent from '../tooltip/tooltip';
-import CheckboxComponent from '../checkBox';
+import TooltipComponent from 'components/tooltip/tooltip';
+import CheckboxComponent from 'components/checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
-import CloudOnly from '../cloudOnly';
+import CloudOnly from 'components/cloudOnly';
 
 const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter, icons }) => {
     return (
diff --git a/ui_src/src/components/appWrapper/index.js b/ui_src/src/components/appWrapper/index.js
index 2d15a82ca..d68c0d30b 100644
--- a/ui_src/src/components/appWrapper/index.js
+++ b/ui_src/src/components/appWrapper/index.js
@@ -10,7 +10,7 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import SideBar from '../sideBar';
+import SideBar from 'components/sideBar';
 
 function AppWrapper({ content }) {
     return (
diff --git a/ui_src/src/components/asyncTasks/index.js b/ui_src/src/components/asyncTasks/index.js
index f3c1f2431..d5bf94b8c 100644
--- a/ui_src/src/components/asyncTasks/index.js
+++ b/ui_src/src/components/asyncTasks/index.js
@@ -15,14 +15,14 @@ import './style.scss';
 import React, { useContext, useEffect, useState } from 'react';
 import { StringCodec, JSONCodec } from 'nats.ws';
 import { Divider, Popover } from 'antd';
-import { parsingDate } from '../../services/valueConvertor';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as AsyncIcon } from '../../assets/images/asyncIcon.svg';
-import { ReactComponent as TaskIcon } from '../../assets/images/task.svg';
-import { httpRequest } from '../../services/http';
-import { ReactComponent as CollapseArrowIcon } from '../../assets/images/collapseArrow.svg';
-import { Context } from '../../hooks/store';
-import OverflowTip from '../tooltip/overflowtip';
+import { parsingDate } from 'services/valueConvertor';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as AsyncIcon } from 'assets/images/asyncIcon.svg';
+import { ReactComponent as TaskIcon } from 'assets/images/task.svg';
+import { httpRequest } from 'services/http';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { Context } from 'hooks/store';
+import OverflowTip from 'components/tooltip/overflowtip';
 
 const AsyncTasks = ({ height, overView }) => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/components/button/index.js b/ui_src/src/components/button/index.js
index e82e4b65a..ef02a83c7 100644
--- a/ui_src/src/components/button/index.js
+++ b/ui_src/src/components/button/index.js
@@ -15,8 +15,8 @@ import './style.scss';
 import { Button as ButtonDesign } from 'antd';
 import React from 'react';
 
-import { getBorderRadius, getFontColor, getBackgroundColor, getBoxShadows, getBorderColor } from '../../utils/styleTemplates';
-import TooltipComponent from '../tooltip/tooltip';
+import { getBorderRadius, getFontColor, getBackgroundColor, getBoxShadows, getBorderColor } from 'utils/styleTemplates';
+import TooltipComponent from 'components/tooltip/tooltip';
 
 const Button = ({
     width,
diff --git a/ui_src/src/components/cloneModal/index.js b/ui_src/src/components/cloneModal/index.js
index b3fc018f5..fb340192d 100644
--- a/ui_src/src/components/cloneModal/index.js
+++ b/ui_src/src/components/cloneModal/index.js
@@ -12,11 +12,11 @@
 
 import './style.scss';
 import React, { useState } from 'react';
-import Button from '../button';
+import Button from 'components/button';
 import { FiDownload } from 'react-icons/fi';
-import Copy from '../copy';
-import CustomTabs from '../Tabs';
-import { githubUrls } from '../../const/globalConst';
+import Copy from 'components/copy';
+import CustomTabs from 'components/Tabs';
+import { githubUrls } from 'const/globalConst';
 import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
 
 const CloneModal = ({ type }) => {
@@ -66,18 +66,13 @@ const CloneModal = ({ type }) => {
             )}
             {type === 'cli' && (
                 <>
-                    <p className="create-func-cli">
-                        <label>Step 1:</label>Install Memphis CLI
-                    </p>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type][tabValue]}</p>
                         <div className="icon">
                             <Copy width="18" data={githubUrls[type][tabValue]} />
                         </div>
                     </div>
-                    <p className="create-func-cli">
-                        <label>Step 2:</label>Create a basic Memphis function template
-                    </p>
+                    <p className="create-func-cli">Create a basic Memphis function template</p>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type]?.code}</p>
                         <div className="icon">
diff --git a/ui_src/src/components/cloneModal/style.scss b/ui_src/src/components/cloneModal/style.scss
index 873f8699a..f11b7f3c8 100644
--- a/ui_src/src/components/cloneModal/style.scss
+++ b/ui_src/src/components/cloneModal/style.scss
@@ -61,11 +61,6 @@
         font-size: 14px;
         font-family: 'InterMedium';
         margin: 15px 0px 5px 0px;
-        label {
-            color: var(--purple);
-            font-weight: 600;
-            margin-right: 5px;
-        }
     }
     .footer {
         border-top: 1px solid #e4e4e4;
diff --git a/ui_src/src/components/cloudModal/index.js b/ui_src/src/components/cloudModal/index.js
index db33aacdb..ab7c09a20 100644
--- a/ui_src/src/components/cloudModal/index.js
+++ b/ui_src/src/components/cloudModal/index.js
@@ -13,15 +13,15 @@
 import './style.scss';
 
 import React from 'react';
-import { ReactComponent as FunctionIntegrateIcon } from '../../assets/images/functionIntegrate.svg';
-import BundleBanner from '../../assets/images/banners/bundle1.webp';
-import CloudBanner from '../../assets/images/banners/cloud2.webp';
-import FunctionsBanner from '../../assets/images/banners/function3.webp';
-import UpgradeBanner from '../../assets/images/banners/upgrade4.webp';
-import UpgradePlans from '../upgradePlans';
-import Modal from '../modal';
-import Button from '../button';
-import { sendTrace } from '../../services/genericServices';
+import { ReactComponent as FunctionIntegrateIcon } from 'assets/images/functionIntegrate.svg';
+import BundleBanner from 'assets/images/banners/bundle1.webp';
+import CloudBanner from 'assets/images/banners/cloud2.webp';
+import FunctionsBanner from 'assets/images/banners/function3.webp';
+import UpgradeBanner from 'assets/images/banners/upgrade4.webp';
+import UpgradePlans from 'components/upgradePlans';
+import Modal from 'components/modal';
+import Button from 'components/button';
+import { sendTrace } from 'services/genericServices';
 
 const CloudModal = ({ type, open, handleClose }) => {
     const content = {
diff --git a/ui_src/src/components/cloudOnly/index.js b/ui_src/src/components/cloudOnly/index.js
index 6fe97b902..8adcfbfc5 100644
--- a/ui_src/src/components/cloudOnly/index.js
+++ b/ui_src/src/components/cloudOnly/index.js
@@ -13,8 +13,8 @@
 import './style.scss';
 
 import React, { useState } from 'react';
-import { ReactComponent as CloudOnlyIcon } from '../../assets/images/cloudOnlyIcon.svg';
-import CloudModal from '../cloudModal/';
+import { ReactComponent as CloudOnlyIcon } from 'assets/images/cloudOnlyIcon.svg';
+import CloudModal from 'components/cloudModal/';
 
 const CloudOnly = () => {
     const [openCloudModal, setOpenCloudModal] = useState(false);
diff --git a/ui_src/src/components/colorPicker/index.js b/ui_src/src/components/colorPicker/index.js
index 1259660eb..7dd2b16bf 100644
--- a/ui_src/src/components/colorPicker/index.js
+++ b/ui_src/src/components/colorPicker/index.js
@@ -12,7 +12,7 @@
 
 import './style.scss';
 import React from 'react';
-import { ColorPalette } from '../../const/globalConst';
+import { ColorPalette } from 'const/globalConst';
 
 const ColorPicker = ({ onChange, value }) => {
     return (
diff --git a/ui_src/src/components/connectToHub/index.js b/ui_src/src/components/connectToHub/index.js
index 7e237e842..3ceed37d8 100644
--- a/ui_src/src/components/connectToHub/index.js
+++ b/ui_src/src/components/connectToHub/index.js
@@ -17,10 +17,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import React, { useState } from 'react';
 
-import { ReactComponent as CloseIcon } from '../../assets/images/close.svg';
-import Input from '../Input';
-import Button from '../button';
-import CheckboxComponent from '../checkBox';
+import { ReactComponent as CloseIcon } from 'assets/images/close.svg';
+import Input from 'components/Input';
+import Button from 'components/button';
+import CheckboxComponent from 'components/checkBox';
 
 const useStyles = makeStyles((theme) => ({
     root: {
diff --git a/ui_src/src/components/connectorError/index.js b/ui_src/src/components/connectorError/index.js
index 9f0d79427..7fef98d69 100644
--- a/ui_src/src/components/connectorError/index.js
+++ b/ui_src/src/components/connectorError/index.js
@@ -13,13 +13,13 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { parsingDate } from '../../services/valueConvertor';
-import OverflowTip from '../tooltip/overflowtip';
-import { sendTrace } from '../../services/genericServices';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { parsingDate } from 'services/valueConvertor';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { sendTrace } from 'services/genericServices';
 const logsColumns = [
     {
         key: '1',
diff --git a/ui_src/src/components/connectorInfo/index.js b/ui_src/src/components/connectorInfo/index.js
index f6f49cfdb..e57ffec92 100644
--- a/ui_src/src/components/connectorInfo/index.js
+++ b/ui_src/src/components/connectorInfo/index.js
@@ -13,12 +13,12 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { sendTrace } from '../../services/genericServices';
-import { connectorTypesSource, connectorTypesSink } from '../../connectors';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { sendTrace } from 'services/genericServices';
+import { connectorTypesSource, connectorTypesSink } from 'connectors';
 
 const ConnectorInfo = ({ open, clickOutside, connectorId }) => {
     const [loading, setLoading] = useState(false);
diff --git a/ui_src/src/components/connectorModal/index.js b/ui_src/src/components/connectorModal/index.js
index 577cadcba..067c7dd5a 100644
--- a/ui_src/src/components/connectorModal/index.js
+++ b/ui_src/src/components/connectorModal/index.js
@@ -14,22 +14,22 @@ import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { Divider, Form, Result } from 'antd';
-import { StationStoreContext } from '../../domain/stationOverview';
-import { ReactComponent as ConnectorIcon } from '../../assets/images/connectorIcon.svg';
-import InputNumberComponent from '../InputNumber';
-import TitleComponent from '../titleComponent';
-import SelectComponent from '../select';
+import { StationStoreContext } from 'domain/stationOverview';
+import { ReactComponent as ConnectorIcon } from 'assets/images/connectorIcon.svg';
+import InputNumberComponent from 'components/InputNumber';
+import TitleComponent from 'components/titleComponent';
+import SelectComponent from 'components/select';
 import { Select } from 'antd';
-import Input from '../Input';
-import Modal from '../modal';
-import Spinner from '../spinner';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import CloudModal from '../cloudModal';
-import { isCloud } from '../../services/valueConvertor';
-import { sendTrace } from '../../services/genericServices';
-import { connectorTypesSource } from '../../connectors';
-import { connectorTypesSink } from '../../connectors';
+import Input from 'components/Input';
+import Modal from 'components/modal';
+import Spinner from 'components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import CloudModal from 'components/cloudModal';
+import { isCloud } from 'services/valueConvertor';
+import { sendTrace } from 'services/genericServices';
+import { connectorTypesSource } from 'connectors';
+import { connectorTypesSink } from 'connectors';
 
 const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/components/consumerWithStatus/index.js b/ui_src/src/components/consumerWithStatus/index.js
index 5aa6cc287..a1a02dda3 100644
--- a/ui_src/src/components/consumerWithStatus/index.js
+++ b/ui_src/src/components/consumerWithStatus/index.js
@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import './style.scss';
 import React from 'react';
-import StatusIndication from '../indication';
+import StatusIndication from 'components/indication';
 
 const ConsumerWithStatus = ({ name, count, is_active }) => {
     return (
diff --git a/ui_src/src/components/copy/index.js b/ui_src/src/components/copy/index.js
index 60be3c5c2..2ef669f44 100644
--- a/ui_src/src/components/copy/index.js
+++ b/ui_src/src/components/copy/index.js
@@ -11,8 +11,8 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React, { useState } from 'react';
-import { ReactComponent as CopyIcon } from '../../assets/images/copy.svg';
-import { ReactComponent as CopiedIcon } from '../../assets/images/copied.svg';
+import { ReactComponent as CopyIcon } from 'assets/images/copy.svg';
+import { ReactComponent as CopiedIcon } from 'assets/images/copied.svg';
 import './style.scss';
 import { Popover } from 'antd';
 
diff --git a/ui_src/src/components/createStationForm/index.js b/ui_src/src/components/createStationForm/index.js
index 03edd2041..17eac2abb 100644
--- a/ui_src/src/components/createStationForm/index.js
+++ b/ui_src/src/components/createStationForm/index.js
@@ -24,28 +24,28 @@ import {
     partitionsValidator,
     replicasConvertor,
     showUpgradePlan
-} from '../../services/valueConvertor';
-import S3Integration from '../../domain/administration/integrations/components/s3Integration';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { useGetAllowedActions } from '../../services/genericServices';
-import InputNumberComponent from '../InputNumber';
-import OverflowTip from '../tooltip/overflowtip';
-import TitleComponent from '../titleComponent';
-import SelectCheckBox from '../selectCheckBox';
-import { Context } from '../../hooks/store';
-import UpgradePlans from '../upgradePlans';
-import CustomSelect from '../customSelect';
-import RadioButton from '../radioButton';
-import LockFeature from '../lockFeature';
-import SelectComponent from '../select';
-import pathDomains from '../../router';
-import Switcher from '../switcher';
-import CustomTabs from '../Tabs';
-import Button from '../button';
-import Input from '../Input';
-import Modal from '../modal';
-import { entitlementChecker } from '../../utils/plan';
+} from 'services/valueConvertor';
+import S3Integration from 'domain/administration/integrations/components/s3Integration';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { useGetAllowedActions } from 'services/genericServices';
+import InputNumberComponent from 'components/InputNumber';
+import OverflowTip from 'components/tooltip/overflowtip';
+import TitleComponent from 'components/titleComponent';
+import SelectCheckBox from 'components/selectCheckBox';
+import { Context } from 'hooks/store';
+import UpgradePlans from 'components/upgradePlans';
+import CustomSelect from 'components/customSelect';
+import RadioButton from 'components/radioButton';
+import LockFeature from 'components/lockFeature';
+import SelectComponent from 'components/select';
+import pathDomains from 'router';
+import Switcher from 'components/switcher';
+import CustomTabs from 'components/Tabs';
+import Button from 'components/button';
+import Input from 'components/Input';
+import Modal from 'components/modal';
+import { entitlementChecker } from 'utils/plan';
 
 const retanionOptions = [
     {
diff --git a/ui_src/src/components/customSelect/index.js b/ui_src/src/components/customSelect/index.js
index 622004b9b..4844f77ed 100644
--- a/ui_src/src/components/customSelect/index.js
+++ b/ui_src/src/components/customSelect/index.js
@@ -18,13 +18,13 @@ import { BsPlus } from 'react-icons/bs';
 import { Select } from 'antd';
 import React from 'react';
 
-import SchemaIconSelect from '../../assets/images/schemaIconSelect.svg';
-import stationsIconActive from '../../assets/images/stationsIconActive.svg';
-import usersIconActive from '../../assets/images/usersIconActive.svg';
-import { parsingDate } from '../../services/valueConvertor';
+import SchemaIconSelect from 'assets/images/schemaIconSelect.svg';
+import stationsIconActive from 'assets/images/stationsIconActive.svg';
+import usersIconActive from 'assets/images/usersIconActive.svg';
+import { parsingDate } from 'services/valueConvertor';
 
-import Button from '../button';
-import pathDomains from '../../router';
+import Button from 'components/button';
+import pathDomains from 'router';
 
 const { Option } = Select;
 
diff --git a/ui_src/src/components/datePicker/index.js b/ui_src/src/components/datePicker/index.js
index a619123c9..ad2c0c965 100644
--- a/ui_src/src/components/datePicker/index.js
+++ b/ui_src/src/components/datePicker/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useState } from 'react';
 import { DatePicker } from 'antd';
-import { ReactComponent as CalendarIcon } from '../../assets/images/Calendar.svg';
+import { ReactComponent as CalendarIcon } from 'assets/images/Calendar.svg';
 const DatePickerComponent = ({ width, height, minWidth, onChange, placeholder, picker, dateFrom }) => {
     const [disabledMonths, setDisabledMonths] = useState([]);
 
diff --git a/ui_src/src/components/deleteItemsModal/index.js b/ui_src/src/components/deleteItemsModal/index.js
index edbbd3623..5d5baf396 100644
--- a/ui_src/src/components/deleteItemsModal/index.js
+++ b/ui_src/src/components/deleteItemsModal/index.js
@@ -13,8 +13,8 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Button from '../button';
-import Input from '../Input';
+import Button from 'components/button';
+import Input from 'components/Input';
 
 const DeleteItemsModal = ({ title, desc, handleDeleteSelected, buttontxt, textToConfirm, loader = false }) => {
     const [confirm, setConfirm] = useState('');
diff --git a/ui_src/src/components/dlsConfig/index.js b/ui_src/src/components/dlsConfig/index.js
index 5e93f4a74..2bb1bb74e 100644
--- a/ui_src/src/components/dlsConfig/index.js
+++ b/ui_src/src/components/dlsConfig/index.js
@@ -11,10 +11,10 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import './style.scss';
 import React, { useState, useEffect, useContext } from 'react';
-import { StationStoreContext } from '../../domain/stationOverview';
-import Switcher from '../switcher';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
+import { StationStoreContext } from 'domain/stationOverview';
+import Switcher from 'components/switcher';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 
 const DlsConfig = () => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/components/drawer/index.js b/ui_src/src/components/drawer/index.js
new file mode 100644
index 000000000..ed881e977
--- /dev/null
+++ b/ui_src/src/components/drawer/index.js
@@ -0,0 +1,79 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+import React from "react";
+import { Drawer } from "antd";
+
+/**
+ * MSDrawer Component
+ *
+ * A custom wrapper around the Ant Design `Drawer` component with additional features.
+ *
+ * @param {string} title - The title displayed at the top of the drawer.
+ * @param {string} placement - The placement of the drawer. Can be one of 'top', 'right', 'bottom', or 'left'.
+ * @param {string} size - The size of the drawer. Can be one of 'small', 'medium', or 'large'.
+ * @param {string} width - The width of the drawer. Fox example '600px'.
+ * @param {string} height - The height of the drawer. Fox example '700px'.
+ * @param {string} className - The class name for the drawer. Fox example 'custom-drawer'.
+ * @param {callback} onClose - A callback function called when the drawer is closed.
+ * @param {boolean} destroyOnClose - Whether to destroy the drawer content when it's closed.
+ * @param {boolean} open - Whether the drawer is open or closed.
+ * @param {object} maskStyle - Additional CSS styles for the overlay mask when the drawer is open.
+ * @param {object} headerStyle - Additional CSS styles for the header style of drawer.
+ * @param {object} bodyStyle - Additional CSS styles for the body style of drawer.
+ * @param {ReactNode} closeIcon - Custom icon or element to use as the close button.
+ * @param {ReactNode} children - The content to be displayed inside the drawer.
+ *
+ * @returns {ReactNode} - A React component representing the custom drawer.
+ */
+
+const MSDrawer =
+    ({
+         title,
+         placement,
+         size,
+         width,
+         height,
+         className,
+         onClose,
+         destroyOnClose,
+         open,
+         maskStyle,
+         headerStyle,
+         bodyStyle,
+         closeIcon,
+         children
+     }) => {
+
+        return (
+            <Drawer
+                title={title}
+                placement={placement}
+                size={size}
+                width={width}
+                height={height}
+                className={className}
+                onClose={onClose}
+                destroyOnClose={destroyOnClose}
+                open={open}
+                maskStyle={maskStyle}
+                headerStyle={headerStyle}
+                bodyStyle={bodyStyle}
+                closeIcon={closeIcon}
+            >
+                {children}
+            </Drawer>
+        );
+    };
+
+export default MSDrawer;
\ No newline at end of file
diff --git a/ui_src/src/components/drawer/style.scss b/ui_src/src/components/drawer/style.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui_src/src/components/filter/customCollapse.js b/ui_src/src/components/filter/customCollapse.js
index 3d5b7c1f0..e2faff7cf 100644
--- a/ui_src/src/components/filter/customCollapse.js
+++ b/ui_src/src/components/filter/customCollapse.js
@@ -17,13 +17,13 @@ import { FilterStoreContext } from './';
 import { Collapse } from 'antd';
 import { Checkbox } from 'antd';
 import { Divider } from 'antd';
-import Tag from '../tag';
+import Tag from 'components/tag';
 
-import { ReactComponent as CollapseArrowIcon } from '../../assets/images/collapseArrow.svg';
-import Button from '../button';
-import DatePicker from '../datePicker';
-import RadioButton from '../radioButton';
-import { filterType, labelType } from '../../const/globalConst';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import Button from 'components/button';
+import DatePicker from 'components/datePicker';
+import RadioButton from 'components/radioButton';
+import { filterType, labelType } from 'const/globalConst';
 
 const { Panel } = Collapse;
 
diff --git a/ui_src/src/components/filter/index.js b/ui_src/src/components/filter/index.js
index fe144ed5a..080629db6 100644
--- a/ui_src/src/components/filter/index.js
+++ b/ui_src/src/components/filter/index.js
@@ -16,16 +16,16 @@ import React, { createContext, useContext, useEffect, useReducer, useState } fro
 import { StringCodec, JSONCodec } from 'nats.ws';
 import { Popover } from 'antd';
 
-import { filterType, labelType, CircleLetterColor } from '../../const/globalConst';
-import { ReactComponent as SearchIcon } from '../../assets/images/searchIcon.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as FilterImgIcon } from '../../assets/images/filter.svg';
-import { httpRequest } from '../../services/http';
+import { filterType, labelType, CircleLetterColor } from 'const/globalConst';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as FilterImgIcon } from 'assets/images/filter.svg';
+import { httpRequest } from 'services/http';
 import CustomCollapse from './customCollapse';
-import { Context } from '../../hooks/store';
-import SearchInput from '../searchInput';
+import { Context } from 'hooks/store';
+import SearchInput from 'components/searchInput';
 import Reducer from './hooks/reducer';
-import Button from '../button';
+import Button from 'components/button';
 
 const initialState = {
     isOpen: false,
diff --git a/ui_src/src/components/functionsOverview/index.js b/ui_src/src/components/functionsOverview/index.js
index c693e2e4f..8f3a6cb5c 100644
--- a/ui_src/src/components/functionsOverview/index.js
+++ b/ui_src/src/components/functionsOverview/index.js
@@ -12,15 +12,10 @@
 
 import './style.scss';
 
-import ArrowRightAltSharpIcon from '@material-ui/icons/ArrowRightAltSharp';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import React, { useState, useContext, useEffect } from 'react';
-
-import removeFunctionIcon from '../../assets/images/removeFunctionIcon.svg';
-import { ReactComponent as RemoveFunctionIcon } from '../../assets/images/removeFunctionIcon.svg';
-import arrowFunction from '../../assets/images/arrowFunction.svg';
-import { ReactComponent as ArrowFunctionIcon } from '../../assets/images/arrowFunction.svg';
-import OverflowTip from '../tooltip/overflowtip';
+import React from 'react';
+import { ReactComponent as RemoveFunctionIcon } from 'assets/images/removeFunctionIcon.svg';
+import { ReactComponent as ArrowFunctionIcon } from 'assets/images/arrowFunction.svg';
+import OverflowTip from 'components/tooltip/overflowtip';
 
 const FunctionsOverview = (props) => {
     const { functions, horizontal, editable } = props;
@@ -30,7 +25,7 @@ const FunctionsOverview = (props) => {
 
     return (
         <div className={horizontal ? 'function-overview-container horizontal' : 'function-overview-container'}>
-            {functions.map((func, index) => {
+            {functions?.map((func, index) => {
                 return (
                     <div className={horizontal ? 'function-list-container horizontal' : 'function-list-container'} key={index}>
                         <div className="func-wrapper">
@@ -44,12 +39,6 @@ const FunctionsOverview = (props) => {
                                 onClick={() => handleEditFunction(index + 1, func)}
                             >
                                 <div className="function-name">
-                                    {/* {removing === index ? (
-                                    <CircularProgress
-                                        size={20}
-                                        className="circular-progress"
-                                    />
-                                    ) : ( */}
                                     <OverflowTip text={func.name} width={'7vw'} cursor="pointer">
                                         {func.name}
                                     </OverflowTip>
diff --git a/ui_src/src/components/getStartedModal/index.js b/ui_src/src/components/getStartedModal/index.js
index 641b3c1e1..d78d90292 100644
--- a/ui_src/src/components/getStartedModal/index.js
+++ b/ui_src/src/components/getStartedModal/index.js
@@ -13,20 +13,20 @@
 import './style.scss';
 import { useState, useEffect } from 'react';
 import { BiSolidTimeFive } from 'react-icons/bi';
-import VideoPlayer from '../videoPlayer';
-import Button from '../button';
-import Input from '../Input';
-import { WELCOME_VIDEO } from '../../config';
-import WelcomeImage from '../../assets/images/welcomeModalImage.webp';
+import VideoPlayer from 'components/videoPlayer';
+import Button from 'components/button';
+import Input from 'components/Input';
+import { WELCOME_VIDEO } from 'config';
+import WelcomeImage from 'assets/images/welcomeModalImage.webp';
 import { BsGithub } from 'react-icons/bs';
-import { ReactComponent as CloneModalIcon } from '../../assets/images/cloneModalIcon.svg';
-import Modal from '../modal';
-import CloneModal from '../cloneModal';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { sendTrace } from '../../services/genericServices';
-import { capitalizeFirst } from '../../services/valueConvertor';
-import { LOCAL_STORAGE_SKIP_GET_STARTED, LOCAL_STORAGE_USER_NAME } from '../../const/localStorageConsts';
+import { ReactComponent as CloneModalIcon } from 'assets/images/cloneModalIcon.svg';
+import Modal from 'components/modal';
+import CloneModal from 'components/cloneModal';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { sendTrace } from 'services/genericServices';
+import { capitalizeFirst } from 'services/valueConvertor';
+import { LOCAL_STORAGE_SKIP_GET_STARTED, LOCAL_STORAGE_USER_NAME } from 'const/localStorageConsts';
 
 const useCases = ['Microservices communication', 'Change data Capture', 'Real-time pipeline', 'Stream processing'];
 const codeList = [
diff --git a/ui_src/src/components/healthyBadge/index.js b/ui_src/src/components/healthyBadge/index.js
index 9f46a8691..07368ed0b 100644
--- a/ui_src/src/components/healthyBadge/index.js
+++ b/ui_src/src/components/healthyBadge/index.js
@@ -14,9 +14,9 @@ import './style.scss';
 
 import React from 'react';
 
-import { ReactComponent as UnhealthyIcon } from '../../assets/images/unhealthyIcon.svg';
-import { ReactComponent as CheckIcon } from '../../assets/images/checkIcon.svg';
-import { ReactComponent as RiskyIcon } from '../../assets/images/riskyIcon.svg';
+import { ReactComponent as UnhealthyIcon } from 'assets/images/unhealthyIcon.svg';
+import { ReactComponent as CheckIcon } from 'assets/images/checkIcon.svg';
+import { ReactComponent as RiskyIcon } from 'assets/images/riskyIcon.svg';
 
 const HealthyBadge = ({ status, icon }) => {
     const generateStatus = () => {
diff --git a/ui_src/src/components/helper/index.js b/ui_src/src/components/helper/index.js
index c861fcd30..199680f4d 100644
--- a/ui_src/src/components/helper/index.js
+++ b/ui_src/src/components/helper/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import React, { Fragment } from 'react';
 import HelpIcon from '@material-ui/icons/Help';
 
-import TooltipComponent from '../tooltip/tooltip';
+import TooltipComponent from 'components/tooltip/tooltip';
 const Helper = ({ text }) => {
     return (
         <Fragment>
diff --git a/ui_src/src/components/indication/index.js b/ui_src/src/components/indication/index.js
index b9a888afe..f55da69cf 100644
--- a/ui_src/src/components/indication/index.js
+++ b/ui_src/src/components/indication/index.js
@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import './style.scss';
 import React from 'react';
-import TooltipComponent from '../tooltip/tooltip';
+import TooltipComponent from 'components/tooltip/tooltip';
 
 const StatusIndication = ({ is_active, is_deleted }) => {
     if (is_active) {
diff --git a/ui_src/src/components/learnMore/index.js b/ui_src/src/components/learnMore/index.js
index 74c200b31..a92b8b796 100644
--- a/ui_src/src/components/learnMore/index.js
+++ b/ui_src/src/components/learnMore/index.js
@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import './style.scss';
-import { ReactComponent as PurpleQuestionMark } from '../../assets/images/purpleQuestionMark.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
 import React from 'react';
 
 const LearnMore = ({ url, height }) => {
diff --git a/ui_src/src/components/loader/index.js b/ui_src/src/components/loader/index.js
index 1d291d9e8..ffb5a0425 100644
--- a/ui_src/src/components/loader/index.js
+++ b/ui_src/src/components/loader/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import React from 'react';
 import Lottie from 'lottie-react';
 
-import animationData from '../../assets/lotties/MemphisGif.json';
+import animationData from 'assets/lotties/MemphisGif.json';
 
 const Loader = ({ background = true, auto = true }) => {
     return (
diff --git a/ui_src/src/components/lockFeature/index.js b/ui_src/src/components/lockFeature/index.js
index b27a2d3df..bd5dfaa0e 100644
--- a/ui_src/src/components/lockFeature/index.js
+++ b/ui_src/src/components/lockFeature/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useState } from 'react';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import CloudModal from '../cloudModal/';
+import CloudModal from 'components/cloudModal/';
 
 const LockFeature = ({}) => {
     const [openCloudModal, setOpenCloudModal] = useState(false);
diff --git a/ui_src/src/components/modal/index.js b/ui_src/src/components/modal/index.js
index 0a30680aa..d1cca16c6 100644
--- a/ui_src/src/components/modal/index.js
+++ b/ui_src/src/components/modal/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import React, { useEffect } from 'react';
 import { Modal } from 'antd';
 
-import Button from '../button';
+import Button from 'components/button';
 
 const TransitionsModal = ({
     height,
diff --git a/ui_src/src/components/partitionsFilter/index.js b/ui_src/src/components/partitionsFilter/index.js
index 3896355dd..4f6a84ade 100644
--- a/ui_src/src/components/partitionsFilter/index.js
+++ b/ui_src/src/components/partitionsFilter/index.js
@@ -14,9 +14,9 @@ import './style.scss';
 
 import React, { useContext, useState } from 'react';
 import { Divider, Popover } from 'antd';
-import { ReactComponent as PartitionIcon } from '../../assets/images/partitionIcon.svg';
-import { ReactComponent as CollapseArrowIcon } from '../../assets/images/collapseArrow.svg';
-import { StationStoreContext } from '../../domain/stationOverview';
+import { ReactComponent as PartitionIcon } from 'assets/images/partitionIcon.svg';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { StationStoreContext } from 'domain/stationOverview';
 
 const PartitionsFilter = ({ partitions_number }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/components/produceMessages/index.js b/ui_src/src/components/produceMessages/index.js
index 48fa294bc..05268de88 100644
--- a/ui_src/src/components/produceMessages/index.js
+++ b/ui_src/src/components/produceMessages/index.js
@@ -19,20 +19,20 @@ import { useHistory } from 'react-router-dom';
 import { Divider, Form, Space } from 'antd';
 import * as monaco from 'monaco-editor';
 
-import { StationStoreContext } from '../../domain/stationOverview';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { convertArrayToObject, generateJSONWithMaxLength, isCloud } from '../../services/valueConvertor';
-import { ReactComponent as RefreshIcon } from '../../assets/images/refresh.svg';
-import InputNumberComponent from '../InputNumber';
-import { httpRequest } from '../../services/http';
-import TitleComponent from '../titleComponent';
-import SelectComponent from '../select';
-import Switcher from '../switcher';
-import Button from '../button';
-import Input from '../Input';
-import Copy from '../copy';
-import pathDomains from '../../router';
-import CloudOnly from '../cloudOnly';
+import { StationStoreContext } from 'domain/stationOverview';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { convertArrayToObject, generateJSONWithMaxLength, isCloud } from 'services/valueConvertor';
+import { ReactComponent as RefreshIcon } from 'assets/images/refresh.svg';
+import InputNumberComponent from 'components/InputNumber';
+import { httpRequest } from 'services/http';
+import TitleComponent from 'components/titleComponent';
+import SelectComponent from 'components/select';
+import Switcher from 'components/switcher';
+import Button from 'components/button';
+import Input from 'components/Input';
+import Copy from 'components/copy';
+import pathDomains from 'router';
+import CloudOnly from 'components/cloudOnly';
 
 loader.init();
 loader.config({ monaco });
@@ -136,7 +136,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                     <p className="field-title">JSON-based value</p>
                     <div className="generate-action" onClick={() => generateMessage()}>
                         <RefreshIcon width={14} />
-                        <span>Re-generate</span>
+                        <span>Generate example</span>
                     </div>
                 </div>
                 <div className="message-example">
@@ -179,8 +179,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                                     backgroundColorType="none"
                                                     borderColorType="gray"
                                                     height="40px"
-                                                    onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
-                                                    onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
+                                                    onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
+                                                    onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
                                                     value={formFields.key}
                                                 />
                                             </Form.Item>
@@ -202,8 +202,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                                     backgroundColorType="none"
                                                     borderColorType="gray"
                                                     height="40px"
-                                                    onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
-                                                    onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
+                                                    onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
+                                                    onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
                                                     value={formFields.header}
                                                 />
                                             </Form.Item>
@@ -223,17 +223,13 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                     <Divider className="seperator" />
                     <div className="by-pass-switcher">
                         <TitleComponent
-                            headerTitle="Ignore enforced schema"
+                            headerTitle="Bypass schema enforcement"
                             cloudOnly={isCloud() ? false : true}
                             typeTitle="sub-header"
                             headerDescription="Check this box to avoid schema validation"
                         />
                         <Form.Item className="form-input" name="bypass_schema" initialValue={isCloud() ? false : true}>
-                            <Switcher
-                                disabled={!isCloud()}
-                                onChange={(e) => creationForm.setFieldsValue({ bypass_schema: e })}
-                                checked={isCloud() ? formFields.bypass_schema : true}
-                            />
+                            <Switcher disabled={!isCloud()} onChange={(e) => creationForm.setFieldsValue({'bypass_schema': e})} checked={isCloud() ? formFields.bypass_schema : true} />
                         </Form.Item>
                     </div>
                     <Divider className="seperator" />
@@ -252,7 +248,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                                 height="45px"
                                 width="100%"
                                 options={partitons}
-                                onChange={(e) => creationForm.setFieldsValue({ partition_number: e.target.value })}
+                                onChange={(e) => creationForm.setFieldsValue({'partition_number': e.target.value})}
                                 popupClassName="select-options"
                                 disabled={!isCloud()}
                             />
@@ -266,7 +262,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
                             <InputNumberComponent
                                 min={1}
                                 max={isCloud() ? 1000 : 1}
-                                onChange={(e) => creationForm.setFieldsValue({ amount: e })}
+                                onChange={(e) => creationForm.setFieldsValue({'amount': e})}
                                 value={formFields.amount}
                                 placeholder={formFields.amount || 1}
                                 disabled={!isCloud()}
diff --git a/ui_src/src/components/radioButton/index.js b/ui_src/src/components/radioButton/index.js
index 36dba3e43..d60329294 100644
--- a/ui_src/src/components/radioButton/index.js
+++ b/ui_src/src/components/radioButton/index.js
@@ -14,8 +14,8 @@ import './style.scss';
 
 import { Radio } from 'antd';
 import React from 'react';
-import TooltipComponent from '../tooltip/tooltip';
-import CloudOnly from '../cloudOnly';
+import TooltipComponent from 'components/tooltip/tooltip';
+import CloudOnly from 'components/cloudOnly';
 
 const RadioButton = ({ options = [], radioValue, onChange, optionType, disabled, vertical, fontFamily, radioWrapper, labelType, height, radioStyle }) => {
     const handleChange = (e) => {
diff --git a/ui_src/src/components/refreshButton/index.js b/ui_src/src/components/refreshButton/index.js
index 7a6bde040..15af45e7a 100644
--- a/ui_src/src/components/refreshButton/index.js
+++ b/ui_src/src/components/refreshButton/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 import React from 'react';
 import { Spin, Badge } from 'antd';
 import { SyncOutlined } from '@ant-design/icons';
-import { ReactComponent as RefreshIcon } from '../../assets/images/refresh.svg';
+import { ReactComponent as RefreshIcon } from 'assets/images/refresh.svg';
 
 const RefreshButton = ({ refreshIndeicator, onClick, isLoading }) => {
     return (
diff --git a/ui_src/src/components/runBenchmarkModal/index.js b/ui_src/src/components/runBenchmarkModal/index.js
index dfb23ac9c..04e3f9a21 100644
--- a/ui_src/src/components/runBenchmarkModal/index.js
+++ b/ui_src/src/components/runBenchmarkModal/index.js
@@ -13,13 +13,13 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import Modal from '../modal';
+import Modal from 'components/modal';
 import { IoRocket } from 'react-icons/io5';
-import Copy from '../copy';
-import CustomTabs from '../Tabs';
-import { githubUrls } from '../../const/globalConst';
+import Copy from 'components/copy';
+import CustomTabs from 'components/Tabs';
+import { githubUrls } from 'const/globalConst';
 import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
-import { LOCAL_STORAGE_BROKER_HOST, LOCAL_STORAGE_ENV, LOCAL_STORAGE_ACCOUNT_ID } from '../../const/localStorageConsts';
+import { LOCAL_STORAGE_BROKER_HOST, LOCAL_STORAGE_ENV, LOCAL_STORAGE_ACCOUNT_ID } from 'const/localStorageConsts';
 
 let write =
     'mem bench producer --message-size 128 --count 1000 --concurrency 1 --host <host> --account-id <account-id(not needed for open-source)> --user <client type user> --password <password>';
diff --git a/ui_src/src/components/sdkExample/index.js b/ui_src/src/components/sdkExample/index.js
index 21cc50c45..cfc05dae6 100644
--- a/ui_src/src/components/sdkExample/index.js
+++ b/ui_src/src/components/sdkExample/index.js
@@ -18,7 +18,7 @@ import Editor, { loader } from '@monaco-editor/react';
 import { Divider, Form, Collapse } from 'antd';
 import * as monaco from 'monaco-editor';
 
-import { REST_CODE_EXAMPLE, SDK_CODE_EXAMPLE, sdkLangOptions, restLangOptions } from '../../const/codeExample';
+import { REST_CODE_EXAMPLE, SDK_CODE_EXAMPLE, sdkLangOptions, restLangOptions } from 'const/codeExample';
 import {
     LOCAL_STORAGE_ACCOUNT_ID,
     LOCAL_STORAGE_BROKER_HOST,
@@ -30,24 +30,24 @@ import {
     LOCAL_STORAGE_PRODUCER_PROGRAMMING_LANGUAGE,
     LOCAL_STORAGE_CONSUMER_COMMUNICATION_TYPE,
     LOCAL_STORAGE_CONSUMER_PROGRAMMING_LANGUAGE,
-} from '../../const/localStorageConsts';
-import GenerateTokenModal from '../../domain/stationOverview/components/generateTokenModal';
-import { ReactComponent as NoCodeExampleIcon } from '../../assets/images/noCodeExample.svg';
-import { ReactComponent as RefreshIcon } from '../../assets/images/refresh.svg';
-import { ReactComponent as CodeIcon } from '../../assets/images/codeIcon.svg';
-import CreateUserDetails from '../../domain/users/createUserDetails';
-import CollapseArrow from '../../assets/images/collapseArrow.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import TitleComponent from '../titleComponent/index';
-import { httpRequest } from '../../services/http';
-import SegmentButton from '../segmentButton';
-import CustomSelect from '../customSelect';
-import SelectComponent from '../select';
-import Switcher from '../switcher';
-import Modal from '../modal';
-import Input from '../Input';
-import Copy from '../copy';
-import { Drawer } from 'antd';
+} from 'const/localStorageConsts';
+import GenerateTokenModal from 'domain/stationOverview/components/generateTokenModal';
+import { ReactComponent as NoCodeExampleIcon } from 'assets/images/noCodeExample.svg';
+import { ReactComponent as RefreshIcon } from 'assets/images/refresh.svg';
+import { ReactComponent as CodeIcon } from 'assets/images/codeIcon.svg';
+import CreateUserDetails from 'domain/users/createUserDetails';
+import CollapseArrow from 'assets/images/collapseArrow.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import TitleComponent from 'components/titleComponent/index';
+import { httpRequest } from 'services/http';
+import SegmentButton from 'components/segmentButton';
+import CustomSelect from 'components/customSelect';
+import SelectComponent from 'components/select';
+import Switcher from 'components/switcher';
+import Modal from 'components/modal';
+import Input from 'components/Input';
+import Copy from 'components/copy';
+import Drawer from "components/drawer";
 
 loader.init();
 loader.config({ monaco });
diff --git a/ui_src/src/components/searchInput/index.js b/ui_src/src/components/searchInput/index.js
index fb00439be..2dc9cca50 100644
--- a/ui_src/src/components/searchInput/index.js
+++ b/ui_src/src/components/searchInput/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import { Input } from 'antd';
 import React from 'react';
 
-import { getFontColor, getBackgroundColor, getBorderRadius, getBorderColor, getBoxShadows } from '../../utils/styleTemplates';
+import { getFontColor, getBackgroundColor, getBorderRadius, getBorderColor, getBoxShadows } from 'utils/styleTemplates';
 
 const SearchInput = (props) => {
     const {
diff --git a/ui_src/src/components/select/index.js b/ui_src/src/components/select/index.js
index eb3d880cd..5f711fecf 100644
--- a/ui_src/src/components/select/index.js
+++ b/ui_src/src/components/select/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import { Select } from 'antd';
 import React from 'react';
 
-import { getFontColor, getBackgroundColor, getBorderColor, getBoxShadows, getBorderRadius } from '../../utils/styleTemplates';
+import { getFontColor, getBackgroundColor, getBorderColor, getBoxShadows, getBorderRadius } from 'utils/styleTemplates';
 import ArrowDropDownRounded from '@material-ui/icons/ArrowDropDownRounded';
 
 const { Option } = Select;
diff --git a/ui_src/src/components/selectThroughput/index.js b/ui_src/src/components/selectThroughput/index.js
index f3c6cf66c..667a2935c 100644
--- a/ui_src/src/components/selectThroughput/index.js
+++ b/ui_src/src/components/selectThroughput/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import { ArrowDropDownRounded } from '@material-ui/icons';
 import React from 'react';
 import { Select } from 'antd';
-import { ReactComponent as ComponentIcon } from '../../assets/images/componentIcon.svg';
+import { ReactComponent as ComponentIcon } from 'assets/images/componentIcon.svg';
 
 const { Option } = Select;
 
diff --git a/ui_src/src/components/selectVersion/index.js b/ui_src/src/components/selectVersion/index.js
index 9837f4ce4..f1ea3115b 100644
--- a/ui_src/src/components/selectVersion/index.js
+++ b/ui_src/src/components/selectVersion/index.js
@@ -16,8 +16,8 @@ import { Select } from 'antd';
 import React from 'react';
 
 import { ArrowDropDownRounded, FiberManualRecord } from '@material-ui/icons';
-import ActiveBadge from '../activeBadge';
-import { parsingDateWithotTime } from '../../services/valueConvertor';
+import ActiveBadge from 'components/activeBadge';
+import { parsingDateWithotTime } from 'services/valueConvertor';
 
 const { Option } = Select;
 
diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js
index e84948224..ee604b2b6 100644
--- a/ui_src/src/components/sideBar/index.js
+++ b/ui_src/src/components/sideBar/index.js
@@ -18,8 +18,9 @@ import ExitToAppOutlined from '@material-ui/icons/ExitToAppOutlined';
 import PersonOutlinedIcon from '@material-ui/icons/PersonOutlined';
 import { BsFillChatSquareTextFill } from 'react-icons/bs';
 import { useHistory } from 'react-router-dom';
-import { Divider, Popover, Drawer } from 'antd';
-import CloudMoadl from '../cloudModal';
+import { Divider, Popover } from 'antd';
+import Drawer from "components/drawer";
+import CloudModal from 'components/cloudModal';
 import {
     LOCAL_STORAGE_ACCOUNT_NAME,
     LOCAL_STORAGE_AVATAR_ID,
@@ -28,58 +29,58 @@ import {
     LOCAL_STORAGE_USER_NAME,
     LOCAL_STORAGE_SKIP_GET_STARTED,
     USER_IMAGE, LOCAL_STORAGE_DARK_MODE
-} from '../../const/localStorageConsts';
-import { ReactComponent as IntegrationColorIcon } from '../../assets/images/integrationIconColor.svg';
-import { ReactComponent as OverviewActiveIcon } from '../../assets/images/overviewIconActive.svg';
-import { ReactComponent as StationsActiveIcon } from '../../assets/images/stationsIconActive.svg';
-import { compareVersions, isCloud, showUpgradePlan } from '../../services/valueConvertor';
-import { ReactComponent as FunctionsActiveIcon } from '../../assets/images/functionsIconActive.svg';
-import { ReactComponent as SchemaActiveIcon } from '../../assets/images/schemaIconActive.svg';
-import { ReactComponent as IntegrationIcon } from '../../assets/images/integrationIcon.svg';
+} from 'const/localStorageConsts';
+import { ReactComponent as IntegrationColorIcon } from 'assets/images/integrationIconColor.svg';
+import { ReactComponent as OverviewActiveIcon } from 'assets/images/overviewIconActive.svg';
+import { ReactComponent as StationsActiveIcon } from 'assets/images/stationsIconActive.svg';
+import { compareVersions, isCloud, showUpgradePlan } from 'services/valueConvertor';
+import { ReactComponent as FunctionsActiveIcon } from 'assets/images/functionsIconActive.svg';
+import { ReactComponent as SchemaActiveIcon } from 'assets/images/schemaIconActive.svg';
+import { ReactComponent as IntegrationIcon } from 'assets/images/integrationIcon.svg';
 import { HiUsers } from 'react-icons/hi';
-import { ReactComponent as FunctionsIcon } from '../../assets/images/functionsIcon.svg';
-import { ReactComponent as OverviewIcon } from '../../assets/images/overviewIcon.svg';
-import { ReactComponent as StationsIcon } from '../../assets/images/stationsIcon.svg';
-import { ReactComponent as SupportIcon } from '../../assets/images/supportIcon.svg';
-import { ReactComponent as SupportColorIcon } from '../../assets/images/supportColorIcon.svg';
-import { ReactComponent as NewStationIcon } from '../../assets/images/newStationIcon.svg';
-import { ReactComponent as NewSchemaIcon } from '../../assets/images/newSchemaIcon.svg';
-import { ReactComponent as NewUserIcon } from '../../assets/images/newUserIcon.svg';
-import { ReactComponent as NewIntegrationIcon } from '../../assets/images/newIntegrationIcon.svg';
+import { ReactComponent as FunctionsIcon } from 'assets/images/functionsIcon.svg';
+import { ReactComponent as OverviewIcon } from 'assets/images/overviewIcon.svg';
+import { ReactComponent as StationsIcon } from 'assets/images/stationsIcon.svg';
+import { ReactComponent as SupportIcon } from 'assets/images/supportIcon.svg';
+import { ReactComponent as SupportColorIcon } from 'assets/images/supportColorIcon.svg';
+import { ReactComponent as NewStationIcon } from 'assets/images/newStationIcon.svg';
+import { ReactComponent as NewSchemaIcon } from 'assets/images/newSchemaIcon.svg';
+import { ReactComponent as NewUserIcon } from 'assets/images/newUserIcon.svg';
+import { ReactComponent as NewIntegrationIcon } from 'assets/images/newIntegrationIcon.svg';
 import { BsHouseHeartFill } from 'react-icons/bs';
-import { ReactComponent as EditIcon } from '../../assets/images/editIcon.svg';
-import { GithubRequest } from '../../services/githubRequests';
-import { ReactComponent as LogsActiveIcon } from '../../assets/images/logsActive.svg';
-import { ReactComponent as SchemaIcon } from '../../assets/images/schemaIcon.svg';
-import { LATEST_RELEASE_URL } from '../../config';
-import { ReactComponent as LogsIcon } from '../../assets/images/logsIcon.svg';
+import { ReactComponent as EditIcon } from 'assets/images/editIcon.svg';
+import { GithubRequest } from 'services/githubRequests';
+import { ReactComponent as LogsActiveIcon } from 'assets/images/logsActive.svg';
+import { ReactComponent as SchemaIcon } from 'assets/images/schemaIcon.svg';
+import { LATEST_RELEASE_URL } from 'config';
+import { ReactComponent as LogsIcon } from 'assets/images/logsIcon.svg';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import Logo from '../../assets/images/logo.svg';
-import FullLogo from '../../assets/images/fullLogo.svg';
-import FullLogoWhite from '../../assets/images/white-logo.svg';
-import AuthService from '../../services/auth';
-import { sendTrace, useGetAllowedActions } from '../../services/genericServices';
-import { Context } from '../../hooks/store';
-import pathDomains from '../../router';
-import Spinner from '../spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Logo from 'assets/images/logo.svg';
+import FullLogo from 'assets/images/fullLogo.svg';
+import FullLogoWhite from 'assets/images/white-logo.svg';
+import AuthService from 'services/auth';
+import { sendTrace, useGetAllowedActions } from 'services/genericServices';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
+import Spinner from 'components/spinner';
 import Support from './support';
-import LearnMore from '../learnMore';
-import GetStarted from '../getStartedModal';
-import Modal from '../modal';
-import CreateStationForm from '../createStationForm';
-import { ReactComponent as StationIcon } from '../../assets/images/stationIcon.svg';
-import CreateUserDetails from '../../domain/users/createUserDetails';
-import UpgradePlans from '../upgradePlans';
+import LearnMore from 'components/learnMore';
+import GetStarted from 'components/getStartedModal';
+import Modal from 'components/modal';
+import CreateStationForm from 'components/createStationForm';
+import { ReactComponent as StationIcon } from 'assets/images/stationIcon.svg';
+import CreateUserDetails from 'domain/users/createUserDetails';
+import UpgradePlans from 'components/upgradePlans';
 import { FaBook, FaDiscord } from 'react-icons/fa';
 import { BiEnvelope } from 'react-icons/bi';
-import { ReactComponent as ArrowRight } from '../../assets/images/arrowRight.svg';
-import { ReactComponent as PlusGrayIcon } from '../../assets/images/plusIconGray.svg';
-import { ReactComponent as CloudUploadIcon } from '../../assets/images/cloudUpload.svg';
-import { ReactComponent as ArrowTopGrayIcon } from '../../assets/images/arrowTopGray.svg';
-import { ReactComponent as SunIcon } from '../../assets/images/sun.svg';
-import { ReactComponent as MoonIcon } from '../../assets/images/moon.svg';
+import { ReactComponent as ArrowRight } from 'assets/images/arrowRight.svg';
+import { ReactComponent as PlusGrayIcon } from 'assets/images/plusIconGray.svg';
+import { ReactComponent as CloudUploadIcon } from 'assets/images/cloudUpload.svg';
+import { ReactComponent as ArrowTopGrayIcon } from 'assets/images/arrowTopGray.svg';
+import { ReactComponent as SunIcon } from 'assets/images/sun.svg';
+import { ReactComponent as MoonIcon } from 'assets/images/moon.svg';
 
 const overlayStylesSupport = {
     marginTop: window.innerHeight > 560 && 'calc(100vh - 560px)',
@@ -95,7 +96,7 @@ function SideBar() {
     const createStationRef = useRef(null);
     const createUserRef = useRef(null);
 
-    const [avatarUrl, SetAvatarUrl] = useState(require('../../assets/images/bots/avatar1.svg'));
+    const [avatarUrl, SetAvatarUrl] = useState(require('assets/images/bots/avatar1.svg'));
     const [popoverOpenSetting, setPopoverOpenSetting] = useState(false);
     const [popoverOpenSupport, setPopoverOpenSupport] = useState(false);
     const [popoverOpenSupportContextMenu, setPopoverOpenSupportContextMenu] = useState(false);
@@ -206,7 +207,7 @@ function SideBar() {
     }, [darkMode]); // Depend on darkMode state
 
     const setAvatarImage = (avatarId) => {
-        SetAvatarUrl(require(`../../assets/images/bots/avatar${avatarId}.svg`));
+        SetAvatarUrl(require(`assets/images/bots/avatar${avatarId}.svg`));
     };
 
     const handleLogout = async () => {
@@ -564,7 +565,7 @@ function SideBar() {
                     route="administration"
                 />
             </div>
-            <CloudMoadl type={bannerType} open={cloudModalOpen} handleClose={() => setCloudModalOpen(false)} />
+            <CloudModal type={bannerType} open={cloudModalOpen} handleClose={() => setCloudModalOpen(false)} />
             <div className="bottom-icons">
                 {!isCloud() && (
                     <MenuItem
diff --git a/ui_src/src/components/sideBar/support.js b/ui_src/src/components/sideBar/support.js
index 3308f2018..5edeb1e00 100644
--- a/ui_src/src/components/sideBar/support.js
+++ b/ui_src/src/components/sideBar/support.js
@@ -14,18 +14,18 @@ import './style.scss';
 
 import React, { useState } from 'react';
 
-import { ReactComponent as SupportColorIcon } from '../../assets/images/supportIconColor.svg';
-import { ReactComponent as DocumentIcon } from '../../assets/images/documentIcon.svg';
-import { ReactComponent as MailsendIcon } from '../../assets/images/mailsendIcon.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import SelectComponent from '../select';
-import { DOC_URL } from '../../config';
-import EmailLink from '../emailLink';
-import Button from '../button';
-import Input from '../Input';
+import { ReactComponent as SupportColorIcon } from 'assets/images/supportIconColor.svg';
+import { ReactComponent as DocumentIcon } from 'assets/images/documentIcon.svg';
+import { ReactComponent as MailsendIcon } from 'assets/images/mailsendIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import SelectComponent from 'components/select';
+import { DOC_URL } from 'config';
+import EmailLink from 'components/emailLink';
+import Button from 'components/button';
+import Input from 'components/Input';
 import { message } from 'antd';
-import { showMessages } from '../../services/genericServices';
+import { showMessages } from 'services/genericServices';
 
 const Support = ({ closeModal }) => {
     const [severity, setSeverity] = useState('Critical (Cannot produce or consume data)');
diff --git a/ui_src/src/components/skipGetStartedModal/index.js b/ui_src/src/components/skipGetStartedModal/index.js
index 1774dda35..0203a8b76 100644
--- a/ui_src/src/components/skipGetStartedModal/index.js
+++ b/ui_src/src/components/skipGetStartedModal/index.js
@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React from 'react';
-import Modal from '../modal';
+import Modal from 'components/modal';
 
 const SkipGetStrtedModal = ({ open, skip, cancel }) => {
     return (
diff --git a/ui_src/src/components/stationsInstructions/index.js b/ui_src/src/components/stationsInstructions/index.js
index 0e7db1eef..923e379fc 100644
--- a/ui_src/src/components/stationsInstructions/index.js
+++ b/ui_src/src/components/stationsInstructions/index.js
@@ -1,7 +1,7 @@
-import Button from '../../components/button';
+import Button from 'components/button';
 import React from 'react';
-import { isCloud } from '../../services/valueConvertor';
-import LockFeature from '../lockFeature';
+import { isCloud } from 'services/valueConvertor';
+import LockFeature from 'components/lockFeature';
 import './style.scss';
 
 const StationsInstructions = ({ upgrade, header, button, image, newStation, des }) => {
diff --git a/ui_src/src/components/switcher/index.js b/ui_src/src/components/switcher/index.js
index 6aa5c3b6f..b0ecb87a2 100644
--- a/ui_src/src/components/switcher/index.js
+++ b/ui_src/src/components/switcher/index.js
@@ -13,7 +13,7 @@ import './style.scss';
 
 import { Switch } from 'antd';
 import React from 'react';
-import TooltipComponent from '../tooltip/tooltip';
+import TooltipComponent from 'components/tooltip/tooltip';
 
 const Switcher = ({ checkedChildren, unCheckedChildren, onChange, checked, disabled, tooltip, loading }) => {
     return (
diff --git a/ui_src/src/components/tag/index.js b/ui_src/src/components/tag/index.js
index bac4b759b..e6ed422e6 100644
--- a/ui_src/src/components/tag/index.js
+++ b/ui_src/src/components/tag/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 import { Close } from '@material-ui/icons';
 
 import React from 'react';
-import { ColorPalette } from '../../const/globalConst';
+import { ColorPalette } from 'const/globalConst';
 
 const Tag = ({ tag, onDelete, editable, border = false, onClick, rounded = false }) => {
     return (
diff --git a/ui_src/src/components/tagList/index.js b/ui_src/src/components/tagList/index.js
index b78aec09b..423f96f47 100644
--- a/ui_src/src/components/tagList/index.js
+++ b/ui_src/src/components/tagList/index.js
@@ -14,10 +14,10 @@ import './style.scss';
 
 import React, { useState, useEffect, useRef } from 'react';
 import { Popover } from 'antd';
-import Tag from '../tag';
+import Tag from 'components/tag';
 import { Add, AddRounded } from '@material-ui/icons';
 import RemainingTagsList from './remainingTagsList';
-import TagsPicker from '../tagsPicker';
+import TagsPicker from 'components/tagsPicker';
 
 const remainingTagsPopInnerStyle = { maxWidth: '155px', padding: '10px', paddingBottom: '10px', borderRadius: '12px', border: '1px solid #f0f0f0' };
 const tagsPickerPopInnerStyle = {
diff --git a/ui_src/src/components/tagList/remainingTagsList/index.js b/ui_src/src/components/tagList/remainingTagsList/index.js
index b1cdeb273..ec8e5c81a 100644
--- a/ui_src/src/components/tagList/remainingTagsList/index.js
+++ b/ui_src/src/components/tagList/remainingTagsList/index.js
@@ -11,7 +11,7 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import './style.scss';
-import Tag from '../../tag';
+import Tag from 'components/tag';
 
 const RemainingTagsList = ({ tags, handleDelete, editable }) => {
     return (
diff --git a/ui_src/src/components/tagsPicker/index.js b/ui_src/src/components/tagsPicker/index.js
index 5212458e6..d7681e146 100644
--- a/ui_src/src/components/tagsPicker/index.js
+++ b/ui_src/src/components/tagsPicker/index.js
@@ -21,16 +21,16 @@
 
 import './style.scss';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import SearchInput from '../searchInput';
-import { ReactComponent as SearchIcon } from '../../assets/images/searchIcon.svg';
-import Modal from '../../components/modal';
-import { httpRequest } from '../../services/http';
-import { ApiEndpoints } from '../../const/apiEndpoints';
+import SearchInput from 'components/searchInput';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import Modal from 'components/modal';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import NewTagGenerator from './newTagGenerator';
 import { AddRounded, Check } from '@material-ui/icons';
 import { Divider } from 'antd';
-import { ReactComponent as EmptyTagsIcon } from '../../assets/images/emptyTags.svg';
-import Loader from '../loader';
+import { ReactComponent as EmptyTagsIcon } from 'assets/images/emptyTags.svg';
+import Loader from 'components/loader';
 
 const TagsPicker = forwardRef(({ tags, entity_name, entity_type, handleUpdatedTagList, newEntity = false }, ref) => {
     const [tagsToDisplay, setTagsToDisplay] = useState([]);
diff --git a/ui_src/src/components/tagsPicker/newTagGenerator/index.js b/ui_src/src/components/tagsPicker/newTagGenerator/index.js
index e329e4005..6e5b2cc54 100644
--- a/ui_src/src/components/tagsPicker/newTagGenerator/index.js
+++ b/ui_src/src/components/tagsPicker/newTagGenerator/index.js
@@ -12,14 +12,14 @@
 
 import './style.scss';
 import React, { useEffect, useState } from 'react';
-import { Form, message, Divider } from 'antd';
-import Button from '../../button';
-import Input from '../../Input';
-import { httpRequest } from '../../../services/http';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import ColorPicker from '../../colorPicker';
-import { ColorPalette } from '../../../const/globalConst';
-import { showMessages } from '../../../services/genericServices';
+import { Form, Divider } from 'antd';
+import Button from 'components/button';
+import Input from 'components/Input';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import ColorPicker from 'components/colorPicker';
+import { ColorPalette } from 'const/globalConst';
+import { showMessages } from 'services/genericServices';
 
 const NewTagGenerator = ({ searchVal, allTags, handleFinish, handleCancel }) => {
     const [creationForm] = Form.useForm();
diff --git a/ui_src/src/components/titleComponent/index.js b/ui_src/src/components/titleComponent/index.js
index 5ee1dc076..e3613f796 100644
--- a/ui_src/src/components/titleComponent/index.js
+++ b/ui_src/src/components/titleComponent/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import './style.scss';
 import Lottie from 'lottie-react';
-import CloudOnly from '../cloudOnly';
-import { isCloud } from '../../services/valueConvertor';
+import CloudOnly from 'components/cloudOnly';
+import { isCloud } from 'services/valueConvertor';
 
 const TitleComponent = (props) => {
     const { headerTitle, spanHeader, typeTitle = 'header', headerDescription, style, img, finish, required, learnMore = false, link, cloudOnly = false } = props;
diff --git a/ui_src/src/components/upgradePlans/index.js b/ui_src/src/components/upgradePlans/index.js
index a5e8c39b9..4d314aaa5 100644
--- a/ui_src/src/components/upgradePlans/index.js
+++ b/ui_src/src/components/upgradePlans/index.js
@@ -19,18 +19,18 @@ import React, { Fragment, useContext, useState } from 'react';
 import { BsCheckLg } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
 
-import { ReactComponent as RedirectIcon } from '../../assets/images/redirectIcon.svg';
-import { showMessages, useGetAllowedActions } from '../../services/genericServices';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import pathDomains from '../../router';
-import Button from '../button';
-import Modal from '../modal';
-import Input from '../Input';
-import CheckboxComponent from '../checkBox';
-import { Context } from '../../hooks/store';
-import { LOCAL_STORAGE_PLAN } from '../../const/localStorageConsts';
-import { planType } from '../../const/globalConst';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { showMessages, useGetAllowedActions } from 'services/genericServices';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import pathDomains from 'router';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import Input from 'components/Input';
+import CheckboxComponent from 'components/checkBox';
+import { Context } from 'hooks/store';
+import { LOCAL_STORAGE_PLAN } from 'const/localStorageConsts';
+import { planType } from 'const/globalConst';
 
 const reasons = ['Price is too high', 'Missing feature', 'Bad support', 'Performance', 'Limitations', 'Not using anymore', 'I switched to a competitor', 'Other'];
 
diff --git a/ui_src/src/components/videoPlayer/index.js b/ui_src/src/components/videoPlayer/index.js
index a3b55505b..803ee518d 100644
--- a/ui_src/src/components/videoPlayer/index.js
+++ b/ui_src/src/components/videoPlayer/index.js
@@ -15,9 +15,9 @@ import './style.scss';
 import React, { useState } from 'react';
 import ReactPlayer from 'react-player';
 
-import { ReactComponent as PlayVideoIcon } from '../../assets/images/playVideoIcon.svg';
-import { ReactComponent as Img404Icon } from '../../assets/images/404.svg';
-import { sendTrace } from '../../services/genericServices';
+import { ReactComponent as PlayVideoIcon } from 'assets/images/playVideoIcon.svg';
+import { ReactComponent as Img404Icon } from 'assets/images/404.svg';
+import { sendTrace } from 'services/genericServices';
 
 const VideoPlayer = ({ url, bgImg, width, height, tracePlay }) => {
     const [playState, setPlayState] = useState(false);
diff --git a/ui_src/src/const/integrationList.js b/ui_src/src/const/integrationList.js
index 946c94939..f0ce6c2a4 100644
--- a/ui_src/src/const/integrationList.js
+++ b/ui_src/src/const/integrationList.js
@@ -10,37 +10,37 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import datadogBannerPopup from '../assets/images/datadogBannerPopup.webp';
-import elasticBannerPopup from '../assets/images/elasticBannerPopup.webp';
-import grafanaBannerPopup from '../assets/images/grafanaBannerPopup.webp';
-import debeziumBannerPopup from '../assets/images/debeziumBannerPopup.webp';
-import slackBannerPopup from '../assets/images/slackBannerPopup.webp';
-import zapierBannerPopup from '../assets/images/zapierBannerPopup.webp';
-import pagerdutyBanner from '../assets/images/pagerdutyBanner.webp';
-import influxDBBanner from '../assets/images/influxDBBanner.webp';
-import newrelicBanner from '../assets/images/newrelicBanner.webp';
-import elasticBanner from '../assets/images/elasticBanner.webp';
-import s3BannerPopup from '../assets/images/s3BannerPopup.webp';
-import datadogBanner from '../assets/images/datadogBanner.webp';
-import grafanaBanner from '../assets/images/grafanaBanner.webp';
-import zapierBanner from '../assets/images/zapierBanner.webp';
-import debeziumBanner from '../assets/images/debeziumBanner.webp';
-import { ReactComponent as PageDutyIcon } from '../assets/images/pagerDutyIcon.svg';
-import { ReactComponent as GithubIntegrationIcon } from '../assets/images/githubIntegrationIcon.svg';
-import githubBannerPopup from '../assets/images/githubBannerPopup.webp';
-import githubBanner from '../assets/images/githubBanner.webp';
-import { ReactComponent as NewRelicIcon } from '../assets/images/newrelicIcon.svg';
-import { ReactComponent as InfluxDBIcon } from '../assets/images/influxDBIcon.svg';
-import slackBanner from '../assets/images/slackBanner.webp';
-import { ReactComponent as DatadogIcon } from '../assets/images/datadogIcon.svg';
-import { ReactComponent as GrafanaIcon } from '../assets/images/grafanaIcon.svg';
-import { ReactComponent as DebeziumIcon } from '../assets/images/debeziumIcon.svg';
-import { ReactComponent as ElasticIcon } from '../assets/images/elasticIcon.svg';
-import { ReactComponent as ZapierIcon } from '../assets/images/zapierIcon.svg';
-import { ReactComponent as SlackLogo } from '../assets/images/slackLogo.svg';
-import { ReactComponent as MemphisVerifiedIcon } from '../assets/images/memphisFunctionIcon.svg';
-import s3Banner from '../assets/images/s3Banner.webp';
-import { ReactComponent as S3Logo } from '../assets/images/s3Logo.svg';
+import datadogBannerPopup from 'assets/images/datadogBannerPopup.webp';
+import elasticBannerPopup from 'assets/images/elasticBannerPopup.webp';
+import grafanaBannerPopup from 'assets/images/grafanaBannerPopup.webp';
+import debeziumBannerPopup from 'assets/images/debeziumBannerPopup.webp';
+import slackBannerPopup from 'assets/images/slackBannerPopup.webp';
+import zapierBannerPopup from 'assets/images/zapierBannerPopup.webp';
+import pagerdutyBanner from 'assets/images/pagerdutyBanner.webp';
+import influxDBBanner from 'assets/images/influxDBBanner.webp';
+import newrelicBanner from 'assets/images/newrelicBanner.webp';
+import elasticBanner from 'assets/images/elasticBanner.webp';
+import s3BannerPopup from 'assets/images/s3BannerPopup.webp';
+import datadogBanner from 'assets/images/datadogBanner.webp';
+import grafanaBanner from 'assets/images/grafanaBanner.webp';
+import zapierBanner from 'assets/images/zapierBanner.webp';
+import debeziumBanner from 'assets/images/debeziumBanner.webp';
+import { ReactComponent as PageDutyIcon } from 'assets/images/pagerDutyIcon.svg';
+import { ReactComponent as GithubIntegrationIcon } from 'assets/images/githubIntegrationIcon.svg';
+import githubBannerPopup from 'assets/images/githubBannerPopup.webp';
+import githubBanner from 'assets/images/githubBanner.webp';
+import { ReactComponent as NewRelicIcon } from 'assets/images/newrelicIcon.svg';
+import { ReactComponent as InfluxDBIcon } from 'assets/images/influxDBIcon.svg';
+import slackBanner from 'assets/images/slackBanner.webp';
+import { ReactComponent as DatadogIcon } from 'assets/images/datadogIcon.svg';
+import { ReactComponent as GrafanaIcon } from 'assets/images/grafanaIcon.svg';
+import { ReactComponent as DebeziumIcon } from 'assets/images/debeziumIcon.svg';
+import { ReactComponent as ElasticIcon } from 'assets/images/elasticIcon.svg';
+import { ReactComponent as ZapierIcon } from 'assets/images/zapierIcon.svg';
+import { ReactComponent as SlackLogo } from 'assets/images/slackLogo.svg';
+import { ReactComponent as MemphisVerifiedIcon } from 'assets/images/memphisFunctionIcon.svg';
+import s3Banner from 'assets/images/s3Banner.webp';
+import { ReactComponent as S3Logo } from 'assets/images/s3Logo.svg';
 
 import { ColorPalette } from './globalConst';
 import { Divider } from 'antd';
diff --git a/ui_src/src/domain/administration/accountMenu.js b/ui_src/src/domain/administration/accountMenu.js
index c10f72126..b28c455be 100644
--- a/ui_src/src/domain/administration/accountMenu.js
+++ b/ui_src/src/domain/administration/accountMenu.js
@@ -14,16 +14,16 @@ import './style.scss';
 
 import React, { useContext } from 'react';
 
-import { ReactComponent as VersionUpgradeColorIcon } from '../../assets/images/setting/versionUpgradeColor.svg';
-import { ReactComponent as VersionUpgradeGrayIcon } from '../../assets/images/setting/versionUpgradeGray.svg';
-import { ReactComponent as ClusterConfColorIcon } from '../../assets/images/setting/clusterConfColor.svg';
-import { ReactComponent as IntegrationColorIcon } from '../../assets/images/setting/integrationColor.svg';
-import { ReactComponent as ClusterConfGrayIcon } from '../../assets/images/setting/clusterConfGray.svg';
-import { ReactComponent as IntegrationGrayIcon } from '../../assets/images/setting/integrationGray.svg';
+import { ReactComponent as VersionUpgradeColorIcon } from 'assets/images/setting/versionUpgradeColor.svg';
+import { ReactComponent as VersionUpgradeGrayIcon } from 'assets/images/setting/versionUpgradeGray.svg';
+import { ReactComponent as ClusterConfColorIcon } from 'assets/images/setting/clusterConfColor.svg';
+import { ReactComponent as IntegrationColorIcon } from 'assets/images/setting/integrationColor.svg';
+import { ReactComponent as ClusterConfGrayIcon } from 'assets/images/setting/clusterConfGray.svg';
+import { ReactComponent as IntegrationGrayIcon } from 'assets/images/setting/integrationGray.svg';
 import PersonOutlinedIcon from '@material-ui/icons/PersonOutlined';
 
-import { isCloud } from '../../services/valueConvertor';
-import { Context } from '../../hooks/store';
+import { isCloud } from 'services/valueConvertor';
+import { Context } from 'hooks/store';
 
 function AccountMenu({ selectedMenuItem, setMenuItem }) {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/administration/billing/billingMenu.js b/ui_src/src/domain/administration/billing/billingMenu.js
index ca217a7fc..daa8c25b8 100644
--- a/ui_src/src/domain/administration/billing/billingMenu.js
+++ b/ui_src/src/domain/administration/billing/billingMenu.js
@@ -11,10 +11,10 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
 import React from 'react';
-import { ReactComponent as RequestsColorIcon } from '../../../assets/images/setting/requestsColor.svg';
-import { ReactComponent as RequestsGrayIcon } from '../../../assets/images/setting/requestsGray.svg';
-import { ReactComponent as PaymentsColorIcon } from '../../../assets/images/setting/paymentsColor.svg';
-import { ReactComponent as PaymentsGrayIcon } from '../../../assets/images/setting/paymentsGray.svg';
+import { ReactComponent as RequestsColorIcon } from 'assets/images/setting/requestsColor.svg';
+import { ReactComponent as RequestsGrayIcon } from 'assets/images/setting/requestsGray.svg';
+import { ReactComponent as PaymentsColorIcon } from 'assets/images/setting/paymentsColor.svg';
+import { ReactComponent as PaymentsGrayIcon } from 'assets/images/setting/paymentsGray.svg';
 
 import '../style.scss';
 
diff --git a/ui_src/src/domain/administration/billing/payments/components/totalPayment/index.js b/ui_src/src/domain/administration/billing/payments/components/totalPayment/index.js
index 29fb3963f..2922782d2 100644
--- a/ui_src/src/domain/administration/billing/payments/components/totalPayment/index.js
+++ b/ui_src/src/domain/administration/billing/payments/components/totalPayment/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import { CustomerPortalProvider, InvoicesSection, PaymentDetailsSection, SubscriptionsOverview } from '@stigg/react-sdk';
 import React, { useState } from 'react';
 
-import UpgradePlans from '../../../../../../components/upgradePlans';
+import UpgradePlans from 'components/upgradePlans';
 
 function TotalPayments() {
     const [isPaywallOpen, setIsPaywallOpen] = useState(false);
diff --git a/ui_src/src/domain/administration/billing/payments/index.js b/ui_src/src/domain/administration/billing/payments/index.js
index b8184824a..ec72b7d2f 100644
--- a/ui_src/src/domain/administration/billing/payments/index.js
+++ b/ui_src/src/domain/administration/billing/payments/index.js
@@ -15,20 +15,20 @@ import './style.scss';
 import React, { Fragment, useEffect, useState, useMemo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { BiDollar } from 'react-icons/bi';
-import { ReactComponent as BillingModalIcon } from '../../../../assets/images/billinigAlertIcon.svg';
-import { ReactComponent as BillingIcon } from '../../../../assets/images/dollarIcon.svg';
-import { ReactComponent as ThreeDotsIcon } from '../../../../assets/images/3dotsIcon.svg';
-import { ReactComponent as EditIcon } from '../../../../assets/images/editIcon.svg';
+import { ReactComponent as BillingModalIcon } from 'assets/images/billinigAlertIcon.svg';
+import { ReactComponent as BillingIcon } from 'assets/images/dollarIcon.svg';
+import { ReactComponent as ThreeDotsIcon } from 'assets/images/3dotsIcon.svg';
+import { ReactComponent as EditIcon } from 'assets/images/editIcon.svg';
 import { Popover } from 'antd';
 import TotalPayment from './components/totalPayment';
-import Button from '../../../../components/button';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import Input from '../../../../components/Input';
-import Modal from '../../../../components/modal';
-import { showMessages } from '../../../../services/genericServices';
+import Button from 'components/button';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Input from 'components/Input';
+import Modal from 'components/modal';
+import { showMessages } from 'services/genericServices';
 import { Form } from 'antd';
-import { LOCAL_STORAGE_USER_NAME } from '../../../../const/localStorageConsts';
+import { LOCAL_STORAGE_USER_NAME } from 'const/localStorageConsts';
 
 function Payments() {
     const [isOpen, setIsOpen] = useState(false);
diff --git a/ui_src/src/domain/administration/billing/requests/index.js b/ui_src/src/domain/administration/billing/requests/index.js
index a30d89157..f556ef9b8 100644
--- a/ui_src/src/domain/administration/billing/requests/index.js
+++ b/ui_src/src/domain/administration/billing/requests/index.js
@@ -12,19 +12,19 @@
 
 import './style.scss';
 import React, { useEffect, useState } from 'react';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { convertBytes } from '../../../../services/valueConvertor';
-import { ReactComponent as ConsumedIcon } from '../../../../assets/images/setting/consumed.svg';
-import { ReactComponent as RedeliverIcon } from '../../../../assets/images/setting/redeliver.svg';
-import { ReactComponent as DeadLetterIcon } from '../../../../assets/images/setting/deadLetter.svg';
-import { ReactComponent as StorageIcon } from '../../../../assets/images/setting/storage.svg';
-import DatePickerComponent from '../../../../components/datePicker';
-import Loader from '../../../../components/loader';
-import { ReactComponent as DataInIcon } from '../../../../assets/images/dataIn.svg';
-import { ReactComponent as DataOutIcon } from '../../../../assets/images/dataOut.svg';
-import { ReactComponent as MessageIcon } from '../../../../assets/images/messageIcon.svg';
-import { LOCAL_STORAGE_CREATION_DATE } from '../../../../const/localStorageConsts';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { convertBytes } from 'services/valueConvertor';
+import { ReactComponent as ConsumedIcon } from 'assets/images/setting/consumed.svg';
+import { ReactComponent as RedeliverIcon } from 'assets/images/setting/redeliver.svg';
+import { ReactComponent as DeadLetterIcon } from 'assets/images/setting/deadLetter.svg';
+import { ReactComponent as StorageIcon } from 'assets/images/setting/storage.svg';
+import DatePickerComponent from 'components/datePicker';
+import Loader from 'components/loader';
+import { ReactComponent as DataInIcon } from 'assets/images/dataIn.svg';
+import { ReactComponent as DataOutIcon } from 'assets/images/dataOut.svg';
+import { ReactComponent as MessageIcon } from 'assets/images/messageIcon.svg';
+import { LOCAL_STORAGE_CREATION_DATE } from 'const/localStorageConsts';
 function Requests() {
     const [usageData, setUsageData] = useState(null);
     const [usageType, setUsageType] = useState('Data out');
diff --git a/ui_src/src/domain/administration/clusterConfiguration/components/inputRow/index.js b/ui_src/src/domain/administration/clusterConfiguration/components/inputRow/index.js
index d14041d95..2b7f39592 100644
--- a/ui_src/src/domain/administration/clusterConfiguration/components/inputRow/index.js
+++ b/ui_src/src/domain/administration/clusterConfiguration/components/inputRow/index.js
@@ -13,7 +13,7 @@
 import './style.scss';
 
 import React from 'react';
-import Input from '../../../../../components/Input';
+import Input from 'components/Input';
 
 function InputRow({ title, desc, value, onChanges, img, placeholder, disabled }) {
     const onChange = (newValue) => {
diff --git a/ui_src/src/domain/administration/clusterConfiguration/components/tieredInputRow/index.js b/ui_src/src/domain/administration/clusterConfiguration/components/tieredInputRow/index.js
index 2be9cfedd..fc5a85177 100644
--- a/ui_src/src/domain/administration/clusterConfiguration/components/tieredInputRow/index.js
+++ b/ui_src/src/domain/administration/clusterConfiguration/components/tieredInputRow/index.js
@@ -13,9 +13,9 @@
 import './style.scss';
 
 import React, { useState, useEffect } from 'react';
-import Input from '../../../../../components/Input';
-import SelectComponent from '../../../../../components/select';
-import { tieredStorageTimeValidator } from '../../../../../services/valueConvertor';
+import Input from 'components/Input';
+import SelectComponent from 'components/select';
+import { tieredStorageTimeValidator } from 'services/valueConvertor';
 
 function TieredInputRow({ title, desc, value, onChanges, img }) {
     const [inputValue, setInputValue] = useState(value);
diff --git a/ui_src/src/domain/administration/clusterConfiguration/index.js b/ui_src/src/domain/administration/clusterConfiguration/index.js
index 1ace9cc9c..7c1b25c13 100644
--- a/ui_src/src/domain/administration/clusterConfiguration/index.js
+++ b/ui_src/src/domain/administration/clusterConfiguration/index.js
@@ -14,17 +14,17 @@ import './style.scss';
 
 import React, { useEffect, useState } from 'react';
 
-import { compareObjects, isCloud } from '../../../services/valueConvertor';
-import BrokerHostname from '../../../assets/images/BrokerHostname.svg';
-import UIHostname from '../../../assets/images/UIHostname.svg';
-import DeadLetterInHours from '../../../assets/images/DeadLetterInHours.svg';
-import LogsRetentionInDays from '../../../assets/images/LogsRetentionInDays.svg';
-import RestHostname from '../../../assets/images/RestHostname.svg';
-import TieredStorageInterval from '../../../assets/images/TieredStorageInterval.svg';
+import { compareObjects, isCloud } from 'services/valueConvertor';
+import BrokerHostname from 'assets/images/BrokerHostname.svg';
+import UIHostname from 'assets/images/UIHostname.svg';
+import DeadLetterInHours from 'assets/images/DeadLetterInHours.svg';
+import LogsRetentionInDays from 'assets/images/LogsRetentionInDays.svg';
+import RestHostname from 'assets/images/RestHostname.svg';
+import TieredStorageInterval from 'assets/images/TieredStorageInterval.svg';
 
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import { httpRequest } from '../../../services/http';
-import Button from '../../../components/button';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
 import SliderRow from './components/sliderRow';
 import InputRow from './components/inputRow';
 import TieredInputRow from './components/tieredInputRow';
@@ -38,9 +38,9 @@ import {
     DEAD_LETTERED_MESSAGES_RETENTION_IN_HOURS,
     TIERED_STORAGE_UPLOAD_INTERVAL,
     LOGS_RETENTION_IN_DAYS
-} from '../../../const/localStorageConsts';
-import Loader from '../../../components/loader';
-import { showMessages } from '../../../services/genericServices';
+} from 'const/localStorageConsts';
+import Loader from 'components/loader';
+import { showMessages } from 'services/genericServices';
 
 function ClusterConfiguration() {
     const [formFields, setFormFields] = useState({});
diff --git a/ui_src/src/domain/administration/index.js b/ui_src/src/domain/administration/index.js
index b1294f1f3..f3892e102 100644
--- a/ui_src/src/domain/administration/index.js
+++ b/ui_src/src/domain/administration/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useContext, useState, useEffect } from 'react';
 
-import { Context } from '../../hooks/store';
+import { Context } from 'hooks/store';
 import Integrations from './integrations';
 import AccountMenu from './accountMenu';
 import BillingMenu from './billing/billingMenu';
@@ -25,9 +25,9 @@ import Profile from '../profile';
 import ClusterConfiguration from './clusterConfiguration';
 import SoftwareUpates from './softwareUpdates';
 import { useHistory } from 'react-router-dom';
-import pathDomains from '../../router';
+import pathDomains from 'router';
 import VersionUpgrade from './versionUpgrade';
-import { isCloud } from '../../services/valueConvertor';
+import { isCloud } from 'services/valueConvertor';
 import { useLocation } from 'react-router-dom/cjs/react-router-dom.min';
 
 function Administration({ step }) {
diff --git a/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js b/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js
index 5e1ee0121..0cec66cb0 100644
--- a/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js
@@ -15,15 +15,15 @@ import './style.scss';
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
 
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import datadogMetricsps from '../../../../../assets/images/datadogMetricsps.png';
-import CustomTabs from '../../../../../components/Tabs';
-import Copy from '../../../../../components/copy';
-import Modal from '../../../../../components/modal';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import datadogMetricsps from 'assets/images/datadogMetricsps.png';
+import CustomTabs from 'components/Tabs';
+import Copy from 'components/copy';
+import Modal from 'components/modal';
 import { ZoomInRounded } from '@material-ui/icons';
-import Loader from '../../../../../components/loader';
+import Loader from 'components/loader';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 
 const { Panel } = Collapse;
diff --git a/ui_src/src/domain/administration/integrations/components/debeziumIntegration/index.js b/ui_src/src/domain/administration/integrations/components/debeziumIntegration/index.js
index ea6bddaa1..33299c880 100644
--- a/ui_src/src/domain/administration/integrations/components/debeziumIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/debeziumIntegration/index.js
@@ -14,14 +14,14 @@ import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Collapse } from 'antd';
 
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import Button from '../../../../../components/button';
-import Loader from '../../../../../components/loader';
-import Copy from '../../../../../components/copy';
-import pathDomains from '../../../../../router';
-import CustomTabs from '../../../../../components/Tabs';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import Button from 'components/button';
+import Loader from 'components/loader';
+import Copy from 'components/copy';
+import pathDomains from 'router';
+import CustomTabs from 'components/Tabs';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 
 const { Panel } = Collapse;
diff --git a/ui_src/src/domain/administration/integrations/components/elasticIntegration/index.js b/ui_src/src/domain/administration/integrations/components/elasticIntegration/index.js
index db2e84359..03a83f7f4 100644
--- a/ui_src/src/domain/administration/integrations/components/elasticIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/elasticIntegration/index.js
@@ -15,13 +15,13 @@ import './style.scss';
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
 
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import CustomTabs from '../../../../../components/Tabs';
-import Button from '../../../../../components/button';
-import Copy from '../../../../../components/copy';
-import Loader from '../../../../../components/loader';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import CustomTabs from 'components/Tabs';
+import Button from 'components/button';
+import Copy from 'components/copy';
+import Loader from 'components/loader';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 
 const { Panel } = Collapse;
diff --git a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
index 9557f4ae3..127820739 100644
--- a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
@@ -15,20 +15,20 @@ import { Form, Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 
 import { FiPlus } from 'react-icons/fi';
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import Button from '../../../../../components/button';
-import { Context } from '../../../../../hooks/store';
-import CustomTabs from '../../../../../components/Tabs';
-import Loader from '../../../../../components/loader';
-import CloudMoadl from '../../../../../components/cloudModal';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
+import CustomTabs from 'components/Tabs';
+import Loader from 'components/loader';
+import CloudMoadl from 'components/cloudModal';
 import IntegrationItem from './integratedItem';
-import { showMessages } from '../../../../../services/genericServices';
+import { showMessages } from 'services/genericServices';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 import IntegrationLogs from '../integrationItem/integrationLogs';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import { isCloud } from '../../../../../services/valueConvertor';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { isCloud } from 'services/valueConvertor';
 
 const GitHubIntegration = ({ close, value }) => {
     const githubConfiguration = INTEGRATION_LIST['GitHub'];
@@ -270,7 +270,7 @@ const GitHubIntegration = ({ close, value }) => {
                                 <div className="api-details api-details-github">
                                     {isIntegrated && (
                                         <div className="input-field">
-                                            <p className="title">Repositories</p>
+                                            <p className="title">Repos</p>
                                             <div className="repos-container">
                                                 <div className="repos-header">
                                                     <label></label>
diff --git a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/integratedItem.js b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/integratedItem.js
index a9f78aa1f..3c75ad766 100644
--- a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/integratedItem.js
+++ b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/integratedItem.js
@@ -13,11 +13,11 @@
 import React, { useState, useEffect } from 'react';
 import { Divider, Form } from 'antd';
 import { IoClose } from 'react-icons/io5';
-import { ReactComponent as GithubBranchIcon } from '../../../../../assets/images/githubBranchIcon.svg';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import SelectComponent from '../../../../../components/select';
-import Button from '../../../../../components/button';
+import { ReactComponent as GithubBranchIcon } from 'assets/images/githubBranchIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import SelectComponent from 'components/select';
+import Button from 'components/button';
 import { FiPlus } from 'react-icons/fi';
 
 const IntegrationItem = ({ isNew, index, disabled, repo, reposList, updateIntegrationList, removeRepo, updateIntegration, addIsLoading, isEdittingIntegration }) => {
@@ -84,7 +84,6 @@ const IntegrationItem = ({ isNew, index, disabled, repo, reposList, updateIntegr
                             updateRepo(e);
                         }}
                         options={Object?.keys(reposList)}
-                        placeholder={'Choose a repository'}
                     />
                 </Form.Item>
 
@@ -103,7 +102,6 @@ const IntegrationItem = ({ isNew, index, disabled, repo, reposList, updateIntegr
                         onChange={(e) => {
                             updateBranch(e);
                         }}
-                        placeholder={'Branch to sync with'}
                     />
                 </Form.Item>
 
diff --git a/ui_src/src/domain/administration/integrations/components/grafanaIntegration/index.js b/ui_src/src/domain/administration/integrations/components/grafanaIntegration/index.js
index 638c7e619..8e68e5261 100644
--- a/ui_src/src/domain/administration/integrations/components/grafanaIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/grafanaIntegration/index.js
@@ -15,15 +15,15 @@ import './style.scss';
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
 
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import grafanaps from '../../../../../assets/images/grafanaps.png';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import Copy from '../../../../../components/copy';
-import Modal from '../../../../../components/modal';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import grafanaps from 'assets/images/grafanaps.png';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import Copy from 'components/copy';
+import Modal from 'components/modal';
 import { ZoomInRounded } from '@material-ui/icons';
-import Loader from '../../../../../components/loader';
-import CustomTabs from '../../../../../components/Tabs';
+import Loader from 'components/loader';
+import CustomTabs from 'components/Tabs';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 
 const { Panel } = Collapse;
diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/index.js b/ui_src/src/domain/administration/integrations/components/integrationItem/index.js
index df05b3523..d03322af1 100644
--- a/ui_src/src/domain/administration/integrations/components/integrationItem/index.js
+++ b/ui_src/src/domain/administration/integrations/components/integrationItem/index.js
@@ -14,21 +14,21 @@ import './style.scss';
 
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
-import { ReactComponent as IntegratedIcon } from '../../../../../assets/images/integrated.svg';
-import { ReactComponent as IntegrationFailedIcon } from '../../../../../assets/images/integrationFailed.svg';
-import { ReactComponent as MemphisVerifiedIcon } from '../../../../../assets/images/memphisFunctionIcon.svg';
-import { capitalizeFirst } from '../../../../../services/valueConvertor';
-import { Context } from '../../../../../hooks/store';
+import { ReactComponent as IntegratedIcon } from 'assets/images/integrated.svg';
+import { ReactComponent as IntegrationFailedIcon } from 'assets/images/integrationFailed.svg';
+import { ReactComponent as MemphisVerifiedIcon } from 'assets/images/memphisFunctionIcon.svg';
+import { capitalizeFirst } from 'services/valueConvertor';
+import { Context } from 'hooks/store';
 import SlackIntegration from '../slackIntegration';
 import S3Integration from '../s3Integration';
-import Tag from '../../../../../components/tag';
+import Tag from 'components/tag';
 import DataDogIntegration from '../dataDogIntegration';
 import GrafanaIntegration from '../grafanaIntegration';
 import ElasticIntegration from '../elasticIntegration';
 import DebeziumIntegration from '../debeziumIntegration';
 import GitHubIntegration from '../gitHubIntegration';
 import ZapierIntegration from '../zapierIntegration';
-import { Drawer } from 'antd';
+import Drawer from "components/drawer";
 
 const IntegrationItem = ({ value, lockFeature, isOpen }) => {
     const [state] = useContext(Context);
diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/integrationDetails.js b/ui_src/src/domain/administration/integrations/components/integrationItem/integrationDetails.js
index 691c8ab7f..d2369d0e4 100644
--- a/ui_src/src/domain/administration/integrations/components/integrationItem/integrationDetails.js
+++ b/ui_src/src/domain/administration/integrations/components/integrationItem/integrationDetails.js
@@ -12,7 +12,7 @@
 
 import React from 'react';
 
-import VideoPlayer from '../../../../../components/videoPlayer';
+import VideoPlayer from 'components/videoPlayer';
 
 const IntegrationDetails = ({ integrateDesc, videoUrl, backGroundImage }) => {
     return (
diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js b/ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js
index 9de091bfc..b07b6d065 100644
--- a/ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js
+++ b/ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js
@@ -13,12 +13,12 @@
 import './style.scss';
 
 import React, { useState, useEffect } from 'react';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import Copy from '../../../../../components/copy';
-import { parsingDate } from '../../../../../services/valueConvertor';
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
-import Spinner from '../../../../../components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Copy from 'components/copy';
+import { parsingDate } from 'services/valueConvertor';
+import OverflowTip from 'components/tooltip/overflowtip';
+import Spinner from 'components/spinner';
 const IntegrationLogs = ({ integrationName }) => {
     const [logsList, setLogsList] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -40,6 +40,7 @@ const IntegrationLogs = ({ integrationName }) => {
     return (
         <div className="integration-body">
             <div className="integrate-description logs-header">
+                <p>Logs Details</p>
                 <Copy data={JSON.stringify(logsList)} />
             </div>
             <div className="generic-list-wrapper">
diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss b/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss
index c4e7a0ae1..adc1a3756 100644
--- a/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss
+++ b/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss
@@ -237,7 +237,7 @@ integ-item {
     }
     .logs-header {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
         height: 30px;
     }
diff --git a/ui_src/src/domain/administration/integrations/components/s3Integration/index.js b/ui_src/src/domain/administration/integrations/components/s3Integration/index.js
index bc2694a37..b0c5dbd08 100644
--- a/ui_src/src/domain/administration/integrations/components/s3Integration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/s3Integration/index.js
@@ -14,18 +14,18 @@ import './style.scss';
 
 import React, { useState, useContext, useEffect } from 'react';
 import { Form } from 'antd';
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import Button from '../../../../../components/button';
-import { Context } from '../../../../../hooks/store';
-import CustomTabs from '../../../../../components/Tabs';
-import Input from '../../../../../components/Input';
-import Checkbox from '../../../../../components/checkBox';
-import Loader from '../../../../../components/loader';
-import CloudMoadl from '../../../../../components/cloudModal';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import { showMessages } from '../../../../../services/genericServices';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
+import CustomTabs from 'components/Tabs';
+import Input from 'components/Input';
+import Checkbox from 'components/checkBox';
+import Loader from 'components/loader';
+import CloudMoadl from 'components/cloudModal';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { showMessages } from 'services/genericServices';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 import IntegrationLogs from '../integrationItem/integrationLogs';
 import { FaArrowUp } from 'react-icons/fa';
diff --git a/ui_src/src/domain/administration/integrations/components/slackIntegration/index.js b/ui_src/src/domain/administration/integrations/components/slackIntegration/index.js
index 5528f45b2..b5be8ad4f 100644
--- a/ui_src/src/domain/administration/integrations/components/slackIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/slackIntegration/index.js
@@ -15,23 +15,23 @@ import './style.scss';
 import React, { useState, useContext, useEffect } from 'react';
 import { Form } from 'antd';
 
-import { ReactComponent as PoisionAlertIcon } from '../../../../../assets/images/poisionAlertIcon.svg';
-import { ReactComponent as DisconAlertIcon } from '../../../../../assets/images/disconAlertIcon.svg';
-import { ReactComponent as SchemaAlertIcon } from '../../../../../assets/images/schemaAlertIcon.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import Switcher from '../../../../../components/switcher';
-import Button from '../../../../../components/button';
-import { Context } from '../../../../../hooks/store';
-import Input from '../../../../../components/Input';
-import CustomTabs from '../../../../../components/Tabs';
-import { URL } from '../../../../../config';
-import Loader from '../../../../../components/loader';
-import CloudMoadl from '../../../../../components/cloudModal';
-import { showMessages } from '../../../../../services/genericServices';
-import { isCloud } from '../../../../../services/valueConvertor';
+import { ReactComponent as PoisionAlertIcon } from 'assets/images/poisionAlertIcon.svg';
+import { ReactComponent as DisconAlertIcon } from 'assets/images/disconAlertIcon.svg';
+import { ReactComponent as SchemaAlertIcon } from 'assets/images/schemaAlertIcon.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Switcher from 'components/switcher';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
+import Input from 'components/Input';
+import CustomTabs from 'components/Tabs';
+import { URL } from 'config';
+import Loader from 'components/loader';
+import CloudMoadl from 'components/cloudModal';
+import { showMessages } from 'services/genericServices';
+import { isCloud } from 'services/valueConvertor';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 import IntegrationLogs from '../integrationItem/integrationLogs';
 import { FaArrowCircleUp } from 'react-icons/fa';
diff --git a/ui_src/src/domain/administration/integrations/components/zapierIntegration/index.js b/ui_src/src/domain/administration/integrations/components/zapierIntegration/index.js
index a96178f49..b8fb871ef 100644
--- a/ui_src/src/domain/administration/integrations/components/zapierIntegration/index.js
+++ b/ui_src/src/domain/administration/integrations/components/zapierIntegration/index.js
@@ -15,11 +15,11 @@ import './style.scss';
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
 
-import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationList';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import Loader from '../../../../../components/loader';
-import CustomTabs from '../../../../../components/Tabs';
+import { INTEGRATION_LIST, getTabList } from 'const/integrationList';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import Loader from 'components/loader';
+import CustomTabs from 'components/Tabs';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 
 const { Panel } = Collapse;
diff --git a/ui_src/src/domain/administration/integrations/index.js b/ui_src/src/domain/administration/integrations/index.js
index 5318f5e63..1d17ba988 100644
--- a/ui_src/src/domain/administration/integrations/index.js
+++ b/ui_src/src/domain/administration/integrations/index.js
@@ -13,22 +13,22 @@
 import './style.scss';
 
 import React, { useEffect, useContext, useState } from 'react';
-import { ReactComponent as IntegrationRequestIcon } from '../../../assets/images/integrationRequestIcon.svg';
-import { CATEGORY_LIST, INTEGRATION_LIST } from '../../../const/integrationList';
-import { ReactComponent as SoonBadgeIcon } from '../../../assets/images/soonBadge.svg';
+import { ReactComponent as IntegrationRequestIcon } from 'assets/images/integrationRequestIcon.svg';
+import { CATEGORY_LIST, INTEGRATION_LIST } from 'const/integrationList';
+import { ReactComponent as SoonBadgeIcon } from 'assets/images/soonBadge.svg';
 import IntegrationItem from './components/integrationItem';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import { isCloud } from '../../../services/valueConvertor';
-import { httpRequest } from '../../../services/http';
-import Button from '../../../components/button';
-import Loader from '../../../components/loader';
-import { Context } from '../../../hooks/store';
-import Modal from '../../../components/modal';
-import Input from '../../../components/Input';
-import Tag from '../../../components/tag';
-import { showMessages } from '../../../services/genericServices';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { isCloud } from 'services/valueConvertor';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
+import Loader from 'components/loader';
+import { Context } from 'hooks/store';
+import Modal from 'components/modal';
+import Input from 'components/Input';
+import Tag from 'components/tag';
+import { showMessages } from 'services/genericServices';
 import { useLocation } from 'react-router-dom';
-import {entitlementChecker} from "../../../utils/plan";
+import {entitlementChecker} from "utils/plan";
 
 const Integrations = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/administration/softwareUpdates/imgUploader/index.js b/ui_src/src/domain/administration/softwareUpdates/imgUploader/index.js
index db996e870..08d60b972 100644
--- a/ui_src/src/domain/administration/softwareUpdates/imgUploader/index.js
+++ b/ui_src/src/domain/administration/softwareUpdates/imgUploader/index.js
@@ -12,14 +12,14 @@
 
 import './style.scss';
 import React, { useContext, useState } from 'react';
-import { Context } from '../../../../hooks/store';
-import { LOCAL_STORAGE_COMPANY_LOGO } from '../../../../const/localStorageConsts';
+import { Context } from 'hooks/store';
+import { LOCAL_STORAGE_COMPANY_LOGO } from 'const/localStorageConsts';
 import { Upload } from 'antd';
-import Button from '../../../../components/button';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { showMessages } from '../../../../services/genericServices';
-import Logo from '../../../../assets/images/logo.svg';
+import Button from 'components/button';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { showMessages } from 'services/genericServices';
+import Logo from 'assets/images/logo.svg';
 
 function ImgUploader() {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/administration/softwareUpdates/index.js b/ui_src/src/domain/administration/softwareUpdates/index.js
index f2794d14a..9a8da31b1 100644
--- a/ui_src/src/domain/administration/softwareUpdates/index.js
+++ b/ui_src/src/domain/administration/softwareUpdates/index.js
@@ -13,30 +13,30 @@
 import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { ReactComponent as DeleteWrapperIcon } from '../../../assets/images/deleteWrapperIcon.svg';
-import { ReactComponent as RedirectWhiteIcon } from '../../../assets/images/exportWhite.svg';
-import { ReactComponent as DocumentIcon } from '../../../assets/images/documentGroupIcon.svg';
-import { ReactComponent as DisordIcon } from '../../../assets/images/discordGroupIcon.svg';
-import { ReactComponent as WindowIcon } from '../../../assets/images/windowGroupIcon.svg';
-import DeleteItemsModal from '../../../components/deleteItemsModal';
-import CloudModal from '../../../components/cloudModal';
-import Button from '../../../components/button';
-import Modal from '../../../components/modal';
-import Copy from '../../../components/copy';
-import { Context } from '../../../hooks/store';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import { LATEST_RELEASE_URL } from '../../../config';
-import { compareVersions } from '../../../services/valueConvertor';
-import { GithubRequest } from '../../../services/githubRequests';
-import { isCloud } from '../../../services/valueConvertor';
-import { httpRequest } from '../../../services/http';
-import AuthService from '../../../services/auth';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import { ReactComponent as RedirectWhiteIcon } from 'assets/images/exportWhite.svg';
+import { ReactComponent as DocumentIcon } from 'assets/images/documentGroupIcon.svg';
+import { ReactComponent as DisordIcon } from 'assets/images/discordGroupIcon.svg';
+import { ReactComponent as WindowIcon } from 'assets/images/windowGroupIcon.svg';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import CloudModal from 'components/cloudModal';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import Copy from 'components/copy';
+import { Context } from 'hooks/store';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { LATEST_RELEASE_URL } from 'config';
+import { compareVersions } from 'services/valueConvertor';
+import { GithubRequest } from 'services/githubRequests';
+import { isCloud } from 'services/valueConvertor';
+import { httpRequest } from 'services/http';
+import AuthService from 'services/auth';
 import { Checkbox } from 'antd';
 import ImgUploader from './imgUploader';
-import { LOCAL_STORAGE_USER_TYPE, LOCAL_STORAGE_ACCOUNT_ID } from '../../../const/localStorageConsts';
-import Support from '../../../components/sideBar/support';
-import FullLogoWhite from "../../../assets/images/white-logo.svg";
-import FullLogo from "../../../assets/images/fullLogo.svg";
+import { LOCAL_STORAGE_USER_TYPE, LOCAL_STORAGE_ACCOUNT_ID } from 'const/localStorageConsts';
+import Support from 'components/sideBar/support';
+import FullLogoWhite from "assets/images/white-logo.svg";
+import FullLogo from "assets/images/fullLogo.svg";
 
 function SoftwareUpates({}) {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/administration/versionUpgrade/components/noteItem/index.js b/ui_src/src/domain/administration/versionUpgrade/components/noteItem/index.js
index 997e5e09b..61bb10db2 100644
--- a/ui_src/src/domain/administration/versionUpgrade/components/noteItem/index.js
+++ b/ui_src/src/domain/administration/versionUpgrade/components/noteItem/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useEffect, useState } from 'react';
 
-import { ReactComponent as StarIcon } from '../../../../../assets/images/star.svg';
+import { ReactComponent as StarIcon } from 'assets/images/star.svg';
 import ReactMarkdown from 'react-markdown';
 
 const NoteItem = ({ feature }) => {
diff --git a/ui_src/src/domain/administration/versionUpgrade/index.js b/ui_src/src/domain/administration/versionUpgrade/index.js
index 83222fd1f..8178410b8 100644
--- a/ui_src/src/domain/administration/versionUpgrade/index.js
+++ b/ui_src/src/domain/administration/versionUpgrade/index.js
@@ -14,19 +14,19 @@ import './style.scss';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { DOCKER_UPGRADE_URL, K8S_UPGRADE_URL, LATEST_RELEASE_URL, RELEASE_DOCS_URL, RELEASE_NOTES_URL } from '../../../config';
-import { GithubRequest } from '../../../services/githubRequests';
-import { LOCAL_STORAGE_ENV } from '../../../const/localStorageConsts';
-import { ReactComponent as UpgradeBannerIcon } from '../../../assets/images/upgradeBanner.svg';
-import { ReactComponent as UpdateIcon } from '../../../assets/images/uptodateIcon.svg';
-import { ReactComponent as FullLogoIcon } from '../../../assets/images/fullLogo.svg';
-import Button from '../../../components/button';
-import { Context } from '../../../hooks/store';
+import { DOCKER_UPGRADE_URL, K8S_UPGRADE_URL, LATEST_RELEASE_URL, RELEASE_DOCS_URL, RELEASE_NOTES_URL } from 'config';
+import { GithubRequest } from 'services/githubRequests';
+import { LOCAL_STORAGE_ENV } from 'const/localStorageConsts';
+import { ReactComponent as UpgradeBannerIcon } from 'assets/images/upgradeBanner.svg';
+import { ReactComponent as UpdateIcon } from 'assets/images/uptodateIcon.svg';
+import { ReactComponent as FullLogoIcon } from 'assets/images/fullLogo.svg';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
 import NoteItem from './components/noteItem';
-import Loader from '../../../components/loader';
-import { httpRequest } from '../../../services/http';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import { compareVersions } from '../../../services/valueConvertor';
+import Loader from 'components/loader';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { compareVersions } from 'services/valueConvertor';
 import { Update } from '@material-ui/icons';
 
 function VersionUpgrade() {
diff --git a/ui_src/src/domain/functions/components/attachFunctionModal/index.js b/ui_src/src/domain/functions/components/attachFunctionModal/index.js
index a09d63096..c9e846fbc 100644
--- a/ui_src/src/domain/functions/components/attachFunctionModal/index.js
+++ b/ui_src/src/domain/functions/components/attachFunctionModal/index.js
@@ -15,21 +15,21 @@ import './style.scss';
 import React, { useEffect, useState, useRef, useContext } from 'react';
 import { AddRounded } from '@material-ui/icons';
 import { useHistory } from 'react-router-dom';
-import pathDomains from '../../../../router';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { ReactComponent as SearchIcon } from '../../../../assets/images/searchIcon.svg';
-import SearchInput from '../../../../components/searchInput';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import Loader from '../../../../components/loader';
-import LearnMore from '../../../../components/learnMore';
-import SchemaItem from '../../../stationOverview/components/useSchemaModal/schemaItem';
-import { ReactComponent as StationIcon } from '../../../../assets/images/stationsIconActive.svg';
-import CreateStationForm from '../../../../components/createStationForm';
-import { isCloud } from '../../../../services/valueConvertor';
-import { Context } from '../../../../hooks/store';
-import LockFeature from '../../../../components/lockFeature';
+import pathDomains from 'router';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import SearchInput from 'components/searchInput';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import Loader from 'components/loader';
+import LearnMore from 'components/learnMore';
+import SchemaItem from 'domain/stationOverview/components/useSchemaModal/schemaItem';
+import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
+import CreateStationForm from 'components/createStationForm';
+import { isCloud } from 'services/valueConvertor';
+import { Context } from 'hooks/store';
+import LockFeature from 'components/lockFeature';
 
 const AttachFunctionModal = ({ open, clickOutside, selectedFunction }) => {
     const createStationRef = useRef(null);
diff --git a/ui_src/src/domain/functions/components/functionBox/index.js b/ui_src/src/domain/functions/components/functionBox/index.js
index 2a42cce56..a157e288b 100644
--- a/ui_src/src/domain/functions/components/functionBox/index.js
+++ b/ui_src/src/domain/functions/components/functionBox/index.js
@@ -15,31 +15,31 @@ import './style.scss';
 import React, { useState, useEffect, useContext } from 'react';
 import Skeleton from 'antd/lib/skeleton';
 import { IoIosInformationCircle } from 'react-icons/io';
-import { isCloud, parsingDate } from '../../../../services/valueConvertor';
+import { isCloud, parsingDate } from 'services/valueConvertor';
 import { FiGitCommit } from 'react-icons/fi';
 import { BiDownload } from 'react-icons/bi';
 import { IoClose } from 'react-icons/io5';
 import { GoRepo } from 'react-icons/go';
-import { ReactComponent as GithubBranchIcon } from '../../../../assets/images/githubBranchIcon.svg';
-import { ReactComponent as MemphisFunctionIcon } from '../../../../assets/images/memphisFunctionIcon.svg';
-import { ReactComponent as FunctionIcon } from '../../../../assets/images/functionIcon.svg';
-import { ReactComponent as DeleteIcon } from '../../../../assets/images/deleteIcon.svg';
+import { ReactComponent as GithubBranchIcon } from 'assets/images/githubBranchIcon.svg';
+import { ReactComponent as MemphisFunctionIcon } from 'assets/images/memphisFunctionIcon.svg';
+import { ReactComponent as FunctionIcon } from 'assets/images/functionIcon.svg';
+import { ReactComponent as DeleteIcon } from 'assets/images/deleteIcon.svg';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import { Divider, Drawer, Rate } from 'antd';
+import { Divider, Rate } from 'antd';
+import Drawer from "components/drawer";
 import FunctionDetails from '../functionDetails';
-import { showMessages } from '../../../../services/genericServices';
-import TagsList from '../../../../components/tagList';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import { OWNER } from '../../../../const/globalConst';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
+import { showMessages } from 'services/genericServices';
+import TagsList from 'components/tagList';
+import Button from 'components/button';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { OWNER } from 'const/globalConst';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 import AttachFunctionModal from '../attachFunctionModal';
-import CloudModal from '../../../../components/cloudModal';
-import TestMockEvent from '../../components/testFunctionModal/components/testMockEvent';
-import { Context } from '../../../../hooks/store';
-import TooltipComponent from '../../../../components/tooltip/tooltip';
+import CloudModal from 'components/cloudModal';
+import TestMockEvent from '../testFunctionModal/components/testMockEvent';
+import { Context } from 'hooks/store';
+import TooltipComponent from 'components/tooltip/tooltip';
 
 function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null, onApply, doneUninstall, startInstallation, funcIndex, referredFunction }) {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/functions/components/functionDetails/index.js b/ui_src/src/domain/functions/components/functionDetails/index.js
index 597cfebc2..da3d95bbc 100644
--- a/ui_src/src/domain/functions/components/functionDetails/index.js
+++ b/ui_src/src/domain/functions/components/functionDetails/index.js
@@ -23,35 +23,35 @@ import { FiGitCommit } from 'react-icons/fi';
 import { BiDownload } from 'react-icons/bi';
 import { GoFileDirectoryFill } from 'react-icons/go';
 import { Divider, Rate } from 'antd';
-import { ReactComponent as CollapseArrowIcon } from '../../../../assets/images/collapseArrow.svg';
-import Button from '../../../../components/button';
-import TagsList from '../../../../components/tagList';
-import Spinner from '../../../../components/spinner';
-import { parsingDate } from '../../../../services/valueConvertor';
-import { ReactComponent as MemphisFunctionIcon } from '../../../../assets/images/memphisFunctionIcon.svg';
-import { ReactComponent as FunctionIcon } from '../../../../assets/images/functionIcon.svg';
-import { ReactComponent as CodeBlackIcon } from '../../../../assets/images/codeIconBlack.svg';
-import { ReactComponent as GithubBranchIcon } from '../../../../assets/images/githubBranchIcon.svg';
-import { ReactComponent as PlaceholderFunctionsIcon } from '../../../../assets/images/placeholderFunctions.svg';
-import { ReactComponent as ArrowBackIcon } from '../../../../assets/images/arrowBackIcon.svg';
-import { ReactComponent as DeleteIcon } from '../../../../assets/images/deleteIcon.svg';
-import CustomTabs from '../../../../components/Tabs';
-import SelectComponent from '../../../../components/select';
-import CloudModal from '../../../../components/cloudModal';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import Button from 'components/button';
+import TagsList from 'components/tagList';
+import Spinner from 'components/spinner';
+import { parsingDate } from 'services/valueConvertor';
+import { ReactComponent as MemphisFunctionIcon } from 'assets/images/memphisFunctionIcon.svg';
+import { ReactComponent as FunctionIcon } from 'assets/images/functionIcon.svg';
+import { ReactComponent as CodeBlackIcon } from 'assets/images/codeIconBlack.svg';
+import { ReactComponent as GithubBranchIcon } from 'assets/images/githubBranchIcon.svg';
+import { ReactComponent as PlaceholderFunctionsIcon } from 'assets/images/placeholderFunctions.svg';
+import { ReactComponent as ArrowBackIcon } from 'assets/images/arrowBackIcon.svg';
+import { ReactComponent as DeleteIcon } from 'assets/images/deleteIcon.svg';
+import CustomTabs from 'components/Tabs';
+import SelectComponent from 'components/select';
+import CloudModal from 'components/cloudModal';
 import TestMockEvent from '../testFunctionModal/components/testMockEvent';
-import Tooltip from '../../../../components/tooltip/tooltip';
-import { OWNER } from '../../../../const/globalConst';
+import Tooltip from 'components/tooltip/tooltip';
+import { OWNER } from 'const/globalConst';
 import { BsFileEarmarkCode, BsGit } from 'react-icons/bs';
 import { GoRepo } from 'react-icons/go';
 import { RxDotFilled } from 'react-icons/rx';
 import { FaArrowCircleUp } from 'react-icons/fa';
 import { Tree } from 'antd';
-import { httpRequest } from '../../../../services/http';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { getCodingLanguage } from '../../../../utils/languages';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import { isCloud } from '../../../../services/valueConvertor';
-import { Context } from '../../../../hooks/store';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { getCodingLanguage } from 'utils/languages';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { isCloud } from 'services/valueConvertor';
+import { Context } from 'hooks/store';
 
 loader.init();
 loader.config({ monaco });
diff --git a/ui_src/src/domain/functions/components/functionList/index.js b/ui_src/src/domain/functions/components/functionList/index.js
index b65dd677c..dfbc1b7cf 100644
--- a/ui_src/src/domain/functions/components/functionList/index.js
+++ b/ui_src/src/domain/functions/components/functionList/index.js
@@ -14,43 +14,43 @@ import './style.scss';
 
 import React, { useEffect, useState, useContext } from 'react';
 import { Spin } from 'antd';
-import { Context } from '../../../../hooks/store';
+import { Context } from 'hooks/store';
 import { SyncOutlined } from '@ant-design/icons';
-import GitHubIntegration from '../../../administration/integrations/components/gitHubIntegration';
-import { ReactComponent as PlaceholderFunctionsIcon } from '../../../../assets/images/placeholderFunctions.svg';
-import { ReactComponent as SearchIcon } from '../../../../assets/images/searchIcon.svg';
-import { ReactComponent as CloneModalIcon } from '../../../../assets/images/cloneModalIcon.svg';
-import { ReactComponent as CliIcon } from '../../../../assets/images/cliIcon.svg';
-import { ReactComponent as RepoIcon } from '../../../../assets/images/repoPurple.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../assets/images/purpleQuestionMark.svg';
-import { ReactComponent as MemphisLogo } from '../../../../assets/images/logo.svg';
-import { ReactComponent as RedirectIcon } from '../../../../assets/images/redirectIcon.svg';
-import CollapseArrow from '../../../../assets/images/collapseArrow.svg';
-import CollapseArroWhite from '../../../../assets/images/collapseArrowWhite.svg';
+import GitHubIntegration from 'domain/administration/integrations/components/gitHubIntegration';
+import { ReactComponent as PlaceholderFunctionsIcon } from 'assets/images/placeholderFunctions.svg';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import { ReactComponent as CloneModalIcon } from 'assets/images/cloneModalIcon.svg';
+import { ReactComponent as CliIcon } from 'assets/images/cliIcon.svg';
+import { ReactComponent as RepoIcon } from 'assets/images/repoPurple.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { ReactComponent as MemphisLogo } from 'assets/images/logo.svg';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import CollapseArrow from 'assets/images/collapseArrow.svg';
+import CollapseArroWhite from 'assets/images/collapseArrowWhite.svg';
 import { BiCode } from 'react-icons/bi';
 import { MdDone } from 'react-icons/md';
 import { BsGit } from 'react-icons/bs';
 import { AddRounded } from '@material-ui/icons';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { parsingDate } from '../../../../services/valueConvertor';
-import { isCloud } from '../../../../services/valueConvertor';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import Loader from '../../../../components/loader';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import SearchInput from '../../../../components/searchInput';
-import CustomTabs from '../../../../components/Tabs';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { parsingDate } from 'services/valueConvertor';
+import { isCloud } from 'services/valueConvertor';
+import OverflowTip from 'components/tooltip/overflowtip';
+import Loader from 'components/loader';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import SearchInput from 'components/searchInput';
+import CustomTabs from 'components/Tabs';
 import FunctionBox from '../functionBox';
 import IntegrateFunction from '../integrateFunction';
 import FunctionsGuide from '../functionsGuide';
-import CloneModal from '../../../../components/cloneModal';
-import CloudModal from '../../../../components/cloudModal';
-import { OWNER } from '../../../../const/globalConst';
+import CloneModal from 'components/cloneModal';
+import CloudModal from 'components/cloudModal';
+import { OWNER } from 'const/globalConst';
 import { Collapse, Divider, Popover, Badge } from 'antd';
-import { LOCAL_STORAGE_FUNCTION_PAGE_VIEW } from '../../../../const/localStorageConsts';
-import { getFunctionsTabs } from '../../../../services/valueConvertor';
-import RefreshButton from '../../../../components/refreshButton';
+import { LOCAL_STORAGE_FUNCTION_PAGE_VIEW } from 'const/localStorageConsts';
+import { getFunctionsTabs } from 'services/valueConvertor';
+import RefreshButton from 'components/refreshButton';
 const { Panel } = Collapse;
 const TABS = getFunctionsTabs();
 
diff --git a/ui_src/src/domain/functions/components/functionsGuide/index.js b/ui_src/src/domain/functions/components/functionsGuide/index.js
index e7252b350..272da78ee 100644
--- a/ui_src/src/domain/functions/components/functionsGuide/index.js
+++ b/ui_src/src/domain/functions/components/functionsGuide/index.js
@@ -12,15 +12,15 @@
 
 import './style.scss';
 import { useState } from 'react';
-import { ReactComponent as FunctionIntegrateIcon } from '../../../../assets/images/functionIntegrate.svg';
-import { ReactComponent as CloneModalIcon } from '../../../../assets/images/cloneModalIcon.svg';
+import { ReactComponent as FunctionIntegrateIcon } from 'assets/images/functionIntegrate.svg';
+import { ReactComponent as CloneModalIcon } from 'assets/images/cloneModalIcon.svg';
 import { MdDone } from 'react-icons/md';
-import VideoPlayer from '../../../../components/videoPlayer';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import CloneModal from '../../../../components/cloneModal';
-import { FUNCTION_GUIDE_VIDEO } from '../../../../config';
-import ConnectBG from '../../../../assets/images/functionsWelcomeBanner.webp';
+import VideoPlayer from 'components/videoPlayer';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import CloneModal from 'components/cloneModal';
+import { FUNCTION_GUIDE_VIDEO } from 'config';
+import ConnectBG from 'assets/images/functionsWelcomeBanner.webp';
 import { LuInfo } from 'react-icons/lu';
 
 const FunctionsGuide = ({ handleClose, handleConfirm }) => {
diff --git a/ui_src/src/domain/functions/components/integrateFunction/index.js b/ui_src/src/domain/functions/components/integrateFunction/index.js
index 455d94eb8..1cb30e383 100644
--- a/ui_src/src/domain/functions/components/integrateFunction/index.js
+++ b/ui_src/src/domain/functions/components/integrateFunction/index.js
@@ -12,7 +12,7 @@
 
 import './style.scss';
 
-import { ReactComponent as FunctionIntegrateIcon } from '../../../../assets/images/functionIntegrate.svg';
+import { ReactComponent as FunctionIntegrateIcon } from 'assets/images/functionIntegrate.svg';
 
 const IntegrateFunction = ({ onClick }) => {
     return (
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/editTestEventModal/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/editTestEventModal/index.js
index e20544167..b66e27c78 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/components/editTestEventModal/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/components/editTestEventModal/index.js
@@ -13,7 +13,7 @@
 import './style.scss';
 
 import { useState } from 'react';
-import Button from '../../../../../../components/button';
+import Button from 'components/button';
 import { FaPlay } from 'react-icons/fa';
 import Editor from '@monaco-editor/react';
 import TestResult from '../testResult';
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/newTestEventModal/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/newTestEventModal/index.js
index 5d28e6d5f..bedf7bbb6 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/components/newTestEventModal/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/components/newTestEventModal/index.js
@@ -13,11 +13,11 @@
 import './style.scss';
 import { useState, useEffect } from 'react';
 import Editor from '@monaco-editor/react';
-import Input from '../../../../../../components/Input';
-import Button from '../../../../../../components/button';
+import Input from 'components/Input';
+import Button from 'components/button';
 import { FaPlay } from 'react-icons/fa';
-import { ApiEndpoints } from '../../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../../services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 
 import TestResult from '../testResult';
 const TEMPLATE_CARDS = [
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/testItem/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/testItem/index.js
index 6b835dad1..0085320a9 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/components/testItem/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/components/testItem/index.js
@@ -13,12 +13,12 @@
 import './style.scss';
 
 import { useState, useEffect } from 'react';
-import CheckboxComponent from '../../../../../../components/checkBox';
+import CheckboxComponent from 'components/checkBox';
 import { FiEdit } from 'react-icons/fi';
-import { ReactComponent as BinIcon } from '../../../../../../assets/images/binIcon.svg';
-import { ReactComponent as TestEventModalIcon } from '../../../../../../assets/images/testEventModalcon.svg';
+import { ReactComponent as BinIcon } from 'assets/images/binIcon.svg';
+import { ReactComponent as TestEventModalIcon } from 'assets/images/testEventModalcon.svg';
 
-import Modal from '../../../../../../components/modal';
+import Modal from 'components/modal';
 import EditTestEventModal from '../editTestEventModal';
 const TestItem = ({ data, handleCheckedClick, isCheck, handleDelete, handleEdit }) => {
     const [isEditModalOpen, setIsEditModalOpen] = useState(false);
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js
index 60759f863..df244873c 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js
@@ -13,15 +13,15 @@
 import './style.scss';
 
 import { useState, useEffect } from 'react';
-import { ReactComponent as TestEventModalIcon } from '../../../../../../assets/images/testEventModalcon.svg';
-import Button from '../../../../../../components/button';
-import Input from '../../../../../../components/Input';
-import Modal from '../../../../../../components/modal';
+import { ReactComponent as TestEventModalIcon } from 'assets/images/testEventModalcon.svg';
+import Button from 'components/button';
+import Input from 'components/Input';
+import Modal from 'components/modal';
 import Editor from '@monaco-editor/react';
 import TestResult from '../testResult';
-import { generateJSONWithMaxLength } from '../../../../../../services/valueConvertor';
-import { httpRequest } from '../../../../../../services/http';
-import { ApiEndpoints } from '../../../../../../const/apiEndpoints';
+import { generateJSONWithMaxLength } from 'services/valueConvertor';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
 
 const TestMockEvent = ({ functionDetails, open, selectedVersion, clickOutside }) => {
     const [testMock, setTestMock] = useState('');
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/testResult/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/testResult/index.js
index 99e4ce8c7..ff1f0d372 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/components/testResult/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/components/testResult/index.js
@@ -12,14 +12,14 @@
 
 import './style.scss';
 import React, { useEffect, useState } from 'react';
-import { ReactComponent as StatusIcon } from '../../../../../../assets/images/statusIcon.svg';
-import Tag from '../../../../../../components/tag';
-import RadioButton from '../../../../../../components/radioButton';
-import Spinner from '../../../../../../components/spinner';
-import Copy from '../../../../../../components/copy';
-import Tooltip from '../../../../../../components/tooltip/tooltip';
+import { ReactComponent as StatusIcon } from 'assets/images/statusIcon.svg';
+import Tag from 'components/tag';
+import RadioButton from 'components/radioButton';
+import Spinner from 'components/spinner';
+import Copy from 'components/copy';
+import Tooltip from 'components/tooltip/tooltip';
 
-import { ColorPalette } from '../../../../../../const/globalConst';
+import { ColorPalette } from 'const/globalConst';
 
 const options = [
     {
diff --git a/ui_src/src/domain/functions/components/testFunctionModal/index.js b/ui_src/src/domain/functions/components/testFunctionModal/index.js
index 4929649ae..1263e8499 100644
--- a/ui_src/src/domain/functions/components/testFunctionModal/index.js
+++ b/ui_src/src/domain/functions/components/testFunctionModal/index.js
@@ -12,19 +12,19 @@
 
 import './style.scss';
 import { useState, useEffect } from 'react';
-import Button from '../../../../components/button';
+import Button from 'components/button';
 import { FiChevronRight } from 'react-icons/fi';
-import SearchInput from '../../../../components/searchInput';
-import { ReactComponent as SearchIcon } from '../../../../assets/images/searchIcon.svg';
-import { ReactComponent as TestEventModalIcon } from '../../../../assets/images/testEventModalcon.svg';
+import SearchInput from 'components/searchInput';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import { ReactComponent as TestEventModalIcon } from 'assets/images/testEventModalcon.svg';
 import TestItem from './components/testItem';
-import Modal from '../../../../components/modal';
+import Modal from 'components/modal';
 import NewTestEventModal from './components/newTestEventModal';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { ReactComponent as DeleteWrapperIcon } from '../../../../assets/images/deleteWrapperIcon.svg';
-import { ReactComponent as EmptyEventsIcon } from '../../../../assets/images/emptyEvents.svg';
-import DeleteItemsModal from '../../../../components/deleteItemsModal';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import { ReactComponent as EmptyEventsIcon } from 'assets/images/emptyEvents.svg';
+import DeleteItemsModal from 'components/deleteItemsModal';
 
 const TestFunctionModal = ({ onCancel }) => {
     const [searchEvent, setSearchEvent] = useState('');
diff --git a/ui_src/src/domain/functions/index.js b/ui_src/src/domain/functions/index.js
index 64d07888b..234807010 100644
--- a/ui_src/src/domain/functions/index.js
+++ b/ui_src/src/domain/functions/index.js
@@ -15,7 +15,7 @@ import './style.scss';
 import React, { useEffect, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { Context } from '../../hooks/store';
+import { Context } from 'hooks/store';
 import FunctionList from './components/functionList';
 
 function Functions() {
diff --git a/ui_src/src/domain/login/index.js b/ui_src/src/domain/login/index.js
index 444ce9bd4..dab51eac4 100644
--- a/ui_src/src/domain/login/index.js
+++ b/ui_src/src/domain/login/index.js
@@ -23,19 +23,19 @@ import {
     LOCAL_STORAGE_CONNECTION_TOKEN,
     LOCAL_STORAGE_TOKEN,
     LOCAL_STORAGE_USER_PASS_BASED_AUTH
-} from '../../const/localStorageConsts';
-import { ReactComponent as FullLogo } from '../../assets/images/fullLogo.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as SharpsIcon } from '../../assets/images/sharps.svg';
-import { httpRequest } from '../../services/http';
-import AuthService from '../../services/auth';
-import Button from '../../components/button';
-import Loader from '../../components/loader';
-import { Context } from '../../hooks/store';
-import Input from '../../components/Input';
-import pathDomains from '../../router';
+} from 'const/localStorageConsts';
+import { ReactComponent as FullLogo } from 'assets/images/fullLogo.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as SharpsIcon } from 'assets/images/sharps.svg';
+import { httpRequest } from 'services/http';
+import AuthService from 'services/auth';
+import Button from 'components/button';
+import Loader from 'components/loader';
+import { Context } from 'hooks/store';
+import Input from 'components/Input';
+import pathDomains from 'router';
 import { connect } from 'nats.ws';
-import { WS_PREFIX } from '../../config';
+import { WS_PREFIX } from 'config';
 
 const Login = (props) => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/messageJourney/components/consumerGroup/index.js b/ui_src/src/domain/messageJourney/components/consumerGroup/index.js
index b2d45b0cf..d717147ff 100644
--- a/ui_src/src/domain/messageJourney/components/consumerGroup/index.js
+++ b/ui_src/src/domain/messageJourney/components/consumerGroup/index.js
@@ -13,7 +13,7 @@
 import './style.scss';
 
 import React from 'react';
-import ConsumerWithStatus from '../../../../components/consumerWithStatus';
+import ConsumerWithStatus from 'components/consumerWithStatus';
 
 const ConsumerGroup = ({ header, details, cgMembers }) => {
 
diff --git a/ui_src/src/domain/messageJourney/components/poisonMessage/index.js b/ui_src/src/domain/messageJourney/components/poisonMessage/index.js
index bfae883d2..f8e136629 100644
--- a/ui_src/src/domain/messageJourney/components/poisonMessage/index.js
+++ b/ui_src/src/domain/messageJourney/components/poisonMessage/index.js
@@ -13,11 +13,11 @@
 import './style.scss';
 
 import React, { useState } from 'react';
-import Button from '../../../../components/button';
-import CustomCollapse from '../../../stationOverview/stationObservabilty/components/customCollapse';
+import Button from 'components/button';
+import CustomCollapse from 'domain/stationOverview/stationObservabilty/components/customCollapse';
 import { Space } from 'antd';
-import { httpRequest } from '../../../../services/http';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import { message as messageAnt } from 'antd';
 
 const PoisonMessage = ({ stationName, messageId, details, message, headers, processing, returnBack, schemaType }) => {
diff --git a/ui_src/src/domain/messageJourney/components/producer/index.js b/ui_src/src/domain/messageJourney/components/producer/index.js
index a86571dc0..81c4490c7 100644
--- a/ui_src/src/domain/messageJourney/components/producer/index.js
+++ b/ui_src/src/domain/messageJourney/components/producer/index.js
@@ -13,7 +13,7 @@
 import './style.scss';
 
 import React, { useEffect } from 'react';
-import StatusIndication from '../../../../components/indication';
+import StatusIndication from 'components/indication';
 
 const Producer = ({ data }) => {
     const prod = data ? (
diff --git a/ui_src/src/domain/messageJourney/index.js b/ui_src/src/domain/messageJourney/index.js
index d328adc55..559aec895 100644
--- a/ui_src/src/domain/messageJourney/index.js
+++ b/ui_src/src/domain/messageJourney/index.js
@@ -16,18 +16,18 @@ import React, { useEffect, useContext, useState } from 'react';
 import { StringCodec, JSONCodec } from 'nats.ws';
 import { useHistory } from 'react-router-dom';
 
-import { convertBytes, extractValueFromURL, parsingDate } from '../../services/valueConvertor';
+import { convertBytes, extractValueFromURL, parsingDate } from 'services/valueConvertor';
 import PoisonMessage from './components/poisonMessage';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as BackIcon } from '../../assets/images/backIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as BackIcon } from 'assets/images/backIcon.svg';
 import ConsumerGroup from './components/consumerGroup';
 import { Canvas, Node, Edge, Label } from 'reaflow';
-import { httpRequest } from '../../services/http';
+import { httpRequest } from 'services/http';
 import Producer from './components/producer';
-import Loader from '../../components/loader';
-import { Context } from '../../hooks/store';
-import pathDomains from '../../router';
-import { showMessages } from '../../services/genericServices';
+import Loader from 'components/loader';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
+import { showMessages } from 'services/genericServices';
 
 const MessageJourney = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/overview/genericDetails/index.js b/ui_src/src/domain/overview/genericDetails/index.js
index 5c58bcce4..5c5eb63f6 100644
--- a/ui_src/src/domain/overview/genericDetails/index.js
+++ b/ui_src/src/domain/overview/genericDetails/index.js
@@ -15,11 +15,11 @@ import './style.scss';
 import React, { useContext } from 'react';
 import { Divider, Popover } from 'antd';
 
-import { ReactComponent as ConsumeLagIcon } from '../../../assets/images/consumeLagIcon.svg';
-import { ReactComponent as TotalMsgIcon } from '../../../assets/images/TotalMessages.svg';
-import { ReactComponent as TotalPoisonIcon } from '../../../assets/images/DeadLetteredMessages.svg';
-import { ReactComponent as TotalStationsIcon } from '../../../assets/images/TotalStations.svg';
-import { Context } from '../../../hooks/store';
+import { ReactComponent as ConsumeLagIcon } from 'assets/images/consumeLagIcon.svg';
+import { ReactComponent as TotalMsgIcon } from 'assets/images/TotalMessages.svg';
+import { ReactComponent as TotalPoisonIcon } from 'assets/images/DeadLetteredMessages.svg';
+import { ReactComponent as TotalStationsIcon } from 'assets/images/TotalStations.svg';
+import { Context } from 'hooks/store';
 import { InfoOutlined, InfoRounded } from '@material-ui/icons';
 import StationLagCollapse from './stationCollapse';
 
diff --git a/ui_src/src/domain/overview/genericDetails/stationCollapse.js b/ui_src/src/domain/overview/genericDetails/stationCollapse.js
index f2b7f92da..ebf9b3699 100644
--- a/ui_src/src/domain/overview/genericDetails/stationCollapse.js
+++ b/ui_src/src/domain/overview/genericDetails/stationCollapse.js
@@ -17,8 +17,8 @@ import { useHistory } from 'react-router-dom';
 import React, { useState } from 'react';
 import { Badge, Divider } from 'antd';
 
-import { ReactComponent as StationsActiveIcon } from '../../../assets/images/stationsIconActive.svg';
-import { ReactComponent as RedirectIcon } from '../../../assets/images/redirectIcon.svg';
+import { ReactComponent as StationsActiveIcon } from 'assets/images/stationsIconActive.svg';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
 
 const ExpandIcon = ({ isActive }) => <KeyboardArrowUpRounded className={isActive ? 'collapse-arrow open' : 'collapse-arrow close'} />;
 
diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js
index 902de97e4..36680e834 100644
--- a/ui_src/src/domain/overview/index.js
+++ b/ui_src/src/domain/overview/index.js
@@ -24,34 +24,34 @@ import {
     LOCAL_STORAGE_ENV,
     LOCAL_STORAGE_ACCOUNT_ID,
     USER_IMAGE
-} from '../../const/localStorageConsts';
-import { ReactComponent as StationIcon } from '../../assets/images/stationsIconActive.svg';
-import { ReactComponent as GraphOverview } from '../../assets/images/graphOverview.svg';
-import { ReactComponent as CloudTeaser } from '../../assets/images/cloudTeaser.svg';
-import { ReactComponent as PlusElement } from '../../assets/images/plusElement.svg';
-import { ReactComponent as EditIcon } from '../../assets/images/editIcon.svg';
-import CreateStationForm from '../../components/createStationForm';
-import { capitalizeFirst, isCloud } from '../../services/valueConvertor';
-import { sendTrace } from '../../services/genericServices';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
+} from 'const/localStorageConsts';
+import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
+import { ReactComponent as GraphOverview } from 'assets/images/graphOverview.svg';
+import { ReactComponent as CloudTeaser } from 'assets/images/cloudTeaser.svg';
+import { ReactComponent as PlusElement } from 'assets/images/plusElement.svg';
+import { ReactComponent as EditIcon } from 'assets/images/editIcon.svg';
+import CreateStationForm from 'components/createStationForm';
+import { capitalizeFirst, isCloud } from 'services/valueConvertor';
+import { sendTrace } from 'services/genericServices';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 import SystemComponents from './systemComponents';
 import GenericDetails from './genericDetails';
 import Stations from './stations';
 import Tags from './tags';
 import Integrations from './integrations';
 import Usage from './usage';
-import Loader from '../../components/loader';
-import Button from '../../components/button';
-import LearnMore from '../../components/learnMore';
-import { Context } from '../../hooks/store';
-import Modal from '../../components/modal';
-import AsyncTasks from '../../components/asyncTasks';
-import CloudModal from '../../components/cloudModal';
+import Loader from 'components/loader';
+import Button from 'components/button';
+import LearnMore from 'components/learnMore';
+import { Context } from 'hooks/store';
+import Modal from 'components/modal';
+import AsyncTasks from 'components/asyncTasks';
+import CloudModal from 'components/cloudModal';
 import Throughput from './throughput';
-import Copy from '../../components/copy';
+import Copy from 'components/copy';
 import StreamLineage from '../streamLineage';
-import pathDomains from '../../router';
+import pathDomains from 'router';
 import { useHistory } from 'react-router-dom';
 import { FaArrowCircleUp } from 'react-icons/fa';
 
@@ -67,7 +67,7 @@ function OverView() {
     const [state, dispatch] = useContext(Context);
     const [open, modalFlip] = useState(false);
     const createStationRef = useRef(null);
-    const [botUrl, SetBotUrl] = useState(require('../../assets/images/bots/avatar1.svg'));
+    const [botUrl, SetBotUrl] = useState(require('assets/images/bots/avatar1.svg'));
     const [username, SetUsername] = useState('');
     const [isLoading, setisLoading] = useState(true);
     const [creatingProsessd, setCreatingProsessd] = useState(false);
@@ -191,7 +191,7 @@ function OverView() {
     }, [state.socket]);
 
     const setBotImage = (botId) => {
-        SetBotUrl(require(`../../assets/images/bots/avatar${botId}.svg`));
+        SetBotUrl(require(`assets/images/bots/avatar${botId}.svg`));
     };
 
     let host =
diff --git a/ui_src/src/domain/overview/integrations/index.js b/ui_src/src/domain/overview/integrations/index.js
index af2437e00..04e9d988f 100644
--- a/ui_src/src/domain/overview/integrations/index.js
+++ b/ui_src/src/domain/overview/integrations/index.js
@@ -14,21 +14,21 @@ import './style.scss';
 
 import React, { useEffect, useState, useRef, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Context } from '../../../hooks/store';
-import debeziumIcon from '../../../../src/assets/images/debeziumIcon.svg';
-import slackLogo from '../../../../src/assets/images/slackLogo.svg';
-import s3Logo from '../../../../src/assets/images/s3Logo.svg';
-import pathDomains from '../../../router';
-import Modal from '../../../../src/components/modal';
+import { Context } from 'hooks/store';
+import debeziumIcon from 'assets/images/debeziumIcon.svg';
+import slackLogo from 'assets/images/slackLogo.svg';
+import s3Logo from 'assets/images/s3Logo.svg';
+import pathDomains from 'router';
+import Modal from 'components/modal';
 import SlackIntegration from '../../administration/integrations/components/slackIntegration';
 import S3Integration from '../../administration/integrations/components/s3Integration';
 import DebeziumIntegration from '../../administration/integrations/components/debeziumIntegration';
-import { httpRequest } from '../../../services/http';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
-import LockFeature from '../../../components/lockFeature';
-import {entitlementChecker} from "../../../utils/plan";
+import LockFeature from 'components/lockFeature';
+import {entitlementChecker} from "utils/plan";
 
 const Integrations = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/overview/stations/index.js b/ui_src/src/domain/overview/stations/index.js
index b82d63e18..451285fb1 100644
--- a/ui_src/src/domain/overview/stations/index.js
+++ b/ui_src/src/domain/overview/stations/index.js
@@ -17,18 +17,18 @@ import { useHistory } from 'react-router-dom';
 import { KeyboardArrowRightRounded } from '@material-ui/icons';
 import Lottie from 'lottie-react';
 
-import noActiveAndUnhealthy from '../../../assets/lotties/noActiveAndUnhealthy.json';
-import { isCloud, parsingDate } from '../../../services/valueConvertor';
-import noActiveAndHealthy from '../../../assets/lotties/noActiveAndHealthy.json';
-import activeAndUnhealthy from '../../../assets/lotties/activeAndUnhealthy.json';
-import activeAndHealthy from '../../../assets/lotties/activeAndHealthy.json';
-import OverflowTip from '../../../components/tooltip/overflowtip';
-import { ReactComponent as NoStationsIcon } from '../../../assets/images/noStations.svg';
-import Button from '../../../components/button';
-import CloudModal from '../../../components/cloudModal';
+import noActiveAndUnhealthy from 'assets/lotties/noActiveAndUnhealthy.json';
+import { isCloud, parsingDate } from 'services/valueConvertor';
+import noActiveAndHealthy from 'assets/lotties/noActiveAndHealthy.json';
+import activeAndUnhealthy from 'assets/lotties/activeAndUnhealthy.json';
+import activeAndHealthy from 'assets/lotties/activeAndHealthy.json';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { ReactComponent as NoStationsIcon } from 'assets/images/noStations.svg';
+import Button from 'components/button';
+import CloudModal from 'components/cloudModal';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import { Context } from '../../../hooks/store';
-import pathDomains from '../../../router';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
 import { Virtuoso } from 'react-virtuoso';
 
 const Stations = ({ createStationTrigger }) => {
diff --git a/ui_src/src/domain/overview/systemComponents/components/component.js b/ui_src/src/domain/overview/systemComponents/components/component.js
index b7adb25b4..8c5e5dcef 100644
--- a/ui_src/src/domain/overview/systemComponents/components/component.js
+++ b/ui_src/src/domain/overview/systemComponents/components/component.js
@@ -18,8 +18,8 @@ import { Popover, Divider } from 'antd';
 import React from 'react';
 
 import { PieChart, Pie } from 'recharts';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import { ReactComponent as ComponentIcon } from '../../../../assets/images/componentIcon.svg';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { ReactComponent as ComponentIcon } from 'assets/images/componentIcon.svg';
 import SysCompInfo from './sysCompInfo';
 
 const remainingPorstPopInnerStyle = { padding: '5px', borderRadius: '4px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.12), 0px 23px 44px rgba(176, 183, 195, 0.14)' };
diff --git a/ui_src/src/domain/overview/systemComponents/index.js b/ui_src/src/domain/overview/systemComponents/index.js
index da6a616d8..ea7a5303d 100644
--- a/ui_src/src/domain/overview/systemComponents/index.js
+++ b/ui_src/src/domain/overview/systemComponents/index.js
@@ -16,9 +16,9 @@ import './style.scss';
 import React, { useContext, useState, useEffect } from 'react';
 import SysContainers from './sysContainers';
 import Component from './components/component';
-import { Context } from '../../../hooks/store';
+import { Context } from 'hooks/store';
 import { Tree } from 'antd';
-import { ReactComponent as CollapseArrowIcon } from '../../../assets/images/collapseArrow.svg';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
 
 const SysComponents = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/overview/systemComponents/sysContainers.js b/ui_src/src/domain/overview/systemComponents/sysContainers.js
index 3efd42209..6fd63a2dc 100644
--- a/ui_src/src/domain/overview/systemComponents/sysContainers.js
+++ b/ui_src/src/domain/overview/systemComponents/sysContainers.js
@@ -16,10 +16,10 @@ import './style.scss';
 import React from 'react';
 import { Divider } from 'antd';
 import { Progress } from 'antd';
-import { ReactComponent as SysContainerIcon } from '../../../assets/images/sysContainer.svg';
-import { ReactComponent as ErrorIndicationIcon } from '../../../assets/images/errorindication.svg';
-import TooltipComponent from '../../../components/tooltip/tooltip';
-import { convertBytes } from '../../../services/valueConvertor';
+import { ReactComponent as SysContainerIcon } from 'assets/images/sysContainer.svg';
+import { ReactComponent as ErrorIndicationIcon } from 'assets/images/errorindication.svg';
+import TooltipComponent from 'components/tooltip/tooltip';
+import { convertBytes } from 'services/valueConvertor';
 
 const SysContainers = ({ component, k8sEnv, metricsEnabled, index }) => {
     const getColor = (percentage) => {
diff --git a/ui_src/src/domain/overview/tags/index.js b/ui_src/src/domain/overview/tags/index.js
index d86ca8196..18f68a045 100644
--- a/ui_src/src/domain/overview/tags/index.js
+++ b/ui_src/src/domain/overview/tags/index.js
@@ -13,10 +13,10 @@
 import './style.scss';
 
 import React, { useContext } from 'react';
-import Tag from '../../../components/tag';
+import Tag from 'components/tag';
 import { Divider } from 'antd';
-import { Context } from '../../../hooks/store';
-import { ReactComponent as NoTagsFoundIcon } from '../../../assets/images/noTagsFound.svg';
+import { Context } from 'hooks/store';
+import { ReactComponent as NoTagsFoundIcon } from 'assets/images/noTagsFound.svg';
 
 const Tags = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/overview/throughput/index.js b/ui_src/src/domain/overview/throughput/index.js
index e84a4e584..a16fa5c6e 100644
--- a/ui_src/src/domain/overview/throughput/index.js
+++ b/ui_src/src/domain/overview/throughput/index.js
@@ -30,14 +30,14 @@ import { Line } from 'react-chartjs-2';
 import { Chart } from 'chart.js';
 import 'chartjs-plugin-streaming';
 import moment from 'moment';
-import { convertBytes, isCloud } from '../../../services/valueConvertor';
-import SelectThroughput from '../../../components/selectThroughput';
-import SegmentButton from '../../../components/segmentButton';
-import Loader from '../../../components/loader';
-import DataNotFound from '../../../assets/images/dataNotFound.svg';
-import pathDomains from '../../../router';
+import { convertBytes, isCloud } from 'services/valueConvertor';
+import SelectThroughput from 'components/selectThroughput';
+import SegmentButton from 'components/segmentButton';
+import Loader from 'components/loader';
+import DataNotFound from 'assets/images/dataNotFound.svg';
+import pathDomains from 'router';
 
-import { Context } from '../../../hooks/store';
+import { Context } from 'hooks/store';
 import { PauseRounded, PlayArrowRounded } from '@material-ui/icons';
 
 const yAxesOptions = [
diff --git a/ui_src/src/domain/overview/throughput/throughputInterval.js b/ui_src/src/domain/overview/throughput/throughputInterval.js
index aca2e47ff..ad853d0b4 100644
--- a/ui_src/src/domain/overview/throughput/throughputInterval.js
+++ b/ui_src/src/domain/overview/throughput/throughputInterval.js
@@ -16,10 +16,10 @@ import './style.scss';
 
 import React, { useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import Button from '../../../components/button';
+import Button from 'components/button';
 import { Popover } from 'antd';
-import DatePickerComponent from '../../../components/datePicker';
-import SearchInput from '../../../components/searchInput';
+import DatePickerComponent from 'components/datePicker';
+import SearchInput from 'components/searchInput';
 
 const ThroughputInterval = ({ createStationTrigger }) => {
     const [selectInterval, setSelectInterval] = useState(0);
diff --git a/ui_src/src/domain/overview/usage/index.js b/ui_src/src/domain/overview/usage/index.js
index 3a249be60..037abe813 100644
--- a/ui_src/src/domain/overview/usage/index.js
+++ b/ui_src/src/domain/overview/usage/index.js
@@ -10,9 +10,9 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import React, { useContext } from 'react';
-import UpgradePlans from '../../../components/upgradePlans';
+import UpgradePlans from 'components/upgradePlans';
 
-import { Context } from '../../../hooks/store';
+import { Context } from 'hooks/store';
 
 import './style.scss';
 const Usage = () => {
diff --git a/ui_src/src/domain/profile/index.js b/ui_src/src/domain/profile/index.js
index 72ba7c8f9..3ae9c5300 100644
--- a/ui_src/src/domain/profile/index.js
+++ b/ui_src/src/domain/profile/index.js
@@ -14,10 +14,10 @@ import './style.scss';
 
 import React, { useEffect, useContext, useState } from 'react';
 
-import { LOCAL_STORAGE_AVATAR_ID, USER_IMAGE } from '../../const/localStorageConsts';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import { Context } from '../../hooks/store';
+import { LOCAL_STORAGE_AVATAR_ID, USER_IMAGE } from 'const/localStorageConsts';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { Context } from 'hooks/store';
 
 function Profile() {
     const [state, dispatch] = useContext(Context);
@@ -73,7 +73,7 @@ function Profile() {
                                     }
                                     onClick={() => (localStorage.getItem(USER_IMAGE) === 'undefined' || !localStorage.getItem(USER_IMAGE)) && editAvatar(item + 1)}
                                 >
-                                    <img src={require(`../../assets/images/bots/avatar${item + 1}.svg`)} alt="avater" />
+                                    <img src={require(`assets/images/bots/avatar${item + 1}.svg`)} alt="avater" />
                                 </div>
                             );
                         })}
diff --git a/ui_src/src/domain/schema/components/attachStationModal/index.js b/ui_src/src/domain/schema/components/attachStationModal/index.js
index b1bd4a437..b32baea94 100644
--- a/ui_src/src/domain/schema/components/attachStationModal/index.js
+++ b/ui_src/src/domain/schema/components/attachStationModal/index.js
@@ -14,18 +14,18 @@ import './style.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import CheckboxComponent from '../../../../components/checkBox';
-import { ReactComponent as AttachedPlaceholderIcon } from '../../../../assets/images/attachedPlaceholder.svg';
-import { ReactComponent as StationsActiveIcon } from '../../../../assets/images/stationsIconActive.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { useGetAllowedActions } from '../../../../services/genericServices';
-import Button from '../../../../components/button';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import Modal from '../../../../components/modal';
-import LearnMore from '../../../../components/learnMore';
-import CreateStationForm from '../../../../components/createStationForm';
-import { isCloud } from '../../../../services/valueConvertor';
+import CheckboxComponent from 'components/checkBox';
+import { ReactComponent as AttachedPlaceholderIcon } from 'assets/images/attachedPlaceholder.svg';
+import { ReactComponent as StationsActiveIcon } from 'assets/images/stationsIconActive.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { useGetAllowedActions } from 'services/genericServices';
+import Button from 'components/button';
+import OverflowTip from 'components/tooltip/overflowtip';
+import Modal from 'components/modal';
+import LearnMore from 'components/learnMore';
+import CreateStationForm from 'components/createStationForm';
+import { isCloud } from 'services/valueConvertor';
 
 function AttachStationModal({ close, handleAttachedStations, attachedStations, schemaName, update }) {
     const createStationRef = useRef(null);
diff --git a/ui_src/src/domain/schema/components/createSchema/index.js b/ui_src/src/domain/schema/components/createSchema/index.js
index 277257185..c3bcdc8cf 100644
--- a/ui_src/src/domain/schema/components/createSchema/index.js
+++ b/ui_src/src/domain/schema/components/createSchema/index.js
@@ -12,7 +12,7 @@
 
 import './style.scss';
 import { useHistory } from 'react-router-dom';
-import pathDomains from '../../../../router';
+import pathDomains from 'router';
 import { CheckCircleOutlineRounded, ErrorOutlineRounded } from '@material-ui/icons';
 import draft7MetaSchema from 'ajv/dist/refs/json-schema-draft-07.json';
 import draft6MetaSchema from 'ajv/dist/refs/json-schema-draft-06.json';
@@ -27,22 +27,22 @@ import Ajv2019 from 'ajv/dist/2019';
 import Ajv2020 from 'ajv/dist/2020';
 import { Form } from 'antd';
 
-import { generateName, getUnique } from '../../../../services/valueConvertor';
-import { ReactComponent as SchemaTypeIcon } from '../../../../assets/images/schemaTypeIcon.svg';
-import { ReactComponent as StationsActiveIcon } from '../../../../assets/images/stationsIconActive.svg';
-import { ReactComponent as ErrorModalIcon } from '../../../../assets/images/errorModal.svg';
-import { ReactComponent as BackIcon } from '../../../../assets/images/backIcon.svg';
-import { ReactComponent as TagsIcon } from '../../../../assets/images/tagsIcon.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../assets/images/purpleQuestionMark.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import RadioButton from '../../../../components/radioButton';
-import SelectComponent from '../../../../components/select';
-import { httpRequest } from '../../../../services/http';
-import TagsList from '../../../../components/tagList';
-import Button from '../../../../components/button';
-import { Context } from '../../../../hooks/store';
-import Input from '../../../../components/Input';
-import Modal from '../../../../components/modal';
+import { generateName, getUnique } from 'services/valueConvertor';
+import { ReactComponent as SchemaTypeIcon } from 'assets/images/schemaTypeIcon.svg';
+import { ReactComponent as StationsActiveIcon } from 'assets/images/stationsIconActive.svg';
+import { ReactComponent as ErrorModalIcon } from 'assets/images/errorModal.svg';
+import { ReactComponent as BackIcon } from 'assets/images/backIcon.svg';
+import { ReactComponent as TagsIcon } from 'assets/images/tagsIcon.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import RadioButton from 'components/radioButton';
+import SelectComponent from 'components/select';
+import { httpRequest } from 'services/http';
+import TagsList from 'components/tagList';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
+import Input from 'components/Input';
+import Modal from 'components/modal';
 import AttachStationModal from '../attachStationModal';
 const avro = require('avro-js');
 
diff --git a/ui_src/src/domain/schema/components/schemaBox/index.js b/ui_src/src/domain/schema/components/schemaBox/index.js
index 8816ae373..106d2d6de 100644
--- a/ui_src/src/domain/schema/components/schemaBox/index.js
+++ b/ui_src/src/domain/schema/components/schemaBox/index.js
@@ -13,21 +13,21 @@
 import './style.scss';
 
 import { CloseRounded } from '@material-ui/icons';
-import { Drawer } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ReactComponent as CreatedDateIcon } from '../../../../assets/images/createdDateIcon.svg';
-import { ReactComponent as NotUsedIcond } from '../../../../assets/images/notUsedIcon.svg';
-import { capitalizeFirst, parsingDate } from '../../../../services/valueConvertor';
-import CheckboxComponent from '../../../../components/checkBox';
-import { ReactComponent as UsedIcond } from '../../../../assets/images/usedIcon.svg';
-import TagsList from '../../../../components/tagList';
+import { ReactComponent as CreatedDateIcon } from 'assets/images/createdDateIcon.svg';
+import { ReactComponent as NotUsedIcond } from 'assets/images/notUsedIcon.svg';
+import { capitalizeFirst, parsingDate } from 'services/valueConvertor';
+import CheckboxComponent from 'components/checkBox';
+import { ReactComponent as UsedIcond } from 'assets/images/usedIcon.svg';
+import TagsList from 'components/tagList';
 import SchemaDetails from '../schemaDetails';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import pathDomains from '../../../../router';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
+import OverflowTip from 'components/tooltip/overflowtip';
+import pathDomains from 'router';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Drawer from "components/drawer";
 
 function SchemaBox({ schemaBox, handleCheckedClick, isCheck }) {
     const history = useHistory();
diff --git a/ui_src/src/domain/schema/components/schemaDetails/index.js b/ui_src/src/domain/schema/components/schemaDetails/index.js
index 4f7b0ae21..84faa3e3a 100644
--- a/ui_src/src/domain/schema/components/schemaDetails/index.js
+++ b/ui_src/src/domain/schema/components/schemaDetails/index.js
@@ -17,38 +17,38 @@ import Editor, { DiffEditor, loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import React, { useContext, useEffect, useState } from 'react';
 import Schema from 'protocol-buffers-schema';
-import { getUnique, isThereDiff, parsingDate } from '../../../../services/valueConvertor';
-import { ReactComponent as StationsActiveIcon } from '../../../../assets/images/stationsIconActive.svg';
-import { ReactComponent as CreatedDateIcon } from '../../../../assets/images/createdDateIcon.svg';
-import { ReactComponent as ScrollBackIcon } from '../../../../assets/images/scrollBackIcon.svg';
-import { ReactComponent as RedirectIcon } from '../../../../assets/images/redirectIcon.svg';
-import { ReactComponent as CreatedByIcon } from '../../../../assets/images/createdByIcon.svg';
-import { ReactComponent as VerifiedIcon } from '../../../../assets/images/verifiedIcon.svg';
-import { ReactComponent as RollBackIcon } from '../../../../assets/images/rollBackIcon.svg';
-import SelectVersion from '../../../../components/selectVersion';
-import { ReactComponent as TypeIcon } from '../../../../assets/images/typeIcon.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import SelectComponent from '../../../../components/select';
-import { httpRequest } from '../../../../services/http';
-import { isCloud } from '../../../../services/valueConvertor';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import Copy from '../../../../components/copy';
-import TagsList from '../../../../components/tagList';
-import LockFeature from '../../../../components/lockFeature';
+import { getUnique, isThereDiff, parsingDate } from 'services/valueConvertor';
+import { ReactComponent as StationsActiveIcon } from 'assets/images/stationsIconActive.svg';
+import { ReactComponent as CreatedDateIcon } from 'assets/images/createdDateIcon.svg';
+import { ReactComponent as ScrollBackIcon } from 'assets/images/scrollBackIcon.svg';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { ReactComponent as CreatedByIcon } from 'assets/images/createdByIcon.svg';
+import { ReactComponent as VerifiedIcon } from 'assets/images/verifiedIcon.svg';
+import { ReactComponent as RollBackIcon } from 'assets/images/rollBackIcon.svg';
+import SelectVersion from 'components/selectVersion';
+import { ReactComponent as TypeIcon } from 'assets/images/typeIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import SelectComponent from 'components/select';
+import { httpRequest } from 'services/http';
+import { isCloud } from 'services/valueConvertor';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import Copy from 'components/copy';
+import TagsList from 'components/tagList';
+import LockFeature from 'components/lockFeature';
 import { useHistory } from 'react-router-dom';
-import pathDomains from '../../../../router';
-import { Context } from '../../../../hooks/store';
+import pathDomains from 'router';
+import { Context } from 'hooks/store';
 import Ajv2019 from 'ajv/dist/2019';
 import jsonSchemaDraft04 from 'ajv-draft-04';
 import draft7MetaSchema from 'ajv/dist/refs/json-schema-draft-07.json';
 import Ajv2020 from 'ajv/dist/2020';
 import draft6MetaSchema from 'ajv/dist/refs/json-schema-draft-06.json';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
+import OverflowTip from 'components/tooltip/overflowtip';
 import { validate, parse, buildASTSchema } from 'graphql';
-import SegmentButton from '../../../../components/segmentButton';
+import SegmentButton from 'components/segmentButton';
 import AttachStationModal from '../attachStationModal';
-import { showMessages } from '../../../../services/genericServices';
+import { showMessages } from 'services/genericServices';
 const avro = require('avro-js');
 
 loader.init();
@@ -451,7 +451,7 @@ function SchemaDetails({ schemaName, closeDrawer }) {
                                 fontFamily: 'Inter'
                             }}
                             language={schemaDetails?.type === 'protobuf' ? 'proto' : schemaDetails?.type === 'avro' ? 'json' : schemaDetails?.type}
-                            height="calc(100% - 55px)"
+                            height="calc(100% - 104px)"
                             defaultValue={versionSelected?.schema_content}
                             value={newVersion}
                             onChange={(value) => {
diff --git a/ui_src/src/domain/schema/components/schemaList/index.js b/ui_src/src/domain/schema/components/schemaList/index.js
index 28dd1547b..e1068fa6e 100644
--- a/ui_src/src/domain/schema/components/schemaList/index.js
+++ b/ui_src/src/domain/schema/components/schemaList/index.js
@@ -14,21 +14,21 @@ import './style.scss';
 
 import React, { useEffect, useContext, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { ReactComponent as PlaceholderSchema } from '../../../../assets/images/placeholderSchema.svg';
-import { ReactComponent as DeleteWrapperIcon } from '../../../../assets/images/deleteWrapperIcon.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import { useGetAllowedActions } from '../../../../services/genericServices';
-import Loader from '../../../../components/loader';
-import Button from '../../../../components/button';
-import Filter from '../../../../components/filter';
-import { Context } from '../../../../hooks/store';
-import Modal from '../../../../components/modal';
+import { ReactComponent as PlaceholderSchema } from 'assets/images/placeholderSchema.svg';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { useGetAllowedActions } from 'services/genericServices';
+import Loader from 'components/loader';
+import Button from 'components/button';
+import Filter from 'components/filter';
+import { Context } from 'hooks/store';
+import Modal from 'components/modal';
 import SchemaBox from '../schemaBox';
-import { filterArray, isCloud } from '../../../../services/valueConvertor';
-import DeleteItemsModal from '../../../../components/deleteItemsModal';
+import { filterArray, isCloud } from 'services/valueConvertor';
+import DeleteItemsModal from 'components/deleteItemsModal';
 import { useHistory } from 'react-router-dom';
-import pathDomains from '../../../../router';
+import pathDomains from 'router';
 
 function SchemaList({ createNew }) {
     const history = useHistory();
diff --git a/ui_src/src/domain/schema/index.js b/ui_src/src/domain/schema/index.js
index f260ca63e..711008c1f 100644
--- a/ui_src/src/domain/schema/index.js
+++ b/ui_src/src/domain/schema/index.js
@@ -14,7 +14,7 @@ import './style.scss';
 
 import React, { useEffect, useContext, useState } from 'react';
 
-import { Context } from '../../hooks/store';
+import { Context } from 'hooks/store';
 import SchemaList from './components/schemaList';
 import CreateSchema from './components/createSchema';
 
diff --git a/ui_src/src/domain/signup/index.js b/ui_src/src/domain/signup/index.js
index 8e9ee6ff1..018baeabe 100644
--- a/ui_src/src/domain/signup/index.js
+++ b/ui_src/src/domain/signup/index.js
@@ -25,21 +25,21 @@ import {
     LOCAL_STORAGE_CONNECTION_TOKEN,
     LOCAL_STORAGE_TOKEN,
     LOCAL_STORAGE_USER_PASS_BASED_AUTH
-} from '../../const/localStorageConsts';
-import { ReactComponent as FullLogo } from '../../assets/images/fullLogo.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as SignupIcon } from '../../assets/images/signup.svg';
-import { httpRequest } from '../../services/http';
-import Switcher from '../../components/switcher';
-import AuthService from '../../services/auth';
-import Button from '../../components/button';
-import Loader from '../../components/loader';
-import { Context } from '../../hooks/store';
-import Input from '../../components/Input';
-import Tooltip from '../../components/tooltip/tooltip';
-import pathDomains from '../../router';
+} from 'const/localStorageConsts';
+import { ReactComponent as FullLogo } from 'assets/images/fullLogo.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as SignupIcon } from 'assets/images/signup.svg';
+import { httpRequest } from 'services/http';
+import Switcher from 'components/switcher';
+import AuthService from 'services/auth';
+import Button from 'components/button';
+import Loader from 'components/loader';
+import { Context } from 'hooks/store';
+import Input from 'components/Input';
+import Tooltip from 'components/tooltip/tooltip';
+import pathDomains from 'router';
 import { connect } from 'nats.ws';
-import { WS_PREFIX } from '../../config';
+import { WS_PREFIX } from 'config';
 
 const Signup = (props) => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/stationOverview/components/auditing/genericList/index.js b/ui_src/src/domain/stationOverview/components/auditing/genericList/index.js
index 60528fc45..13c3d897b 100644
--- a/ui_src/src/domain/stationOverview/components/auditing/genericList/index.js
+++ b/ui_src/src/domain/stationOverview/components/auditing/genericList/index.js
@@ -14,10 +14,10 @@ import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
 
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
-import Reducer from '../../../hooks/reducer';
-import { StationStoreContext } from '../../..';
-import { parsingDate } from '../../../../../services/valueConvertor';
+import OverflowTip from 'components/tooltip/overflowtip';
+import Reducer from 'hooks/reducer';
+import { StationStoreContext } from 'domain/stationOverview';
+import { parsingDate } from 'services/valueConvertor';
 
 const GenericList = (props) => {
     const [stationState] = useContext(StationStoreContext);
diff --git a/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js b/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
index 8986b34fc..a68f27ef9 100644
--- a/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
+++ b/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
@@ -14,18 +14,18 @@ import './style.scss';
 
 import React, { useEffect, useState, useRef } from 'react';
 
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import CustomSelect from '../../../../components/customSelect';
-import { ReactComponent as RefreshIcon } from '../../../../assets/images/refresh.svg';
-import { httpRequest } from '../../../../services/http';
-import Button from '../../../../components/button';
-import Input from '../../../../components/Input';
-import Copy from '../../../../components/copy';
-import CreateUserDetails from '../../../users/createUserDetails';
-import { Drawer } from 'antd';
-import { LOCAL_STORAGE_ACCOUNT_ID, LOCAL_STORAGE_USER_PASS_BASED_AUTH } from '../../../../const/localStorageConsts';
-import { isCloud } from '../../../../services/valueConvertor';
-import { sendTrace } from '../../../../services/genericServices';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import CustomSelect from 'components/customSelect';
+import { ReactComponent as RefreshIcon } from 'assets/images/refresh.svg';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
+import Input from 'components/Input';
+import Copy from 'components/copy';
+import CreateUserDetails from 'domain/users/createUserDetails';
+import Drawer from "components/drawer";
+import { LOCAL_STORAGE_ACCOUNT_ID, LOCAL_STORAGE_USER_PASS_BASED_AUTH } from 'const/localStorageConsts';
+import { isCloud } from 'services/valueConvertor';
+import { sendTrace } from 'services/genericServices';
 
 const GenerateTokenModal = ({ host, close, returnToken, restProducer, stationName }) => {
     const [isLoading, setIsLoading] = useState(true);
@@ -118,7 +118,7 @@ const GenerateTokenModal = ({ host, close, returnToken, restProducer, stationNam
                 <>
                     {restProducer ? (
                         <p className="desc">
-                            Produce and consume data using the REST protocol. Great for webhooks ingestion and connecting your Memphis with other platforms
+                            Produce and consume data using the REST protocol. Great for webhooks ingestion and connecting your Memphis with 3rd parties
                         </p>
                     ) : (
                         <p className="desc">
@@ -224,15 +224,15 @@ const GenerateTokenModal = ({ host, close, returnToken, restProducer, stationNam
                             <div className="api-token">
                                 <p className="field-title">Produce</p>
                                 <div className="input-and-copy" onClick={() => produceConsumeRest('produce')}>
-                                    <span className="url-span">{`${host}.restgw.cloud.memphis.dev/stations/${stationName}/produce/single?authorization=${userToken?.jwt_refresh_token}`}</span>
-                                    <Copy data={userToken?.jwt_refresh_token} width={20} />
+                                    <span className="url-span">{`${host}/stations/${stationName}/produce/single?authorization=${userToken?.jwt_refresh_token}`}</span>
+                                    <Copy data={`${host}/stations/${stationName}/produce/single?authorization=${userToken?.jwt_refresh_token}`} width={20} />
                                 </div>
                             </div>
                             <div className="api-token">
                                 <p className="field-title">Consume</p>
                                 <div className="input-and-copy" onClick={() => produceConsumeRest('consume')}>
-                                    <span className="url-span">{`${host}.restgw.cloud.memphis.dev/stations/${stationName}/consume/batch?authorization=${userToken?.jwt_refresh_token}`}</span>
-                                    <Copy data={userToken?.jwt_refresh_token} width={20} />
+                                    <span className="url-span">{`${host}/stations/${stationName}/consume/batch?authorization=${userToken?.jwt_refresh_token}`}</span>
+                                    <Copy data={`${host}/stations/${stationName}/consume/batch?authorization=${userToken?.jwt_refresh_token}`} width={20} />
                                 </div>
                             </div>
                         </div>
diff --git a/ui_src/src/domain/stationOverview/components/updateSchemaModal/index.js b/ui_src/src/domain/stationOverview/components/updateSchemaModal/index.js
index 801848d44..af3f32e2e 100644
--- a/ui_src/src/domain/stationOverview/components/updateSchemaModal/index.js
+++ b/ui_src/src/domain/stationOverview/components/updateSchemaModal/index.js
@@ -14,19 +14,19 @@ import './style.scss';
 
 import React, { useEffect, useState } from 'react';
 
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { ReactComponent as TypeIcon } from '../../../../assets/images/typeIcon.svg';
-import { ReactComponent as CreatedByIcon } from '../../../../assets/images/createdByIcon.svg';
-import { ReactComponent as SchemaItemIcon } from '../../../../assets/images/schemaItemIcon.svg';
-import { httpRequest } from '../../../../services/http';
-import { useGetAllowedActions } from '../../../../services/genericServices';
-import { isCloud } from '../../../../services/valueConvertor';
-import Button from '../../../../components/button';
-import Copy from '../../../../components/copy';
-import SelectComponent from '../../../../components/select';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as TypeIcon } from 'assets/images/typeIcon.svg';
+import { ReactComponent as CreatedByIcon } from 'assets/images/createdByIcon.svg';
+import { ReactComponent as SchemaItemIcon } from 'assets/images/schemaItemIcon.svg';
+import { httpRequest } from 'services/http';
+import { useGetAllowedActions } from 'services/genericServices';
+import { isCloud } from 'services/valueConvertor';
+import Button from 'components/button';
+import Copy from 'components/copy';
+import SelectComponent from 'components/select';
 import Editor, { DiffEditor, loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
-import SegmentButton from '../../../../components/segmentButton';
+import SegmentButton from 'components/segmentButton';
 
 loader.init();
 loader.config({ monaco });
diff --git a/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js b/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js
index d32617b1a..1633eaa13 100644
--- a/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js
+++ b/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js
@@ -15,25 +15,25 @@ import './style.scss';
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { AddRounded } from '@material-ui/icons';
 import { useHistory } from 'react-router-dom';
-import { useGetAllowedActions } from '../../../../services/genericServices';
-import { ReactComponent as PlaceholderSchemaIcon } from '../../../../assets/images/placeholderSchema.svg';
-import { ReactComponent as StopUsingIcon } from '../../../../assets/images/stopUsingIcon.svg';
-import DeleteItemsModal from '../../../../components/deleteItemsModal';
-import { ReactComponent as SearchIcon } from '../../../../assets/images/searchIcon.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import SearchInput from '../../../../components/searchInput';
-import { httpRequest } from '../../../../services/http';
-import { isCloud } from '../../../../services/valueConvertor';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import LearnMore from '../../../../components/learnMore';
-import pathDomains from '../../../../router';
-import { StationStoreContext } from '../..';
-import { Context } from '../../../../hooks/store';
+import { useGetAllowedActions } from 'services/genericServices';
+import { ReactComponent as PlaceholderSchemaIcon } from 'assets/images/placeholderSchema.svg';
+import { ReactComponent as StopUsingIcon } from 'assets/images/stopUsingIcon.svg';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import SearchInput from 'components/searchInput';
+import { httpRequest } from 'services/http';
+import { isCloud } from 'services/valueConvertor';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import LearnMore from 'components/learnMore';
+import pathDomains from 'router';
+import { StationStoreContext } from 'domain/stationOverview';
+import { Context } from 'hooks/store';
 import SchemaItem from './schemaItem';
-import { ReactComponent as StationIcon } from '../../../../assets/images/stationsIconActive.svg';
-import CreateStationForm from '../../../../components/createStationForm';
-import LockFeature from '../../../../components/lockFeature';
+import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
+import CreateStationForm from 'components/createStationForm';
+import LockFeature from 'components/lockFeature';
 
 const UseSchemaModal = ({ stationName, handleSetSchema, close, type = 'schema' }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/domain/stationOverview/components/useSchemaModal/schemaItem/index.js b/ui_src/src/domain/stationOverview/components/useSchemaModal/schemaItem/index.js
index 13a28b6a0..d2138d47b 100644
--- a/ui_src/src/domain/stationOverview/components/useSchemaModal/schemaItem/index.js
+++ b/ui_src/src/domain/stationOverview/components/useSchemaModal/schemaItem/index.js
@@ -15,9 +15,9 @@ import './style.scss';
 import { FiberManualRecord } from '@material-ui/icons';
 import React from 'react';
 
-import { ReactComponent as SchemaItemIcon } from '../../../../../assets/images/schemaItemIcon.svg';
-import { ReactComponent as StationIcon } from '../../../../../assets/images/stationsIconActive.svg';
-import { parsingDate } from '../../../../../services/valueConvertor';
+import { ReactComponent as SchemaItemIcon } from 'assets/images/schemaItemIcon.svg';
+import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
+import { parsingDate } from 'services/valueConvertor';
 
 const SchemaItem = ({ schema, handleSelectedItem, selected, type }) => {
     return (
diff --git a/ui_src/src/domain/stationOverview/index.js b/ui_src/src/domain/stationOverview/index.js
index 5795896cd..959a37d5c 100644
--- a/ui_src/src/domain/stationOverview/index.js
+++ b/ui_src/src/domain/stationOverview/index.js
@@ -14,14 +14,14 @@ import './style.scss';
 
 import React, { useEffect, useContext, useState, createContext, useReducer } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { extractValueFromURL, parsingDate } from '../../services/valueConvertor';
+import { extractValueFromURL, parsingDate } from 'services/valueConvertor';
 import StationOverviewHeader from './stationOverviewHeader';
 import StationObservabilty from './stationObservabilty';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
-import Loader from '../../components/loader';
-import { Context } from '../../hooks/store';
-import pathDomains from '../../router';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Loader from 'components/loader';
+import { Context } from 'hooks/store';
+import pathDomains from 'router';
 import Reducer from './hooks/reducer';
 import { StringCodec, JSONCodec } from 'nats.ws';
 
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
index c1ade54cb..e5445c5a5 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
@@ -13,45 +13,44 @@
 import './style.scss';
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { LOCAL_STORAGE_ENV, LOCAL_STORAGE_REST_GW_HOST, LOCAL_STORAGE_REST_GW_PORT } from '../../../../const/localStorageConsts';
+import { LOCAL_STORAGE_ENV, LOCAL_STORAGE_REST_GW_HOST, LOCAL_STORAGE_REST_GW_PORT } from 'const/localStorageConsts';
 import { Space, Popover } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { FiPlayCircle } from 'react-icons/fi';
-import { ReactComponent as WaitingProducerIcon } from '../../../../assets/images/waitingProducer.svg';
-import { ReactComponent as WaitingConsumerIcon } from '../../../../assets/images/waitingConsumer.svg';
-import { ReactComponent as PlayVideoIcon } from '../../../../assets/images/playVideoIcon.svg';
-import { ReactComponent as PurplePlus } from '../../../../assets/images/purplePlus.svg';
-import { ReactComponent as ProducerIcon } from '../../../../assets/images/producerIcon.svg';
-import { ReactComponent as ConnectIcon } from '../../../../assets/images/connectIcon.svg';
+import { ReactComponent as WaitingProducerIcon } from 'assets/images/waitingProducer.svg';
+import { ReactComponent as WaitingConsumerIcon } from 'assets/images/waitingConsumer.svg';
+import { ReactComponent as PlayVideoIcon } from 'assets/images/playVideoIcon.svg';
+import { ReactComponent as PurplePlus } from 'assets/images/purplePlus.svg';
+import { ReactComponent as ProducerIcon } from 'assets/images/producerIcon.svg';
+import { ReactComponent as ConnectIcon } from 'assets/images/connectIcon.svg';
 import { IoPlayCircleOutline, IoRemoveCircleOutline, IoPause, IoWarning } from 'react-icons/io5';
 import { HiDotsVertical } from 'react-icons/hi';
 import { MdError } from 'react-icons/md';
 import { IoMdInformationCircle } from 'react-icons/io';
-import OverflowTip from '../../../../components/tooltip/overflowtip';
-import { ReactComponent as UnsupportedIcon } from '../../../../assets/images/unsupported.svg';
-import StatusIndication from '../../../../components/indication';
-import SdkExample from '../../../../components/sdkExample';
+import OverflowTip from 'components/tooltip/overflowtip';
+import { ReactComponent as UnsupportedIcon } from 'assets/images/unsupported.svg';
+import StatusIndication from 'components/indication';
+import SdkExample from 'components/sdkExample';
 import CustomCollapse from '../components/customCollapse';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import GenerateTokenModal from '../../../stationOverview/components/generateTokenModal';
-import { StationStoreContext } from '../..';
-import ProduceMessages from '../../../../components/produceMessages';
-import ConnectorModal from '../../../../components/connectorModal';
-import ConnectorError from '../../../../components/connectorError';
-import { ReactComponent as ErrorModalIcon } from '../../../../assets/images/errorModal.svg';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import Spinner from '../../../../components/spinner';
-import TooltipComponent from '../../../../components/tooltip/tooltip';
-import { isCloud } from '../../../../services/valueConvertor';
-import { sendTrace } from '../../../../services/genericServices';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import GenerateTokenModal from 'domain/stationOverview/components/generateTokenModal';
+import { StationStoreContext } from 'domain/stationOverview';
+import ProduceMessages from 'components/produceMessages';
+import ConnectorModal from 'components/connectorModal';
+import ConnectorError from 'components/connectorError';
+import { ReactComponent as ErrorModalIcon } from 'assets/images/errorModal.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Spinner from 'components/spinner';
+import TooltipComponent from 'components/tooltip/tooltip';
+import { isCloud } from 'services/valueConvertor';
+import { sendTrace } from 'services/genericServices';
 import { BiLogoGoLang, BiLogoPython } from 'react-icons/bi';
 import { SiDotnet } from 'react-icons/si';
 import { DiJavascript1 } from 'react-icons/di';
-import ConnectorInfo from '../../../../components/connectorInfo';
-import RunBenchmarkModal from '../../../../components/runBenchmarkModal';
-import { connectorTypesSource, connectorTypesSink } from '../../../../connectors';
+import ConnectorInfo from 'components/connectorInfo';
+import RunBenchmarkModal from 'components/runBenchmarkModal';
 
 const overlayStylesConnectors = {
     borderRadius: '8px',
@@ -103,21 +102,21 @@ const ProduceConsumList = ({ producer }) => {
     const [loading, setLoader] = useState(false);
     const producerItemsList = [
         {
-            action: 'Produce synthetic data',
+            action: 'Produce Synthetic Data',
             onClick: () => {
                 setOpenProduceMessages(true);
                 setOpenProducerPopover(false);
             }
         },
         {
-            action: 'Develop a producer',
+            action: 'Develop a Producer',
             onClick: () => {
                 setOpenCreateProducer(true);
                 setOpenProducerPopover(false);
             }
         },
         {
-            action: 'Produce using REST',
+            action: 'Produce using REST protocol',
             onClick: () => {
                 setGenerateModal(true);
                 setOpenProducerPopover(false);
@@ -131,7 +130,7 @@ const ProduceConsumList = ({ producer }) => {
             }
         },
         {
-            action: 'Add a source',
+            action: 'Add a Source',
             onClick: () => {
                 setOpenConnectorModal(true);
                 setOpenProducerPopover(false);
@@ -141,14 +140,14 @@ const ProduceConsumList = ({ producer }) => {
 
     const consumeItemsList = [
         {
-            action: 'Develop a consumer',
+            action: 'Develop a Consumer',
             onClick: () => {
                 setOpenCreateConsumer(true);
                 setOpenProducerPopover(false);
             }
         },
         {
-            action: 'Consume using REST',
+            action: 'Consume using REST protocol',
             onClick: () => {
                 setGenerateModal(true);
                 setOpenProducerPopover(false);
@@ -162,7 +161,7 @@ const ProduceConsumList = ({ producer }) => {
             }
         },
         {
-            action: 'Add a sink',
+            action: 'Add a Sink',
             onClick: () => {
                 setOpenConnectorModal(true);
                 setOpenProducerPopover(false);
@@ -401,13 +400,6 @@ const ProduceConsumList = ({ producer }) => {
         return <div style={{ fontSize: '17px', display: 'flex', alignItems: 'center' }}>{iconComponent}</div>;
     }
 
-    const getIconByConnector = (item, connectorType) => {
-        let connector;
-        if (connectorType === 'source') connector = connectorTypesSource.find((connector) => connector?.name?.toLowerCase() === item?.type);
-        else connector = connectorTypesSink.find((connector) => connector?.name?.toLowerCase() === item?.type);
-        return <img src={connector?.icon} height="16px" width="16px" alt={item?.type} /> || <ConnectIcon />;
-    };
-
     return (
         <div className="station-observabilty-side">
             <div className="pubSub-list-container">
@@ -494,7 +486,9 @@ const ProduceConsumList = ({ producer }) => {
                                         <div className={returnClassName(index, row?.is_deleted)} key={index} onClick={() => onSelectedRow(index, 'producer')}>
                                             <span className="connector-name">
                                                 {row?.connector_connection_id ? (
-                                                    <TooltipComponent text="connector">{getIconByConnector(row, 'source')}</TooltipComponent>
+                                                    <TooltipComponent text="connector">
+                                                        <ConnectIcon />
+                                                    </TooltipComponent>
                                                 ) : (
                                                     <TooltipComponent text="producer">{getIconByLang(row)}</TooltipComponent>
                                                 )}
@@ -592,7 +586,9 @@ const ProduceConsumList = ({ producer }) => {
                                         <div className={returnClassName(index, row?.is_deleted)} key={index} onClick={() => onSelectedRow(index, 'consumer')}>
                                             <span className="connector-name">
                                                 {row?.connector_connection_id ? (
-                                                    <TooltipComponent text="connector">{getIconByConnector(row, 'sink')}</TooltipComponent>
+                                                    <TooltipComponent text="connector">
+                                                        <ConnectIcon />
+                                                    </TooltipComponent>
                                                 ) : (
                                                     <TooltipComponent text="consumer">{getIconByLang(row)}</TooltipComponent>
                                                 )}
@@ -764,7 +760,8 @@ const ProduceConsumList = ({ producer }) => {
                         <div className="header-img-container">
                             <PlayVideoIcon className="headerImage" alt="stationImg" />
                         </div>
-                        <p>Produce synthetic data</p>
+                        <p>Produce a message</p>
+                        <label>Produce a message through the Console.</label>
                     </div>
                 }
                 className={'modal-wrapper produce-modal'}
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js
index 2ad7f4a45..2a96002c8 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js
@@ -14,15 +14,15 @@ import './style.scss';
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
 
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import { ReactComponent as WarningCircleIcon } from '../../../../../assets/images/warningCircle.svg';
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
-import Copy from '../../../../../components/copy';
-import { messageParser } from '../../../../../services/valueConvertor';
-import SegmentButton from '../../../../../components/segmentButton';
-import TooltipComponent from '../../../../../components/tooltip/tooltip';
-import { LOCAL_STORAGE_MSG_PARSER } from '../../../../../const/localStorageConsts';
-import ConsumerWithStatus from '../../../../../components/consumerWithStatus';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import { ReactComponent as WarningCircleIcon } from 'assets/images/warningCircle.svg';
+import OverflowTip from 'components/tooltip/overflowtip';
+import Copy from 'components/copy';
+import { messageParser } from 'services/valueConvertor';
+import SegmentButton from 'components/segmentButton';
+import TooltipComponent from 'components/tooltip/tooltip';
+import { LOCAL_STORAGE_MSG_PARSER } from 'const/localStorageConsts';
+import ConsumerWithStatus from 'components/consumerWithStatus';
 
 const { Panel } = Collapse;
 
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js
index 5f3ee925c..49cc0522e 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js
@@ -14,17 +14,17 @@ import './style.scss';
 import React, { useState, useEffect, useContext } from 'react';
 import { Popover } from 'antd';
 import { HiEllipsisVertical } from 'react-icons/hi2';
-import { ReactComponent as FunctionBoxTitleIcon } from '../../../../../assets/images/functionCardIcon.svg';
-import { ReactComponent as FunctionProcessingIcon } from '../../../../../assets/images/proccessingIcon.svg';
-import { ReactComponent as FunctionProcessingWarningIcon } from '../../../../../assets/images/processingWarningIcon.svg';
+import { ReactComponent as FunctionBoxTitleIcon } from 'assets/images/functionCardIcon.svg';
+import { ReactComponent as FunctionProcessingIcon } from 'assets/images/proccessingIcon.svg';
+import { ReactComponent as FunctionProcessingWarningIcon } from 'assets/images/processingWarningIcon.svg';
 import { IoClose } from 'react-icons/io5';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import { convertLongNumbers } from '../../../../../services/valueConvertor';
-import { StationStoreContext } from '../../../';
-import FunctionDetails from '../../../../functions/components/functionDetails';
-import { Drawer } from 'antd';
-import Tooltip from '../../../../../components/tooltip/tooltip';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { convertLongNumbers } from 'services/valueConvertor';
+import { StationStoreContext } from 'domain/stationOverview';
+import FunctionDetails from 'domain/functions/components/functionDetails';
+import Drawer from "components/drawer";
+import Tooltip from 'components/tooltip/tooltip';
 
 export default function FunctionCard({
     onClick,
@@ -42,7 +42,7 @@ export default function FunctionCard({
     const [popoverFunctionContextMenu, setPopoverFunctionContextMenu] = useState(false);
     const [openFunctionDetails, setOpenFunctionDetails] = useState(false);
     const [selectedFunction, setSelectedFunction] = useState();
-    const [averageProcessingTime, setAverageProcessingTime] = useState(null);
+
     useEffect(() => {
         setIsActive(!isDeactive);
     }, [isDeactive]);
@@ -53,7 +53,6 @@ export default function FunctionCard({
         func.rates = Math.floor(Math.random() * (80 - 50 + 1)) + 50;
         func.forks = Math.floor(Math.random() * (100 - 80 + 1)) + 80;
         setSelectedFunction(func);
-        getFunctionDetails();
     }, [functionItem]);
 
     const functionContextMenuStyles = {
@@ -64,15 +63,6 @@ export default function FunctionCard({
         width: '150px'
     };
 
-    const getFunctionDetails = async () => {
-        try {
-            const response = await httpRequest('GET', `${ApiEndpoints.GET_FUNCTION_DETAILS}?function_id=${functionItem?.id}`);
-            setAverageProcessingTime(response?.metrics?.average_processing_time);
-        } catch (e) {
-            return;
-        }
-    };
-
     const getFunctionsOverview = async () => {
         try {
             const data = await httpRequest(
@@ -212,10 +202,8 @@ export default function FunctionCard({
                     </div>
 
                     <div className={`ms-function-card-title ${!selectedFunction?.activated ? 'deactivated-function' : undefined}`}>
-                        <div className="function-name">
-                            <FunctionBoxTitleIcon /> <span>{selectedFunction?.name}</span>
-                        </div>
-                        <span className="processing">avg processing: {averageProcessingTime}/ms</span>
+                        <FunctionBoxTitleIcon />
+                        <span>{selectedFunction?.name}</span>
                     </div>
                 </div>
                 <Tooltip text="Dead-letter">
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/style.scss
index 46477fa1a..b8e0b96bf 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/style.scss
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/style.scss
@@ -83,27 +83,15 @@
         font-weight: 600;
         line-height: normal;
         display: flex;
-        flex-direction: column;
-
-        .function-name {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            width: 95px;
-        }
+        gap: 6px;
+        align-items: center;
+        padding-left: 7px;
         span {
+            width: 95px;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
         }
-        .processing {
-            display: flex;
-            justify-content: center;
-            text-align: center;
-            color: #737373 !important;
-            font-size: 10px;
-            margin-top: 5px;
-        }
         .deactivated {
             color: #737373 !important;
         }
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
index e744299b6..a365d76dc 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionData/index.js
@@ -13,26 +13,26 @@
 import './style.scss';
 
 import React, { useEffect, useState, useContext } from 'react';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 import Editor, { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
-import { StationStoreContext } from '../../../';
-import CustomTabs from '../../../../../components/Tabs';
+import { StationStoreContext } from 'domain/stationOverview';
+import CustomTabs from 'components/Tabs';
 import FunctionLogs from '../functionLogs';
 import FunctionInformation from '../functionInformation';
-import { ReactComponent as MetricsIcon } from '../../../../../assets/images/metricsIcon.svg';
-import { ReactComponent as MetricsClockIcon } from '../../../../../assets/images/metricsClockIcon.svg';
-import { ReactComponent as MetricsErrorIcon } from '../../../../../assets/images/metricsErrorIcon.svg';
-import { ReactComponent as OrderingIcon } from '../../../../../assets/images/orderingIcon.svg';
-import { ReactComponent as GitIcon } from '../../../../../assets/images/gitIcon.svg';
-import { ReactComponent as CodeGrayIcon } from '../../../../../assets/images/codeGrayIcon.svg';
-import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
-import { parsingDate, messageParser } from '../../../../../services/valueConvertor';
-import Spinner from '../../../../../components/spinner';
-import { Drawer } from 'antd';
+import { ReactComponent as MetricsIcon } from 'assets/images/metricsIcon.svg';
+import { ReactComponent as MetricsClockIcon } from 'assets/images/metricsClockIcon.svg';
+import { ReactComponent as MetricsErrorIcon } from 'assets/images/metricsErrorIcon.svg';
+import { ReactComponent as OrderingIcon } from 'assets/images/orderingIcon.svg';
+import { ReactComponent as GitIcon } from 'assets/images/gitIcon.svg';
+import { ReactComponent as CodeGrayIcon } from 'assets/images/codeGrayIcon.svg';
+import { ReactComponent as PurpleQuestionMark } from 'assets/images/purpleQuestionMark.svg';
+import { parsingDate, messageParser } from 'services/valueConvertor';
+import Spinner from 'components/spinner';
+import Drawer from "components/drawer";
 import { IoClose } from 'react-icons/io5';
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
+import OverflowTip from 'components/tooltip/overflowtip';
 
 const tabValuesList = ['Monitoring', 'Information', 'Dead-letter', 'Logs'];
 loader.init();
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInformation/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInformation/index.js
index fc8ddc4ce..004bde7f4 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInformation/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInformation/index.js
@@ -13,7 +13,7 @@
 import './style.scss';
 
 import React from 'react';
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
+import OverflowTip from 'components/tooltip/overflowtip';
 
 const inputsColumns = [
     {
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
index c283ee201..c1ee76428 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionInputsModal/index.js
@@ -14,11 +14,11 @@ import './style.scss';
 
 import React, { useState, useEffect } from 'react';
 import { Form } from 'antd';
-import Input from '../../../../../components/Input';
-import Modal from '../../../../../components/modal';
-import TooltipComponent from '../../../../../components/tooltip/tooltip';
-import { ReactComponent as CheckShieldIcon } from '../../../../../assets/images/checkShieldIcon.svg';
-import { ReactComponent as LockIcon } from '../../../../../assets/images/lockIcon.svg';
+import Input from 'components/Input';
+import Modal from 'components/modal';
+import TooltipComponent from 'components/tooltip/tooltip';
+import { ReactComponent as CheckShieldIcon } from 'assets/images/checkShieldIcon.svg';
+import { ReactComponent as LockIcon } from 'assets/images/lockIcon.svg';
 
 const FunctionInputsModal = ({ open, clickOutside, rBtnClick, rBtnText, clickedFunction, handleInputsChange }) => {
     const [inputs, setInputs] = useState([]);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionLogs/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionLogs/index.js
index 73910f37a..7b3a4e1e5 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionLogs/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionLogs/index.js
@@ -13,9 +13,9 @@
 import './style.scss';
 
 import React, { useEffect, useState } from 'react';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import Spinner from '../../../../../components/spinner';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Spinner from 'components/spinner';
 
 const FunctionLogs = ({ functionId }) => {
     const [logs, setLogs] = useState([]);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsApplyModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsApplyModal/index.js
index 74bbe1d05..9052fa7be 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsApplyModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsApplyModal/index.js
@@ -13,9 +13,9 @@
 import './style.scss';
 
 import { useState, useEffect } from 'react';
-import Button from '../../../../../components/button';
+import Button from 'components/button';
 
-import { ReactComponent as CheckIcon } from '../../../../../assets/images/checkIcon.svg';
+import { ReactComponent as CheckIcon } from 'assets/images/checkIcon.svg';
 
 const FunctionsApplyModal = ({ onCancel, onApply, successText }) => {
     const [selected, setSelected] = useState(0);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
index b2df4ba9e..2eacd8af3 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsModal/index.js
@@ -15,23 +15,23 @@ import './style.scss';
 import { useState, useEffect, useContext } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
-import CustomTabs from '../../../../../components/Tabs';
-import FunctionBox from '../../../../functions/components/functionBox';
-import FunctionDetails from '../../../../functions/components/functionDetails';
-import { getFunctionsTabs } from '../../../../../services/valueConvertor';
-import SearchInput from '../../../../../components/searchInput';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
+import CustomTabs from 'components/Tabs';
+import FunctionBox from 'domain/functions/components/functionBox';
+import FunctionDetails from 'domain/functions/components/functionDetails';
+import { getFunctionsTabs } from 'services/valueConvertor';
+import SearchInput from 'components/searchInput';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 import FunctionsApplyModal from '../functionsApplyModal';
 import FunctionInputsModal from '../functionInputsModal';
-import Modal from '../../../../../components/modal';
-import { ReactComponent as SearchIcon } from '../../../../../assets/images/searchIcon.svg';
-import { ReactComponent as CheckShieldIcon } from '../../../../../assets/images/checkShieldIcon.svg';
-import { ReactComponent as FunctionsModalIcon } from '../../../../../assets/images/vueSaxIcon.svg';
-import { StationStoreContext } from '../../../';
-import { showMessages } from '../../../../../services/genericServices';
-import { OWNER } from '../../../../../const/globalConst';
-import RefreshButton from '../../../../../components/refreshButton';
+import Modal from 'components/modal';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
+import { ReactComponent as CheckShieldIcon } from 'assets/images/checkShieldIcon.svg';
+import { ReactComponent as FunctionsModalIcon } from 'assets/images/vueSaxIcon.svg';
+import { StationStoreContext } from 'domain/stationOverview';
+import { showMessages } from 'services/genericServices';
+import { OWNER } from 'const/globalConst';
+import RefreshButton from 'components/refreshButton';
 
 const FunctionsModal = ({ open, clickOutside, applyFunction, referredFunction }) => {
     const [functionList, setFunctionList] = useState([]);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsOverview/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsOverview/index.js
index f3870a124..02f11416b 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsOverview/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/functionsOverview/index.js
@@ -13,25 +13,24 @@
 import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../../services/http';
-import { Context } from '../../../../../hooks/store';
-import { StationStoreContext } from '../../../';
-import { ReactComponent as AddFunctionIcon } from '../../../../../assets/images/addFunction.svg';
-import { ReactComponent as PlusIcon } from '../../../../../assets/images/plusIcon.svg';
-import { ReactComponent as ProcessedIcon } from '../../../../../assets/images/processIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import { Context } from 'hooks/store';
+import { StationStoreContext } from 'domain/stationOverview';
+import { ReactComponent as AddFunctionIcon } from 'assets/images/addFunction.svg';
+import { ReactComponent as PlusIcon } from 'assets/images/plusIcon.svg';
+import { ReactComponent as ProcessedIcon } from 'assets/images/processIcon.svg';
 import { IoClose } from 'react-icons/io5';
-import { Drawer } from 'antd';
-import dataPassLineLottie from '../../../../../assets/lotties/dataPassLine.json';
-import dataPassLineEmptyLottie from '../../../../../assets/lotties/dataPassLineEmpty.json';
+import Drawer from "components/drawer";
+import dataPassLineLottie from 'assets/lotties/dataPassLine.json';
+import dataPassLineEmptyLottie from 'assets/lotties/dataPassLineEmpty.json';
 import Lottie from 'lottie-react';
 import FunctionCard from '../functionCard';
 import FunctionsModal from '../functionsModal';
 import FunctionData from '../functionData';
-import FunctionDetails from '../../../../functions/components/functionDetails';
-import OverflowTip from '../../../../../components/tooltip/overflowtip';
+import FunctionDetails from 'domain/functions/components/functionDetails';
 import { StringCodec, JSONCodec } from 'nats.ws';
-import Spinner from '../../../../../components/spinner';
+import Spinner from 'components/spinner';
 
 let sub;
 
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js
index 5b3d2341c..9e8d89435 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js
@@ -13,22 +13,22 @@ import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { convertBytes, parsingDate, messageParser } from '../../../../../services/valueConvertor';
-import { httpRequest } from '../../../../../services/http';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
-import { ReactComponent as JourneyIcon } from '../../../../../assets/images/journey.svg';
+import { convertBytes, parsingDate, messageParser } from 'services/valueConvertor';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as JourneyIcon } from 'assets/images/journey.svg';
 import { CiViewList } from 'react-icons/ci';
-import SegmentButton from '../../../../../components/segmentButton';
-import StatusIndication from '../../../../../components/indication';
-import Spinner from '../../../../../components/spinner';
-import Button from '../../../../../components/button';
-import Copy from '../../../../../components/copy';
-import { LOCAL_STORAGE_MSG_PARSER } from '../../../../../const/localStorageConsts';
+import SegmentButton from 'components/segmentButton';
+import StatusIndication from 'components/indication';
+import Spinner from 'components/spinner';
+import Button from 'components/button';
+import Copy from 'components/copy';
+import { LOCAL_STORAGE_MSG_PARSER } from 'const/localStorageConsts';
 import Editor, { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import MultiCollapse from '../multiCollapse';
-import { StationStoreContext } from '../../..';
-import { Drawer } from 'antd';
+import { StationStoreContext } from 'domain/stationOverview';
+import Drawer from "components/drawer";
 
 loader.init();
 loader.config({ monaco });
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js
index d82b69faf..b17a1ad91 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js
@@ -13,8 +13,8 @@ import './style.scss';
 
 import React, { useEffect, useState } from 'react';
 import { Collapse } from 'antd';
-import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
-import StatusIndication from '../../../../../components/indication';
+import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
+import StatusIndication from 'components/indication';
 
 const { Panel } = Collapse;
 
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/purgeStationModal/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/purgeStationModal/index.js
index 5aad978eb..d2b9108d3 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/components/purgeStationModal/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/purgeStationModal/index.js
@@ -13,12 +13,12 @@
 import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
-import Button from '../../../../../components/button';
-import CheckboxComponent from '../../../../../components/checkBox';
-import Input from '../../../../../components/Input';
-import { StationStoreContext } from '../../..';
-import { httpRequest } from '../../../../../services/http';
-import { ApiEndpoints } from '../../../../../const/apiEndpoints';
+import Button from 'components/button';
+import CheckboxComponent from 'components/checkBox';
+import Input from 'components/Input';
+import { StationStoreContext } from 'domain/stationOverview';
+import { httpRequest } from 'services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
 
 const PurgeStationModal = ({ title, desc, close, stationName, msgsDisabled = false, dlsDisabled = false }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/index.js
index ef85dda90..5c81e8670 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/index.js
@@ -15,11 +15,11 @@ import './style.scss';
 import React, { useContext } from 'react';
 import Lottie from 'lottie-react';
 
-import consumePoison from '../../../assets/lotties/consume_poison.json';
-import consumeEmpty from '../../../assets/lotties/consume_empty.json';
-import produceEmpty from '../../../assets/lotties/produce_empty.json';
-import produce from '../../../assets/lotties/produce-many.json';
-import consumer from '../../../assets/lotties/consume.json';
+import consumePoison from 'assets/lotties/consume_poison.json';
+import consumeEmpty from 'assets/lotties/consume_empty.json';
+import produceEmpty from 'assets/lotties/produce_empty.json';
+import produce from 'assets/lotties/produce-many.json';
+import consumer from 'assets/lotties/consume.json';
 import ProduceConsumList from './ProduceConsumList';
 import { StationStoreContext } from '..';
 import Messages from './messages';
diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
index 3db35a180..9a8d56818 100644
--- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
+++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js
@@ -15,39 +15,39 @@ import './style.scss';
 import React, { useContext, useEffect, useState, useRef } from 'react';
 import { InfoOutlined } from '@material-ui/icons';
 
-import { DEAD_LETTERED_MESSAGES_RETENTION_IN_HOURS } from '../../../../const/localStorageConsts';
-import { ReactComponent as DeadLetterPlaceholderIcon } from '../../../../assets/images/deadLetterPlaceholder.svg';
-import { isCloud, messageParser, msToUnits, parsingDate } from '../../../../services/valueConvertor';
-import { ReactComponent as PurgeWrapperIcon } from '../../../../assets/images/purgeWrapperIcon.svg';
-import { ReactComponent as WaitingMessagesIcon } from '../../../../assets/images/waitingMessages.svg';
-import { ReactComponent as IdempotencyIcon } from '../../../../assets/images/idempotencyIcon.svg';
-import { ReactComponent as DlsEnableIcon } from '../../../../assets/images/dls_enable_icon.svg';
-import { ReactComponent as FollowersIcon } from '../../../../assets/images/followersDetails.svg';
-import TooltipComponent from '../../../../components/tooltip/tooltip';
-import { ReactComponent as LeaderIcon } from '../../../../assets/images/leaderDetails.svg';
+import { DEAD_LETTERED_MESSAGES_RETENTION_IN_HOURS } from 'const/localStorageConsts';
+import { ReactComponent as DeadLetterPlaceholderIcon } from 'assets/images/deadLetterPlaceholder.svg';
+import { isCloud, messageParser, msToUnits, parsingDate } from 'services/valueConvertor';
+import { ReactComponent as PurgeWrapperIcon } from 'assets/images/purgeWrapperIcon.svg';
+import { ReactComponent as WaitingMessagesIcon } from 'assets/images/waitingMessages.svg';
+import { ReactComponent as IdempotencyIcon } from 'assets/images/idempotencyIcon.svg';
+import { ReactComponent as DlsEnableIcon } from 'assets/images/dls_enable_icon.svg';
+import { ReactComponent as FollowersIcon } from 'assets/images/followersDetails.svg';
+import TooltipComponent from 'components/tooltip/tooltip';
+import { ReactComponent as LeaderIcon } from 'assets/images/leaderDetails.svg';
 import PurgeStationModal from '../components/purgeStationModal';
-import CheckboxComponent from '../../../../components/checkBox';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
+import CheckboxComponent from 'components/checkBox';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import MessageDetails from '../components/messageDetails';
-import DetailBox from '../../../../components/detailBox';
-import DlsConfig from '../../../../components/dlsConfig';
-import { httpRequest } from '../../../../services/http';
-import { ReactComponent as PurgeIcon } from '../../../../assets/images/purge.svg';
-import CustomTabs from '../../../../components/Tabs';
-import Button from '../../../../components/button';
-import Modal from '../../../../components/modal';
-import { StationStoreContext } from '../..';
+import DetailBox from 'components/detailBox';
+import DlsConfig from 'components/dlsConfig';
+import { httpRequest } from 'services/http';
+import { ReactComponent as PurgeIcon } from 'assets/images/purge.svg';
+import CustomTabs from 'components/Tabs';
+import Button from 'components/button';
+import Modal from 'components/modal';
+import { StationStoreContext } from 'domain/stationOverview';
 import { Virtuoso } from 'react-virtuoso';
-import { showMessages } from '../../../../services/genericServices';
-import { ReactComponent as UpRightArrow } from '../../../../assets/images/upRightCorner.svg';
-import { ReactComponent as DisconnectIcon } from '../../../../assets/images/disconnectDls.svg';
+import { showMessages } from 'services/genericServices';
+import { ReactComponent as UpRightArrow } from 'assets/images/upRightCorner.svg';
+import { ReactComponent as DisconnectIcon } from 'assets/images/disconnectDls.svg';
 import UseSchemaModal from '../../components/useSchemaModal';
-import DeleteItemsModal from '../../../../components/deleteItemsModal';
-import { ReactComponent as DisableIcon } from '../../../../assets/images/disableIcon.svg';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import { ReactComponent as DisableIcon } from 'assets/images/disableIcon.svg';
 import { Divider } from 'antd';
 import FunctionsOverview from '../components/functionsOverview';
-import CloudModal from '../../../../components/cloudModal';
-import { ReactComponent as CleanDisconnectedProducersIcon } from '../../../../assets/images/clean_disconnected_producers.svg';
+import CloudModal from 'components/cloudModal';
+import { ReactComponent as CleanDisconnectedProducersIcon } from 'assets/images/clean_disconnected_producers.svg';
 
 const Messages = ({ referredFunction }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js b/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
index 055da9a0c..f5ba40c4d 100644
--- a/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
+++ b/ui_src/src/domain/stationOverview/stationOverviewHeader/index.js
@@ -17,39 +17,39 @@ import { Add, FiberManualRecord } from '@material-ui/icons';
 import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import { MinusOutlined } from '@ant-design/icons';
 import { useHistory } from 'react-router-dom';
-import { useGetAllowedActions } from '../../../services/genericServices';
-import { convertBytes, convertSecondsToDate, isCloud, replicasConvertor } from '../../../services/valueConvertor';
-import { ReactComponent as DeleteWrapperIcon } from '../../../assets/images/deleteWrapperIcon.svg';
-import { ReactComponent as StopUsingIcon } from '../../../assets/images/stopUsingIcon.svg';
-import { ReactComponent as SchemaIconActive } from '../../../assets/images/schemaIconActive.svg';
-import DeleteItemsModal from '../../../components/deleteItemsModal';
-import PartitionsFilter from '../../../components/partitionsFilter';
-import { ReactComponent as DlsIcon } from '../../../assets/images/stationDlsIcon.svg';
-import { ReactComponent as RedirectIcon } from '../../../assets/images/redirectIcon.svg';
-import { ReactComponent as UpRightArrow } from '../../../assets/images/upRightCorner.svg';
-import { ReactComponent as DisconnectIcon } from '../../../assets/images/disconnectDls.svg';
-import { ReactComponent as DisableIcon } from '../../../assets/images/disableIcon.svg';
-import { ReactComponent as AwaitingIcon } from '../../../assets/images/awaitingIcon.svg';
-import TooltipComponent from '../../../components/tooltip/tooltip';
-import OverflowTip from '../../../components/tooltip/overflowtip';
+import { useGetAllowedActions } from 'services/genericServices';
+import { convertBytes, convertSecondsToDate, isCloud, replicasConvertor } from 'services/valueConvertor';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import { ReactComponent as StopUsingIcon } from 'assets/images/stopUsingIcon.svg';
+import { ReactComponent as SchemaIconActive } from 'assets/images/schemaIconActive.svg';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import PartitionsFilter from 'components/partitionsFilter';
+import { ReactComponent as DlsIcon } from 'assets/images/stationDlsIcon.svg';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { ReactComponent as UpRightArrow } from 'assets/images/upRightCorner.svg';
+import { ReactComponent as DisconnectIcon } from 'assets/images/disconnectDls.svg';
+import { ReactComponent as DisableIcon } from 'assets/images/disableIcon.svg';
+import { ReactComponent as AwaitingIcon } from 'assets/images/awaitingIcon.svg';
+import TooltipComponent from 'components/tooltip/tooltip';
+import OverflowTip from 'components/tooltip/overflowtip';
 import UpdateSchemaModal from '../components/updateSchemaModal';
-import ActiveBadge from '../../../components/activeBadge';
-import Copy from '../../../components/copy';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import { ReactComponent as BackIcon } from '../../../assets/images/backIcon.svg';
+import ActiveBadge from 'components/activeBadge';
+import Copy from 'components/copy';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as BackIcon } from 'assets/images/backIcon.svg';
 import UseSchemaModal from '../components/useSchemaModal';
-import SdkExample from '../../../components/sdkExample';
-import { httpRequest } from '../../../services/http';
-import TagsList from '../../../components/tagList';
-import Button from '../../../components/button';
-import Modal from '../../../components/modal';
+import SdkExample from 'components/sdkExample';
+import { httpRequest } from 'services/http';
+import TagsList from 'components/tagList';
+import Button from 'components/button';
+import Modal from 'components/modal';
 import Auditing from '../components/auditing';
-import RefreshButton from '../../../components/refreshButton';
-import AsyncTasks from '../../../components/asyncTasks';
-import pathDomains from '../../../router';
+import RefreshButton from 'components/refreshButton';
+import AsyncTasks from 'components/asyncTasks';
+import pathDomains from 'router';
 import { StationStoreContext } from '..';
-import { TIERED_STORAGE_UPLOAD_INTERVAL, LOCAL_STORAGE_ACCOUNT_ID, LOCAL_STORAGE_ENV, LOCAL_STORAGE_BROKER_HOST } from '../../../const/localStorageConsts';
-import { Context } from '../../../hooks/store';
+import { TIERED_STORAGE_UPLOAD_INTERVAL, LOCAL_STORAGE_ACCOUNT_ID, LOCAL_STORAGE_ENV, LOCAL_STORAGE_BROKER_HOST } from 'const/localStorageConsts';
+import { Context } from 'hooks/store';
 
 const StationOverviewHeader = ({ refresh }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
diff --git a/ui_src/src/domain/stationsList/index.js b/ui_src/src/domain/stationsList/index.js
index 3530e758a..d203e59f5 100644
--- a/ui_src/src/domain/stationsList/index.js
+++ b/ui_src/src/domain/stationsList/index.js
@@ -22,26 +22,26 @@ import './style.scss';
 
 import React, { useEffect, useContext, useState, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import { useGetAllowedActions } from '../../services/genericServices';
-import { ReactComponent as DeleteWrapperIcon } from '../../assets/images/deleteWrapperIcon.svg';
-import StationsInstructions from '../../components/stationsInstructions';
-import { ReactComponent as StationIcon } from '../../assets/images/stationIcon.svg';
-import CreateStationForm from '../../components/createStationForm';
-import { stationFilterArray, isCloud } from '../../services/valueConvertor';
-import DeleteItemsModal from '../../components/deleteItemsModal';
-import stationsIcon from '../../assets/images/stationIcon.svg';
-import { ApiEndpoints } from '../../const/apiEndpoints';
+import { useGetAllowedActions } from 'services/genericServices';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import StationsInstructions from 'components/stationsInstructions';
+import { ReactComponent as StationIcon } from 'assets/images/stationIcon.svg';
+import CreateStationForm from 'components/createStationForm';
+import { stationFilterArray, isCloud } from 'services/valueConvertor';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import stationsIcon from 'assets/images/stationIcon.svg';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import StationBoxOverview from './stationBoxOverview';
-import { httpRequest } from '../../services/http';
-import Button from '../../components/button';
-import Filter from '../../components/filter';
-import Loader from '../../components/loader';
-import LearnMore from '../../components/learnMore';
-import { Context } from '../../hooks/store';
-import Modal from '../../components/modal';
-import CloudModal from '../../components/cloudModal';
+import { httpRequest } from 'services/http';
+import Button from 'components/button';
+import Filter from 'components/filter';
+import Loader from 'components/loader';
+import LearnMore from 'components/learnMore';
+import { Context } from 'hooks/store';
+import Modal from 'components/modal';
+import CloudModal from 'components/cloudModal';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import RefreshButton from '../../components/refreshButton';
+import RefreshButton from 'components/refreshButton';
 
 const StationsList = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/stationsList/stationBoxOverview/index.js b/ui_src/src/domain/stationsList/stationBoxOverview/index.js
index 64c6366d2..986d60e0a 100644
--- a/ui_src/src/domain/stationsList/stationBoxOverview/index.js
+++ b/ui_src/src/domain/stationsList/stationBoxOverview/index.js
@@ -17,26 +17,26 @@ import { MinusOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
 import Lottie from 'lottie-react';
 
-import { convertSecondsToDate, isCloud, parsingDate } from '../../../services/valueConvertor';
-import activeAndHealthy from '../../../assets/lotties/activeAndHealthy.json';
-import noActiveAndUnhealthy from '../../../assets/lotties/noActiveAndUnhealthy.json';
-import noActiveAndHealthy from '../../../assets/lotties/noActiveAndHealthy.json';
-import activeAndUnhealthy from '../../../assets/lotties/activeAndUnhealthy.json';
-import { ReactComponent as RedirectIcon } from '../../../assets/images/redirectIcon.svg';
-import { ReactComponent as ReplicasIcon } from '../../../assets/images/replicasIcon.svg';
-import { ReactComponent as TotalMsgIcon } from '../../../assets/images/totalMsgIcon.svg';
-import { ReactComponent as PoisonMsgIcon } from '../../../assets/images/poisonMsgIcon.svg';
-import { ReactComponent as RemoteStorageIcon } from '../../../assets/images/remoteStorage.svg';
-import { ReactComponent as ClockIcon } from '../../../assets/images/TimeFill.svg';
-import { ReactComponent as UserIcon } from '../../../assets/images/userPerson.svg';
-import { ReactComponent as SchemaIcon } from '../../../assets/images/schemaIconActive.svg';
-import { ReactComponent as StationIcon } from '../../../assets/images/stationsIconActive.svg';
-import { ReactComponent as RetentionIcon } from '../../../assets/images/retentionIcon.svg';
-import { ReactComponent as PartitionIcon } from '../../../assets/images/partitionIcon.svg';
-import OverflowTip from '../../../components/tooltip/overflowtip';
-import CheckboxComponent from '../../../components/checkBox';
-import TagsList from '../../../components/tagList';
-import pathDomains from '../../../router';
+import { convertSecondsToDate, isCloud, parsingDate } from 'services/valueConvertor';
+import activeAndHealthy from 'assets/lotties/activeAndHealthy.json';
+import noActiveAndUnhealthy from 'assets/lotties/noActiveAndUnhealthy.json';
+import noActiveAndHealthy from 'assets/lotties/noActiveAndHealthy.json';
+import activeAndUnhealthy from 'assets/lotties/activeAndUnhealthy.json';
+import { ReactComponent as RedirectIcon } from 'assets/images/redirectIcon.svg';
+import { ReactComponent as ReplicasIcon } from 'assets/images/replicasIcon.svg';
+import { ReactComponent as TotalMsgIcon } from 'assets/images/totalMsgIcon.svg';
+import { ReactComponent as PoisonMsgIcon } from 'assets/images/poisonMsgIcon.svg';
+import { ReactComponent as RemoteStorageIcon } from 'assets/images/remoteStorage.svg';
+import { ReactComponent as ClockIcon } from 'assets/images/timeFill.svg';
+import { ReactComponent as UserIcon } from 'assets/images/userPerson.svg';
+import { ReactComponent as SchemaIcon } from 'assets/images/schemaIconActive.svg';
+import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
+import { ReactComponent as RetentionIcon } from 'assets/images/retentionIcon.svg';
+import { ReactComponent as PartitionIcon } from 'assets/images/partitionIcon.svg';
+import OverflowTip from 'components/tooltip/overflowtip';
+import CheckboxComponent from 'components/checkBox';
+import TagsList from 'components/tagList';
+import pathDomains from 'router';
 
 const StationBoxOverview = ({ station, handleCheckedClick, isCheck }) => {
     const [retentionValue, setRetentionValue] = useState('');
diff --git a/ui_src/src/domain/streamLineage/components/station/index.js b/ui_src/src/domain/streamLineage/components/station/index.js
index 3f03f62d5..cee1a20a1 100644
--- a/ui_src/src/domain/streamLineage/components/station/index.js
+++ b/ui_src/src/domain/streamLineage/components/station/index.js
@@ -16,9 +16,9 @@ import React from 'react';
 import { BiSolidEnvelope } from 'react-icons/bi';
 import { PiWarningFill } from 'react-icons/pi';
 
-import { ReactComponent as RedirectWhiteIcon } from '../../../../assets/images/redirectWhite.svg';
+import { ReactComponent as RedirectWhiteIcon } from 'assets/images/redirectWhite.svg';
 import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
-import pathDomains from '../../../../router';
+import pathDomains from 'router';
 
 const Station = ({ stationName, dls_messages, total_messages, schema_name }) => {
     const history = useHistory();
diff --git a/ui_src/src/domain/streamLineage/index.js b/ui_src/src/domain/streamLineage/index.js
index 2f51bcabd..6c86c9827 100644
--- a/ui_src/src/domain/streamLineage/index.js
+++ b/ui_src/src/domain/streamLineage/index.js
@@ -19,18 +19,18 @@ import { IoRefresh } from 'react-icons/io5';
 import { MdZoomOutMap } from 'react-icons/md';
 import { IoClose } from 'react-icons/io5';
 import { Divider } from 'antd';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { ReactComponent as GraphPlaceholder } from '../../assets/images/graphPlaceholder.svg';
-import BackIcon from '../../assets/images/backIcon.svg';
-import { httpRequest } from '../../services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { ReactComponent as GraphPlaceholder } from 'assets/images/graphPlaceholder.svg';
+import BackIcon from 'assets/images/backIcon.svg';
+import { httpRequest } from 'services/http';
 import Connection from './components/connection';
-import Button from '../../components/button';
-import Loader from '../../components/loader';
-import CloudModal from '../../components/cloudModal';
+import Button from 'components/button';
+import Loader from 'components/loader';
+import CloudModal from 'components/cloudModal';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import { Context } from '../../hooks/store';
+import { Context } from 'hooks/store';
 import Station from './components/station';
-import {entitlementChecker} from "../../utils/plan";
+import {entitlementChecker} from "utils/plan";
 
 const StreamLineage = ({ expend, setExpended, createStationTrigger }) => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/sysLogs/components/logContent/index.js b/ui_src/src/domain/sysLogs/components/logContent/index.js
index 02210745c..60e0ab1fc 100644
--- a/ui_src/src/domain/sysLogs/components/logContent/index.js
+++ b/ui_src/src/domain/sysLogs/components/logContent/index.js
@@ -14,9 +14,9 @@ import './style.scss';
 
 import React from 'react';
 
-import LogBadge from '../../../../components/logBadge';
-import { parsingDate } from '../../../../services/valueConvertor';
-import Copy from '../../../../components/copy';
+import LogBadge from 'components/logBadge';
+import { parsingDate } from 'services/valueConvertor';
+import Copy from 'components/copy';
 
 const LogContent = ({ displayedLog }) => {
     return (
diff --git a/ui_src/src/domain/sysLogs/components/logPayload/index.js b/ui_src/src/domain/sysLogs/components/logPayload/index.js
index e086a0be0..05ab64587 100644
--- a/ui_src/src/domain/sysLogs/components/logPayload/index.js
+++ b/ui_src/src/domain/sysLogs/components/logPayload/index.js
@@ -14,9 +14,9 @@ import './style.scss';
 
 import React from 'react';
 
-import { parsingDate } from '../../../../services/valueConvertor';
-import { ReactComponent as SourceIcon } from '../../../../assets/images/sourceIcon.svg';
-import LogBadge from '../../../../components/logBadge';
+import { parsingDate } from 'services/valueConvertor';
+import { ReactComponent as SourceIcon } from 'assets/images/sourceIcon.svg';
+import LogBadge from 'components/logBadge';
 
 const LogPayload = ({ value, onSelected, selectedRow }) => {
     return (
diff --git a/ui_src/src/domain/sysLogs/components/logsWrapper/index.js b/ui_src/src/domain/sysLogs/components/logsWrapper/index.js
index 76cceab79..7e2e8d1a6 100644
--- a/ui_src/src/domain/sysLogs/components/logsWrapper/index.js
+++ b/ui_src/src/domain/sysLogs/components/logsWrapper/index.js
@@ -17,16 +17,16 @@ import { StringCodec, JSONCodec } from 'nats.ws';
 import { Virtuoso } from 'react-virtuoso';
 import Lottie from 'lottie-react';
 
-import { ReactComponent as AttachedPlaceholderIcon } from '../../../../assets/images/attachedPlaceholder.svg';
-import animationData from '../../../../assets/lotties/MemphisGif.json';
-import { ApiEndpoints } from '../../../../const/apiEndpoints';
-import { httpRequest } from '../../../../services/http';
-import Filter from '../../../../components/filter';
-import { Context } from '../../../../hooks/store';
-import { Sleep } from '../../../../utils/sleep';
+import { ReactComponent as AttachedPlaceholderIcon } from 'assets/images/attachedPlaceholder.svg';
+import animationData from 'assets/lotties/MemphisGif.json';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
+import Filter from 'components/filter';
+import { Context } from 'hooks/store';
+import { Sleep } from 'utils/sleep';
 import LogPayload from '../logPayload';
 import LogContent from '../logContent';
-import { LOGS_RETENTION_IN_DAYS } from '../../../../const/localStorageConsts';
+import { LOGS_RETENTION_IN_DAYS } from 'const/localStorageConsts';
 
 let sub;
 
diff --git a/ui_src/src/domain/sysLogs/index.js b/ui_src/src/domain/sysLogs/index.js
index 908c608b1..099802d61 100644
--- a/ui_src/src/domain/sysLogs/index.js
+++ b/ui_src/src/domain/sysLogs/index.js
@@ -14,11 +14,11 @@ import './style.scss';
 
 import React, { useEffect, useContext } from 'react';
 
-import Button from '../../components/button';
-import { Context } from '../../hooks/store';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
 import LogsWrapper from './components/logsWrapper';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import { httpRequest } from '../../services/http';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import { httpRequest } from 'services/http';
 
 const SysLogs = () => {
     const [state, dispatch] = useContext(Context);
diff --git a/ui_src/src/domain/users/createUserDetails/index.js b/ui_src/src/domain/users/createUserDetails/index.js
index e288cc86e..f03db5d8d 100644
--- a/ui_src/src/domain/users/createUserDetails/index.js
+++ b/ui_src/src/domain/users/createUserDetails/index.js
@@ -16,22 +16,22 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Form } from 'antd';
 import { HiLockClosed } from 'react-icons/hi';
 import { ArrowDropDownRounded } from '@material-ui/icons';
-import Input from '../../../components/Input';
-import Button from '../../../components/button';
-import SelectComponent from '../../../components/select';
+import Input from 'components/Input';
+import Button from 'components/button';
+import SelectComponent from 'components/select';
 import { Select } from 'antd';
-import { httpRequest } from '../../../services/http';
-import { useGetAllowedActions } from '../../../services/genericServices';
-import { ApiEndpoints } from '../../../const/apiEndpoints';
-import SelectCheckBox from '../../../components/selectCheckBox';
-import RadioButton from '../../../components/radioButton';
-import { generator } from '../../../services/generator';
-import { ReactComponent as RefreshIcon } from '../../../assets/images/refresh.svg';
+import { httpRequest } from 'services/http';
+import { useGetAllowedActions } from 'services/genericServices';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import SelectCheckBox from 'components/selectCheckBox';
+import RadioButton from 'components/radioButton';
+import { generator } from 'services/generator';
+import { ReactComponent as RefreshIcon } from 'assets/images/refresh.svg';
 
-import { LOCAL_STORAGE_USER_PASS_BASED_AUTH } from '../../../const/localStorageConsts';
-import { isCloud, showUpgradePlan } from '../../../services/valueConvertor';
-import { Context } from '../../../hooks/store';
-import UpgradePlans from '../../../components/upgradePlans';
+import { LOCAL_STORAGE_USER_PASS_BASED_AUTH } from 'const/localStorageConsts';
+import { isCloud, showUpgradePlan } from 'services/valueConvertor';
+import { Context } from 'hooks/store';
+import UpgradePlans from 'components/upgradePlans';
 
 const CreateUserDetails = ({ createUserRef, closeModal, handleLoader, userList, isLoading, clientType = false, selectedRow }) => {
     const [state, dispatch] = useContext(Context);
@@ -650,7 +650,7 @@ const CreateUserDetails = ({ createUserRef, closeModal, handleLoader, userList,
                                     rules={
                                         rbacTypeRead === 'pattern' && [
                                             {
-                                                pattern: /^[a-zA-Z0-9_\-., ]+(\..*)?$/,
+                                                pattern: /^[a-zA-Z0-9_\-., ]+(\..*)?|\*$/,
                                                 message: `Only alphanumeric and the '_', '-', '.', '*' characters are allowed`
                                             }
                                         ]
@@ -710,7 +710,7 @@ const CreateUserDetails = ({ createUserRef, closeModal, handleLoader, userList,
                                     rules={
                                         rbacTypeWrite === 'pattern' && [
                                             {
-                                                pattern: /^[a-zA-Z0-9_\-., ]+(\..*)?$/,
+                                                pattern: /^[a-zA-Z0-9_\-., ]+(\..*)?|\*$/,
                                                 message: `Only alphanumeric and the '_', '-', '.', '*' characters are allowed`
                                             }
                                         ]
diff --git a/ui_src/src/domain/users/index.js b/ui_src/src/domain/users/index.js
index 935166a2d..1dfa4f774 100644
--- a/ui_src/src/domain/users/index.js
+++ b/ui_src/src/domain/users/index.js
@@ -15,28 +15,29 @@ import './style.scss';
 import React, { useEffect, useContext, useState, useRef } from 'react';
 import { AccountCircleRounded } from '@material-ui/icons';
 
-import { LOCAL_STORAGE_USER_PASS_BASED_AUTH, LOCAL_STORAGE_FULL_NAME, USER_IMAGE } from '../../const/localStorageConsts';
-import { isCloud, parsingDate } from '../../services/valueConvertor';
-import { ReactComponent as DeleteWrapperIcon } from '../../assets/images/deleteWrapperIcon.svg';
-import { ReactComponent as MailIcon } from '../../assets/images/mailIcon.svg';
-import { ReactComponent as DeleteIcon } from '../../assets/images/deleteIcon.svg';
-import { ReactComponent as SearchIcon } from '../../assets/images/searchIcon.svg';
+import { LOCAL_STORAGE_USER_PASS_BASED_AUTH } from 'const/localStorageConsts';
+import { isCloud, parsingDate } from 'services/valueConvertor';
+import { ReactComponent as AddUserIcon } from 'assets/images/addUserIcon.svg';
+import { ReactComponent as DeleteWrapperIcon } from 'assets/images/deleteWrapperIcon.svg';
+import { ReactComponent as MailIcon } from 'assets/images/mailIcon.svg';
+import { ReactComponent as DeleteIcon } from 'assets/images/deleteIcon.svg';
+import { ReactComponent as SearchIcon } from 'assets/images/searchIcon.svg';
 import { FaArrowCircleUp } from 'react-icons/fa';
-import SegmentButton from '../../components/segmentButton';
-import { ApiEndpoints } from '../../const/apiEndpoints';
-import SearchInput from '../../components/searchInput';
-import ActiveBadge from '../../components/activeBadge';
+import SegmentButton from 'components/segmentButton';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import SearchInput from 'components/searchInput';
+import ActiveBadge from 'components/activeBadge';
 import CreateUserDetails from './createUserDetails';
-import { httpRequest } from '../../services/http';
-import Loader from '../../components/loader';
-import Button from '../../components/button';
-import { Context } from '../../hooks/store';
-import Modal from '../../components/modal';
-import Table from '../../components/table';
-import DeleteItemsModal from '../../components/deleteItemsModal';
-import CloudModal from '../../components/cloudModal';
-import { isCurrentUser } from '../../utils/user';
-import { Drawer } from 'antd';
+import { httpRequest } from 'services/http';
+import Loader from 'components/loader';
+import Button from 'components/button';
+import { Context } from 'hooks/store';
+import Modal from 'components/modal';
+import Table from 'components/table';
+import DeleteItemsModal from 'components/deleteItemsModal';
+import CloudModal from 'components/cloudModal';
+import { isCurrentUser } from 'utils/user';
+import Drawer from "components/drawer";
 
 function Users() {
     const [state, dispatch] = useContext(Context);
@@ -151,10 +152,8 @@ function Users() {
         }
     };
 
-    const getAvatarSrc = (avatarId, full_name) => {
-        return (
-            (localStorage.getItem(LOCAL_STORAGE_FULL_NAME) === full_name && localStorage.getItem(USER_IMAGE)) || require(`../../assets/images/bots/avatar${avatarId}.svg`)
-        );
+    const getAvatarSrc = (avatarId) => {
+        return require(`assets/images/bots/avatar${avatarId}.svg`);
     };
 
     const handleRemoveUser = async (name, type) => {
@@ -304,7 +303,7 @@ function Users() {
             render: (text, record) => (
                 <div className="user-name">
                     <div className="user-avatar">
-                        <img src={getAvatarSrc(record.avatar_id, record?.full_name)} width={25} height={25} alt="avatar" />
+                        <img src={getAvatarSrc(record.avatar_id)} width={25} height={25} alt="avatar" />
                     </div>
                     <p>{text}</p>
                 </div>
@@ -361,12 +360,12 @@ function Users() {
             )
         },
         {
-            title: 'Last login',
-            key: 'last_login',
-            dataIndex: 'last_login',
-            render: (last_login) => (
+            title: 'Creation date',
+            key: 'created_at',
+            dataIndex: 'created_at',
+            render: (created_at) => (
                 <div className="created-column">
-                    <p>{parsingDate(last_login)}</p>
+                    <p>{parsingDate(created_at)}</p>
                 </div>
             )
         },
diff --git a/ui_src/src/domain/users/style.scss b/ui_src/src/domain/users/style.scss
index cc4a3f6bb..31857516c 100644
--- a/ui_src/src/domain/users/style.scss
+++ b/ui_src/src/domain/users/style.scss
@@ -54,9 +54,6 @@
                     svg {
                         color: var(--purple);
                     }
-                    img {
-                        border-radius: 50%;
-                    }
                 }
                 .badgeOrange {
                     min-width: unset !important;
diff --git a/ui_src/src/index.js b/ui_src/src/index.js
index a47236335..0475a8c13 100644
--- a/ui_src/src/index.js
+++ b/ui_src/src/index.js
@@ -16,18 +16,18 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import './style.scss';
+import 'style.scss';
 
 import { BrowserRouter } from 'react-router-dom';
 import { StiggProvider } from '@stigg/react-sdk';
 import ReactDOM from 'react-dom';
 import React from 'react';
 
-import { isCloud } from './services/valueConvertor';
-import reportWebVitals from './reportWebVitals';
-import { STIGG_CLIENT_ID } from './config';
-import Store from './hooks/store';
-import App from './App';
+import { isCloud } from 'services/valueConvertor';
+import reportWebVitals from 'reportWebVitals';
+import { STIGG_CLIENT_ID } from 'config';
+import Store from 'hooks/store';
+import App from 'App';
 
 const theme = {
     palette: {
diff --git a/ui_src/src/services/auth.js b/ui_src/src/services/auth.js
index c924c2062..5ddf1f7b6 100644
--- a/ui_src/src/services/auth.js
+++ b/ui_src/src/services/auth.js
@@ -10,7 +10,7 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import { CLOUD_URL } from '../config';
+import { CLOUD_URL } from 'config';
 import {
     LOCAL_STORAGE_ALREADY_LOGGED_IN,
     LOCAL_STORAGE_AVATAR_ID,
@@ -44,8 +44,8 @@ import {
     LOCAL_STORAGE_ENTITLEMENTS,
     LOCAL_STORAGE_PLAN,
     LOCAL_STORAGE_FUNCTION_PAGE_VIEW
-} from '../const/localStorageConsts';
-import pathDomains from '../router';
+} from 'const/localStorageConsts';
+import pathDomains from 'router';
 import { isCloud } from './valueConvertor';
 
 const AuthService = (function () {
diff --git a/ui_src/src/services/decoder.js b/ui_src/src/services/decoder.js
index cf276abf7..2cc4cbaac 100644
--- a/ui_src/src/services/decoder.js
+++ b/ui_src/src/services/decoder.js
@@ -1,6 +1,5 @@
-import { bufferToPrettyHex, parseInput } from './decoderFiles/hexUtils';
+import { parseInput } from './decoderFiles/hexUtils';
 import { TYPES, typeToString } from './decoderFiles/protobufDecoder';
-import { decodeVarintParts, decodeFixed64, decodeFixed32 } from './decoderFiles/protobufPartDecoder';
 import { BufferReader } from './decoderFiles/protobufDecoder';
 import { v4 } from 'uuid';
 
diff --git a/ui_src/src/services/decoderFiles/protobufPartDecoder.js b/ui_src/src/services/decoderFiles/protobufPartDecoder.js
index 90e0f6c29..896f444ba 100644
--- a/ui_src/src/services/decoderFiles/protobufPartDecoder.js
+++ b/ui_src/src/services/decoderFiles/protobufPartDecoder.js
@@ -1,6 +1,5 @@
 import JSBI from 'jsbi';
 import { bufferLeToBeHex } from './hexUtils';
-import { interpretAsSignedType } from './varintUtils';
 
 export function decodeFixed32(value) {
     const floatValue = value.readFloatLE(0);
diff --git a/ui_src/src/services/genericServices.js b/ui_src/src/services/genericServices.js
index 7e343ab03..70b22d9eb 100644
--- a/ui_src/src/services/genericServices.js
+++ b/ui_src/src/services/genericServices.js
@@ -11,9 +11,9 @@
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 import { useContext } from 'react';
 import { message } from 'antd';
-import { ApiEndpoints } from '../const/apiEndpoints';
+import { ApiEndpoints } from 'const/apiEndpoints';
 import { httpRequest } from './http';
-import { Context } from '../hooks/store';
+import { Context } from 'hooks/store';
 
 export const showMessages = (type, content) => {
     switch (type) {
diff --git a/ui_src/src/services/http.js b/ui_src/src/services/http.js
index 0b3510372..5d8de27d0 100644
--- a/ui_src/src/services/http.js
+++ b/ui_src/src/services/http.js
@@ -12,13 +12,13 @@
 
 import axios from 'axios';
 
-import { SERVER_URL, SHOWABLE_ERROR_STATUS_CODE, AUTHENTICATION_ERROR_STATUS_CODE, CLOUD_URL } from '../config';
-import { LOCAL_STORAGE_TOKEN } from '../const/localStorageConsts.js';
-import { ApiEndpoints } from '../const/apiEndpoints';
-import pathDomains from '../router';
+import { SERVER_URL, SHOWABLE_ERROR_STATUS_CODE, AUTHENTICATION_ERROR_STATUS_CODE, CLOUD_URL } from 'config';
+import { LOCAL_STORAGE_TOKEN } from 'const/localStorageConsts.js';
+import { ApiEndpoints } from 'const/apiEndpoints';
+import pathDomains from 'router';
 import AuthService from './auth';
 import { isCloud } from './valueConvertor';
-import EmailLink from '../components/emailLink';
+import EmailLink from 'components/emailLink';
 import { showMessages } from './genericServices';
 
 export async function httpRequest(method, endPointUrl, data = {}, headers = {}, queryParams = {}, authNeeded = true, timeout = 0, serverUrl = null, displayMsg = true) {
diff --git a/ui_src/src/services/valueConvertor.js b/ui_src/src/services/valueConvertor.js
index 8869383a1..543262801 100644
--- a/ui_src/src/services/valueConvertor.js
+++ b/ui_src/src/services/valueConvertor.js
@@ -10,9 +10,9 @@
 // Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
 // A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
 
-import { planType } from '../const/globalConst';
+import { planType } from 'const/globalConst';
 import { decodeMessage } from './decoder';
-import { LOCAL_STORAGE_PLAN } from '../const/localStorageConsts';
+import { LOCAL_STORAGE_PLAN } from 'const/localStorageConsts';
 
 export const convertDateToSeconds = (days, hours, minutes, seconds) => {
     let totalSeconds = 0;
diff --git a/ui_src/src/utils/user.js b/ui_src/src/utils/user.js
index 34c20182d..cafd73456 100644
--- a/ui_src/src/utils/user.js
+++ b/ui_src/src/utils/user.js
@@ -1,5 +1,6 @@
-import {LOCAL_STORAGE_USER_ID} from "../const/localStorageConsts";
+import { LOCAL_STORAGE_USER_ID } from "../const/localStorageConsts";
+
 export function isCurrentUser(userId) {
     const currentUserId = localStorage.getItem(LOCAL_STORAGE_USER_ID);
     return parseInt(userId) === parseInt(currentUserId);
-}
+}
\ No newline at end of file