diff --git a/config-ui/.eslintrc.js b/config-ui/.eslintrc.cjs
similarity index 100%
rename from config-ui/.eslintrc.js
rename to config-ui/.eslintrc.cjs
diff --git a/config-ui/.prettierrc.js b/config-ui/.prettierrc.cjs
similarity index 100%
rename from config-ui/.prettierrc.js
rename to config-ui/.prettierrc.cjs
diff --git a/config-ui/README.md b/config-ui/README.md
index e1a4d3e851f..6171b21f9ac 100644
--- a/config-ui/README.md
+++ b/config-ui/README.md
@@ -14,6 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+
 # DevLake - Configuration UI
 
 The **Config-UI Application** is a **React.js** SPA (Single-Page-Application) that manages the setup and configuration of a **DevLake** Instance.
diff --git a/config-ui/package.json b/config-ui/package.json
index d765f38340c..9a69135161b 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "packageManager": "yarn@3.4.1",
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "vite build",
diff --git a/config-ui/public/onboard/step-1/github.md b/config-ui/public/onboard/step-1/github.md
index 7ce5e9d8166..e08d8ad9258 100644
--- a/config-ui/public/onboard/step-1/github.md
+++ b/config-ui/public/onboard/step-1/github.md
@@ -22,7 +22,7 @@ limitations under the License.
    ![1](/onboard/assets/github/1.png)
 
 2. What is the turnaround time for your Code Review process?
-   
+
    ![2](/onboard/assets/github/2.png)
 
 3. How effective is your CI/CD pipeline?
diff --git a/config-ui/public/onboard/step-3/azuredevops.md b/config-ui/public/onboard/step-3/azuredevops.md
index 8a17a63c77a..90dee2b01b8 100644
--- a/config-ui/public/onboard/step-3/azuredevops.md
+++ b/config-ui/public/onboard/step-3/azuredevops.md
@@ -31,4 +31,4 @@ Yes, data transformations can be applied by setting up a Scope Config for the se
 
 ##### Q4. How often is the data synchronized?
 
-Data synchronization occurs daily. This frequency can be modified on the project details page as needed.
\ No newline at end of file
+Data synchronization occurs daily. This frequency can be modified on the project details page as needed.
diff --git a/config-ui/src/index.css b/config-ui/src/index.css
index a2d32515dd1..6ddcf4c6416 100644
--- a/config-ui/src/index.css
+++ b/config-ui/src/index.css
@@ -71,7 +71,6 @@ p {
   height: 100vh;
 }
 
-
 .ant-tour-title {
   padding-right: 28px;
-}
\ No newline at end of file
+}
diff --git a/config-ui/src/main.tsx b/config-ui/src/main.tsx
index d3b35c690ac..d463e53cbd3 100644
--- a/config-ui/src/main.tsx
+++ b/config-ui/src/main.tsx
@@ -16,7 +16,7 @@
  *
  */
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { ConfigProvider } from 'antd';
@@ -27,7 +27,9 @@ import { store } from './app/store';
 import { router } from './app/routrer';
 import './index.css';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
   <ConfigProvider
     theme={{
       token: {
@@ -39,5 +41,4 @@ ReactDOM.render(
       <RouterProvider router={router} fallbackElement={<PageLoading />} />
     </Provider>
   </ConfigProvider>,
-  document.getElementById('root'),
 );
diff --git a/config-ui/src/plugins/components/scope-config-form/index.tsx b/config-ui/src/plugins/components/scope-config-form/index.tsx
index d4f4c04f49e..9a954c18895 100644
--- a/config-ui/src/plugins/components/scope-config-form/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-form/index.tsx
@@ -150,7 +150,7 @@ export const ScopeConfigForm = ({
               title="Data Entities"
               description={
                 <>
-                  Select the data entities you wish to collect for the Data Scope. 
+                  Select the data entities you wish to collect for the Data Scope.
                   <ExternalLink link="{DOC_URL.DATA_ENTITIES}">Learn about data entities</ExternalLink>
                 </>
               }