diff --git a/src/components/project/CloneProject/CloneProject.tsx b/src/components/project/CloneProject/CloneProject.tsx
index 35073a3..684516a 100644
--- a/src/components/project/CloneProject/CloneProject.tsx
+++ b/src/components/project/CloneProject/CloneProject.tsx
@@ -1,7 +1,7 @@
 import AppIcon from '@/components/ui/icon';
 import { baseProjectPath, useProject } from '@/hooks/projectV2.hooks';
 import fileSystem from '@/lib/fs';
-import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
+import { App, Button, Form, Input, Modal, Tooltip } from 'antd';
 import cloneDeep from 'lodash.clonedeep';
 import { FC, useState } from 'react';
 import s from './CloneProject.module.scss';
@@ -10,6 +10,7 @@ const CloneProject: FC = () => {
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const { activeProject, projectFiles, createProject } = useProject();
+  const { message } = App.useApp();
 
   const storeAsNewProject = async ({ name }: { name: string }) => {
     try {
diff --git a/src/components/project/MigrateToUnifiedFS/MigrateToUnifiedFS.tsx b/src/components/project/MigrateToUnifiedFS/MigrateToUnifiedFS.tsx
index 592d20d..b916794 100644
--- a/src/components/project/MigrateToUnifiedFS/MigrateToUnifiedFS.tsx
+++ b/src/components/project/MigrateToUnifiedFS/MigrateToUnifiedFS.tsx
@@ -7,7 +7,7 @@ import {
   Tree,
 } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
-import { Button, ConfigProvider, message, Modal, Popconfirm } from 'antd';
+import { App, Button, ConfigProvider, Modal, Popconfirm } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import { IndexedDBHelper } from './IndexedDBHelper';
 import s from './MigrateToUnifiedFS.module.scss';
@@ -35,6 +35,8 @@ const MigrateToUnifiedFS: FC<Props> = ({ hasDescription = false }) => {
   >('pending');
   const { createProject } = useProject();
   const { createLog } = useLogActivity();
+  const { message } = App.useApp();
+
   const note = `We've recently upgraded the IDE, and some of your projects may not be visible.`;
 
   const checkMigration = async () => {
diff --git a/src/components/project/NewProject/NewProject.tsx b/src/components/project/NewProject/NewProject.tsx
index 2e36f8d..a8c1d82 100644
--- a/src/components/project/NewProject/NewProject.tsx
+++ b/src/components/project/NewProject/NewProject.tsx
@@ -12,7 +12,7 @@ import { Analytics } from '@/utility/analytics';
 import EventEmitter from '@/utility/eventEmitter';
 import { downloadRepo } from '@/utility/gitRepoDownloader';
 import { decodeBase64 } from '@/utility/utils';
-import { Button, Form, Input, Modal, Radio, Upload, message } from 'antd';
+import { App, Button, Form, Input, Modal, Radio, Upload } from 'antd';
 import { useForm } from 'antd/lib/form/Form';
 import type { RcFile } from 'antd/lib/upload';
 import { useRouter } from 'next/router';
@@ -49,6 +49,7 @@ const NewProject: FC<Props> = ({
   const [isLoading, setIsLoading] = useState(false);
   const { createLog } = useLogActivity();
   const { open: openTab } = useFileTab();
+  const { message } = App.useApp();
 
   const router = useRouter();
   const {
diff --git a/src/components/shared/ThemeProvider/ThemeProvider.tsx b/src/components/shared/ThemeProvider/ThemeProvider.tsx
index ceed820..84d2b70 100644
--- a/src/components/shared/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/shared/ThemeProvider/ThemeProvider.tsx
@@ -1,4 +1,4 @@
-import { ConfigProvider, theme as antdTheme } from 'antd';
+import { App, ConfigProvider, ThemeConfig, theme as antdTheme } from 'antd';
 import {
   ReactNode,
   createContext,
@@ -53,12 +53,13 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
   };
 
   // Ant Design's theme configuration
-  const antdConfig = {
+  const antdConfig: ThemeConfig = {
     token: {
       colorPrimary: '#0098ea',
       colorError: '#C84075',
       fontFamily: 'var(--font-body)',
       borderRadius: 4,
+      colorText: 'var(--text-color)',
     },
     algorithm:
       theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
@@ -66,7 +67,9 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
 
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      <ConfigProvider theme={antdConfig}>{children}</ConfigProvider>
+      <ConfigProvider theme={antdConfig}>
+        <App>{children}</App>
+      </ConfigProvider>
     </ThemeContext.Provider>
   );
 };
diff --git a/src/components/template/ProjectTemplate/ProjectTemplate.tsx b/src/components/template/ProjectTemplate/ProjectTemplate.tsx
index 65e166e..54398ff 100644
--- a/src/components/template/ProjectTemplate/ProjectTemplate.tsx
+++ b/src/components/template/ProjectTemplate/ProjectTemplate.tsx
@@ -4,7 +4,7 @@ import { useTheme } from '@/components/shared/ThemeProvider';
 import AppIcon from '@/components/ui/icon';
 import { AppConfig } from '@/config/AppConfig';
 import { projectExamples } from '@/constant/projectExamples';
-import { Drawer, Skeleton, message } from 'antd';
+import { App, Drawer, Skeleton } from 'antd';
 import axios from 'axios';
 import Link from 'next/link';
 import { FC, useEffect, useState } from 'react';
@@ -40,6 +40,7 @@ const ProjectTemplate: FC = () => {
     content: string;
   }>({ contract: '', content: '' });
   const { theme } = useTheme();
+  const { message } = App.useApp();
 
   const getContent = async () => {
     const link = examples[currentExample].link;
diff --git a/src/components/workspace/ExecuteFile/ExecuteFile.tsx b/src/components/workspace/ExecuteFile/ExecuteFile.tsx
index d43fc94..e637704 100644
--- a/src/components/workspace/ExecuteFile/ExecuteFile.tsx
+++ b/src/components/workspace/ExecuteFile/ExecuteFile.tsx
@@ -8,7 +8,7 @@ import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
 import { getFileExtension } from '@/utility/utils';
-import { Button, Select, message } from 'antd';
+import { App, Button, Select } from 'antd';
 import { FC, useEffect, useRef, useState } from 'react';
 import s from './ExecuteFile.module.scss';
 
@@ -43,6 +43,7 @@ const ExecuteFile: FC<Props> = ({
   const selectedFileRef = useRef<Tree | undefined>();
   const isAutoBuildAndDeployEnabled =
     useSettingAction().isAutoBuildAndDeployEnabled();
+  const { message } = App.useApp();
 
   const isAutoBuildAndDeployEnabledRef = useRef(false);
 
diff --git a/src/components/workspace/project/ManageProject/ManageProject.tsx b/src/components/workspace/project/ManageProject/ManageProject.tsx
index 9c7f0b3..4bec62d 100644
--- a/src/components/workspace/project/ManageProject/ManageProject.tsx
+++ b/src/components/workspace/project/ManageProject/ManageProject.tsx
@@ -9,7 +9,7 @@ import AppIcon from '@/components/ui/icon';
 import { baseProjectPath, useProject } from '@/hooks/projectV2.hooks';
 import { Project } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
-import { Button, Modal, Select, message } from 'antd';
+import { App, Button, Modal, Select } from 'antd';
 import Router, { useRouter } from 'next/router';
 import { FC, useEffect, useState } from 'react';
 import s from './ManageProject.module.scss';
@@ -17,6 +17,8 @@ import s from './ManageProject.module.scss';
 const ManageProject: FC = () => {
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
   const router = useRouter();
+  const { message } = App.useApp();
+
   const { importURL } = router.query;
 
   const {
diff --git a/src/components/workspace/tree/FileTree/TreeNode.tsx b/src/components/workspace/tree/FileTree/TreeNode.tsx
index 390f8e0..86c1602 100644
--- a/src/components/workspace/tree/FileTree/TreeNode.tsx
+++ b/src/components/workspace/tree/FileTree/TreeNode.tsx
@@ -5,7 +5,7 @@ import { Project, Tree } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
 import { encodeBase64, fileTypeFromFileName } from '@/utility/utils';
 import { NodeModel } from '@minoru/react-dnd-treeview';
-import { message } from 'antd';
+import { App } from 'antd';
 import cn from 'clsx';
 import { FC, useState } from 'react';
 import s from './FileTree.module.scss';
@@ -35,6 +35,7 @@ const TreeNode: FC<Props> = ({ node, depth, isOpen, onToggle }) => {
   const { open: openTab } = useFileTab();
   const { createLog } = useLogActivity();
   const { getFile } = useFile();
+  const { message } = App.useApp();
 
   const disallowedFile = [
     'message.cell.ts',
diff --git a/src/hooks/contract.hooks.ts b/src/hooks/contract.hooks.ts
index 40367ab..620df4d 100644
--- a/src/hooks/contract.hooks.ts
+++ b/src/hooks/contract.hooks.ts
@@ -37,7 +37,7 @@ import {
 import { StateInit, TonClient } from '@ton/ton';
 import { ITonConnect, SendTransactionRequest } from '@tonconnect/sdk';
 import { useTonConnectUI } from '@tonconnect/ui-react';
-import { message } from 'antd';
+import { App } from 'antd';
 import { pascalCase } from 'change-case';
 import { useSettingAction } from './setting.hooks';
 
@@ -45,6 +45,7 @@ export function useContractAction() {
   const [tonConnector] = useTonConnectUI();
   const { getTonAmountForInteraction } = useSettingAction();
   const tonAmountForInteraction = toNano(getTonAmountForInteraction());
+  const { message } = App.useApp();
 
   return {
     deployContract,