diff --git a/lib/client/components/logger/dummy.ts b/lib/client/components/logger/dummy.ts
new file mode 100644
index 000000000..5353047d5
--- /dev/null
+++ b/lib/client/components/logger/dummy.ts
@@ -0,0 +1,12 @@
+export const logsMockData = [
+  'nnQhCA0QTSuukrRA',
+  '0dlRACNaaPWkx3hBmZNksKoR',
+  '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
+  'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
+  'o2Znr1VqxwlnFcyOe8S78z1HXrwIUcrnGdpXoEj2smsD6d',
+  '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
+  'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
+  'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
+  'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
+  'SQpMBRSCEvC2EWIq2eQ21ljhQkx7hi3t9WNgMpLI0vuaeaUTTcIDXYPqorSJUiGmvQ9R1uQ0x9O0z0fVCNvGYehoaAEYp',
+];
diff --git a/src/apps/console/components/logger/index.tsx b/lib/client/components/logger/index.tsx
similarity index 98%
rename from src/apps/console/components/logger/index.tsx
rename to lib/client/components/logger/index.tsx
index 1e6670e2b..68ec2e820 100644
--- a/src/apps/console/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -14,9 +14,12 @@ import {
 } from '~/root/lib/client/helpers/search-filter';
 import useClass from '~/root/lib/client/hooks/use-class';
 import { useSocketLogs } from '~/root/lib/client/helpers/socket/useSockLogs';
-import { generatePlainColor } from '../color-generator';
-import Pulsable from '../pulsable';
-import { logsMockData } from '../../dummy/data';
+import Pulsable from '~/components/atoms/pulsable';
+import { generatePlainColor } from '~/root/lib/utils/color-generator';
+import { logsMockData } from './dummy';
+// import { generatePlainColor } from '../color-generator';
+// import Pulsable from '../pulsable';
+// import { logsMockData } from '../../dummy/data';
 
 export type ILog = {
   podName: string;
diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
index e609a6f38..81e28e5cc 100644
--- a/lib/client/helpers/socket/useSockLogs.tsx
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
-import { ILog } from '~/console/components/logger';
 import { ISocketResp, useSubscribe } from './context';
+import { ILog } from '../../components/logger';
 
 interface IuseLog {
   account: string;
diff --git a/src/apps/console/components/color-generator.tsx b/lib/utils/color-generator.tsx
similarity index 100%
rename from src/apps/console/components/color-generator.tsx
rename to lib/utils/color-generator.tsx
diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx
index 25c1fc5e6..52521d213 100644
--- a/src/apps/console/components/console-avatar.tsx
+++ b/src/apps/console/components/console-avatar.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from '~/components/atoms/avatar';
 import { titleCase } from '~/components/utils';
-import generateColor from './color-generator';
+import generateColor from '~/root/lib/utils/color-generator';
 
 const ConsoleAvatar = ({
   name,
diff --git a/src/apps/console/dummy/data.js b/src/apps/console/dummy/data.js
index 911401a26..652f43155 100644
--- a/src/apps/console/dummy/data.js
+++ b/src/apps/console/dummy/data.js
@@ -720,16 +720,3 @@ export const dummyData = {
     },
   ],
 };
-
-export const logsMockData = [
-  'nnQhCA0QTSuukrRA',
-  '0dlRACNaaPWkx3hBmZNksKoR',
-  '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
-  'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
-  'o2Znr1VqxwlnFcyOe8S78z1HXrwIUcrnGdpXoEj2smsD6d',
-  '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
-  'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
-  'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
-  'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
-  'SQpMBRSCEvC2EWIq2eQ21ljhQkx7hi3t9WNgMpLI0vuaeaUTTcIDXYPqorSJUiGmvQ9R1uQ0x9O0z0fVCNvGYehoaAEYp',
-];
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index b15eaa371..8ea1645d2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -6,13 +6,13 @@ import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { parseValue } from '~/console/page-components/util';
 import { ApexOptions } from 'apexcharts';
-import LogComp from '~/console/components/logger';
 import { parseName } from '~/console/server/r-utils/common';
 import { Clock, ListNumbers } from '@jengaicons/react';
 import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
 import { observeUrl } from '~/root/lib/configs/base-url.cjs';
 import { IAppContext } from '../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const LogsAndMetrics = () => {
   const { app, project, account } = useOutletContext<IAppContext>();
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
index 3c705c677..319925dec 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -29,7 +29,6 @@ import { Link, useOutletContext } from '@remix-run/react';
 import { IStatus, listRender } from '~/console/components/commons';
 import { listStatus } from '~/console/components/sync-status';
 import AnimateHide from '~/components/atoms/animate-hide';
-import LogComp from '~/console/components/logger';
 import { ISetState } from '~/console/page-components/app-states';
 import { Button } from '~/components/atoms/button';
 import { dayjs } from '~/components/molecule/dayjs';
@@ -39,6 +38,7 @@ import {
   findNodePlanWithSpec,
 } from './nodepool-utils';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'nodepool';
 type BaseType = ExtractNodeType<INodepools>;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
index 6dff890a6..5ddcfce4c 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
@@ -16,12 +16,12 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import LogComp from '~/console/components/logger';
 import { renderCloudProvider } from '~/console/utils/commons';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { DetailItem } from '~/console/components/commons';
 import { INodepool } from '~/console/server/gql/queries/nodepool-queries';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const ClusterTabs = () => {
   const { account, cluster } = useParams();
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
index 0480dcedd..6f4b3e22c 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -3,12 +3,12 @@ import Chart from '~/console/components/charts/charts-client';
 import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { ApexOptions } from 'apexcharts';
-import LogComp from '~/console/components/logger';
 import { parseName } from '~/console/server/r-utils/common';
 import { Clock, ListNumbers } from '@jengaicons/react';
 import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
 import { IClusterContext } from '../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const LogsAndMetrics = () => {
   const { cluster, account } = useOutletContext<IClusterContext>();
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index 22923be5f..ea949e042 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -16,7 +16,6 @@ import {
 import { useOutletContext } from '@remix-run/react';
 import { IBuildRuns } from '~/console/server/gql/queries/build-run-queries';
 import AnimateHide from '~/components/atoms/animate-hide';
-import LogComp from '~/console/components/logger';
 import { Button } from '~/components/atoms/button';
 import {
   CheckCircleFill,
@@ -27,6 +26,7 @@ import {
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;