From 8cb283c22f183d8ae54c35feea7e2991edd30945 Mon Sep 17 00:00:00 2001
From: zuies <zurabichkhikvadze66@gmail.com>
Date: Tue, 20 Feb 2024 10:26:35 +0300
Subject: [PATCH] update prettier config

---
 .eslintrc.js                                  |  21 +--
 .eslintrc.json                                |   8 +-
 .prettierrc                                   |  10 +-
 jest.config.js                                |   4 +-
 jest.setup.js                                 |   2 +-
 next.config.js                                |  10 +-
 package-lock.json                             |  95 +++++++++++--
 package.json                                  |   7 +-
 postcss.config.js                             |   2 +-
 .../announcements/TcAnnouncementsAlert.tsx    |   8 +-
 .../announcements/TcAnnouncementsTable.tsx    |  86 ++++++------
 .../TcConfirmSchaduledAnnouncementsDialog.tsx |  60 ++++-----
 src/components/announcements/TcTimeZone.tsx   |  24 ++--
 .../announcements/create/TcIconContainer.tsx  |   2 +-
 .../TcPrivateMessageContainer.tsx             |  54 ++++----
 .../TcPrivateMessagePreviewDialog.tsx         |  56 ++++----
 .../TcRolesAutoComplete.tsx                   |   6 +-
 .../TcUsersAutoComplete.tsx                   |  20 +--
 .../TcPublicMessageContainer.tsx              |  54 ++++----
 .../TcPublicMessagePreviewDialog.spec.tsx     |   2 +-
 .../TcPublicMessagePreviewDialog.tsx          |  40 +++---
 .../TcDateTimePopover.tsx                     |  20 +--
 .../TcScheduleAnnouncement.tsx                |  18 +--
 .../selectPlatform/TcSelectPlatform.tsx       |  26 ++--
 .../selectCommunity/TcCommunityListItems.tsx  |  18 +--
 .../selectCommunity/TcSelectCommunity.tsx     |  32 ++---
 .../communitySettings/TcIntegrationCard.tsx   |   4 +-
 .../TcAvailableIntegrations.tsx               |   2 +-
 .../TcAvailableIntegrationsItem.tsx           |  22 +--
 .../TcCommunityIntegrations.tsx               |  18 +--
 .../TcCommunityIntegrationsConfirmDialog.tsx  |  20 +--
 .../TcCommunityIntegrationsDialog.tsx         |  24 ++--
 .../TcConnectedPlatforms.spec.tsx             |   2 +-
 .../TcConnectedPlatforms.tsx                  |   2 +-
 .../TcConnectedPlatformsItem.tsx              |  24 ++--
 .../platform/TcCommunityName.tsx              |  20 +--
 .../platform/TcDisconnectPlatform.tsx         |  42 +++---
 .../communitySettings/platform/TcPlatform.tsx |  14 +-
 .../platform/TcPlatformChannelDialog.tsx      |  22 +--
 .../platform/TcPlatformChannelDialogBody.tsx  |   2 +-
 .../TcPlatformChannelDialogFooter.tsx         |  16 +--
 .../TcPlatformChannelDialogHeader.tsx         |   4 +-
 .../platform/TcPlatformChannelList.tsx        |  32 ++---
 .../platform/TcPlatformChannels.tsx           |   8 +-
 .../platform/TcPlatformPeriod.tsx             |  20 +--
 .../switchCommunity/TcActiveCommunity.tsx     |  33 +++--
 .../TcConfirmDeleteCommunity.tsx              |  60 ++++-----
 .../switchCommunity/TcSwitchCommunity.tsx     |   8 +-
 src/components/global/CustomTab.tsx           |   2 +-
 src/components/global/EmptyState.tsx          |  12 +-
 src/components/global/FilterByChannels.tsx    |  24 ++--
 .../FilterPopover/FilterRolesPopover.tsx      |  50 +++----
 src/components/global/Link.tsx                |   2 +-
 src/components/global/Loading.tsx             |   2 +-
 src/components/global/LoadingBackdrop.tsx     |   2 +-
 src/components/global/RangeSelect.tsx         |  10 +-
 src/components/global/SEO.tsx                 |   4 +-
 .../TcPermissionHints/TcPermissionHints.tsx   | 126 +++++++++---------
 src/components/global/ZonePicker.tsx          |  30 ++---
 src/components/layouts/Sidebar.tsx            |  32 ++---
 src/components/layouts/shared/TcPrompt.tsx    |   8 +-
 src/components/layouts/xs/SidebarXs.tsx       |  36 ++---
 .../communityHealth/CommunityStatusShower.tsx |  24 ++--
 .../communityHealth/Decentralization.tsx      |  60 ++++-----
 .../pages/communityHealth/Fragmentation.tsx   |  60 ++++-----
 .../pages/communityHealth/HeaderSection.tsx   |  20 +--
 .../pages/communityHealth/TipsDialog.spec.tsx |   8 +-
 .../pages/communityHealth/TipsDialog.tsx      |  14 +-
 .../TcIntegrationDialog.spec.tsx              |   4 +-
 .../communitySettings/TcIntegrationDialog.tsx |  16 +--
 .../memberInteraction/ForceGraphComponent.tsx |  74 +++++-----
 .../pages/memberInteraction/HintBox.tsx       |  40 +++---
 .../pageIndex/ActiveMemberComposition.tsx     |  18 +--
 .../pages/pageIndex/HeatmapChart.tsx          |  30 ++---
 .../pageIndex/MemberInteractionGraph.tsx      |  20 +--
 .../pages/pageIndex/NumberOfMessages.tsx      |   8 +-
 .../statistics/ActiveMembersComposition.tsx   |  22 +--
 .../DisengagedMembersComposition.tsx          |  22 +--
 .../pages/statistics/InactiveMembers.tsx      |  14 +-
 .../pages/statistics/InteractionsSection.tsx  |  16 +--
 .../pages/statistics/Onboarding.tsx           |  20 +--
 .../pages/statistics/StatisticalData.tsx      |  36 ++---
 .../memberBreakdowns/CustomDialogDetail.tsx   |  44 +++---
 .../memberBreakdowns/CustomPagination.tsx     |   4 +-
 .../memberBreakdowns/CustomTable.tsx          |  96 ++++++-------
 .../activeMembers/ActiveMemberBreakdown.tsx   |  24 ++--
 .../DisengagedMembersCompositionBreakdown.tsx |  24 ++--
 .../OnboardingMembersBreakdown.tsx            |  24 ++--
 src/components/shared/TcAlert.spec.tsx        |   2 +-
 .../shared/TcBox/TcBoxContainer.spec.tsx      |   4 +-
 .../shared/TcBox/TcBoxContainer.tsx           |   2 +-
 .../shared/TcBox/TcBoxTitleContainer.spec.tsx |   2 +-
 src/components/shared/TcBreadcrumbs.tsx       |   6 +-
 src/components/shared/TcButton.spec.tsx       |   6 +-
 src/components/shared/TcButton.tsx            |   4 +-
 src/components/shared/TcDatePickerPopover.tsx |  12 +-
 .../shared/TcIconWithTooltip.spec.tsx         |   8 +-
 src/components/shared/TcIconWithTooltip.tsx   |   4 +-
 src/components/shared/TcLink.tsx              |   2 +-
 .../shared/TcPagination/TcPagination.tsx      |   4 +-
 src/components/shared/TcSelect/TcSelect.tsx   |   2 +-
 .../shared/TcTableContainer/TcTableBody.tsx   |   2 +-
 .../TcTableContainer/TcTableContainer.tsx     |   2 +-
 .../shared/TcTableContainer/TcTableHead.tsx   |   2 +-
 .../shared/TcTableContainer/TcTableRow.tsx    |   2 +-
 .../TcAccountActivity.spec.tsx                |   4 +-
 .../TcAccountActivityContent.tsx              |  14 +-
 .../TcAccountActivityHeader.tsx               |  22 +--
 .../audienceResponse/TcAudienceResponse.tsx   |   2 +-
 .../TcAudienceResponseContent.tsx             |  18 +--
 .../TcAudienceResponseHeader.tsx              |  10 +-
 .../TcEngagementAccountContentItems.tsx       |  16 +--
 .../TcEngagementAccounts.tsx                  |   2 +-
 .../TcEngagementAccountsContent.tsx           |  22 +--
 .../TcEngagementAccountsHeader.tsx            |   2 +-
 .../growth/voteFeature/TcvoteFeature.tsx      |  10 +-
 .../voteFeature/TcvoteFeatureHeader.tsx       |   8 +-
 .../TcvoteFeatureVotes/TcvoteFeatureVotes.tsx |   4 +-
 .../TcvoteFeatureVotesItems.spec.tsx          |  16 +--
 .../TcvoteFeatureVotesItems.tsx               |   4 +-
 .../TcYourAccountActivity.tsx                 |   2 +-
 .../TcYourAccountActivityContent.tsx          |  18 +--
 .../TcYourAccountActivityHeader.tsx           |  12 +-
 src/context/ChannelContext.tsx                |  19 +--
 src/layouts/centricLayout.tsx                 |   6 +-
 src/layouts/defaultLayout.tsx                 |   4 +-
 src/layouts/emptyLayout.tsx                   |   4 +-
 src/lib/attributes/Menu.ts                    |  14 +-
 src/pages/_app.tsx                            |   2 +-
 src/pages/_error.tsx                          |  46 +++----
 .../create-new-announcements.tsx              |  30 ++---
 .../edit-announcements/index.tsx              |  20 +--
 src/pages/announcements/index.tsx             |  40 +++---
 src/pages/callback.tsx                        |   2 +-
 src/pages/centric/create-new-community.tsx    |  40 +++---
 src/pages/centric/index.tsx                   |  22 +--
 src/pages/centric/select-community.tsx        |   6 +-
 src/pages/centric/tac.tsx                     |  28 ++--
 src/pages/community-health.tsx                |   6 +-
 src/pages/community-settings/index.tsx        |  10 +-
 .../community-settings/platform/index.tsx     |   4 +-
 src/pages/growth.tsx                          |  10 +-
 src/pages/index.tsx                           |  10 +-
 src/pages/membersInteraction.tsx              |  32 ++---
 src/pages/statistics.tsx                      |  24 ++--
 svg.d.ts                                      |   6 +-
 tailwind.config.js                            |  14 +-
 147 files changed, 1444 insertions(+), 1373 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 23bdbc22..9aa2521f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,21 +1,14 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'standard-with-typescript'
-  ],
-  overrides: [
-  ],
+  extends: ['plugin:react/recommended', 'standard-with-typescript'],
+  overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: [
-    'react'
-  ],
-  rules: {
-  }
-}
+  plugins: ['react'],
+  rules: {},
+};
diff --git a/.eslintrc.json b/.eslintrc.json
index ddb2c248..a83dd976 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -7,15 +7,11 @@
     "plugin:prettier/react",
     "plugin:prettier/@typescript-eslint"
   ],
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "react", "prettier"],
   "rules": {
     "react/react-in-jsx-scope": "off"
   },
   "globals": {
     "React": "writable"
   }
-}
\ No newline at end of file
+}
diff --git a/.prettierrc b/.prettierrc
index 1196752f..f5a575dc 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,8 @@
 {
-	"semi": true,
-	"singleQuote": true
-}
\ No newline at end of file
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/jest.config.js b/jest.config.js
index d4baced8..fecfc3b2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -32,5 +32,5 @@ module.exports = {
     '/node_modules/',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
-}
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+};
diff --git a/jest.setup.js b/jest.setup.js
index a5dd1979..32fa2e5f 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,3 +1,3 @@
 // jest.setup.js
 
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect';
diff --git a/next.config.js b/next.config.js
index 999eb343..d90f7de3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,16 +1,12 @@
 /** @type {import('next').NextConfig} */
 
-
 const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   trailingSlash: true,
   images: {
-    unoptimized: true
+    unoptimized: true,
   },
-}
-
-module.exports = nextConfig
-
-
+};
 
+module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 4c8d3d22..89743a2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,6 @@
         "next": "13.0.2",
         "next-router-mock": "^0.9.9",
         "papaparse": "^5.4.1",
-        "prettier": "^2.8.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-force-graph": "^1.43.0",
@@ -76,6 +75,8 @@
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "postcss": "^8.4.18",
+        "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "react-test-renderer": "^18.2.0",
         "tailwindcss": "^3.2.2"
       }
@@ -10047,14 +10048,14 @@
       "integrity": "sha512-8HGGcsH0xefDkhtWzXhigzieKtervWPQgyX8RtQD3cKr4wU307j8XANVSaZLxbR0+1EBonCJNOdUrQ7hbk3Kiw=="
     },
     "node_modules/prettier": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -10071,6 +10072,75 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -19004,9 +19074,9 @@
       "integrity": "sha512-8HGGcsH0xefDkhtWzXhigzieKtervWPQgyX8RtQD3cKr4wU307j8XANVSaZLxbR0+1EBonCJNOdUrQ7hbk3Kiw=="
     },
     "prettier": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw=="
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A=="
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -19016,6 +19086,13 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/package.json b/package.json
index 85891dc1..b7361af9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "lint": "eslint --ext .ts,.tsx",
     "test": "jest",
     "coverage": "jest --coverage",
-    "export": "next export"
+    "export": "next export",
+    "format": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.9.4",
@@ -50,7 +52,6 @@
     "next": "13.0.2",
     "next-router-mock": "^0.9.9",
     "papaparse": "^5.4.1",
-    "prettier": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-force-graph": "^1.43.0",
@@ -80,6 +81,8 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.18",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.2.2"
   }
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..12a703d9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/components/announcements/TcAnnouncementsAlert.tsx b/src/components/announcements/TcAnnouncementsAlert.tsx
index be5f9b7b..674cd56e 100644
--- a/src/components/announcements/TcAnnouncementsAlert.tsx
+++ b/src/components/announcements/TcAnnouncementsAlert.tsx
@@ -37,7 +37,7 @@ function TcAnnouncementsAlert() {
       }}
     >
       <TcAlert
-        variant="filled"
+        variant='filled'
         className={'bg-error-500'}
         icon={false}
         sx={{
@@ -47,7 +47,7 @@ function TcAnnouncementsAlert() {
           paddingY: 0,
         }}
       >
-        <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
+        <div className='flex flex-col items-center justify-center p-0 md:flex-row md:space-x-3'>
           <TcText
             text={
               'Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)'
@@ -56,9 +56,9 @@ function TcAnnouncementsAlert() {
             variant={'subtitle1'}
           />
           <TcButton
-            text="Update Permissions"
+            text='Update Permissions'
             onClick={handleGrantAccess}
-            className="text-white"
+            className='text-white'
           />
         </div>
       </TcAlert>
diff --git a/src/components/announcements/TcAnnouncementsTable.tsx b/src/components/announcements/TcAnnouncementsTable.tsx
index 0fec5768..2ca1d4f0 100644
--- a/src/components/announcements/TcAnnouncementsTable.tsx
+++ b/src/components/announcements/TcAnnouncementsTable.tsx
@@ -145,7 +145,7 @@ function TcAnnouncementsTable({
     switch (cellType) {
       case 'title':
         return (
-          <div className="flex flex-col">
+          <div className='flex flex-col'>
             <TcText
               text={
                 <>
@@ -167,9 +167,9 @@ function TcAnnouncementsTable({
                     : ''}
                 </>
               }
-              variant="subtitle2"
+              variant='subtitle2'
             />
-            <span className="flex space-x-1">
+            <span className='flex space-x-1'>
               {announcement.data
                 .reduce((unique: string[], item: AnnouncementData) => {
                   const itemType = item.type;
@@ -181,7 +181,7 @@ function TcAnnouncementsTable({
                 .map((type: string, index: React.Key | null | undefined) => (
                   <Chip
                     key={index}
-                    variant="outlined"
+                    variant='outlined'
                     label={
                       <div style={{ display: 'flex', alignItems: 'center' }}>
                         <span
@@ -198,7 +198,7 @@ function TcAnnouncementsTable({
                         {getAnnouncementTypeLabel(type)}
                       </div>
                     }
-                    size="small"
+                    size='small'
                     sx={{
                       borderRadius: '4px',
                       borderColor: '#D1D1D1',
@@ -212,7 +212,7 @@ function TcAnnouncementsTable({
         );
       case 'channels':
         return (
-          <div className="flex flex-row overflow-hidden whitespace-nowrap">
+          <div className='flex flex-row overflow-hidden whitespace-nowrap'>
             <TcText
               text={announcement.data
                 .map(
@@ -234,7 +234,7 @@ function TcAnnouncementsTable({
                 )
                 .filter((text: string) => text !== '')
                 .join('')}
-              variant="subtitle2"
+              variant='subtitle2'
             />
           </div>
         );
@@ -286,13 +286,13 @@ function TcAnnouncementsTable({
       //   );
       case 'scheduledAt':
         return (
-          <div className="flex flex-row overflow-hidden whitespace-nowrap">
+          <div className='flex flex-row overflow-hidden whitespace-nowrap'>
             <TcText
               text={formatDateBasedOnTimezone(
                 announcement.scheduledAt,
                 selectedZone
               )}
-              variant="subtitle2"
+              variant='subtitle2'
             />
           </div>
         );
@@ -300,16 +300,16 @@ function TcAnnouncementsTable({
         return (
           <>
             <IconButton
-              aria-label="more"
-              aria-controls="long-menu"
-              aria-haspopup="true"
-              size="small"
+              aria-label='more'
+              aria-controls='long-menu'
+              aria-haspopup='true'
+              size='small'
               onClick={(event) => handleClick(event, announcement.id)}
             >
               <BsThreeDotsVertical />
             </IconButton>
             <Menu
-              id="long-menu"
+              id='long-menu'
               anchorEl={anchorEl}
               keepMounted
               open={
@@ -342,8 +342,8 @@ function TcAnnouncementsTable({
               colSpan={6}
               style={{ textAlign: 'center' }}
               sx={{ borderBottom: 'none' }}
-              className="min-h-[70vh] pt-[25dvh]"
-              data-testid="loading-indicator"
+              className='min-h-[70vh] pt-[25dvh]'
+              data-testid='loading-indicator'
             >
               <Loading />
             </TableCell>
@@ -396,34 +396,34 @@ function TcAnnouncementsTable({
 
   return (
     <>
-      <Table className="border-separate border-spacing-y-2">
+      <Table className='border-separate border-spacing-y-2'>
         <TableHead>
           <TableRow>
             <TableCell
               sx={{ borderBottom: 'none' }}
-              className="uppercase text-gray-400"
+              className='uppercase text-gray-400'
               style={{
                 width: '60%',
                 borderBottom: 'none',
                 whiteSpace: 'nowrap',
                 padding: '0 1rem',
               }}
-              align="left"
+              align='left'
             >
-              <TcText text="Announcements" variant="body2" />
+              <TcText text='Announcements' variant='body2' />
             </TableCell>
             <TableCell
               sx={{ borderBottom: 'none' }}
-              className="uppercase text-gray-400"
+              className='uppercase text-gray-400'
               style={{
                 width: '20%',
                 borderBottom: 'none',
                 whiteSpace: 'nowrap',
                 padding: '0 1rem',
               }}
-              align="left"
+              align='left'
             >
-              <TcText text="Channels" variant="body2" />
+              <TcText text='Channels' variant='body2' />
             </TableCell>
             {/* <TableCell
               sx={{ borderBottom: 'none' }}
@@ -453,27 +453,27 @@ function TcAnnouncementsTable({
             </TableCell> */}
             <TableCell
               sx={{ borderBottom: 'none' }}
-              className="uppercase text-gray-400"
+              className='uppercase text-gray-400'
               style={{
                 width: '20%',
                 borderBottom: 'none',
                 whiteSpace: 'nowrap',
                 padding: '0 1rem',
               }}
-              align="left"
+              align='left'
             >
-              <TcText text="Date" variant="body2" />
+              <TcText text='Date' variant='body2' />
             </TableCell>
             <TableCell
               sx={{ borderBottom: 'none' }}
-              className="uppercase"
+              className='uppercase'
               style={{
                 width: '20%',
                 borderBottom: 'none',
                 whiteSpace: 'nowrap',
                 padding: '0 1rem',
               }}
-              align="right"
+              align='right'
             ></TableCell>
           </TableRow>
         </TableHead>
@@ -491,36 +491,36 @@ function TcAnnouncementsTable({
         }}
         children={
           <>
-            <div className="flex justify-end p-4">
+            <div className='flex justify-end p-4'>
               <AiOutlineClose
-                data-testid="close-icon"
-                className="cursor-pointer"
+                data-testid='close-icon'
+                className='cursor-pointer'
                 size={24}
                 onClick={() => setDeleteConfirmDialogOpen(false)}
               />
             </div>
-            <div className="flex flex-col mx-auto py-1">
+            <div className='mx-auto flex flex-col py-1'>
               <TcText
-                text="Confirm Delete Announcements"
-                variant="h6"
-                className="pb-4  text-center"
+                text='Confirm Delete Announcements'
+                variant='h6'
+                className='pb-4  text-center'
               />
-              <div className="space-y-4 pb-6">
+              <div className='space-y-4 pb-6'>
                 <TcText
-                  text="Are you sure you want to delete schaduled announcements?"
-                  variant="body2"
+                  text='Are you sure you want to delete schaduled announcements?'
+                  variant='body2'
                 />
-                <div className="flex items-center space-x-3 py-3">
+                <div className='flex items-center space-x-3 py-3'>
                   <TcButton
                     text={'Cancel'}
-                    className="w-full"
-                    variant="outlined"
+                    className='w-full'
+                    variant='outlined'
                     onClick={() => setDeleteConfirmDialogOpen(false)}
                   />
                   <TcButton
                     text={'Confirm'}
-                    className="w-full"
-                    variant="contained"
+                    className='w-full'
+                    variant='contained'
                     onClick={() =>
                       selectedAnnouncementId &&
                       handleDeleteAnnouncements(selectedAnnouncementId)
diff --git a/src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx b/src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx
index 3e06c7ac..5b1eee69 100644
--- a/src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx
+++ b/src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx
@@ -46,7 +46,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
     <>
       <TcButton
         text={buttonLabel}
-        variant="contained"
+        variant='contained'
         disabled={isDisabled}
         onClick={() => setConfirmSchadulerDialog(true)}
       />
@@ -62,36 +62,36 @@ function TcConfirmSchaduledAnnouncementsDialog({
         }}
         children={
           <>
-            <div className="flex justify-end p-4">
+            <div className='flex justify-end p-4'>
               <AiOutlineClose
-                data-testid="close-icon"
-                className="cursor-pointer"
+                data-testid='close-icon'
+                className='cursor-pointer'
                 size={24}
                 onClick={() => setConfirmSchadulerDialog(false)}
               />
             </div>
-            <div className="flex flex-col w-4/5 mx-auto py-1">
+            <div className='mx-auto flex w-4/5 flex-col py-1'>
               <TcText
-                text="Confirm Schedule"
-                variant="h6"
-                className="pb-4  text-center"
+                text='Confirm Schedule'
+                variant='h6'
+                className='pb-4  text-center'
               />
-              <div className="space-y-2">
-                <div className="flex items-center space-x-1">
-                  <FaDiscord size={20} className="text-gray-500" />
+              <div className='space-y-2'>
+                <div className='flex items-center space-x-1'>
+                  <FaDiscord size={20} className='text-gray-500' />
                   <TcText
                     text={'Discord announcements scheduled for:'}
-                    variant="body2"
-                    className="text-left"
+                    variant='body2'
+                    className='text-left'
                   />
                 </div>
-                <div className="flex flex-col">
-                  <div className="flex items-center justify-between">
+                <div className='flex flex-col'>
+                  <div className='flex items-center justify-between'>
                     <TcText
                       text={'Public Message to:'}
                       fontWeight={500}
-                      variant="subtitle2"
-                      className="text-left text-gray-400"
+                      variant='subtitle2'
+                      className='text-left text-gray-400'
                     />
                     <TcText
                       text={
@@ -99,7 +99,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
                           ? formatDateToLocalTimezone(schaduledDate)
                           : ''
                       }
-                      variant="subtitle2"
+                      variant='subtitle2'
                     />
                   </div>
                   {selectedChannels
@@ -107,13 +107,13 @@ function TcConfirmSchaduledAnnouncementsDialog({
                     .join(', ')}
                 </div>
                 {selectedUsernames && selectedUsernames.length > 0 ? (
-                  <div className="flex flex-col">
-                    <div className="flex items-center justify-between">
+                  <div className='flex flex-col'>
+                    <div className='flex items-center justify-between'>
                       <TcText
                         text={'Private Message to these user(s):'}
                         fontWeight={500}
-                        variant="subtitle2"
-                        className="text-left text-gray-400"
+                        variant='subtitle2'
+                        className='text-left text-gray-400'
                       />
                       <TcText
                         text={
@@ -121,7 +121,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
                             ? formatDateToLocalTimezone(schaduledDate)
                             : ''
                         }
-                        variant="subtitle2"
+                        variant='subtitle2'
                       />{' '}
                     </div>
                     {selectedChannels
@@ -132,13 +132,13 @@ function TcConfirmSchaduledAnnouncementsDialog({
                   ''
                 )}
                 {selectedRoles && selectedRoles.length > 0 ? (
-                  <div className="flex flex-col">
-                    <div className="flex items-center justify-between">
+                  <div className='flex flex-col'>
+                    <div className='flex items-center justify-between'>
                       <TcText
                         text={'Private Message to these role(s):'}
                         fontWeight={500}
-                        variant="subtitle2"
-                        className="text-left text-gray-400"
+                        variant='subtitle2'
+                        className='text-left text-gray-400'
                       />
                       <TcText
                         text={
@@ -146,7 +146,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
                             ? formatDateToLocalTimezone(schaduledDate)
                             : ''
                         }
-                        variant="subtitle2"
+                        variant='subtitle2'
                       />
                     </div>
                     {selectedRoles.map((role) => `#${role.name}`).join(', ')}
@@ -155,10 +155,10 @@ function TcConfirmSchaduledAnnouncementsDialog({
                   ''
                 )}
               </div>
-              <div className="py-6 w-full">
+              <div className='w-full py-6'>
                 <TcButton
                   text={'Confirm'}
-                  variant="contained"
+                  variant='contained'
                   onClick={() => {
                     setConfirmSchadulerDialog(false);
                     handleCreateAnnouncements(false);
diff --git a/src/components/announcements/TcTimeZone.tsx b/src/components/announcements/TcTimeZone.tsx
index b9fdc857..2b85b42c 100644
--- a/src/components/announcements/TcTimeZone.tsx
+++ b/src/components/announcements/TcTimeZone.tsx
@@ -55,14 +55,14 @@ function TcTimeZone({ handleZone }: ITcTimeZoneProps) {
   }, [activeZone]);
 
   return (
-    <div className="w-full md:w-auto">
+    <div className='w-full md:w-auto'>
       <TcButton
         text={activeZone}
-        variant="outlined"
+        variant='outlined'
         sx={{
           height: '2.4rem',
         }}
-        startIcon={<FaGlobeAmericas data-testid="globe-icon" />}
+        startIcon={<FaGlobeAmericas data-testid='globe-icon' />}
         aria-describedby={id}
         onClick={handleClick}
       />
@@ -75,18 +75,18 @@ function TcTimeZone({ handleZone }: ITcTimeZoneProps) {
           style: { width: 'auto' },
         }}
         content={
-          <div className="px-2">
-            <div className="bg-white sticky top-0 pt-3">
+          <div className='px-2'>
+            <div className='sticky top-0 bg-white pt-3'>
               <TcInput
-                label="Search timezone"
-                variant="filled"
-                placeholder="Enter here..."
+                label='Search timezone'
+                variant='filled'
+                placeholder='Enter here...'
                 sx={{
                   width: 'auto',
                 }}
                 InputProps={{
                   startAdornment: (
-                    <InputAdornment position="start">
+                    <InputAdornment position='start'>
                       <MdSearch size={20} />
                     </InputAdornment>
                   ),
@@ -94,19 +94,19 @@ function TcTimeZone({ handleZone }: ITcTimeZoneProps) {
                 onChange={searchZones}
               />
             </div>
-            <ul className="w-full px-3 h-64 overflow-y-scroll">
+            <ul className='h-64 w-full overflow-y-scroll px-3'>
               {zones.length > 0 ? (
                 zones.map((el) => (
                   <li
                     key={el}
-                    className="py-2 hover:bg-lite px-3 cursor-pointer flex w-full text-sm flex-row justify-between"
+                    className='flex w-full cursor-pointer flex-row justify-between py-2 px-3 text-sm hover:bg-lite'
                     onClick={() => handleTimeZoneSelect(el)}
                   >
                     <div>{el}</div>
                   </li>
                 ))
               ) : (
-                <div className="mx-auto py-12 text-gray-300 px-12 w-full text-center">
+                <div className='mx-auto w-full py-12 px-12 text-center text-gray-300'>
                   Not founded
                 </div>
               )}
diff --git a/src/components/announcements/create/TcIconContainer.tsx b/src/components/announcements/create/TcIconContainer.tsx
index 4b5c68a0..6020709f 100644
--- a/src/components/announcements/create/TcIconContainer.tsx
+++ b/src/components/announcements/create/TcIconContainer.tsx
@@ -22,7 +22,7 @@ interface ITcIconContainerProps {
  */
 function TcIconContainer({ children }: ITcIconContainerProps): JSX.Element {
   return (
-    <div className="h-10 w-10 rounded-full bg-gray-100 flex justify-center items-center">
+    <div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-100'>
       {children}
     </div>
   );
diff --git a/src/components/announcements/create/privateMessaageContainer/TcPrivateMessageContainer.tsx b/src/components/announcements/create/privateMessaageContainer/TcPrivateMessageContainer.tsx
index 5d7f4a9f..28b94082 100644
--- a/src/components/announcements/create/privateMessaageContainer/TcPrivateMessageContainer.tsx
+++ b/src/components/announcements/create/privateMessaageContainer/TcPrivateMessageContainer.tsx
@@ -134,19 +134,19 @@ function TcPrivateMessageContainer({
   }, [isEdit, privateAnnouncementsData]);
 
   return (
-    <div className="space-y-3">
-      <div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-1 md:space-y-0">
-        <div className="flex flex-col md:flex-row md:items-center md:space-x-3">
+    <div className='space-y-3'>
+      <div className='flex flex-col space-y-1 md:flex-row md:items-center md:justify-between md:space-y-0'>
+        <div className='flex flex-col md:flex-row md:items-center md:space-x-3'>
           <TcIconContainer>
             <MdOutlineAnnouncement size={20} />
           </TcIconContainer>
           <TcText
-            text="Private Message (optional)"
-            variant="body1"
-            fontWeight="700"
+            text='Private Message (optional)'
+            variant='body1'
+            fontWeight='700'
           />
           <FormControlLabel
-            className="mx-auto md:mx-0"
+            className='mx-auto md:mx-0'
             control={
               <TcSwitch
                 onChange={handlePrivateMessageChange}
@@ -154,7 +154,7 @@ function TcPrivateMessageContainer({
               />
             }
             label={
-              <div className="flex items-center space-x-1">
+              <div className='flex items-center space-x-1'>
                 <TcIconWithTooltip
                   tooltipText={
                     'Community members who have their DMs open will receive a DM. Members who have their DMs closed, will receive a private message inside the server (only they can see it). Additionally, a public message will always be sent with instructions to verify the legitimacy of the bot and announcement by checking the bot ID.'
@@ -164,11 +164,11 @@ function TcPrivateMessageContainer({
             }
           />
         </div>
-        <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row md:justify-end md:space-x-3 items-center">
+        <div className='flex flex-col items-center space-y-3 md:flex-row md:justify-end md:space-y-0 md:space-x-3'>
           <TcButtonGroup
             disableElevation
             disabled={!privateMessage}
-            className="w-full"
+            className='w-full'
           >
             {messageTypesArray.map((el) => (
               <TcButton
@@ -200,20 +200,20 @@ function TcPrivateMessageContainer({
         </div>
       </div>
       {privateMessage && (
-        <div className="space-y-1.5">
+        <div className='space-y-1.5'>
           <div>
-            <TcText text="Send message to:" variant="subtitle1" />
+            <TcText text='Send message to:' variant='subtitle1' />
             <TcText
-              text="Choose one or more user selection criteria for DM recipients. If multiple criteria are selected (e.g., Users + Roles), users matching either will be messaged."
-              variant="caption"
-              className="text-gray-400"
+              text='Choose one or more user selection criteria for DM recipients. If multiple criteria are selected (e.g., Users + Roles), users matching either will be messaged.'
+              variant='caption'
+              className='text-gray-400'
             />
           </div>
-          <div className="flex flex-col md:flex-row justify-between space-y-3 md:space-y-0 md:space-x-3">
+          <div className='flex flex-col justify-between space-y-3 md:flex-row md:space-y-0 md:space-x-3'>
             <FormControl
-              variant="filled"
+              variant='filled'
               fullWidth
-              size="medium"
+              size='medium'
               disabled={
                 messageType !== MessageType.Both &&
                 messageType !== MessageType.RoleOnly
@@ -230,9 +230,9 @@ function TcPrivateMessageContainer({
               />
             </FormControl>
             <FormControl
-              variant="filled"
+              variant='filled'
               fullWidth
-              size="medium"
+              size='medium'
               disabled={
                 messageType !== MessageType.Both &&
                 messageType !== MessageType.UserOnly
@@ -250,18 +250,18 @@ function TcPrivateMessageContainer({
             </FormControl>
           </div>
           <div>
-            <TcText text="Write message here:" variant="subtitle1" />
+            <TcText text='Write message here:' variant='subtitle1' />
             <TcText
               text="Personalize your messages with dynamic variables like {{{username}}}, which the tool replaces automatically with the recipient's username."
-              variant="caption"
-              className="text-gray-400"
+              variant='caption'
+              className='text-gray-400'
             />
           </div>
-          <FormControl variant="filled" fullWidth size="medium">
+          <FormControl variant='filled' fullWidth size='medium'>
             <TcInput
-              label="Message"
-              variant="filled"
-              placeholder="Write your message here"
+              label='Message'
+              variant='filled'
+              placeholder='Write your message here'
               rows={2}
               multiline
               value={message}
diff --git a/src/components/announcements/create/privateMessaageContainer/TcPrivateMessagePreviewDialog.tsx b/src/components/announcements/create/privateMessaageContainer/TcPrivateMessagePreviewDialog.tsx
index 6be77de4..49ea5ebe 100644
--- a/src/components/announcements/create/privateMessaageContainer/TcPrivateMessagePreviewDialog.tsx
+++ b/src/components/announcements/create/privateMessaageContainer/TcPrivateMessagePreviewDialog.tsx
@@ -21,8 +21,8 @@ function TcPublicMessagePreviewDialog({
   return (
     <>
       <TcButton
-        text="Preview"
-        variant="outlined"
+        text='Preview'
+        variant='outlined'
         sx={{
           maxWidth: {
             xs: '100%',
@@ -49,56 +49,56 @@ function TcPublicMessagePreviewDialog({
         }}
         children={
           <>
-            <div className="flex justify-end p-4">
+            <div className='flex justify-end p-4'>
               <AiOutlineClose
-                data-testid="close-icon"
-                className="cursor-pointer"
+                data-testid='close-icon'
+                className='cursor-pointer'
                 size={24}
                 onClick={() => setPreviewDialogOpen(false)}
               />
             </div>
-            <div className="flex flex-col w-4/5 mx-auto text-center py-1">
+            <div className='mx-auto flex w-4/5 flex-col py-1 text-center'>
               <TcText
-                text="Preview Private Message"
-                variant="h5"
-                className="pb-4"
+                text='Preview Private Message'
+                variant='h5'
+                className='pb-4'
               />
-              <div className="flex flex-col items-start">
-                <div className="flex flex-wrap items-center space-x-1">
+              <div className='flex flex-col items-start'>
+                <div className='flex flex-wrap items-center space-x-1'>
                   <TcText
-                    text="Role(s):"
-                    variant="caption"
+                    text='Role(s):'
+                    variant='caption'
                     fontWeight={700}
-                    className="text-gray-500"
+                    className='text-gray-500'
                   />
                   {selectedRoles &&
                     selectedRoles.map((role, index, array) => (
-                      <span key={role} className="flex items-baseline">
+                      <span key={role} className='flex items-baseline'>
                         {'@'}
                         <TcText
                           text={role}
-                          variant="caption"
-                          fontWeight="700"
+                          variant='caption'
+                          fontWeight='700'
                         />
                         {index < array.length - 1 && ', '}
                       </span>
                     ))}
                 </div>
-                <div className="flex flex-wrap items-center space-x-1">
+                <div className='flex flex-wrap items-center space-x-1'>
                   <TcText
-                    text="Username(s):"
-                    variant="caption"
+                    text='Username(s):'
+                    variant='caption'
                     fontWeight={700}
-                    className="text-gray-500"
+                    className='text-gray-500'
                   />
                   {selectedUsernames &&
                     selectedUsernames.map((username, index, array) => (
-                      <span key={username} className="flex items-center">
+                      <span key={username} className='flex items-center'>
                         {'#'}
                         <TcText
                           text={username}
-                          variant="caption"
-                          fontWeight="700"
+                          variant='caption'
+                          fontWeight='700'
                         />
                         {index < array.length - 1 && ', '}
                       </span>
@@ -107,13 +107,13 @@ function TcPublicMessagePreviewDialog({
               </div>
               <TcText
                 text={textMessage}
-                variant="body1"
-                className="text-left mt-2"
+                variant='body1'
+                className='mt-2 text-left'
               />
-              <div className="py-6 w-full">
+              <div className='w-full py-6'>
                 <TcButton
                   text={'Confirm'}
-                  variant="contained"
+                  variant='contained'
                   onClick={() => setPreviewDialogOpen(false)}
                   sx={{ width: '100%' }}
                 />
diff --git a/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx
index 9fa74550..ab807cc8 100644
--- a/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx
+++ b/src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx
@@ -157,7 +157,7 @@ function TcRolesAutoComplete({
       multiple={true}
       loading={isLoading}
       loadingText={
-        <div className="text-center">
+        <div className='text-center'>
           <CircularProgress size={24} />
         </div>
       }
@@ -175,7 +175,7 @@ function TcRolesAutoComplete({
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
           <Chip
-            variant="outlined"
+            variant='outlined'
             label={
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <span
@@ -194,7 +194,7 @@ function TcRolesAutoComplete({
                 {option.name}
               </div>
             }
-            size="small"
+            size='small'
             sx={{
               borderRadius: '4px',
               borderColor: '#D1D1D1',
diff --git a/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx b/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx
index 7ffc8edc..66a3a9f1 100644
--- a/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx
+++ b/src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx
@@ -165,7 +165,7 @@ function TcUsersAutoComplete({
       multiple={true}
       loading={isLoading}
       loadingText={
-        <div className="text-center">
+        <div className='text-center'>
           <CircularProgress size={24} />
         </div>
       }
@@ -185,7 +185,7 @@ function TcUsersAutoComplete({
       disableCloseOnSelect
       renderOption={(props, option) => (
         <li {...props} key={option.discordId}>
-          <div className="flex items-center space-x-2">
+          <div className='flex items-center space-x-2'>
             <TcAvatar
               sx={{ height: '28px', width: '28px' }}
               src={
@@ -193,14 +193,14 @@ function TcUsersAutoComplete({
                   ? `${conf.DISCORD_CDN}avatars/${option.discordId}/${option?.avatar}.png`
                   : ''
               }
-              alt="User Avatar"
+              alt='User Avatar'
             />
             <TcText text={option.ngu} />
             <TcText
               text={`${
                 option.username ? '@' + truncateCenter(option.username, 10) : ''
               }`}
-              className="text-gray-500"
+              className='text-gray-500'
             />
           </div>
         </li>
@@ -208,9 +208,9 @@ function TcUsersAutoComplete({
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
           <Chip
-            variant="outlined"
+            variant='outlined'
             label={
-              <div className="flex items-center space-x-1">
+              <div className='flex items-center space-x-1'>
                 <div>
                   <span
                     style={{
@@ -222,7 +222,7 @@ function TcUsersAutoComplete({
                       marginRight: '5px',
                     }}
                   />
-                  <TcText text={option.ngu} variant="caption" />
+                  <TcText text={option.ngu} variant='caption' />
                 </div>
                 <TcText
                   text={`${
@@ -230,12 +230,12 @@ function TcUsersAutoComplete({
                       ? '@' + truncateCenter(option.username, 10)
                       : ''
                   }`}
-                  variant="caption"
-                  className="text-gray-500"
+                  variant='caption'
+                  className='text-gray-500'
                 />
               </div>
             }
-            size="small"
+            size='small'
             sx={{
               borderRadius: '4px',
               borderColor: '#D1D1D1',
diff --git a/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx b/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx
index fba55ba9..274f7e22 100644
--- a/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx
+++ b/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx
@@ -119,13 +119,13 @@ function TcPublicMessageContainer({
   };
 
   return (
-    <div className="space-y-3">
-      <div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-1 md:space-y-0">
-        <div className="flex flex-row items-center space-x-3">
+    <div className='space-y-3'>
+      <div className='flex flex-col space-y-1 md:flex-row md:items-center md:justify-between md:space-y-0'>
+        <div className='flex flex-row items-center space-x-3'>
           <TcIconContainer>
             <MdAnnouncement size={20} />
           </TcIconContainer>
-          <TcText text="Public Message" variant="body1" fontWeight="700" />
+          <TcText text='Public Message' variant='body1' fontWeight='700' />
         </div>
         <TcPublicMessagePreviewDialog
           textMessage={message}
@@ -133,14 +133,14 @@ function TcPublicMessageContainer({
           selectedChannels={selectedChannels.map((channel) => channel.label)}
         />
       </div>
-      <div className="space-y-1.5">
-        <FormControl variant="filled" fullWidth size="medium">
-          <InputLabel id="select-standard-label">Select Channels</InputLabel>
+      <div className='space-y-1.5'>
+        <FormControl variant='filled' fullWidth size='medium'>
+          <InputLabel id='select-standard-label'>Select Channels</InputLabel>
           <TcSelect
             multiple
-            labelId="select-standard-label"
-            id="select-standard-label"
-            label="Platform"
+            labelId='select-standard-label'
+            id='select-standard-label'
+            label='Platform'
             value={selectedChannels}
             open={isDropdownVisible}
             onOpen={toggleDropdownVisibility}
@@ -150,15 +150,15 @@ function TcPublicMessageContainer({
                 .join(', ')
             }
           >
-            <div className="p-4 space-y-3">
-              <div className="border border-gray-300 rounded-md">
+            <div className='space-y-3 p-4'>
+              <div className='rounded-md border border-gray-300'>
                 <TcPlatformChannelList refreshTrigger={false} />
               </div>
               <TcPermissionHints />
-              <div className="flex justify-end">
+              <div className='flex justify-end'>
                 <TcButton
-                  text="Save"
-                  variant="contained"
+                  text='Save'
+                  variant='contained'
                   sx={{ minWidth: '12rem' }}
                   onClick={handleSaveChannels}
                 />
@@ -168,26 +168,26 @@ function TcPublicMessageContainer({
           {showError && (
             <FormHelperText>
               <TcText
-                text="Please select at least one channel."
-                variant="caption"
-                className="text-red-500"
+                text='Please select at least one channel.'
+                variant='caption'
+                className='text-red-500'
               />
             </FormHelperText>
           )}
         </FormControl>
-        <div className="flex flex-col">
-          <TcText text="Write message here:" variant="subtitle1" />
+        <div className='flex flex-col'>
+          <TcText text='Write message here:' variant='subtitle1' />
           <TcText
-            text="Our bot will distribute the announcement through selected channels with the required access to share the designated message."
-            variant="caption"
-            className="text-gray-400"
+            text='Our bot will distribute the announcement through selected channels with the required access to share the designated message.'
+            variant='caption'
+            className='text-gray-400'
           />
         </div>
-        <FormControl variant="filled" fullWidth size="medium">
+        <FormControl variant='filled' fullWidth size='medium'>
           <TcInput
-            label="Message"
-            variant="filled"
-            placeholder="Write your message here"
+            label='Message'
+            variant='filled'
+            placeholder='Write your message here'
             rows={3}
             multiline
             value={message}
diff --git a/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.spec.tsx b/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.spec.tsx
index 1a1e2f98..45678482 100644
--- a/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.spec.tsx
+++ b/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.spec.tsx
@@ -73,7 +73,7 @@ describe('TcPublicMessagePreviewDialog', () => {
   it('preview button is disabled when isPreviewDialogEnabled is false', () => {
     render(
       <TcPublicMessagePreviewDialog
-        textMessage="Sample Message"
+        textMessage='Sample Message'
         isPreviewDialogEnabled={false}
       />
     );
diff --git a/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.tsx b/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.tsx
index 15274c87..9dd19318 100644
--- a/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.tsx
+++ b/src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.tsx
@@ -19,8 +19,8 @@ function TcPublicMessagePreviewDialog({
   return (
     <>
       <TcButton
-        text="Preview"
-        variant="outlined"
+        text='Preview'
+        variant='outlined'
         sx={{
           maxWidth: {
             xs: '100%',
@@ -43,35 +43,35 @@ function TcPublicMessagePreviewDialog({
         }}
         children={
           <>
-            <div className="flex justify-end p-4">
+            <div className='flex justify-end p-4'>
               <AiOutlineClose
-                data-testid="close-icon"
-                className="cursor-pointer"
+                data-testid='close-icon'
+                className='cursor-pointer'
                 size={24}
                 onClick={() => setPreviewDialogOpen(false)}
               />
             </div>
-            <div className="flex flex-col w-4/5 mx-auto text-center py-1">
+            <div className='mx-auto flex w-4/5 flex-col py-1 text-center'>
               <TcText
-                text="Preview Public Message"
-                variant="h5"
-                className="pb-4"
+                text='Preview Public Message'
+                variant='h5'
+                className='pb-4'
               />
-              <div className="flex flex-wrap items-center space-x-1">
+              <div className='flex flex-wrap items-center space-x-1'>
                 <TcText
-                  text="Channels:"
-                  variant="caption"
+                  text='Channels:'
+                  variant='caption'
                   fontWeight={700}
-                  className="text-gray-500"
+                  className='text-gray-500'
                 />
                 {selectedChannels &&
                   selectedChannels.map((channel, index, array) => (
-                    <span key={channel} className="flex items-center">
+                    <span key={channel} className='flex items-center'>
                       {'#'}
                       <TcText
                         text={channel}
-                        variant="caption"
-                        fontWeight="700"
+                        variant='caption'
+                        fontWeight='700'
                       />
                       {index < array.length - 1 && ', '}
                     </span>
@@ -79,13 +79,13 @@ function TcPublicMessagePreviewDialog({
               </div>
               <TcText
                 text={textMessage}
-                variant="body1"
-                className="text-left"
+                variant='body1'
+                className='text-left'
               />
-              <div className="py-6 w-full">
+              <div className='w-full py-6'>
                 <TcButton
                   text={'Confirm'}
-                  variant="contained"
+                  variant='contained'
                   onClick={() => setPreviewDialogOpen(false)}
                   sx={{ width: '100%' }}
                 />
diff --git a/src/components/announcements/create/scheduleAnnouncement/TcDateTimePopover.tsx b/src/components/announcements/create/scheduleAnnouncement/TcDateTimePopover.tsx
index fbe8f715..1baa3fb1 100644
--- a/src/components/announcements/create/scheduleAnnouncement/TcDateTimePopover.tsx
+++ b/src/components/announcements/create/scheduleAnnouncement/TcDateTimePopover.tsx
@@ -41,8 +41,8 @@ function TcDateTimePopover({
   const tabContent = [
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <StaticDatePicker
-        displayStaticWrapperAs="desktop"
-        openTo="day"
+        displayStaticWrapperAs='desktop'
+        openTo='day'
         value={selectedDate}
         onChange={handleDateChange}
         shouldDisableDate={disablePastDates}
@@ -50,7 +50,7 @@ function TcDateTimePopover({
     </LocalizationProvider>,
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <StaticTimePicker
-        displayStaticWrapperAs="desktop"
+        displayStaticWrapperAs='desktop'
         value={selectedTime}
         ampm={false}
         onChange={handleTimeChange}
@@ -69,24 +69,24 @@ function TcDateTimePopover({
         horizontal: 'left',
       }}
       content={
-        <div className="flex flex-col space-y-2">
+        <div className='flex flex-col space-y-2'>
           {tabContent[activeTab]}
 
           <TcTabs
             value={activeTab}
             onChange={(e, newValue) => setActiveTab(newValue)}
-            indicatorColor="secondary"
-            className="w-full border-t border-gray-200"
+            indicatorColor='secondary'
+            className='w-full border-t border-gray-200'
           >
             <TcTab
               icon={<FiCalendar size={20} />}
-              className="w-1/2"
-              data-testid="calendar-icon"
+              className='w-1/2'
+              data-testid='calendar-icon'
             />
             <TcTab
               icon={<MdAccessTime size={20} />}
-              className="w-1/2"
-              data-testid="time-icon"
+              className='w-1/2'
+              data-testid='time-icon'
             />
           </TcTabs>
         </div>
diff --git a/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx b/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx
index 394f88f4..1f317c10 100644
--- a/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx
+++ b/src/components/announcements/create/scheduleAnnouncement/TcScheduleAnnouncement.tsx
@@ -94,28 +94,28 @@ function TcScheduleAnnouncement({
   }, [isEdit, preSelectedTime]);
 
   return (
-    <div className="space-y-3">
-      <div className="flex flex-col md:flex-row md:justify-start md:space-x-3 md:items-center space-y-3 md:space-y-0">
-        <div className="flex items-center space-x-3">
+    <div className='space-y-3'>
+      <div className='flex flex-col space-y-3 md:flex-row md:items-center md:justify-start md:space-x-3 md:space-y-0'>
+        <div className='flex items-center space-x-3'>
           <TcIconContainer>
-            <MdCalendarMonth size={20} data-testid="MdCalendarMonth" />
+            <MdCalendarMonth size={20} data-testid='MdCalendarMonth' />
           </TcIconContainer>
-          <TcText text="Select Date" variant="body1" fontWeight="bold" />
+          <TcText text='Select Date' variant='body1' fontWeight='bold' />
         </div>
         <TcButton
           text={dateTimeDisplay}
           startIcon={<MdCalendarMonth />}
           disableElevation={true}
-          className="border border-black bg-gray-100 shadow-md"
+          className='border border-black bg-gray-100 shadow-md'
           sx={{ color: 'black', height: '2.4rem', paddingX: '1rem' }}
           aria-describedby={id}
           onClick={handleOpen}
         />
         {!isDateValid && (
           <TcText
-            text="Selected Date should be greater that now."
-            variant="caption"
-            className="text-red-500"
+            text='Selected Date should be greater that now.'
+            variant='caption'
+            className='text-red-500'
           />
         )}
         <TcDateTimePopover
diff --git a/src/components/announcements/create/selectPlatform/TcSelectPlatform.tsx b/src/components/announcements/create/selectPlatform/TcSelectPlatform.tsx
index 8fac03f6..001b9061 100644
--- a/src/components/announcements/create/selectPlatform/TcSelectPlatform.tsx
+++ b/src/components/announcements/create/selectPlatform/TcSelectPlatform.tsx
@@ -24,27 +24,27 @@ interface ITcSelectPlatformProps {
 
 function TcSelectPlatform({ isEdit }: ITcSelectPlatformProps) {
   return (
-    <div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-3 md:space-y-0">
+    <div className='flex flex-col space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0'>
       <div>
         <TcText
           text={`${isEdit ? 'Edit' : 'Create'} Announcement`}
-          variant="h6"
-          fontWeight="bold"
+          variant='h6'
+          fontWeight='bold'
         />
         <TcText
-          text="Select a platform, enter your public and/or private messages below, finally schedule it in and then you’re good to go!"
-          variant="subtitle2"
-          fontWeight="400"
-          className="text-gray-400"
+          text='Select a platform, enter your public and/or private messages below, finally schedule it in and then you’re good to go!'
+          variant='subtitle2'
+          fontWeight='400'
+          className='text-gray-400'
         />
       </div>
-      <FormControl variant="filled" sx={{ minWidth: 180 }}>
-        <InputLabel id="select-standard-label">Select Platform</InputLabel>
+      <FormControl variant='filled' sx={{ minWidth: 180 }}>
+        <InputLabel id='select-standard-label'>Select Platform</InputLabel>
         <TcSelect
-          size="small"
-          labelId="select-standard-label"
-          id="select-standard-label"
-          label="Platform"
+          size='small'
+          labelId='select-standard-label'
+          id='select-standard-label'
+          label='Platform'
           defaultValue={1}
           options={announcementsPlatforms}
         />
diff --git a/src/components/centric/selectCommunity/TcCommunityListItems.tsx b/src/components/centric/selectCommunity/TcCommunityListItems.tsx
index eba8f610..e1e83230 100644
--- a/src/components/centric/selectCommunity/TcCommunityListItems.tsx
+++ b/src/components/centric/selectCommunity/TcCommunityListItems.tsx
@@ -76,10 +76,10 @@ function TcCommunityListItems({
       return (
         <Image
           src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
-          width="100"
-          height="100"
+          width='100'
+          height='100'
           alt={activeCommunityPlatformIcon.metadata.name || ''}
-          className="rounded-full"
+          className='rounded-full'
         />
       );
     }
@@ -89,27 +89,27 @@ function TcCommunityListItems({
 
   if (communities.length === 0) {
     return (
-      <div className="py-8">
-        <TcText text="No community exist" variant={'body1'} color="gray" />
+      <div className='py-8'>
+        <TcText text='No community exist' variant={'body1'} color='gray' />
       </div>
     );
   }
 
   return (
-    <div className="flex justify-start flex-wrap mt-8 mx-2">
+    <div className='mx-2 mt-8 flex flex-wrap justify-start'>
       {communities.map((community, index) => (
         <div
           className={clsx(
             selectedCommunity?.id === community.id ? 'bg-gray-100' : '',
-            'flex-shrink-0 w-1/2 md:w-1/4 min-h-[150px] rounded text-center px-8 py-4 cursor-pointer space-y-2 hover:bg-gray-100 transition-all delay-75 ease-in'
+            'min-h-[150px] w-1/2 flex-shrink-0 cursor-pointer space-y-2 rounded px-8 py-4 text-center transition-all delay-75 ease-in hover:bg-gray-100 md:w-1/4'
           )}
           key={community.name + index}
           onClick={() => setSelectedCommunity(community)}
         >
           {community?.avatarURL ? (
-            <TcAvatar className="mx-auto" src={community.avatarURL} />
+            <TcAvatar className='mx-auto' src={community.avatarURL} />
           ) : (
-            <TcAvatar className="mx-auto">
+            <TcAvatar className='mx-auto'>
               {renderPlatformAvatar(community)}
             </TcAvatar>
           )}
diff --git a/src/components/centric/selectCommunity/TcSelectCommunity.tsx b/src/components/centric/selectCommunity/TcSelectCommunity.tsx
index d4b304db..5a71ce3c 100644
--- a/src/components/centric/selectCommunity/TcSelectCommunity.tsx
+++ b/src/components/centric/selectCommunity/TcSelectCommunity.tsx
@@ -71,24 +71,24 @@ function TcSelectCommunity() {
   }
 
   return (
-    <div className="space-y-4" data-testid="tcselect-community">
+    <div className='space-y-4' data-testid='tcselect-community'>
       <TcText
-        text="Select your community"
+        text='Select your community'
         sx={{ typography: { xs: 'h5', md: 'h4' } }}
       />
       <TcText
-        text="You will be able to switch between the communities later"
-        variant="body1"
+        text='You will be able to switch between the communities later'
+        variant='body1'
       />
 
       <TcBoxContainer
         contentContainerChildren={
           <>
-            <div className="sticky top-0 z-10 bg-white py-2">
+            <div className='sticky top-0 z-10 bg-white py-2'>
               <TcInput
-                label="Community"
-                variant="filled"
-                placeholder="Write community name"
+                label='Community'
+                variant='filled'
+                placeholder='Write community name'
                 onChange={(e) => debouncedFetchCommunities(e.target.value)}
               />
             </div>
@@ -104,29 +104,29 @@ function TcSelectCommunity() {
             )}
           </>
         }
-        className="md:w-3/5 mx-auto border border-custom-gray min-h-[20rem] max-h-[25rem] overflow-y-scroll rounded-lg"
+        className='border-custom-gray mx-auto max-h-[25rem] min-h-[20rem] overflow-y-scroll rounded-lg border md:w-3/5'
       />
 
       <TcButton
-        text="Continue"
-        className="secondary"
-        variant="contained"
+        text='Continue'
+        className='secondary'
+        variant='contained'
         sx={{ width: '15rem', padding: '0.5rem' }}
         disabled={!activeCommunity}
         onClick={handleSelectedCommunity}
       />
 
-      <hr className="w-6/12 mx-auto" />
+      <hr className='mx-auto w-6/12' />
 
       <TcText
-        text="Create a new community account"
+        text='Create a new community account'
         sx={{ typography: { xs: 'body1', md: 'h6' } }}
       />
       <TcButton
         startIcon={<BsPlus />}
-        text="Create"
+        text='Create'
         sx={{ width: '15rem', padding: '0.5rem' }}
-        variant="outlined"
+        variant='outlined'
         onClick={() => router.push('/centric/create-new-community')}
       />
     </div>
diff --git a/src/components/communitySettings/TcIntegrationCard.tsx b/src/components/communitySettings/TcIntegrationCard.tsx
index 287ae8b9..fccff753 100644
--- a/src/components/communitySettings/TcIntegrationCard.tsx
+++ b/src/components/communitySettings/TcIntegrationCard.tsx
@@ -10,9 +10,9 @@ function TcIntegrationCard({ children, ...props }: ITcIntegrationCardProps) {
   return (
     <TcCard
       elevation={1}
-      className="w-[8.75rem] h-[10rem]"
+      className='h-[10rem] w-[8.75rem]'
       children={children}
-      data-testid="tc-integration-card"
+      data-testid='tc-integration-card'
       {...props}
     />
   );
diff --git a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
index 9d302bc7..e8f89e91 100644
--- a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
@@ -4,7 +4,7 @@ import { IntegrationPlatform } from '../../../utils/enums';
 
 function TcAvailableIntegrations() {
   return (
-    <div className="flex flex-row space-x-5 overflow-x-scroll md:overflow-x-hidden py-2">
+    <div className='flex flex-row space-x-5 overflow-x-scroll py-2 md:overflow-x-hidden'>
       {Object.values(IntegrationPlatform).map((platform, index) => (
         <TcAvailableIntegrationsItem
           disabled={platform !== 'Discord'}
diff --git a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrationsItem.tsx b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrationsItem.tsx
index 798a0092..a0da55ed 100644
--- a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrationsItem.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrationsItem.tsx
@@ -24,25 +24,25 @@ function TcAvailableIntegrationsItem({
 
   return (
     <div
-      data-testid="integration-item"
+      data-testid='integration-item'
       data-platform={integrationPlatform}
-      className="relative"
+      className='relative'
     >
       <TcIntegrationCard>
-        <div className="pt-4 px-2 text-center space-y-4">
-          <TcText text={integrationPlatform} variant="body1" />
-          <div className="flex justify-center">
+        <div className='space-y-4 px-2 pt-4 text-center'>
+          <TcText text={integrationPlatform} variant='body1' />
+          <div className='flex justify-center'>
             <TcIntegrationIcon
               platform={integrationPlatform}
               size={34}
-              data-testid="integration-icon"
+              data-testid='integration-icon'
             />
           </div>
           <TcButton
-            text="Connect"
+            text='Connect'
             startIcon={<BsPlus />}
-            className="max-w-full"
-            size="small"
+            className='max-w-full'
+            size='small'
             onClick={() => integratePlatform()}
           />
         </div>
@@ -50,8 +50,8 @@ function TcAvailableIntegrationsItem({
 
       {disabled && (
         <div
-          className="absolute inset-0 bg-gray-50 opacity-30"
-          aria-hidden="true"
+          className='absolute inset-0 bg-gray-50 opacity-30'
+          aria-hidden='true'
         />
       )}
     </div>
diff --git a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx
index 7f5ee6e2..bac4bfe4 100644
--- a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx
@@ -49,17 +49,17 @@ function TcCommunityIntegrations() {
 
   return (
     <>
-      <TcText text="Integration" variant={'h6'} />
-      <div className="space-y-5">
+      <TcText text='Integration' variant={'h6'} />
+      <div className='space-y-5'>
         {fetchedPlatforms?.results.length > 0 ? (
-          <div className="space-y-4 md:mb-8">
+          <div className='space-y-4 md:mb-8'>
             {loading ? (
-              <Loading height="10rem" />
+              <Loading height='10rem' />
             ) : (
               <>
                 <TcText
-                  text="Platforms currently connected to your community account"
-                  variant="body2"
+                  text='Platforms currently connected to your community account'
+                  variant='body2'
                 />
                 <TcConnectedPlatforms
                   connectedPlatforms={fetchedPlatforms?.results}
@@ -70,10 +70,10 @@ function TcCommunityIntegrations() {
         ) : (
           ''
         )}
-        <div className="space-y-4">
+        <div className='space-y-4'>
           <TcText
-            text="Chose the platforms you want to connect with your community account"
-            variant="body2"
+            text='Chose the platforms you want to connect with your community account'
+            variant='body2'
           />
           <TcAvailableIntegrations />
         </div>
diff --git a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsConfirmDialog.tsx b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsConfirmDialog.tsx
index f3b27f8c..b58de451 100644
--- a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsConfirmDialog.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsConfirmDialog.tsx
@@ -33,26 +33,26 @@ function TcCommunityIntegrationsConfirmDialog({
         },
       }}
     >
-      <div className="flex justify-end p-4">
+      <div className='flex justify-end p-4'>
         <AiOutlineClose
-          className="cursor-pointer"
+          className='cursor-pointer'
           size={24}
           onClick={() => toggleDialog()}
         />
       </div>
-      <div className="flex flex-col w-4/5 mx-auto text-center p-5 space-y-5">
-        <div className="bg-[#F5F5F5] mx-auto rounded-full w-16 p-3">
-          <RiTimeLine className="mx-auto" size={38} />
+      <div className='mx-auto flex w-4/5 flex-col space-y-5 p-5 text-center'>
+        <div className='mx-auto w-16 rounded-full bg-[#F5F5F5] p-3'>
+          <RiTimeLine className='mx-auto' size={38} />
         </div>
-        <TcText text="Perfect, you're all set!" variant="h5" />
+        <TcText text="Perfect, you're all set!" variant='h5' />
         <TcText
-          text="Data import just started. It might take up to 12 hours to finish. Once it is done we will send you a message on Discord."
-          variant="body2"
+          text='Data import just started. It might take up to 12 hours to finish. Once it is done we will send you a message on Discord.'
+          variant='body2'
         />
-        <div className="py-6">
+        <div className='py-6'>
           <TcButton
             text={'I understand'}
-            variant="contained"
+            variant='contained'
             onClick={() => handleCloseDialog()}
           />
         </div>
diff --git a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx
index 15d6fe9b..4de5c86f 100644
--- a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx
@@ -76,43 +76,43 @@ function TcCommunityIntegrationsDialog() {
         }}
       >
         {loading ? (
-          <div className="flex justify-center items-center min-h-[400px]">
-            <Loading height="auto" size={30} />
+          <div className='flex min-h-[400px] items-center justify-center'>
+            <Loading height='auto' size={30} />
           </div>
         ) : (
           <>
             {' '}
-            <div className="flex justify-end p-4">
+            <div className='flex justify-end p-4'>
               <AiOutlineClose
-                className="cursor-pointer"
+                className='cursor-pointer'
                 size={24}
                 onClick={() => setOpenDialog(false)}
               />
             </div>
-            <div className="text-left px-16 pb-12">
-              <div className="space-y-4 pt-2">
+            <div className='px-16 pb-12 text-left'>
+              <div className='space-y-4 pt-2'>
                 <TcText
                   text={'Choose date period for data analysis'}
-                  variant="body1"
-                  fontWeight="bold"
+                  variant='body1'
+                  fontWeight='bold'
                 />
                 <TcText
                   text={
                     'You will be able to change date period and selected channels in the future.'
                   }
-                  variant="body2"
+                  variant='body2'
                 />
                 <TcPeriodRange
                   handleSelectedDate={(date) => setPlatfromAnalyzerDate(date)}
                 />
               </div>
-              <div className="space-y-4 pt-10">
+              <div className='space-y-4 pt-10'>
                 <TcPlatformChannelDialog />
               </div>
-              <div className="flex justify-center pt-12 pb-4">
+              <div className='flex justify-center pt-12 pb-4'>
                 <TcButton
                   text={'Continue'}
-                  variant="contained"
+                  variant='contained'
                   onClick={handlePatchPlatform}
                 />
               </div>
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.spec.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.spec.tsx
index 5a819c9d..0fd1513f 100644
--- a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.spec.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.spec.tsx
@@ -11,7 +11,7 @@ jest.mock('./TcConnectedPlatformsItem', () => {
     platform: any;
   }) {
     return (
-      <div data-testid="mock-connected-platforms-item">
+      <div data-testid='mock-connected-platforms-item'>
         {/* Render the platform's name for testing purposes */}
         {platform.name}
       </div>
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
index 9002121b..902ceeef 100644
--- a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
@@ -10,7 +10,7 @@ function TcConnectedPlatforms({
   connectedPlatforms,
 }: IConnectedPlatformsProps) {
   return (
-    <div className="flex flex-row space-x-5 overflow-x-scroll md:overflow-x-hidden py-2">
+    <div className='flex flex-row space-x-5 overflow-x-scroll py-2 md:overflow-x-hidden'>
       {connectedPlatforms?.map((platform: IPlatformProps, index: number) => (
         <TcConnectedPlatformsItem key={index} platform={platform} />
       ))}
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
index 8a3fc5a2..985664b5 100644
--- a/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
@@ -68,9 +68,9 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
   return (
     <TcIntegrationCard>
       <>
-        <div className="flex justify-end p-1.5">
+        <div className='flex justify-end p-1.5'>
           <BsThreeDots
-            className="cursor-pointer text-gray-400"
+            className='cursor-pointer text-gray-400'
             onClick={() =>
               router.push(
                 `/community-settings/platform/?platformId=${platform.id}`
@@ -78,19 +78,19 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
             }
           />
         </div>
-        <div className="text-center px-3 space-y-4">
-          <div className="space-y-2">
-            <div className="flex justify-center items-center space-x-1">
+        <div className='space-y-4 px-3 text-center'>
+          <div className='space-y-2'>
+            <div className='flex items-center justify-center space-x-1'>
               <TcText
                 text={capitalizeFirstChar(platform.name)}
-                variant="body1"
-                className="text-semibold"
+                variant='body1'
+                className='text-semibold'
               />
               <ClickAwayListener onClickAway={handleTooltipClose}>
                 <Tooltip
                   title={'Connected'}
                   arrow
-                  placement="right"
+                  placement='right'
                   enterTouchDelay={0}
                 >
                   <div
@@ -100,7 +100,7 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
                 </Tooltip>
               </ClickAwayListener>
             </div>
-            <div className="flex justify-center">
+            <div className='flex justify-center'>
               <TcIntegrationIcon
                 platform={
                   capitalizeFirstChar(platform.name) as IntegrationPlatform
@@ -110,14 +110,14 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
             </div>
           </div>
           {platform && (
-            <div className={clsx('flex items-center space-x-2 justify-center')}>
+            <div className={clsx('flex items-center justify-center space-x-2')}>
               <TcAvatar
                 src={
                   platform.metadata.profileImageUrl
                     ? platform.metadata.profileImageUrl
                     : `${conf.DISCORD_CDN}icons/${platform.metadata.id}/${platform?.metadata.icon}.png`
                 }
-                alt="User Avatar"
+                alt='User Avatar'
                 sx={{ width: 25, height: 25 }}
               />
               <TcText
@@ -127,7 +127,7 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
                     : platform.metadata.username,
                   15
                 )}
-                variant="caption"
+                variant='caption'
               />
             </div>
           )}
diff --git a/src/components/communitySettings/platform/TcCommunityName.tsx b/src/components/communitySettings/platform/TcCommunityName.tsx
index 3b6fc2a3..f37d4618 100644
--- a/src/components/communitySettings/platform/TcCommunityName.tsx
+++ b/src/components/communitySettings/platform/TcCommunityName.tsx
@@ -35,10 +35,10 @@ function TcCommunityName({ platform }: TccommunityName) {
       return (
         <Image
           src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
-          width="100"
-          height="100"
+          width='100'
+          height='100'
           alt={activeCommunityPlatformIcon.metadata.name || ''}
-          className="rounded-full"
+          className='rounded-full'
         />
       );
     }
@@ -47,25 +47,25 @@ function TcCommunityName({ platform }: TccommunityName) {
   };
 
   return (
-    <div className="flex justify-start space-x-4 items-center py-3">
+    <div className='flex items-center justify-start space-x-4 py-3'>
       {community && community.avatarURL ? (
         <TcAvatar
-          className="mx-auto"
+          className='mx-auto'
           src={community.avatarURL}
-          data-testid="tc-avatar"
+          data-testid='tc-avatar'
         />
       ) : (
-        <TcAvatar className="mx-auto" data-testid="tc-avatar">
+        <TcAvatar className='mx-auto' data-testid='tc-avatar'>
           {community ? renderPlatformAvatar(community) : <MdGroups size={28} />}
         </TcAvatar>
       )}
-      <div className="flex flex-col">
-        <TcText text={platform?.metadata?.name} variant="body1" />
+      <div className='flex flex-col'>
+        <TcText text={platform?.metadata?.name} variant='body1' />
         <TcText
           text={`Connected since ${moment(platform?.connectedAt).format(
             'D MMM YYYY'
           )}`}
-          variant="body2"
+          variant='body2'
         />
       </div>
     </div>
diff --git a/src/components/communitySettings/platform/TcDisconnectPlatform.tsx b/src/components/communitySettings/platform/TcDisconnectPlatform.tsx
index bc42275f..82169aa9 100644
--- a/src/components/communitySettings/platform/TcDisconnectPlatform.tsx
+++ b/src/components/communitySettings/platform/TcDisconnectPlatform.tsx
@@ -34,7 +34,7 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
     <>
       <TcButton
         text={'Disconnect'}
-        variant="outlined"
+        variant='outlined'
         sx={{ width: '7.5rem', padding: '0.5rem' }}
         onClick={() => setOpenDialog(true)}
       />
@@ -51,64 +51,64 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
           },
         }}
       >
-        <div className="flex justify-end p-4">
+        <div className='flex justify-end p-4'>
           <AiOutlineClose
-            className="cursor-pointer"
+            className='cursor-pointer'
             size={24}
             onClick={() => setOpenDialog(false)}
           />
         </div>
-        <div className="text-center px-4 md:px-8">
-          <div className="md:w-4/5 text-center mx-auto">
+        <div className='px-4 text-center md:px-8'>
+          <div className='mx-auto text-center md:w-4/5'>
             <TcText
               text={`Are you sure you want to disconnect ${platform?.metadata.name}?`}
-              variant="h6"
+              variant='h6'
             />
           </div>
-          <div className="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 md:space-x-5 pb-8 md:py-12">
-            <div className="shadow-xl rounded-md px-4 py-6 space-y-4">
+          <div className='flex flex-col justify-between space-y-4 pb-8 md:flex-row md:space-y-0 md:space-x-5 md:py-12'>
+            <div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
               <TcText
                 text={'Disconnect and delete data'}
-                variant="body1"
-                fontWeight="bold"
+                variant='body1'
+                fontWeight='bold'
               />
               <TcText
-                className="text-left"
+                className='text-left'
                 text={
                   <span>
                     Importing activities and members will be stopped. Historical
                     activities <b>will be deleted.</b>
                   </span>
                 }
-                variant="body2"
+                variant='body2'
               />
               <TcButton
                 text={'Disconnect and delete'}
-                variant="contained"
-                className="w-full"
+                variant='contained'
+                className='w-full'
                 onClick={() => handleDeletePlatform('hard')}
               />
             </div>
-            <div className="shadow-xl rounded-md px-4 py-6 space-y-4">
+            <div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
               <TcText
                 text={'Disconnect only'}
-                variant="body1"
-                fontWeight="bold"
+                variant='body1'
+                fontWeight='bold'
               />
               <TcText
-                className="text-left"
+                className='text-left'
                 text={
                   <span>
                     Importing activities and members will be stopped. Historical
                     activities <b>will not be affected.</b>
                   </span>
                 }
-                variant="body2"
+                variant='body2'
               />
               <TcButton
                 text={'Disconnect'}
-                variant="contained"
-                className="w-full"
+                variant='contained'
+                className='w-full'
                 onClick={() => handleDeletePlatform('soft')}
               />
             </div>
diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
index 86aa358b..612398e4 100644
--- a/src/components/communitySettings/platform/TcPlatform.tsx
+++ b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -145,12 +145,12 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
   return (
     <TcBoxContainer
       contentContainerChildren={
-        <div className="p-4 md:p-10 space-y-4">
-          <div className="flex flex-col md:flex-row md:justify-between md:items-center">
-            <div className="space-y-5">
+        <div className='space-y-4 p-4 md:p-10'>
+          <div className='flex flex-col md:flex-row md:items-center md:justify-between'>
+            <div className='space-y-5'>
               <TcText text={platformName} variant={'h6'} />
               <div>
-                <TcText text="Server:" variant={'body2'} color={'gray.100'} />
+                <TcText text='Server:' variant={'body2'} color={'gray.100'} />
                 <TcCommunityName platform={fetchedPlatform} />
               </div>
             </div>
@@ -161,10 +161,10 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
             onDateChange={handleDateChange}
           />
           <TcPlatformChannels />
-          <div className="flex justify-center pt-8 pb-6">
+          <div className='flex justify-center pt-8 pb-6'>
             <TcButton
-              text="Confirm Changes"
-              variant="contained"
+              text='Confirm Changes'
+              variant='contained'
               sx={{ width: '15rem', padding: '0.5rem' }}
               onClick={handlePatchCommunity}
             />
diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx
index e705a215..011563da 100644
--- a/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx
@@ -21,14 +21,14 @@ function TcPlatformChannelDialog() {
     <div>
       <TcText
         text={'Confirm your imported channels'}
-        variant="body1"
-        fontWeight="bold"
+        variant='body1'
+        fontWeight='bold'
       />
-      <div className="flex md:flex-row items-center space-x-3">
+      <div className='flex items-center space-x-3 md:flex-row'>
         <TcText
           text={`Selected channels: ${selectedCount}`}
-          variant="body1"
-          className="whitespace-nowrap"
+          variant='body1'
+          className='whitespace-nowrap'
         />
         <TcButton
           text={'Show channels'}
@@ -52,23 +52,23 @@ function TcPlatformChannelDialog() {
           },
         }}
       >
-        <div className="flex justify-between items-center p-6">
-          <TcText text={'Import activities from channels'} variant="h5" />
+        <div className='flex items-center justify-between p-6'>
+          <TcText text={'Import activities from channels'} variant='h5' />
           <AiOutlineClose
-            className="cursor-pointer"
+            className='cursor-pointer'
             size={24}
             onClick={() => setOpenDialog(false)}
           />
         </div>
-        <div className="px-6">
+        <div className='px-6'>
           <TcPlatformChannelDialogHeader />
           <TcPlatformChannelDialogBody />
           <TcPlatformChannelDialogFooter />
         </div>
-        <div className="flex justify-center px-6 md:px-0 pb-3">
+        <div className='flex justify-center px-6 pb-3 md:px-0'>
           <TcButton
             text={'Save Channels'}
-            variant="contained"
+            variant='contained'
             sx={{ width: '15rem', padding: '0.5rem' }}
             onClick={() => setOpenDialog(false)}
           />
diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx
index f4e5a677..56a75014 100644
--- a/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx
@@ -3,7 +3,7 @@ import TcPlatformChannelList from './TcPlatformChannelList';
 
 function TcPlatformChannelDialogBody() {
   return (
-    <div className="border border-gray-300 rounded-md">
+    <div className='rounded-md border border-gray-300'>
       <TcPlatformChannelList refreshTrigger={true} />
     </div>
   );
diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialogFooter.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialogFooter.tsx
index 3d90dd1f..bf1ac8dd 100644
--- a/src/components/communitySettings/platform/TcPlatformChannelDialogFooter.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannelDialogFooter.tsx
@@ -7,22 +7,22 @@ function TcPlatformChannelDialogFooter() {
     <div>
       <Accordion disableGutters defaultExpanded={true} elevation={0}>
         <AccordionSummary
-          expandIcon={<MdExpandMore color="#37474F" size={25} fill="#37474F" />}
+          expandIcon={<MdExpandMore color='#37474F' size={25} fill='#37474F' />}
         >
-          <p className="font-semibold text-md">
+          <p className='text-md font-semibold'>
             How to give access to the channel you want to import?
           </p>
         </AccordionSummary>
         <AccordionDetails>
-          <div className="pl-1 pr-4 text-left">
-            <ol className="list-decimal text-sm pl-4">
+          <div className='pl-1 pr-4 text-left'>
+            <ol className='list-decimal pl-4 text-sm'>
               <li>
                 Navigate to the channel you want to import on{' '}
                 <a
-                  href="https://discord.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-secondary font-semibold cursor-pointer"
+                  href='https://discord.com/'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='cursor-pointer font-semibold text-secondary'
                 >
                   Discord
                 </a>
diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialogHeader.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialogHeader.tsx
index 05efdafe..1deb3f2f 100644
--- a/src/components/communitySettings/platform/TcPlatformChannelDialogHeader.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannelDialogHeader.tsx
@@ -3,12 +3,12 @@ import TcText from '../../shared/TcText';
 
 function TcPlatformChannelDialogHeader() {
   return (
-    <div className="pb-3">
+    <div className='pb-3'>
       <TcText
         text={
           'Select channels to import activity in this workspace. Please give Together Crew access to all selected private channels by updating the channels permissions in Discord. Discord permission will affect the channels the bot can see.'
         }
-        variant="body2"
+        variant='body2'
       />
     </div>
   );
diff --git a/src/components/communitySettings/platform/TcPlatformChannelList.tsx b/src/components/communitySettings/platform/TcPlatformChannelList.tsx
index 13bd52e4..881a2acf 100644
--- a/src/components/communitySettings/platform/TcPlatformChannelList.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannelList.tsx
@@ -42,29 +42,29 @@ function TcPlatformChannelList({
   };
 
   if (loading) {
-    return <Loading height="400px" />;
+    return <Loading height='400px' />;
   }
 
   if (channels.length === 0) {
     return (
-      <div className="flex justify-center py-24">
+      <div className='flex justify-center py-24'>
         <TcText
           text={'Channel list is empty'}
-          variant="body2"
-          className="text-gray-400"
+          variant='body2'
+          className='text-gray-400'
         />
       </div>
     );
   }
 
   return (
-    <div className="max-h-[400px] overflow-y-scroll">
+    <div className='max-h-[400px] overflow-y-scroll'>
       {refreshTrigger ? (
         <TcButton
-          className="sticky top-4 float-right m-4 bg-white"
+          className='sticky top-4 float-right m-4 bg-white'
           startIcon={<TbRefresh />}
           sx={{ maxWidth: '10rem' }}
-          variant="outlined"
+          variant='outlined'
           onClick={handleRefresh}
           text={'Refresh List'}
         />
@@ -79,8 +79,8 @@ function TcPlatformChannelList({
         {channels &&
           channels?.map((channel, index) => (
             <div key={`${channel.channelId} ${index}`}>
-              <TcText variant="h6" text={channel.title} />
-              <div className="ml-5">
+              <TcText variant='h6' text={channel.title} />
+              <div className='ml-5'>
                 <FormControlLabel
                   control={
                     <TcCheckbox
@@ -100,13 +100,13 @@ function TcPlatformChannelList({
                       )}
                     />
                   }
-                  label="All Channels"
+                  label='All Channels'
                 />
-                <TcText text="Channels" />
+                <TcText text='Channels' />
                 <FormGroup>
                   {channel.subChannels.map((subChannel, index) => (
                     <div
-                      className="flex justify-between"
+                      className='flex justify-between'
                       key={`${subChannel.channelId} ${subChannel.parentId} ${index}`}
                     >
                       <FormControlLabel
@@ -131,11 +131,11 @@ function TcPlatformChannelList({
                         label={subChannel.name}
                       />
                       {!subChannel.canReadMessageHistoryAndViewChannel ? (
-                        <div className="flex items-center space-x-1">
-                          <BiError className="text-error-500" />
+                        <div className='flex items-center space-x-1'>
+                          <BiError className='text-error-500' />
                           <TcText
-                            className="text-error-500"
-                            text="Bot needs access"
+                            className='text-error-500'
+                            text='Bot needs access'
                           />
                         </div>
                       ) : (
diff --git a/src/components/communitySettings/platform/TcPlatformChannels.tsx b/src/components/communitySettings/platform/TcPlatformChannels.tsx
index 94af1031..127739f2 100644
--- a/src/components/communitySettings/platform/TcPlatformChannels.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannels.tsx
@@ -6,11 +6,11 @@ import TcPlatformChannelDialog from './TcPlatformChannelDialog';
 function TcPlatformChannels() {
   return (
     <div>
-      <div className="flex items-stretch md:space-x-4">
-        <TcAvatar className="hidden md:flex">
-          <FaHashtag color="white" />
+      <div className='flex items-stretch md:space-x-4'>
+        <TcAvatar className='hidden md:flex'>
+          <FaHashtag color='white' />
         </TcAvatar>
-        <div className="space-y-4 pt-2">
+        <div className='space-y-4 pt-2'>
           <TcPlatformChannelDialog />
         </div>
       </div>
diff --git a/src/components/communitySettings/platform/TcPlatformPeriod.tsx b/src/components/communitySettings/platform/TcPlatformPeriod.tsx
index a92b0dc4..6a322ca7 100644
--- a/src/components/communitySettings/platform/TcPlatformPeriod.tsx
+++ b/src/components/communitySettings/platform/TcPlatformPeriod.tsx
@@ -19,30 +19,30 @@ function TcPlatformPeriod({ onDateChange, platform }: ITcPlatformPeriodProps) {
 
   return (
     <div>
-      <div className="flex items-stretch md:space-x-4">
-        <TcAvatar className="hidden md:flex">
-          <MdOutlineCalendarToday color="white" />
+      <div className='flex items-stretch md:space-x-4'>
+        <TcAvatar className='hidden md:flex'>
+          <MdOutlineCalendarToday color='white' />
         </TcAvatar>
-        <div className="space-y-4 pt-2">
+        <div className='space-y-4 pt-2'>
           <TcText
             text={'Change date period for data analysis'}
-            variant="body1"
-            fontWeight="bold"
+            variant='body1'
+            fontWeight='bold'
           />
           <TcText
             text={
               'It might take up to 12 hours to finish new data import. Once it is done we will send you a message on Discord.'
             }
-            variant="body2"
+            variant='body2'
           />
-          <div className="flex md:items-center space-x-2">
+          <div className='flex space-x-2 md:items-center'>
             <HiOutlineExclamationCircle size={20} />
             <TcText
               text={`Data analysis runs from: ${moment(
                 platform?.metadata.analyzerStartedAt
               ).format('D MMM YYYY')}`}
-              variant="body2"
-              fontWeight="bold"
+              variant='body2'
+              fontWeight='bold'
             />
           </div>
           <TcPeriodRange
diff --git a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
index 45ef2e76..0e4afa11 100644
--- a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
+++ b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
@@ -60,9 +60,8 @@ function TcActiveCommunity() {
           'community'
         )?.id;
       if (storedCommunityId) {
-        const fullCommunityData = await retrieveCommunityById(
-          storedCommunityId
-        );
+        const fullCommunityData =
+          await retrieveCommunityById(storedCommunityId);
 
         setCommunity(fullCommunityData);
         StorageService.writeLocalStorage('community', fullCommunityData);
@@ -107,10 +106,10 @@ function TcActiveCommunity() {
       return (
         <Image
           src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
-          width="100"
-          height="100"
+          width='100'
+          height='100'
           alt={activeCommunityPlatformIcon.metadata.name || ''}
-          className="rounded-full"
+          className='rounded-full'
         />
       );
     }
@@ -120,19 +119,19 @@ function TcActiveCommunity() {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center border-b border-b-gray-200 py-4 mt-4">
-        <Loading height="250" size={30} />
+      <div className='mt-4 flex items-center justify-center border-b border-b-gray-200 py-4'>
+        <Loading height='250' size={30} />
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col md:flex-row md:justify-between md:items-center border-b border-b-gray-200 md:py-4 mt-4">
-      <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row md:items-center space-x-2 md:px-3">
+    <div className='mt-4 flex flex-col border-b border-b-gray-200 md:flex-row md:items-center md:justify-between md:py-4'>
+      <div className='flex flex-col space-y-3 space-x-2 md:flex-row md:items-center md:space-y-0 md:px-3'>
         {community && community.avatarURL ? (
-          <TcAvatar className="mx-auto" src={community.avatarURL} />
+          <TcAvatar className='mx-auto' src={community.avatarURL} />
         ) : (
-          <TcAvatar className="mx-auto">
+          <TcAvatar className='mx-auto'>
             {community ? (
               renderPlatformAvatar(community)
             ) : (
@@ -141,13 +140,13 @@ function TcActiveCommunity() {
           </TcAvatar>
         )}
         {loading ? (
-          <Loading height="40px" size={30} />
+          <Loading height='40px' size={30} />
         ) : (
           <TcInput
-            label="Community name"
-            variant="filled"
-            placeholder="Write community name"
-            size="small"
+            label='Community name'
+            variant='filled'
+            placeholder='Write community name'
+            size='small'
             value={community?.name || ''}
             disabled={!community?.name}
             onChange={handleCommunityNameChange}
diff --git a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
index 40078d7b..b8006edc 100644
--- a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
+++ b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
@@ -60,9 +60,9 @@ function TcConfirmDeleteCommunity({
   return (
     <div>
       <TcButton
-        text="Delete Community"
+        text='Delete Community'
         sx={{ width: '10rem' }}
-        className="text-error-600"
+        className='text-error-600'
         disabled={!community}
         onClick={() => {
           setOpenDialog(true);
@@ -81,36 +81,36 @@ function TcConfirmDeleteCommunity({
           },
         }}
       >
-        <div className="flex justify-end p-4">
+        <div className='flex justify-end p-4'>
           <AiOutlineClose
-            className="cursor-pointer"
+            className='cursor-pointer'
             size={24}
             onClick={() => setOpenDialog(false)}
           />
         </div>
         {activeStep === 1 ? (
-          <div className="flex flex-col space-y-4 mx-auto text-center justify-center pb-8 px-8">
-            <div className="px-14">
-              <div className="flex justify-center">
-                <BiError size={40} className="text-error-600" />
+          <div className='mx-auto flex flex-col justify-center space-y-4 px-8 pb-8 text-center'>
+            <div className='px-14'>
+              <div className='flex justify-center'>
+                <BiError size={40} className='text-error-600' />
               </div>
               <TcText
-                variant="h6"
+                variant='h6'
                 text={`Are you sure you want to delete ${community?.name} community?`}
               />
             </div>
             <TcAlert
-              severity="error"
+              severity='error'
               icon={false}
-              className="text-center p-0 flex justify-center bg-error-600/40 rounded-sm"
+              className='flex justify-center rounded-sm bg-error-600/40 p-0 text-center'
             >
-              <AlertTitle color="black" className="p-0">
+              <AlertTitle color='black' className='p-0'>
                 If you don't read this, unexpected bad things will happen!{' '}
               </AlertTitle>
             </TcAlert>
             <TcText
-              className="text-center"
-              variant="body2"
+              className='text-center'
+              variant='body2'
               text={
                 <>
                   Once the community account is deleted, there is{' '}
@@ -120,24 +120,24 @@ function TcConfirmDeleteCommunity({
                 </>
               }
             />
-            <div className="flex justify-between">
+            <div className='flex justify-between'>
               <TcButton
                 text={'Cancel'}
-                variant="outlined"
+                variant='outlined'
                 onClick={() => setOpenDialog(false)}
               />
               <TcButton
-                text="Continue"
-                variant="contained"
-                color="secondary"
+                text='Continue'
+                variant='contained'
+                color='secondary'
                 onClick={() => setActiveStep(2)}
               />
             </div>
           </div>
         ) : (
-          <div className="flex flex-col space-y-8 mx-auto text-center justify-center pb-8 px-8">
+          <div className='mx-auto flex flex-col justify-center space-y-8 px-8 pb-8 text-center'>
             <TcText
-              variant="h6"
+              variant='h6'
               text={
                 <>
                   To confirm that you want to delete the community, please type{' '}
@@ -145,25 +145,25 @@ function TcConfirmDeleteCommunity({
                 </>
               }
             />
-            <div className="w-2/3 pb-12 text-center mx-auto">
+            <div className='mx-auto w-2/3 pb-12 text-center'>
               <TcInput
-                label="Community name"
-                variant="filled"
-                placeholder="Write community name"
+                label='Community name'
+                variant='filled'
+                placeholder='Write community name'
                 value={communityNameInput}
                 onChange={handleInputChange}
               />
             </div>
-            <div className="flex justify-between">
+            <div className='flex justify-between'>
               <TcButton
                 text={'Cancel'}
-                variant="outlined"
+                variant='outlined'
                 onClick={() => setOpenDialog(false)}
               />
               <TcButton
-                text="Delete community"
-                variant="contained"
-                color="secondary"
+                text='Delete community'
+                variant='contained'
+                color='secondary'
                 onClick={handleDeleteCommunity}
                 disabled={!isInputValid}
               />
diff --git a/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx b/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx
index bd1a1701..67816d32 100644
--- a/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx
+++ b/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx
@@ -6,12 +6,12 @@ import TcText from '../../shared/TcText';
 
 function TcSwitchCommunity() {
   return (
-    <div className="md:py-5">
-      <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row text-left md:justify-between md:items-center">
-        <TcText text="Your community account" variant={'h6'} />
+    <div className='md:py-5'>
+      <div className='flex flex-col space-y-3 text-left md:flex-row md:items-center md:justify-between md:space-y-0'>
+        <TcText text='Your community account' variant={'h6'} />
         <TcButton
           text={'Switch account'}
-          variant="outlined"
+          variant='outlined'
           sx={{ width: '10.5rem', padding: '0.5rem' }}
           onClick={() => router.push('/centric/select-community')}
         />
diff --git a/src/components/global/CustomTab.tsx b/src/components/global/CustomTab.tsx
index 99af64eb..0974e146 100644
--- a/src/components/global/CustomTab.tsx
+++ b/src/components/global/CustomTab.tsx
@@ -23,7 +23,7 @@ function CustomTab({
       <TabContext value={activeTab}>
         <TabList
           onChange={onTabChange}
-          aria-label="custom tabs"
+          aria-label='custom tabs'
           sx={{
             display: 'flex',
             flexWrap: 'wrap',
diff --git a/src/components/global/EmptyState.tsx b/src/components/global/EmptyState.tsx
index c33f11bf..471db197 100644
--- a/src/components/global/EmptyState.tsx
+++ b/src/components/global/EmptyState.tsx
@@ -16,17 +16,17 @@ export default function EmptyState({
 }: IProps) {
   const router = useRouter();
   return (
-    <div className="text-center flex flex-col justify-center p-8 md:p-0 md:w-2/3  mx-auto space-y-4 mt-[4rem]">
-      <div className="mx-auto">{image}</div>
-      <h1 className="text-2xl font-bold">{title}</h1>
-      <p className="text-sm md:w-5/12 mx-auto pb-1">{description}</p>
+    <div className='mx-auto mt-[4rem] flex flex-col justify-center space-y-4 p-8  text-center md:w-2/3 md:p-0'>
+      <div className='mx-auto'>{image}</div>
+      <h1 className='text-2xl font-bold'>{title}</h1>
+      <p className='mx-auto pb-1 text-sm md:w-5/12'>{description}</p>
       <TcButton
         text={customButtonLabel}
-        variant="contained"
+        variant='contained'
         onClick={() => {
           router.push('/community-settings');
         }}
-        className="py-2 md:w-1/5 mx-auto"
+        className='mx-auto py-2 md:w-1/5'
       />
     </div>
   );
diff --git a/src/components/global/FilterByChannels.tsx b/src/components/global/FilterByChannels.tsx
index c34a220e..3f4b744f 100644
--- a/src/components/global/FilterByChannels.tsx
+++ b/src/components/global/FilterByChannels.tsx
@@ -36,12 +36,12 @@ const FilterByChannels = ({
   const id = open ? 'simple-popover' : undefined;
 
   return (
-    <div className="flex flex-row min-w-1/2 md:w-auto bg-gray-background px-3 mt-2 md:mt-0 items-center rounded-md py-1.5 md:py-2">
-      <FaHashtag size={20} className="mr-3 text-black" />
+    <div className='min-w-1/2 mt-2 flex flex-row items-center rounded-md bg-gray-background px-3 py-1.5 md:mt-0 md:w-auto md:py-2'>
+      <FaHashtag size={20} className='mr-3 text-black' />
       <button
         aria-describedby={id}
         onClick={handleClick}
-        className="hover:bg-lite active:bg-white px-2 rounded-md"
+        className='rounded-md px-2 hover:bg-lite active:bg-white'
       >
         By channel ({selectedCount}){' '}
       </button>
@@ -62,25 +62,25 @@ const FilterByChannels = ({
           style: { width: '32rem' },
         }}
       >
-        <div className="w-full px-8 py-4">
-          <p className="text-md pb-3 font-bold">
+        <div className='w-full px-8 py-4'>
+          <p className='text-md pb-3 font-bold'>
             Select channels to view activity
           </p>
-          <div className="border border-gray-300 rounded-md">
+          <div className='rounded-md border border-gray-300'>
             <TcPlatformChannelList
               refreshTrigger={false}
-              channelListCustomClass="px-4 py-3"
+              channelListCustomClass='px-4 py-3'
             />
           </div>
-          <div className="flex items-center text-sm text-orange pt-4">
-            <BiError size={18} className="mr-0.5" />
+          <div className='flex items-center pt-4 text-sm text-orange'>
+            <BiError size={18} className='mr-0.5' />
             At least one channel needs to be selected. Please select channel.
           </div>
-          <div className="mx-auto pt-4 text-center">
+          <div className='mx-auto pt-4 text-center'>
             <TcButton
               text={'Save channels'}
-              variant="contained"
-              className="w-full"
+              variant='contained'
+              className='w-full'
               disabled={selectedCount === 0}
               onClick={() => {
                 if (handleFetchHeatmapByChannels) {
diff --git a/src/components/global/FilterPopover/FilterRolesPopover.tsx b/src/components/global/FilterPopover/FilterRolesPopover.tsx
index a7cf1515..4ce28e74 100644
--- a/src/components/global/FilterPopover/FilterRolesPopover.tsx
+++ b/src/components/global/FilterPopover/FilterRolesPopover.tsx
@@ -239,7 +239,7 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
     <div>
       <TcButton
         text={'Roles'}
-        className="text-black"
+        className='text-black'
         endIcon={
           isRolesPopupOpen ? (
             <MdOutlineKeyboardArrowUp />
@@ -257,26 +257,26 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
         anchorEl={anchorEl}
         sx={{ maxWidth: '340px' }}
         content={
-          <div className="px-4 flex flex-col space-y-2 py-2">
+          <div className='flex flex-col space-y-2 px-4 py-2'>
             {selectedRoles.length > 0 && (
-              <FormControl component="fieldset">
+              <FormControl component='fieldset'>
                 <RadioGroup
                   row
-                  aria-label="role-filter"
-                  name="role-filter"
+                  aria-label='role-filter'
+                  name='role-filter'
                   value={includeExclude}
                   onChange={handleIncludeExcludeChange}
                 >
                   <FormControlLabel
-                    value="include"
+                    value='include'
                     control={<Radio />}
-                    label={<TcText text="Include" variant="body2" />}
-                    className="w-1/2"
+                    label={<TcText text='Include' variant='body2' />}
+                    className='w-1/2'
                   />
                   <FormControlLabel
-                    value="exclude"
+                    value='exclude'
                     control={<Radio />}
-                    label={<TcText text="Exclude" variant="body2" />}
+                    label={<TcText text='Exclude' variant='body2' />}
                   />
                 </RadioGroup>
               </FormControl>
@@ -284,7 +284,7 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
             <FormControl>
               <Autocomplete
                 multiple
-                id="tags-filled"
+                id='tags-filled'
                 options={fetchedRoles.results}
                 freeSolo
                 open={isAutocompleteOpen}
@@ -307,9 +307,9 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
                 renderTags={(value, getTagProps) =>
                   value.map((option, index) => (
                     <Chip
-                      variant="outlined"
+                      variant='outlined'
                       label={option.name}
-                      size="small"
+                      size='small'
                       sx={{
                         borderRadius: '4px',
                         borderColor: hexToRGBA(
@@ -336,9 +336,9 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
                       minWidth: 'auto',
                     }}
                     {...params}
-                    variant="filled"
-                    label="Roles"
-                    placeholder="Select one or more roles"
+                    variant='filled'
+                    label='Roles'
+                    placeholder='Select one or more roles'
                     value={filteredRolesByName}
                     onChange={handleSearchChange}
                   />
@@ -347,21 +347,21 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
             </FormControl>
             <div
               ref={scrollableDivRef}
-              className="border max-h-[300px] min-w-[250px] overflow-y-auto border-gray-200 rounded-md p-1 overflow-x-hidden"
+              className='max-h-[300px] min-w-[250px] overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 p-1'
               onScroll={handleScroll}
             >
               {fetchedRoles && fetchedRoles.results.length > 0 ? (
                 <>
-                  <TcText text="Show members with roles:" className="p-1" />
+                  <TcText text='Show members with roles:' className='p-1' />
                   {fetchedRoles?.results?.map((role: IRoles) => (
                     <ListItem
                       key={`${role.id}-${role.name}`}
-                      className="w-full"
+                      className='w-full'
                     >
                       <FormControlLabel
                         control={
                           <TcCheckbox
-                            color="secondary"
+                            color='secondary'
                             checked={selectedRoles.some(
                               (selectedRole) => selectedRole.id === role.id
                             )}
@@ -371,9 +371,9 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
                         label={
                           role ? (
                             <Chip
-                              variant="outlined"
+                              variant='outlined'
                               label={role.name}
-                              size="small"
+                              size='small'
                               sx={{
                                 borderRadius: '4px',
                                 borderColor: hexToRGBA(
@@ -401,15 +401,15 @@ function FilterRolesPopover({ handleSelectedRoles }: IFilterRolesPopover) {
                             ''
                           )
                         }
-                        className="w-full flex justify-start"
+                        className='flex w-full justify-start'
                       />
                     </ListItem>
                   ))}
                 </>
               ) : (
-                <TcText text="Role not found" className="text-center py-5" />
+                <TcText text='Role not found' className='py-5 text-center' />
               )}
-              {loading ? <Loading height="20" size={20} /> : ''}
+              {loading ? <Loading height='20' size={20} /> : ''}
             </div>
           </div>
         }
diff --git a/src/components/global/Link.tsx b/src/components/global/Link.tsx
index eaff6fc8..0842246e 100644
--- a/src/components/global/Link.tsx
+++ b/src/components/global/Link.tsx
@@ -7,7 +7,7 @@ type CustomLinkProps = MuiLinkProps & {
 
 const Link: React.FC<CustomLinkProps> = ({ to, children, ...props }) => {
   return (
-    <MuiLink component="a" href={to} underline="none" {...props}>
+    <MuiLink component='a' href={to} underline='none' {...props}>
       {children}
     </MuiLink>
   );
diff --git a/src/components/global/Loading.tsx b/src/components/global/Loading.tsx
index 311dd147..86fa66eb 100644
--- a/src/components/global/Loading.tsx
+++ b/src/components/global/Loading.tsx
@@ -15,7 +15,7 @@ function Loading({ height = '10rem', size = 40 }: LoadingProps) {
         height,
       }}
     >
-      <CircularProgress color="secondary" size={size} />
+      <CircularProgress color='secondary' size={size} />
     </Box>
   );
 }
diff --git a/src/components/global/LoadingBackdrop.tsx b/src/components/global/LoadingBackdrop.tsx
index 80d5bb59..b7aab9d1 100644
--- a/src/components/global/LoadingBackdrop.tsx
+++ b/src/components/global/LoadingBackdrop.tsx
@@ -11,7 +11,7 @@ export default function SimpleBackdrop() {
         top: '-4rem',
       }}
     >
-      <CircularProgress color="inherit" size={'80px'} />
+      <CircularProgress color='inherit' size={'80px'} />
     </Backdrop>
   );
 }
diff --git a/src/components/global/RangeSelect.tsx b/src/components/global/RangeSelect.tsx
index 321660b5..c75c4816 100644
--- a/src/components/global/RangeSelect.tsx
+++ b/src/components/global/RangeSelect.tsx
@@ -14,9 +14,9 @@ type optionItem = {
 const RangeSelect = ({ options, icon, onClick, active }: Props) => {
   return (
     <>
-      <div className="bg-gray-background px-3 rounded-md">
-        <ul className="flex flex-row py-1 items-center text-light-gray">
-          <div className="mr-3">{icon}</div>
+      <div className='rounded-md bg-gray-background px-3'>
+        <ul className='text-light-gray flex flex-row items-center py-1'>
+          <div className='mr-3'>{icon}</div>
           {options.length > 0
             ? options.map((el) => (
                 <li
@@ -26,8 +26,8 @@ const RangeSelect = ({ options, icon, onClick, active }: Props) => {
                   key={el.value}
                   className={
                     active === el.value
-                      ? 'py-1 px-2 whitespace-nowrap md:px-1.5 text-sm rounded-md bg-white text-light-gray cursor-pointer hover:bg-lite'
-                      : 'py-1 px-3 whitespace-nowrap md:px-1.5 text-sm rounded-md cursor-pointer text-light-gray hover:bg-lite'
+                      ? 'text-light-gray cursor-pointer whitespace-nowrap rounded-md bg-white py-1 px-2 text-sm hover:bg-lite md:px-1.5'
+                      : 'text-light-gray cursor-pointer whitespace-nowrap rounded-md py-1 px-3 text-sm hover:bg-lite md:px-1.5'
                   }
                 >
                   <div>{el.title}</div>
diff --git a/src/components/global/SEO.tsx b/src/components/global/SEO.tsx
index 70e38cf8..0585db05 100644
--- a/src/components/global/SEO.tsx
+++ b/src/components/global/SEO.tsx
@@ -14,11 +14,11 @@ const SEO: FC<IProps> = ({
 }): JSX.Element => (
   <HelmetProvider>
     <Helmet>
-      <meta charSet="utf-8" />
+      <meta charSet='utf-8' />
       <title>
         {titleTemplate} | {title}
       </title>
-      <meta name="description" content={description} />
+      <meta name='description' content={description} />
     </Helmet>
   </HelmetProvider>
 );
diff --git a/src/components/global/TcPermissionHints/TcPermissionHints.tsx b/src/components/global/TcPermissionHints/TcPermissionHints.tsx
index 10d023d7..262f7286 100644
--- a/src/components/global/TcPermissionHints/TcPermissionHints.tsx
+++ b/src/components/global/TcPermissionHints/TcPermissionHints.tsx
@@ -23,57 +23,57 @@ function PermissionHints() {
     switch (category) {
       case 'Access Settings':
         return (
-          <div className="pt-3">
+          <div className='pt-3'>
             <TcText
-              text="What does “Read” and “Write” access mean?"
-              variant="body2"
+              text='What does “Read” and “Write” access mean?'
+              variant='body2'
               fontWeight={500}
             />
-            <ol className="list-disc pl-5">
+            <ol className='list-disc pl-5'>
               <li>
                 <TcText
-                  text="“Read” access refers to the following settings within Discord:"
-                  variant="body2"
+                  text='“Read” access refers to the following settings within Discord:'
+                  variant='body2'
                 />
-                <ul className="list-disc pl-5">
+                <ul className='list-disc pl-5'>
                   <li>
-                    <TcText text="“Read Channel”" variant="body2" />
+                    <TcText text='“Read Channel”' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="“Read Message History”" variant="body2" />
+                    <TcText text='“Read Message History”' variant='body2' />
                   </li>
                 </ul>
               </li>
             </ol>
-            <ol className="list-disc pl-5">
+            <ol className='list-disc pl-5'>
               <li>
                 <TcText
-                  text="“Write” access refers to the following settings within Discord:"
-                  variant="body2"
+                  text='“Write” access refers to the following settings within Discord:'
+                  variant='body2'
                 />
-                <ul className="list-disc pl-5">
+                <ul className='list-disc pl-5'>
                   <li>
-                    <TcText text="Send Message" variant="body2" />
+                    <TcText text='Send Message' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="Send Messages in Threads”" variant="body2" />
+                    <TcText text='Send Messages in Threads”' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="Create Public Threads" variant="body2" />
+                    <TcText text='Create Public Threads' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="Create Private Threads" variant="body2" />
+                    <TcText text='Create Private Threads' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="Embed Links" variant="body2" />
+                    <TcText text='Embed Links' variant='body2' />
                   </li>
                   <li>
-                    <TcText text="Attach Files" variant="body2" />
+                    <TcText text='Attach Files' variant='body2' />
                   </li>
                   <li>
                     <TcText
-                      text="Mention @everyone, @here, and All Roles"
-                      variant="body2"
+                      text='Mention @everyone, @here, and All Roles'
+                      variant='body2'
                     />
                   </li>
                 </ul>
@@ -83,12 +83,12 @@ function PermissionHints() {
         );
       case 'Server Level':
         return (
-          <div className="px-3 pt-3">
+          <div className='px-3 pt-3'>
             <TcText
-              text="Please note that your platform’s permission settings enable the above permission controls"
-              variant="body2"
+              text='Please note that your platform’s permission settings enable the above permission controls'
+              variant='body2'
             />
-            <ol className="list-decimal pl-4 pt-2">
+            <ol className='list-decimal pl-4 pt-2'>
               <li>
                 <TcText
                   text={
@@ -97,7 +97,7 @@ function PermissionHints() {
                       corner of Discord
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -108,7 +108,7 @@ function PermissionHints() {
                       the middle of the screen check <b>Advanced permissions</b>
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -120,20 +120,20 @@ function PermissionHints() {
                       [✓]
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
 
-                <ol style={{ listStyleType: 'lower-alpha' }} className="pl-4">
+                <ol style={{ listStyleType: 'lower-alpha' }} className='pl-4'>
                   <li>
                     <TcText
-                      text="“Read” access settings (refer to “Access Settings” above);and/or"
-                      variant="body2"
+                      text='“Read” access settings (refer to “Access Settings” above);and/or'
+                      variant='body2'
                     />
                   </li>
                   <li>
                     <TcText
-                      text="“Write” access settings (refer to “Access Settings” above)"
-                      variant="body2"
+                      text='“Write” access settings (refer to “Access Settings” above)'
+                      variant='body2'
                     />
                   </li>
                 </ol>
@@ -147,18 +147,18 @@ function PermissionHints() {
                   you
                 </>
               }
-              variant="body2"
+              variant='body2'
             />
           </div>
         );
       case 'Category Level':
         return (
-          <div className="px-3 pt-3">
+          <div className='px-3 pt-3'>
             <TcText
-              text="Please note that Category-level permissions override Server-level permissions"
-              variant="body2"
+              text='Please note that Category-level permissions override Server-level permissions'
+              variant='body2'
             />
-            <ol className="list-decimal pl-4 pt-2">
+            <ol className='list-decimal pl-4 pt-2'>
               <li>
                 <TcText
                   text={
@@ -167,7 +167,7 @@ function PermissionHints() {
                       corner of Discord
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -178,7 +178,7 @@ function PermissionHints() {
                       the middle of the screen check <b>Advanced permissions</b>
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -190,20 +190,20 @@ function PermissionHints() {
                       [✓]
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
 
-                <ol style={{ listStyleType: 'lower-alpha' }} className="pl-4">
+                <ol style={{ listStyleType: 'lower-alpha' }} className='pl-4'>
                   <li>
                     <TcText
-                      text="“Read” access settings (refer to “Access Settings” above);and/or"
-                      variant="body2"
+                      text='“Read” access settings (refer to “Access Settings” above);and/or'
+                      variant='body2'
                     />
                   </li>
                   <li>
                     <TcText
-                      text="“Write” access settings (refer to “Access Settings” above)"
-                      variant="body2"
+                      text='“Write” access settings (refer to “Access Settings” above)'
+                      variant='body2'
                     />
                   </li>
                 </ol>
@@ -217,18 +217,18 @@ function PermissionHints() {
                   you
                 </>
               }
-              variant="body2"
+              variant='body2'
             />
           </div>
         );
       case 'Channel Level':
         return (
-          <div className="px-3 pt-3">
+          <div className='px-3 pt-3'>
             <TcText
-              text="Please note that Channel-level permissions override Category-level permissions, which in turn override Server-level permissions"
-              variant="body2"
+              text='Please note that Channel-level permissions override Category-level permissions, which in turn override Server-level permissions'
+              variant='body2'
             />
-            <ol className="list-decimal pl-4 pt-2">
+            <ol className='list-decimal pl-4 pt-2'>
               <li>
                 <TcText
                   text={
@@ -237,7 +237,7 @@ function PermissionHints() {
                       the wheel on the right of the channel name)
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -248,7 +248,7 @@ function PermissionHints() {
                       the middle of the screen check <b>Advanced permissions</b>
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
               </li>
               <li>
@@ -260,20 +260,20 @@ function PermissionHints() {
                       [✓]
                     </>
                   }
-                  variant="body2"
+                  variant='body2'
                 />
 
-                <ol style={{ listStyleType: 'lower-alpha' }} className="pl-4">
+                <ol style={{ listStyleType: 'lower-alpha' }} className='pl-4'>
                   <li>
                     <TcText
-                      text="“Read” access settings (refer to “Access Settings” above);and/or"
-                      variant="body2"
+                      text='“Read” access settings (refer to “Access Settings” above);and/or'
+                      variant='body2'
                     />
                   </li>
                   <li>
                     <TcText
-                      text="“Write” access settings (refer to “Access Settings” above)"
-                      variant="body2"
+                      text='“Write” access settings (refer to “Access Settings” above)'
+                      variant='body2'
                     />
                   </li>
                 </ol>
@@ -287,7 +287,7 @@ function PermissionHints() {
                   you
                 </>
               }
-              variant="body2"
+              variant='body2'
             />
           </div>
         );
@@ -298,7 +298,7 @@ function PermissionHints() {
 
   return (
     <div>
-      <TcButtonGroup disableElevation className="w-full">
+      <TcButtonGroup disableElevation className='w-full'>
         {permissionCategories.map((category) => (
           <TcButton
             key={category}
@@ -308,7 +308,7 @@ function PermissionHints() {
             className={clsx(
               'border',
               category === activeCategory
-                ? 'bg-secondary text-white border-secondary'
+                ? 'border-secondary bg-secondary text-white'
                 : 'border-secondary bg-white text-secondary'
             )}
             sx={{
@@ -321,7 +321,7 @@ function PermissionHints() {
           />
         ))}
       </TcButtonGroup>
-      <div className="description">{getDescription(activeCategory)}</div>
+      <div className='description'>{getDescription(activeCategory)}</div>
     </div>
   );
 }
diff --git a/src/components/global/ZonePicker.tsx b/src/components/global/ZonePicker.tsx
index 250edc9c..d89fe417 100644
--- a/src/components/global/ZonePicker.tsx
+++ b/src/components/global/ZonePicker.tsx
@@ -44,12 +44,12 @@ const ZonePicker = ({ selectedZone, handleSelectedZone }: IProps) => {
   };
 
   return (
-    <div className="flex flex-row min-w-1/2 md:w-auto bg-gray-background px-3 mt-2 md:mt-0 items-center rounded-md py-1 md:py-2">
-      <GoGlobe size={20} className="mr-3 text-lite-gray" />
+    <div className='min-w-1/2 mt-2 flex flex-row items-center rounded-md bg-gray-background px-3 py-1 md:mt-0 md:w-auto md:py-2'>
+      <GoGlobe size={20} className='mr-3 text-lite-gray' />
       <button
         aria-describedby={id}
         onClick={handleClick}
-        className="hover:bg-lite active:bg-white px-2 rounded-md"
+        className='rounded-md px-2 hover:bg-lite active:bg-white'
       >
         {selectedZone}
       </button>
@@ -70,24 +70,24 @@ const ZonePicker = ({ selectedZone, handleSelectedZone }: IProps) => {
           style: { width: '26rem' },
         }}
       >
-        <div className="h-64 px-2 overflow-scroll w-full">
-          <div className="bg-white sticky top-0 p-3">
+        <div className='h-64 w-full overflow-scroll px-2'>
+          <div className='sticky top-0 bg-white p-3'>
             <TextField
-              id="outlined-basic"
-              placeholder="Search"
-              size="small"
+              id='outlined-basic'
+              placeholder='Search'
+              size='small'
               sx={{ minWidth: 'auto' }}
-              className="w-full sticky"
-              variant="outlined"
+              className='sticky w-full'
+              variant='outlined'
               onChange={searchZones}
             />
           </div>
-          <ul className="w-full mt-2 px-3 py-1">
+          <ul className='mt-2 w-full px-3 py-1'>
             {zones.length > 0 ? (
               zones.map((el) => (
                 <li
                   key={el}
-                  className="py-2 hover:bg-lite px-3 cursor-pointer flex w-full text-sm flex-row justify-between"
+                  className='flex w-full cursor-pointer flex-row justify-between py-2 px-3 text-sm hover:bg-lite'
                   onClick={() => (
                     handleSelectedZone(el),
                     setAnchorEl(null),
@@ -95,8 +95,8 @@ const ZonePicker = ({ selectedZone, handleSelectedZone }: IProps) => {
                   )}
                 >
                   <div>{el}</div>
-                  <div className="flex flex-row">
-                    <div className="text-secondary pr-3">
+                  <div className='flex flex-row'>
+                    <div className='pr-3 text-secondary'>
                       {moment.tz(moment(), el).format('z,Z')}
                     </div>
                     <div>{moment.tz(moment(), el).format('H a')}</div>
@@ -104,7 +104,7 @@ const ZonePicker = ({ selectedZone, handleSelectedZone }: IProps) => {
                 </li>
               ))
             ) : (
-              <div className="mx-auto py-12 text-gray-300 px-12 w-full text-center">
+              <div className='mx-auto w-full py-12 px-12 text-center text-gray-300'>
                 Not founded
               </div>
             )}
diff --git a/src/components/layouts/Sidebar.tsx b/src/components/layouts/Sidebar.tsx
index 64cfeffa..456201a0 100644
--- a/src/components/layouts/Sidebar.tsx
+++ b/src/components/layouts/Sidebar.tsx
@@ -82,30 +82,30 @@ const Sidebar = () => {
   ];
 
   const menuItem = menuItems.map((el) => (
-    <li key={el.name} className="py-4">
+    <li key={el.name} className='py-4'>
       <Link href={el.path}>
         <div
           className={
             currentRoute === el.path
-              ? 'py-2 rounded-xl text-center bg-white hover:bg-white ease-in delay-75 cursor-pointer'
-              : 'py-2 rounded-xl text-center hover:bg-white ease-in delay-75 cursor-pointer'
+              ? 'cursor-pointer rounded-xl bg-white py-2 text-center delay-75 ease-in hover:bg-white'
+              : 'cursor-pointer rounded-xl py-2 text-center delay-75 ease-in hover:bg-white'
           }
         >
           {el.icon}
         </div>
-        <p className="text-center text-sm break-words">{el.name}</p>
+        <p className='break-words text-center text-sm'>{el.name}</p>
       </Link>
     </li>
   ));
 
   return (
-    <aside className="hidden md:block bg-gray-background shadow-inner md:w-[100px] xl:w-[150px] fixed h-screen">
+    <aside className='fixed hidden h-screen bg-gray-background shadow-inner md:block md:w-[100px] xl:w-[150px]'>
       <nav>
         <div>
-          <div className="flex flex-col mx-auto justify-center text-center my-4">
-            <div className="w-full mx-auto">
+          <div className='mx-auto my-4 flex flex-col justify-center text-center'>
+            <div className='mx-auto w-full'>
               <div
-                className="w-10 h-10 mb-2 mx-auto cursor-pointer"
+                className='mx-auto mb-2 h-10 w-10 cursor-pointer'
                 onClick={() => router.push('/centric/select-community')}
               >
                 {connectedPlatform &&
@@ -113,29 +113,29 @@ const Sidebar = () => {
                 connectedPlatform.metadata.icon ? (
                   <Image
                     src={`${conf.DISCORD_CDN}icons/${connectedPlatform.metadata.id}/${connectedPlatform.metadata.icon}`}
-                    width="100"
-                    height="100"
+                    width='100'
+                    height='100'
                     alt={
                       connectedPlatform.metadata.name
                         ? connectedPlatform.metadata.name
                         : ''
                     }
-                    className="rounded-full"
+                    className='rounded-full'
                   />
                 ) : (
-                  <div className="bg-secondary text-center w-10 h-10 rounded-full align-center flex flex-col justify-center text-xs" />
+                  <div className='align-center flex h-10 w-10 flex-col justify-center rounded-full bg-secondary text-center text-xs' />
                 )}
               </div>
               <TcText
                 text={community?.name}
-                variant="body1"
-                fontWeight="bold"
+                variant='body1'
+                fontWeight='bold'
               />
             </div>
           </div>
         </div>
-        <hr className="mx-2" />
-        <ul className="flex flex-col px-3">{menuItem}</ul>
+        <hr className='mx-2' />
+        <ul className='flex flex-col px-3'>{menuItem}</ul>
       </nav>
     </aside>
   );
diff --git a/src/components/layouts/shared/TcPrompt.tsx b/src/components/layouts/shared/TcPrompt.tsx
index 18f23fd2..aff1e2d3 100644
--- a/src/components/layouts/shared/TcPrompt.tsx
+++ b/src/components/layouts/shared/TcPrompt.tsx
@@ -63,7 +63,7 @@ function TcPrompt() {
       }}
     >
       <TcAlert
-        variant="filled"
+        variant='filled'
         className={backgroundColor}
         icon={false}
         sx={{
@@ -73,13 +73,13 @@ function TcPrompt() {
           paddingY: 0,
         }}
       >
-        <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
+        <div className='flex flex-col items-center justify-center p-0 md:flex-row md:space-x-3'>
           <TcText text={message} color={'white'} variant={'subtitle1'} />
           {buttonText && (
             <TcButton
               text={buttonText}
-              size="small"
-              variant="outlined"
+              size='small'
+              variant='outlined'
               onClick={() =>
                 router.push(`/community-settings${redirectRouteParams}`)
               }
diff --git a/src/components/layouts/xs/SidebarXs.tsx b/src/components/layouts/xs/SidebarXs.tsx
index 8a1791d8..94122ed8 100644
--- a/src/components/layouts/xs/SidebarXs.tsx
+++ b/src/components/layouts/xs/SidebarXs.tsx
@@ -96,56 +96,56 @@ const Sidebar = () => {
   };
 
   const menuItem = menuItems.map((el) => (
-    <li key={el.name} className="py-4">
+    <li key={el.name} className='py-4'>
       <Link href={el.path} onClick={() => setOpen(false)}>
         <div
           className={
             currentRoute === el.path
-              ? 'w-1/2 mx-auto py-2 rounded-xl text-center bg-white hover:bg-white ease-in delay-75 cursor-pointer'
-              : 'w-1/2 mx-auto py-2 rounded-xl text-center hover:bg-white ease-in delay-75 cursor-pointer'
+              ? 'mx-auto w-1/2 cursor-pointer rounded-xl bg-white py-2 text-center delay-75 ease-in hover:bg-white'
+              : 'mx-auto w-1/2 cursor-pointer rounded-xl py-2 text-center delay-75 ease-in hover:bg-white'
           }
         >
           {el.icon}
         </div>
-        <p className="text-center text-lg">{el.name}</p>
+        <p className='text-center text-lg'>{el.name}</p>
       </Link>
     </li>
   ));
 
   return (
     <>
-      <div className="bg-gray-background sticky top-0 py-4 px-5 flex md:hidden flex-row justify-between items-center z-50">
-        <div className="flex flex-row">
-          <div className="flex flex-row text-center items-center space-x-3">
-            <div className="w-8 h-8 mb-2 mr-3">
-              <div className="w-10 h-10 mx-auto">
+      <div className='sticky top-0 z-50 flex flex-row items-center justify-between bg-gray-background py-4 px-5 md:hidden'>
+        <div className='flex flex-row'>
+          <div className='flex flex-row items-center space-x-3 text-center'>
+            <div className='mb-2 mr-3 h-8 w-8'>
+              <div className='mx-auto h-10 w-10'>
                 {connectedPlatform &&
                 connectedPlatform.metadata &&
                 connectedPlatform.metadata.icon ? (
                   <Image
                     src={`${conf.DISCORD_CDN}icons/${connectedPlatform.metadata.id}/${connectedPlatform.metadata.icon}`}
-                    width="100"
-                    height="100"
+                    width='100'
+                    height='100'
                     alt={
                       connectedPlatform.metadata.name
                         ? connectedPlatform.metadata.name
                         : ''
                     }
-                    className="rounded-full"
+                    className='rounded-full'
                   />
                 ) : (
-                  <div className="bg-secondary text-center w-10 h-10 rounded-full align-center flex flex-col justify-center text-xs" />
+                  <div className='align-center flex h-10 w-10 flex-col justify-center rounded-full bg-secondary text-center text-xs' />
                 )}
               </div>
             </div>
-            <TcText text={community?.name} variant="h6" />
+            <TcText text={community?.name} variant='h6' />
           </div>
         </div>
         <FaBars size={30} onClick={handleDrawerOpen} />
       </div>
       <Drawer
-        variant="persistent"
-        anchor="right"
+        variant='persistent'
+        anchor='right'
         sx={{
           '& .MuiPaper-root': {
             width: '100%',
@@ -153,10 +153,10 @@ const Sidebar = () => {
         }}
         open={open}
       >
-        <div className="bg-gray-background h-screen p-3">
+        <div className='h-screen bg-gray-background p-3'>
           <MdKeyboardBackspace size={30} onClick={handleDrawerClose} />
           <nav>
-            <ul className="flex flex-col px-3">{menuItem}</ul>
+            <ul className='flex flex-col px-3'>{menuItem}</ul>
           </nav>
         </div>
       </Drawer>
diff --git a/src/components/pages/communityHealth/CommunityStatusShower.tsx b/src/components/pages/communityHealth/CommunityStatusShower.tsx
index cad1e780..099df6d8 100644
--- a/src/components/pages/communityHealth/CommunityStatusShower.tsx
+++ b/src/components/pages/communityHealth/CommunityStatusShower.tsx
@@ -16,34 +16,34 @@ function CommunityStatusShower({
     <div>
       {scoreStatus === 1 || scoreStatus === 2 ? (
         <div
-          className="bg-gray-background hover:bg-[#e6e6e6] p-2 flex items-center justify-center space-x-2 cursor-pointer"
+          className='flex cursor-pointer items-center justify-center space-x-2 bg-gray-background p-2 hover:bg-[#e6e6e6]'
           onClick={toggleTipDialog}
         >
-          <div className="rounded-full bg-secondary w-fit p-1">
-            <AiOutlineBulb size={30} color="white" data-testid="bulb-icon" />
+          <div className='w-fit rounded-full bg-secondary p-1'>
+            <AiOutlineBulb size={30} color='white' data-testid='bulb-icon' />
           </div>
-          <span className="text-sm">
+          <span className='text-sm'>
             {isFragmentation
               ? 'Tips for making your community less fragmented'
               : 'Tips for centralizing'}
           </span>
         </div>
       ) : scoreStatus === 0 ? (
-        <div className="bg-green-100 p-2 flex items-center justify-center space-x-2">
-          <div className="rounded-full bg-green-600 w-fit p-1">
-            <AiOutlineBulb size={30} color="white" data-testid="bulb-icon" />
+        <div className='flex items-center justify-center space-x-2 bg-green-100 p-2'>
+          <div className='w-fit rounded-full bg-green-600 p-1'>
+            <AiOutlineBulb size={30} color='white' data-testid='bulb-icon' />
           </div>
-          <span className="text-sm">Your community is doing great!</span>
+          <span className='text-sm'>Your community is doing great!</span>
         </div>
       ) : scoreStatus === -1 || scoreStatus === -2 ? (
         <div
-          className="bg-gray-background hover:bg-[#e6e6e6] p-2 flex items-center justify-center space-x-2 cursor-pointer"
+          className='flex cursor-pointer items-center justify-center space-x-2 bg-gray-background p-2 hover:bg-[#e6e6e6]'
           onClick={toggleTipDialog}
         >
-          <div className="rounded-full bg-secondary w-fit p-1">
-            <AiOutlineBulb size={30} color="white" data-testid="bulb-icon" />
+          <div className='w-fit rounded-full bg-secondary p-1'>
+            <AiOutlineBulb size={30} color='white' data-testid='bulb-icon' />
           </div>
-          <span className="text-sm">
+          <span className='text-sm'>
             {isFragmentation
               ? 'Tips for making your community less enmeshed'
               : 'Tips for decentralizing'}
diff --git a/src/components/pages/communityHealth/Decentralization.tsx b/src/components/pages/communityHealth/Decentralization.tsx
index 4ca21d49..26e0f5c2 100644
--- a/src/components/pages/communityHealth/Decentralization.tsx
+++ b/src/components/pages/communityHealth/Decentralization.tsx
@@ -159,25 +159,25 @@ function Decentralization({ scoreData }: DecentralizationProps) {
 
   return (
     <>
-      <Paper className="px-4 md:px-8 py-6 rounded-xl shadow-box space-y-4">
-        <h3 className="text-lg font-semibold text-lite-black">
+      <Paper className='space-y-4 rounded-xl px-4 py-6 shadow-box md:px-8'>
+        <h3 className='text-lg font-semibold text-lite-black'>
           Decentralization
         </h3>
-        <div className="flex flex-col md:flex-row md:justify-start space-y-8 md:space-x-12">
-          <div className="bg-gray-hover md:w-1/3 rounded-xl overflow-hidden md:mr-12">
-            <p className="text-sm px-4 p-2">Your community</p>
+        <div className='flex flex-col space-y-8 md:flex-row md:justify-start md:space-x-12'>
+          <div className='overflow-hidden rounded-xl bg-gray-hover md:mr-12 md:w-1/3'>
+            <p className='p-2 px-4 text-sm'>Your community</p>
             {!scoreData?.decentralisationScore ? (
-              <div className="flex flex-col text-center space-y-7 min-h-[320px] px-4 md:px-2">
-                <div className="mt-16">
+              <div className='flex min-h-[320px] flex-col space-y-7 px-4 text-center md:px-2'>
+                <div className='mt-16'>
                   <FiAlertTriangle
-                    className="text-error-600 mx-auto"
+                    className='mx-auto text-error-600'
                     size={25}
                   />
-                  <p className="text-error-600 text-sm font-semibold pt-4">
+                  <p className='pt-4 text-sm font-semibold text-error-600'>
                     No data available
                   </p>
                 </div>
-                <span className="text-sm">
+                <span className='text-sm'>
                   Please ensure that your Discord connection is properly
                   established and that the data period and channels are
                   selected.
@@ -194,16 +194,16 @@ function Decentralization({ scoreData }: DecentralizationProps) {
               </>
             )}
           </div>
-          <div className="md:w-1/2 space-y-12">
-            <p className="text-sm">
+          <div className='space-y-12 md:w-1/2'>
+            <p className='text-sm'>
               Shows how much conversations depend on one (or very few) key
               members. Influence exists in a continuum between:
             </p>
-            <div className="flex items-start md:items-center space-x-3 md:space-x-6">
-              <Image src={centralized} alt="centralized" />
+            <div className='flex items-start space-x-3 md:items-center md:space-x-6'>
+              <Image src={centralized} alt='centralized' />
               <div>
-                <h4 className="font-semibold">Too centralized</h4>
-                <p className="text-sm">
+                <h4 className='font-semibold'>Too centralized</h4>
+                <p className='text-sm'>
                   A few core people engage with everyone, but other members
                   don't talk to each other. The community is dependent on these
                   key influencers, and its vision is only shaped by their
@@ -212,11 +212,11 @@ function Decentralization({ scoreData }: DecentralizationProps) {
                 </p>
               </div>
             </div>
-            <div className="flex items-start md:items-center space-x-3 md:space-x-6">
-              <Image src={decentralized} alt="decentralized" />
+            <div className='flex items-start space-x-3 md:items-center md:space-x-6'>
+              <Image src={decentralized} alt='decentralized' />
               <div>
-                <h4 className="font-semibold">Too decentralized</h4>
-                <p className="text-sm">
+                <h4 className='font-semibold'>Too decentralized</h4>
+                <p className='text-sm'>
                   Everyone regularly talks with everyone. Members manage too
                   many relationships and are involved in too many divergent
                   topics. Everyone’s voice is heard and included, but the
@@ -240,14 +240,14 @@ function Decentralization({ scoreData }: DecentralizationProps) {
         <>
           {scoreData?.scoreStatus === 1 || scoreData?.scoreStatus === 2 ? (
             <>
-              <div className="flex items-center justify-center space-x-4 pt-8 pb-4">
-                <Image src={decentralized} alt="decentralized" />
+              <div className='flex items-center justify-center space-x-4 pt-8 pb-4'>
+                <Image src={decentralized} alt='decentralized' />
                 <HiOutlineArrowRight size={24} />
-                <Image src={centralized} alt="centralized" />
+                <Image src={centralized} alt='centralized' />
               </div>
-              <ul className="text-sm text-justify list-disc p-4 leading-2 space-y-5">
+              <ul className='leading-2 list-disc space-y-5 p-4 text-justify text-sm'>
                 {decentralizedTips.map((tip, index) => (
-                  <li key={index} className="list-disc ml-4">
+                  <li key={index} className='ml-4 list-disc'>
                     {tip}
                   </li>
                 ))}
@@ -255,14 +255,14 @@ function Decentralization({ scoreData }: DecentralizationProps) {
             </>
           ) : (
             <>
-              <div className="flex items-center justify-center space-x-4 pt-8 pb-4">
-                <Image src={centralized} alt="centralized" />
+              <div className='flex items-center justify-center space-x-4 pt-8 pb-4'>
+                <Image src={centralized} alt='centralized' />
                 <HiOutlineArrowRight size={24} />
-                <Image src={decentralized} alt="decentralized" />
+                <Image src={decentralized} alt='decentralized' />
               </div>
-              <ul className="text-sm text-justify list-disc p-4 leading-2 space-y-5">
+              <ul className='leading-2 list-disc space-y-5 p-4 text-justify text-sm'>
                 {centralizedTips.map((tip, index) => (
-                  <li key={index} className="list-disc ml-4">
+                  <li key={index} className='ml-4 list-disc'>
                     {tip}
                   </li>
                 ))}
diff --git a/src/components/pages/communityHealth/Fragmentation.tsx b/src/components/pages/communityHealth/Fragmentation.tsx
index 814a1a4b..c5c868b8 100644
--- a/src/components/pages/communityHealth/Fragmentation.tsx
+++ b/src/components/pages/communityHealth/Fragmentation.tsx
@@ -154,23 +154,23 @@ function Fragmentation({ scoreData }: FragmentationProps) {
 
   return (
     <>
-      <Paper className="px-4 md:px-8 py-6 rounded-xl shadow-box space-y-4">
-        <h3 className="text-lg font-semibold text-lite-black">Fragmentation</h3>
-        <div className="flex flex-col md:flex-row md:justify-start space-y-8 md:space-x-12">
-          <div className="bg-gray-hover md:w-1/3 rounded-xl overflow-hidden md:mr-12">
-            <p className="text-sm px-4 p-2">Your community</p>
+      <Paper className='space-y-4 rounded-xl px-4 py-6 shadow-box md:px-8'>
+        <h3 className='text-lg font-semibold text-lite-black'>Fragmentation</h3>
+        <div className='flex flex-col space-y-8 md:flex-row md:justify-start md:space-x-12'>
+          <div className='overflow-hidden rounded-xl bg-gray-hover md:mr-12 md:w-1/3'>
+            <p className='p-2 px-4 text-sm'>Your community</p>
             {!scoreData?.fragmentationScore ? (
-              <div className="flex flex-col text-center space-y-7 min-h-[320px] px-4 md:px-2">
-                <div className="mt-16">
+              <div className='flex min-h-[320px] flex-col space-y-7 px-4 text-center md:px-2'>
+                <div className='mt-16'>
                   <FiAlertTriangle
-                    className="text-error-600 mx-auto"
+                    className='mx-auto text-error-600'
                     size={25}
                   />
-                  <p className="text-error-600 text-sm font-semibold pt-4">
+                  <p className='pt-4 text-sm font-semibold text-error-600'>
                     No data available
                   </p>
                 </div>
-                <span className="text-sm">
+                <span className='text-sm'>
                   Please ensure that your Discord connection is properly
                   established and that the data period and channels are
                   selected.
@@ -187,27 +187,27 @@ function Fragmentation({ scoreData }: FragmentationProps) {
               </>
             )}
           </div>
-          <div className="md:w-1/2 space-y-12">
-            <p className="text-sm">
+          <div className='space-y-12 md:w-1/2'>
+            <p className='text-sm'>
               Shows how much members are divided into informal cliques as a
               continuum between:
             </p>
-            <div className="flex items-start md:items-center space-x-3 md:space-x-6">
-              <Image src={enmeshed} alt="enmeshed" />
+            <div className='flex items-start space-x-3 md:items-center md:space-x-6'>
+              <Image src={enmeshed} alt='enmeshed' />
               <div>
-                <h4 className="font-semibold">Too enmeshed</h4>
-                <p className="text-sm">
+                <h4 className='font-semibold'>Too enmeshed</h4>
+                <p className='text-sm'>
                   The community is too dense and monolithic. It feels noisy and
                   overwhelming. Likely, similar tasks and topics are discussed
                   by different groups with overlapping membership.
                 </p>
               </div>
             </div>
-            <div className="flex items-start md:items-center space-x-3 md:space-x-6">
-              <Image src={fragmented} alt="fragmented" />
+            <div className='flex items-start space-x-3 md:items-center md:space-x-6'>
+              <Image src={fragmented} alt='fragmented' />
               <div>
-                <h4 className="font-semibold">Too fragmented</h4>
-                <p className="text-sm">
+                <h4 className='font-semibold'>Too fragmented</h4>
+                <p className='text-sm'>
                   The community is very divided. It no longer feels like one
                   community but rather multiple, smaller disconnected siloes.
                   This leads to a lack of collaboration and, if not addressed,
@@ -230,14 +230,14 @@ function Fragmentation({ scoreData }: FragmentationProps) {
         <>
           {scoreData?.scoreStatus === 1 || scoreData?.scoreStatus === 2 ? (
             <>
-              <div className="flex items-center justify-center space-x-4 pt-8 pb-4">
-                <Image src={fragmented} alt="fragmented" />
+              <div className='flex items-center justify-center space-x-4 pt-8 pb-4'>
+                <Image src={fragmented} alt='fragmented' />
                 <HiOutlineArrowRight size={24} />
-                <Image src={enmeshed} alt="enmeshed" />
+                <Image src={enmeshed} alt='enmeshed' />
               </div>
-              <ul className="text-sm text-justify list-disc p-4 leading-2 space-y-5">
+              <ul className='leading-2 list-disc space-y-5 p-4 text-justify text-sm'>
                 {fragmentedTips.map((tip, index) => (
-                  <li key={index} className="list-disc ml-4">
+                  <li key={index} className='ml-4 list-disc'>
                     {tip}
                   </li>
                 ))}
@@ -245,14 +245,14 @@ function Fragmentation({ scoreData }: FragmentationProps) {
             </>
           ) : (
             <>
-              <div className="flex items-center justify-center space-x-4 pt-8 pb-4">
-                <Image src={enmeshed} alt="enmeshed" />
+              <div className='flex items-center justify-center space-x-4 pt-8 pb-4'>
+                <Image src={enmeshed} alt='enmeshed' />
                 <HiOutlineArrowRight size={24} />
-                <Image src={fragmented} alt="fragmented" />
+                <Image src={fragmented} alt='fragmented' />
               </div>
-              <ul className="text-sm text-justify list-disc p-4 leading-2 space-y-5">
+              <ul className='leading-2 list-disc space-y-5 p-4 text-justify text-sm'>
                 {enmeshedTips.map((tip, index) => (
-                  <li key={index} className="list-disc ml-4">
+                  <li key={index} className='ml-4 list-disc'>
                     {tip}
                   </li>
                 ))}
diff --git a/src/components/pages/communityHealth/HeaderSection.tsx b/src/components/pages/communityHealth/HeaderSection.tsx
index 63058158..81679f1b 100644
--- a/src/components/pages/communityHealth/HeaderSection.tsx
+++ b/src/components/pages/communityHealth/HeaderSection.tsx
@@ -6,32 +6,32 @@ import Link from '../../global/Link';
 
 function HeaderSection() {
   return (
-    <Paper className="flex flex-col md:flex-row justify-between px-4 md:px-8 py-6 rounded-xl shadow-box space-y-4">
-      <div className="md:w-3/5 space-y-4">
-        <h3 className="text-xl md:text-3xl font-bold">
+    <Paper className='flex flex-col justify-between space-y-4 rounded-xl px-4 py-6 shadow-box md:flex-row md:px-8'>
+      <div className='space-y-4 md:w-3/5'>
+        <h3 className='text-xl font-bold md:text-3xl'>
           When is your community healthy?
         </h3>
-        <p className="text-sm">
+        <p className='text-sm'>
           Here you will find health indicators based on our{' '}
           <Link
-            target="_blank"
+            target='_blank'
             to={
               'https://rndao.mirror.xyz/F-SMj6p_jdYvrMMkR1d9Hd6YbEg39qItTKfjo-zkgqM'
             }
-            color="secondary"
-            className="font-semibold"
+            color='secondary'
+            className='font-semibold'
           >
             Community Health Research.
           </Link>
         </p>
-        <p className="text-sm">
+        <p className='text-sm'>
           We recommend a monthly review to prioritize areas for improvement,
           <br />
           plan strategic initiatives, and assess progress.
         </p>
       </div>
-      <div className="md:mr-12 mx-auto">
-        <Image src={communityhealth} alt="communityhealth" />
+      <div className='mx-auto md:mr-12'>
+        <Image src={communityhealth} alt='communityhealth' />
       </div>
     </Paper>
   );
diff --git a/src/components/pages/communityHealth/TipsDialog.spec.tsx b/src/components/pages/communityHealth/TipsDialog.spec.tsx
index 2dca703c..d4c6aca9 100644
--- a/src/components/pages/communityHealth/TipsDialog.spec.tsx
+++ b/src/components/pages/communityHealth/TipsDialog.spec.tsx
@@ -20,7 +20,7 @@ describe('TipsDialog', () => {
   test('calls the onClose callback when the close button is clicked', () => {
     const onClose = jest.fn();
     render(
-      <TipsDialog isOpen={true} headerText="Dialog Header" onClose={onClose}>
+      <TipsDialog isOpen={true} headerText='Dialog Header' onClose={onClose}>
         Dialog Content
       </TipsDialog>
     );
@@ -37,7 +37,7 @@ describe('TipsDialog', () => {
   test('renders the dialog with the correct content', () => {
     const contentText = 'Dialog Content';
     render(
-      <TipsDialog isOpen={true} headerText="Dialog Header" onClose={jest.fn()}>
+      <TipsDialog isOpen={true} headerText='Dialog Header' onClose={jest.fn()}>
         {contentText}
       </TipsDialog>
     );
@@ -49,7 +49,7 @@ describe('TipsDialog', () => {
 
   test('renders the dialog when isOpen is true', () => {
     render(
-      <TipsDialog isOpen={true} headerText="Dialog Header" onClose={jest.fn()}>
+      <TipsDialog isOpen={true} headerText='Dialog Header' onClose={jest.fn()}>
         Dialog Content
       </TipsDialog>
     );
@@ -61,7 +61,7 @@ describe('TipsDialog', () => {
 
   test('does not render the dialog when isOpen is false', () => {
     render(
-      <TipsDialog isOpen={false} headerText="Dialog Header" onClose={jest.fn()}>
+      <TipsDialog isOpen={false} headerText='Dialog Header' onClose={jest.fn()}>
         Dialog Content
       </TipsDialog>
     );
diff --git a/src/components/pages/communityHealth/TipsDialog.tsx b/src/components/pages/communityHealth/TipsDialog.tsx
index 85f36e8e..7d2932c7 100644
--- a/src/components/pages/communityHealth/TipsDialog.tsx
+++ b/src/components/pages/communityHealth/TipsDialog.tsx
@@ -22,9 +22,9 @@ function TipsDialog({
   return (
     <Dialog
       open={isOpen}
-      maxWidth="md"
+      maxWidth='md'
       fullWidth
-      className="overflow-hidden"
+      className='overflow-hidden'
       sx={{
         '& .MuiDialog-container': {
           alignItems: 'flex-start',
@@ -37,17 +37,17 @@ function TipsDialog({
         },
       }}
     >
-      <DialogTitle className="flex justify-between items-center text-center bg-secondary text-white">
-        <h4 className="text-base">{headerText}</h4>
+      <DialogTitle className='flex items-center justify-between bg-secondary text-center text-white'>
+        <h4 className='text-base'>{headerText}</h4>
         <IoClose
           size={30}
           onClick={handleClose}
-          className="cursor-pointer"
-          data-testid="close-icon"
+          className='cursor-pointer'
+          data-testid='close-icon'
         />
       </DialogTitle>
       <DialogContent>
-        <div className="text-center pb-4">{children}</div>
+        <div className='pb-4 text-center'>{children}</div>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/pages/communitySettings/TcIntegrationDialog.spec.tsx b/src/components/pages/communitySettings/TcIntegrationDialog.spec.tsx
index 61d9a99e..9d5b857d 100644
--- a/src/components/pages/communitySettings/TcIntegrationDialog.spec.tsx
+++ b/src/components/pages/communitySettings/TcIntegrationDialog.spec.tsx
@@ -7,10 +7,10 @@ describe('<TcIntegrationDialog />', () => {
     const mockOnClose = jest.fn();
     const { getByText } = render(
       <TcIntegrationDialog
-        title="Test Title"
+        title='Test Title'
         showDialog={true}
         bodyContent={<p>Test Content</p>}
-        buttonText="Test Button"
+        buttonText='Test Button'
         onClose={mockOnClose}
       />
     );
diff --git a/src/components/pages/communitySettings/TcIntegrationDialog.tsx b/src/components/pages/communitySettings/TcIntegrationDialog.tsx
index 6bfe2520..284d9599 100644
--- a/src/components/pages/communitySettings/TcIntegrationDialog.tsx
+++ b/src/components/pages/communitySettings/TcIntegrationDialog.tsx
@@ -66,23 +66,23 @@ function TcIntegrationDialog({
       }}
       {...props}
     >
-      <div className="block p-2">
+      <div className='block p-2'>
         <IoCloseSharp
           size={36}
           onClick={onClose}
-          className="float-right cursor-pointer"
+          className='float-right cursor-pointer'
         />
       </div>
-      <div className="md:w-5/6 mx-auto px-6 md:px-8 pb-8 space-y-4">
+      <div className='mx-auto space-y-4 px-6 pb-8 md:w-5/6 md:px-8'>
         <TcText
           text={title}
-          variant="h6"
-          fontWeight="extraBold"
-          className="text-left md:text-center"
+          variant='h6'
+          fontWeight='extraBold'
+          className='text-left md:text-center'
         />
         {bodyContent}
-        <div className="flex justify-center py-4">
-          <TcButton text={buttonText} variant="contained" onClick={onClose} />
+        <div className='flex justify-center py-4'>
+          <TcButton text={buttonText} variant='contained' onClick={onClose} />
         </div>
       </div>
     </TcDialog>
diff --git a/src/components/pages/memberInteraction/ForceGraphComponent.tsx b/src/components/pages/memberInteraction/ForceGraphComponent.tsx
index 1e53fb30..021ed5c7 100644
--- a/src/components/pages/memberInteraction/ForceGraphComponent.tsx
+++ b/src/components/pages/memberInteraction/ForceGraphComponent.tsx
@@ -135,12 +135,12 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
   };
 
   return (
-    <div className="flex justify-center items-center h-full relative">
+    <div className='relative flex h-full items-center justify-center'>
       <ForceGraph2D
         graphData={{ nodes, links }}
-        nodeLabel="ngu"
+        nodeLabel='ngu'
         nodeVal={(node: CustomNode) => node.size / 1.5}
-        nodeAutoColorBy="id"
+        nodeAutoColorBy='id'
         height={Number(numberOfnodes) > 300 ? 800 : 350}
         {...graphView}
         minZoom={0.5}
@@ -150,14 +150,14 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
         }}
         onBackgroundClick={() => setpopOverOpen(false)}
       />
-      <div className="absolute bottom-4 right-4 flex p-1 py-2 flex-row items-center bg-gray-background rounded-md">
+      <div className='absolute bottom-4 right-4 flex flex-row items-center rounded-md bg-gray-background p-1 py-2'>
         <button
-          className="px-2 pl-1  border-r border-[#AAAAAA]"
+          className='border-r border-[#AAAAAA]  px-2 pl-1'
           onClick={zoomOut}
         >
           <AiOutlineMinus size={20} />
         </button>
-        <button className="px-2 pr-1" onClick={zoomIn}>
+        <button className='px-2 pr-1' onClick={zoomIn}>
           <AiOutlinePlus size={20} />
         </button>
       </div>
@@ -189,36 +189,36 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
           },
         }}
       >
-        <div className="px-3 py-3 flex flex-col items-start space-y-3">
-          <div className="flex flex-row items-center space-x-3">
+        <div className='flex flex-col items-start space-y-3 px-3 py-3'>
+          <div className='flex flex-row items-center space-x-3'>
             <Avatar
               src={`${conf.DISCORD_CDN}avatars/${user?.discordId}/${user?.avatar}.png`}
-              alt="User Avatar"
+              alt='User Avatar'
             />{' '}
-            <div className="flex flex-col items-baseline">
+            <div className='flex flex-col items-baseline'>
               <Typography
-                variant="body2"
-                color="initial"
-                className="font-semibold"
+                variant='body2'
+                color='initial'
+                className='font-semibold'
               >
                 {user ? user.ngu : ''}
               </Typography>
-              <Typography variant="body2" className="text-gray-subtitle">
+              <Typography variant='body2' className='text-gray-subtitle'>
                 {user ? user.username : ''}
               </Typography>
             </div>
           </div>
-          <div className="flex flex-col space-y-1 md:space-y-0 md:flex-row flex-wrap">
+          <div className='flex flex-col flex-wrap space-y-1 md:flex-row md:space-y-0'>
             {user?.roles ? (
               <>
                 {user.roles.slice(0, 4).map((role: IRoles) => (
                   <div
                     key={role.roleId}
-                    className="flex flex-row flex-wrap"
+                    className='flex flex-row flex-wrap'
                     style={{ whiteSpace: 'nowrap' }}
                   >
                     <span
-                      className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs mb-1 mr-1"
+                      className='mb-1 mr-1 rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                       style={{
                         display: 'flex',
                         alignItems: 'center',
@@ -229,7 +229,7 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
                       }}
                     >
                       <span
-                        className="w-2 h-2 rounded-full mr-1"
+                        className='mr-1 h-2 w-2 rounded-full'
                         style={{
                           backgroundColor:
                             role.color !== 0
@@ -243,9 +243,9 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
                   </div>
                 ))}
                 {user.roles.length > 4 && (
-                  <div className="flex flex-row flex-wrap">
+                  <div className='flex flex-row flex-wrap'>
                     <span
-                      className="bg-white p-1 rounded-[4px] border border-[#D1D1D1] text-xs mb-1 mr-1"
+                      className='mb-1 mr-1 rounded-[4px] border border-[#D1D1D1] bg-white p-1 text-xs'
                       style={{
                         display: 'flex',
                         alignItems: 'center',
@@ -258,31 +258,31 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
                 )}
               </>
             ) : (
-              <div className="flex flex-row flex-wrap">
+              <div className='flex flex-row flex-wrap'>
                 <span
-                  className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs"
+                  className='rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                   style={{
                     display: 'flex',
                     alignItems: 'center',
                     backgroundColor: '#AAAAAA',
                   }}
                 >
-                  <span className="w-2 h-2 rounded-full mr-1" />
+                  <span className='mr-1 h-2 w-2 rounded-full' />
                   None
                 </span>
               </div>
             )}
           </div>
-          <div className="flex flex-row w-2/3 justify-center mx-auto items-baseline space-x-8">
-            <div className="text-center text-sm">
+          <div className='mx-auto flex w-2/3 flex-row items-baseline justify-center space-x-8'>
+            <div className='text-center text-sm'>
               <div
                 className={clsx(
-                  'rounded-full w-3.5 h-3.5 bg-secondary mx-auto',
+                  'mx-auto h-3.5 w-3.5 rounded-full bg-secondary',
                   user && user?.radius <= 10
-                    ? 'w-3.5 h-3.5'
+                    ? 'h-3.5 w-3.5'
                     : user && user?.radius > 10 && user?.radius <= 50
-                    ? 'w-5 h-5'
-                    : 'w-8 h-8'
+                      ? 'h-5 w-5'
+                      : 'h-8 w-8'
                 )}
               />
               <span>
@@ -290,27 +290,27 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
                 {user && user?.radius <= 10
                   ? '10'
                   : user && user?.radius > 10 && user?.radius <= 50
-                  ? '50'
-                  : '100'}
+                    ? '50'
+                    : '100'}
               </span>
             </div>
-            <div className="text-center text-sm">
+            <div className='text-center text-sm'>
               <div
                 className={clsx(
-                  'rounded-full mx-auto w-5 h-5',
+                  'mx-auto h-5 w-5 rounded-full',
                   user?.stats === 'BALANCED'
                     ? 'bg-secondary'
                     : user?.stats === 'SENDER'
-                    ? 'bg-green'
-                    : 'bg-yellow-400'
+                      ? 'bg-green'
+                      : 'bg-yellow-400'
                 )}
               />
               <span>
                 {user?.stats === 'BALANCED'
                   ? 'Balanced'
                   : user?.stats === 'SENDER'
-                  ? 'Frequent sender'
-                  : 'Frequent receiver'}
+                    ? 'Frequent sender'
+                    : 'Frequent receiver'}
               </span>
             </div>
           </div>
diff --git a/src/components/pages/memberInteraction/HintBox.tsx b/src/components/pages/memberInteraction/HintBox.tsx
index 0b0f7187..21601740 100644
--- a/src/components/pages/memberInteraction/HintBox.tsx
+++ b/src/components/pages/memberInteraction/HintBox.tsx
@@ -2,35 +2,35 @@ import React from 'react';
 
 export default function HintBox() {
   return (
-    <div className="bg-gray-hover py-7 md:px-5 lg:px-7 rounded-xl space-y-6 overflow-hidden">
-      <p className="font-semibold whitespace-nowrap">Number of interactions</p>
-      <div className="flex flex-row justify-around items-baseline">
-        <div className="text-center text-sm">
-          <div className="rounded-full w-3.5 h-3.5 bg-secondary mx-auto" />
+    <div className='space-y-6 overflow-hidden rounded-xl bg-gray-hover py-7 md:px-5 lg:px-7'>
+      <p className='whitespace-nowrap font-semibold'>Number of interactions</p>
+      <div className='flex flex-row items-baseline justify-around'>
+        <div className='text-center text-sm'>
+          <div className='mx-auto h-3.5 w-3.5 rounded-full bg-secondary' />
           <span>+10</span>
         </div>
-        <div className="text-center text-sm">
-          <div className="rounded-full w-5 h-5 bg-secondary mx-auto" />
+        <div className='text-center text-sm'>
+          <div className='mx-auto h-5 w-5 rounded-full bg-secondary' />
           <span>+50</span>
         </div>
-        <div className="text-center text-sm">
-          <div className="rounded-full w-8 h-8 bg-secondary mx-auto" />
+        <div className='text-center text-sm'>
+          <div className='mx-auto h-8 w-8 rounded-full bg-secondary' />
           <span>+100</span>
         </div>
       </div>
-      <div className="mx-auto text-center space-y-2">
-        <p className="font-semibold">Member Behaviour</p>
-        <div className="flex flex-row justify-start text-center text-sm items-center ml-5">
-          <div className="rounded-full w-5 h-5 bg-yellow-400" />
-          <span className="pl-4 whitespace-nowrap">Frequent receiver</span>
+      <div className='mx-auto space-y-2 text-center'>
+        <p className='font-semibold'>Member Behaviour</p>
+        <div className='ml-5 flex flex-row items-center justify-start text-center text-sm'>
+          <div className='h-5 w-5 rounded-full bg-yellow-400' />
+          <span className='whitespace-nowrap pl-4'>Frequent receiver</span>
         </div>
-        <div className="flex flex-row justify-start text-center text-sm items-center ml-5">
-          <div className="rounded-full w-5 h-5 bg-green" />
-          <span className="pl-4 whitespace-nowrap">Frequent sender</span>
+        <div className='ml-5 flex flex-row items-center justify-start text-center text-sm'>
+          <div className='h-5 w-5 rounded-full bg-green' />
+          <span className='whitespace-nowrap pl-4'>Frequent sender</span>
         </div>
-        <div className="flex flex-row justify-start text-center text-sm items-center ml-5">
-          <div className="rounded-full w-5 h-5 bg-secondary" />
-          <span className="pl-4 whitespace-nowrap">Balanced</span>
+        <div className='ml-5 flex flex-row items-center justify-start text-center text-sm'>
+          <div className='h-5 w-5 rounded-full bg-secondary' />
+          <span className='whitespace-nowrap pl-4'>Balanced</span>
         </div>
       </div>
     </div>
diff --git a/src/components/pages/pageIndex/ActiveMemberComposition.tsx b/src/components/pages/pageIndex/ActiveMemberComposition.tsx
index 8bd5c171..82290cd1 100644
--- a/src/components/pages/pageIndex/ActiveMemberComposition.tsx
+++ b/src/components/pages/pageIndex/ActiveMemberComposition.tsx
@@ -42,7 +42,7 @@ const ActiveMemberComposition = () => {
         tooltipText: (
           <>
             <span>Interactions are all messages that:</span>
-            <ol className="list-disc pl-8">
+            <ol className='list-disc pl-8'>
               <li>mention someone</li>
               <li>receive a reply</li>
               <li>receive a reaction</li>
@@ -104,27 +104,27 @@ const ActiveMemberComposition = () => {
   }, [activeMembers]);
 
   return (
-    <div className="bg-white shadow-box rounded-lg py-8 px-5">
-      <div className="px-3">
-        <div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-3 md:space-y-0">
-          <h3 className="font-bold text-xl md:text-2xl pb-3">
+    <div className='rounded-lg bg-white py-8 px-5 shadow-box'>
+      <div className='px-3'>
+        <div className='flex flex-col space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0'>
+          <h3 className='pb-3 text-xl font-bold md:text-2xl'>
             Members overview
           </h3>
         </div>
-        <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+        <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
           <StatisticalData
             statistics={[...statistics]}
             hideInformationText={true}
           />
         </div>
-        <div className="text-center mb-3">
+        <div className='mb-3 text-center'>
           <TcButton
             text={'Show more'}
-            variant="contained"
+            variant='contained'
             onClick={() => {
               router.push('/statistics');
             }}
-            className="py-2 px-[5rem]"
+            className='py-2 px-[5rem]'
           />
         </div>
       </div>
diff --git a/src/components/pages/pageIndex/HeatmapChart.tsx b/src/components/pages/pageIndex/HeatmapChart.tsx
index d578ea17..7cc9d888 100644
--- a/src/components/pages/pageIndex/HeatmapChart.tsx
+++ b/src/components/pages/pageIndex/HeatmapChart.tsx
@@ -179,17 +179,17 @@ const HeatmapChart = () => {
   }, [dateRange, selectedZone, platformId, platformFetched]);
 
   return (
-    <div className="bg-white shadow-box rounded-lg p-5 min-h-[400px]">
-      <div className="flex flex-col md:flex-row justify-between items-baseline">
-        <div className="px-3">
-          <h3 className="font-bold text-xl md:text-2xl">
+    <div className='min-h-[400px] rounded-lg bg-white p-5 shadow-box'>
+      <div className='flex flex-col items-baseline justify-between md:flex-row'>
+        <div className='px-3'>
+          <h3 className='text-xl font-bold md:text-2xl'>
             When is the community most active?
           </h3>
-          <p className="text-md md:text-base pt-4 text-gray-700 font-light">
+          <p className='text-md pt-4 font-light text-gray-700 md:text-base'>
             Hourly messages summed over the selected time period.
           </p>
         </div>
-        <div className="flex flex-col-reverse px-2.5 w-full md:w-auto md:flex-row space-y-3 md:space-y-0 md:space-x-3">
+        <div className='flex w-full flex-col-reverse space-y-3 px-2.5 md:w-auto md:flex-row md:space-y-0 md:space-x-3'>
           <RangeSelect
             options={communityActiveDates}
             icon={<FiCalendar size={18} />}
@@ -198,28 +198,28 @@ const HeatmapChart = () => {
           />
         </div>
       </div>
-      <div className="flex flex-col md:flex-row justify-start md:justify-between items-center md:py-2 px-3">
-        <div className="flex flex-col md:flex-row md:space-x-3 md:mt-3 w-full">
-          <div className="flex flex-wrap">
+      <div className='flex flex-col items-center justify-start px-3 md:flex-row md:justify-between md:py-2'>
+        <div className='flex w-full flex-col md:mt-3 md:flex-row md:space-x-3'>
+          <div className='flex flex-wrap'>
             <ZonePicker
               selectedZone={selectedZone}
               handleSelectedZone={handleSelectedZone}
             />
           </div>
-          <div className="flex flex-wrap">
+          <div className='flex flex-wrap'>
             <FilterByChannels
               handleFetchHeatmapByChannels={handleFetchHeatmapByChannels}
             />
           </div>
         </div>
-        <div className="hidden md:block">
+        <div className='hidden md:block'>
           <NumberOfMessages />
         </div>
       </div>
-      <div className="relative">
+      <div className='relative'>
         {loading && (
-          <div className="absolute inset-0 flex justify-center items-center bg-white bg-opacity-30 z-10">
-            <Loading size={40} height="440px" />
+          <div className='absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-30'>
+            <Loading size={40} height='440px' />
           </div>
         )}
 
@@ -232,7 +232,7 @@ const HeatmapChart = () => {
         </div>
       </div>
 
-      <div className="block ml-3 md:hidden">
+      <div className='ml-3 block md:hidden'>
         <NumberOfMessages />
       </div>
     </div>
diff --git a/src/components/pages/pageIndex/MemberInteractionGraph.tsx b/src/components/pages/pageIndex/MemberInteractionGraph.tsx
index e0869fe5..db3f5dd6 100644
--- a/src/components/pages/pageIndex/MemberInteractionGraph.tsx
+++ b/src/components/pages/pageIndex/MemberInteractionGraph.tsx
@@ -6,30 +6,30 @@ import TcButton from '../../shared/TcButton';
 
 export default function MemberInteractionGraph() {
   return (
-    <div className="bg-white shadow-box rounded-lg p-5">
-      <div className="flex flex-col md:flex-row justify-start pt-4 space-x-6">
-        <div className="px-3 space-y-6 md:w-1/2">
-          <h3 className="font-bold text-xl md:text-2xl">
+    <div className='rounded-lg bg-white p-5 shadow-box'>
+      <div className='flex flex-col justify-start space-x-6 pt-4 md:flex-row'>
+        <div className='space-y-6 px-3 md:w-1/2'>
+          <h3 className='text-xl font-bold md:text-2xl'>
             Member interactions graph
           </h3>
           <p>
             Spot value-adding members in your community in member interaction{' '}
-            <br className="hidden md:flex" />
+            <br className='hidden md:flex' />
             network graph.
           </p>
         </div>
-        <div className="md:pl-12">
-          <Image alt="Network graph" src={networkGraph} />
+        <div className='md:pl-12'>
+          <Image alt='Network graph' src={networkGraph} />
         </div>
       </div>
-      <div className="text-center pt-6 md:pt-0 mb-3">
+      <div className='mb-3 pt-6 text-center md:pt-0'>
         <TcButton
           text={'Show more'}
-          variant="contained"
+          variant='contained'
           onClick={() => {
             router.push('/membersInteraction');
           }}
-          className="py-2 px-[5rem]"
+          className='py-2 px-[5rem]'
         />
       </div>
     </div>
diff --git a/src/components/pages/pageIndex/NumberOfMessages.tsx b/src/components/pages/pageIndex/NumberOfMessages.tsx
index e340acc4..640fe5e6 100644
--- a/src/components/pages/pageIndex/NumberOfMessages.tsx
+++ b/src/components/pages/pageIndex/NumberOfMessages.tsx
@@ -15,14 +15,14 @@ function NumberOfMessages() {
 
   return (
     <div>
-      <div className="flex flex-col">
-        <p className="text-base">Number of messages </p>
-        <div className="flex flex-row">
+      <div className='flex flex-col'>
+        <p className='text-base'>Number of messages </p>
+        <div className='flex flex-row'>
           {squareTexts.map((text, index) => (
             <div
               key={index}
               className={clsx(
-                `square ${squareColors[index]} w-[35px] h-[35px] md:w-[40px] md:h-[40px] flex justify-center items-center text-sm rounded-sm text-center`,
+                `square ${squareColors[index]} flex h-[35px] w-[35px] items-center justify-center rounded-sm text-center text-sm md:h-[40px] md:w-[40px]`,
                 index <= 3 ? 'text-black' : 'text-white'
               )}
             >
diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx
index 852f83e2..e76a2c1d 100644
--- a/src/components/pages/statistics/ActiveMembersComposition.tsx
+++ b/src/components/pages/statistics/ActiveMembersComposition.tsx
@@ -137,7 +137,7 @@ export default function ActiveMembersComposition({
         tooltipText: (
           <>
             <span>Interactions are all messages that:</span>
-            <ol className="list-disc pl-8">
+            <ol className='list-disc pl-8'>
               <li>mention someone</li>
               <li>receive a reply</li>
               <li>receive a reaction</li>
@@ -250,20 +250,20 @@ export default function ActiveMembersComposition({
 
   return (
     <>
-      <div className="flex flex-row justify-between">
-        <div className="w-full">
+      <div className='flex flex-row justify-between'>
+        <div className='w-full'>
           <div>
-            <h3 className="text-xl font-medium text-lite-black">
+            <h3 className='text-xl font-medium text-lite-black'>
               Members overview
             </h3>
-            <p className="py-2">Today's statistics</p>
+            <p className='py-2'>Today's statistics</p>
           </div>
         </div>
       </div>
-      <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+      <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
         <StatisticalData
           ableToFilter={true}
-          overviewType="activeMemberComposition"
+          overviewType='activeMemberComposition'
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
         />
@@ -271,9 +271,9 @@ export default function ActiveMembersComposition({
 
       <ActiveMemberBreakdown />
 
-      <div className="w-full">
-        <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-center pb-4">
-          <h3 className="text-xl font-medium text-lite-black">
+      <div className='w-full'>
+        <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Active members over time
           </h3>
           <RangeSelect
@@ -285,7 +285,7 @@ export default function ActiveMembersComposition({
         </div>
       </div>
       {activeMembersLoading ? (
-        <Loading height="400px" />
+        <Loading height='400px' />
       ) : (
         <LineGraph options={options} />
       )}
diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx
index fb4211a1..6ccc9307 100644
--- a/src/components/pages/statistics/DisengagedMembersComposition.tsx
+++ b/src/components/pages/statistics/DisengagedMembersComposition.tsx
@@ -141,7 +141,7 @@ export default function DisengagedMembersComposition({
         tooltipText: (
           <>
             <span>Interactions are all messages that:</span>
-            <ol className="list-disc pl-8">
+            <ol className='list-disc pl-8'>
               <li>mention someone</li>
               <li>receive a reply</li>
               <li>receive a reaction</li>
@@ -234,20 +234,20 @@ export default function DisengagedMembersComposition({
   };
   return (
     <>
-      <div className="flex flex-row justify-between">
-        <div className="w-full">
+      <div className='flex flex-row justify-between'>
+        <div className='w-full'>
           <div>
-            <h3 className="text-xl font-medium text-lite-black">
+            <h3 className='text-xl font-medium text-lite-black'>
               Members overview
             </h3>
-            <p className="py-2">Today's statistics</p>
+            <p className='py-2'>Today's statistics</p>
           </div>
         </div>
       </div>
-      <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+      <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
         <StatisticalData
           ableToFilter={true}
-          overviewType="disengagedMemberComposition"
+          overviewType='disengagedMemberComposition'
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
         />
@@ -255,9 +255,9 @@ export default function DisengagedMembersComposition({
 
       <DisengagedMembersCompositionBreakdown />
 
-      <div className="w-full">
-        <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-center pb-4">
-          <h3 className="text-xl font-medium text-lite-black">
+      <div className='w-full'>
+        <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Disengaged members over time
           </h3>
           <RangeSelect
@@ -269,7 +269,7 @@ export default function DisengagedMembersComposition({
         </div>
       </div>
       {disengagedMembersLoading ? (
-        <Loading height="400px" />
+        <Loading height='400px' />
       ) : (
         <LineGraph options={options} />
       )}
diff --git a/src/components/pages/statistics/InactiveMembers.tsx b/src/components/pages/statistics/InactiveMembers.tsx
index 51beaf4d..051a3daa 100644
--- a/src/components/pages/statistics/InactiveMembers.tsx
+++ b/src/components/pages/statistics/InactiveMembers.tsx
@@ -111,17 +111,17 @@ export default function InactiveMembers({
 
   return (
     <>
-      <div className="flex flex-row justify-between">
-        <h3 className="text-xl font-medium text-lite-black">
+      <div className='flex flex-row justify-between'>
+        <h3 className='text-xl font-medium text-lite-black'>
           Inactive members
         </h3>
       </div>
-      <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+      <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
         <StatisticalData statistics={[...statistics]} />
       </div>
-      <div className="w-full">
-        <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-center pb-4">
-          <h3 className="text-xl font-medium text-lite-black">
+      <div className='w-full'>
+        <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Returned members over time
           </h3>
           <RangeSelect
@@ -133,7 +133,7 @@ export default function InactiveMembers({
         </div>
       </div>
       {inactiveMembersLoading ? (
-        <Loading height="400px" />
+        <Loading height='400px' />
       ) : (
         <LineGraph options={options} />
       )}
diff --git a/src/components/pages/statistics/InteractionsSection.tsx b/src/components/pages/statistics/InteractionsSection.tsx
index b6147b8d..30285f45 100644
--- a/src/components/pages/statistics/InteractionsSection.tsx
+++ b/src/components/pages/statistics/InteractionsSection.tsx
@@ -123,21 +123,21 @@ export default function InteractionsSection({
 
   return (
     <>
-      <div className="flex flex-row justify-between">
-        <div className="w-full">
+      <div className='flex flex-row justify-between'>
+        <div className='w-full'>
           <div>
-            <h3 className="text-xl font-medium text-lite-black">
+            <h3 className='text-xl font-medium text-lite-black'>
               Type of interaction
             </h3>
           </div>
         </div>
       </div>
-      <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+      <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
         <StatisticalData statistics={[...statistics]} />
       </div>
-      <div className="w-full">
-        <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-center pb-4">
-          <h3 className="text-xl font-medium text-lite-black">
+      <div className='w-full'>
+        <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Members activity over time
           </h3>
           <RangeSelect
@@ -149,7 +149,7 @@ export default function InteractionsSection({
         </div>
       </div>
       {interactionsLoading ? (
-        <Loading height="400px" />
+        <Loading height='400px' />
       ) : (
         <LineGraph options={options} />
       )}
diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx
index 8df069cb..0f8a7616 100644
--- a/src/components/pages/statistics/Onboarding.tsx
+++ b/src/components/pages/statistics/Onboarding.tsx
@@ -212,20 +212,20 @@ export default function Onboarding({
 
   return (
     <>
-      <div className="flex flex-row justify-between">
-        <div className="w-full">
+      <div className='flex flex-row justify-between'>
+        <div className='w-full'>
           <div>
-            <h3 className="text-xl font-medium text-lite-black">
+            <h3 className='text-xl font-medium text-lite-black'>
               Onboarding overview
             </h3>
-            <p className="py-2">New members retention</p>
+            <p className='py-2'>New members retention</p>
           </div>
         </div>
       </div>
-      <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
+      <div className='overflow-y-hidden overflow-x-scroll md:overflow-hidden'>
         <StatisticalData
           ableToFilter={true}
-          overviewType="onboardingMemberComposition"
+          overviewType='onboardingMemberComposition'
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
         />
@@ -233,9 +233,9 @@ export default function Onboarding({
 
       <OnboardingMembersBreakdown />
 
-      <div className="w-full">
-        <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-center pb-4">
-          <h3 className="text-xl font-medium text-lite-black">
+      <div className='w-full'>
+        <div className='flex flex-col items-center justify-between space-y-2 pb-4 md:flex-row md:space-y-0'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Onboarded members over time
           </h3>
           <RangeSelect
@@ -247,7 +247,7 @@ export default function Onboarding({
         </div>
       </div>
       {onboardingMembersLoading ? (
-        <Loading height="400px" />
+        <Loading height='400px' />
       ) : (
         <LineGraph options={options} />
       )}
diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx
index 5dca4872..bad313b5 100644
--- a/src/components/pages/statistics/StatisticalData.tsx
+++ b/src/components/pages/statistics/StatisticalData.tsx
@@ -68,22 +68,22 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
     <>
       <div
         className={clsx(
-          'flex flex-row my-1 space-x-1',
+          'my-1 flex flex-row space-x-1',
           statistics.length > 3 ? 'justify-between' : 'justify-start'
         )}
       >
         {statistics.map((stat, index) => (
           <div
             className={clsx(
-              'flex flex-col flex-1 text-center justify-center relative rounded-2xl',
+              'relative flex flex-1 flex-col justify-center rounded-2xl text-center',
               stat.description
-                ? 'min-w-full h-[200px] md:min-w-[100px] xl:min-w-[220px] md:max-w-[280px] md:h-[200px]'
-                : 'min-w-full h-[170px] md:min-w-[100px] xl:min-w-[280px] md:max-w-[280px] md:h-[180px]',
+                ? 'h-[200px] min-w-full md:h-[200px] md:min-w-[100px] md:max-w-[280px] xl:min-w-[220px]'
+                : 'h-[170px] min-w-full md:h-[180px] md:min-w-[100px] md:max-w-[280px] xl:min-w-[280px]',
               stat.customBackground || stat.label === activeState
                 ? 'bg-gray-hover'
                 : '',
               ableToFilter
-                ? 'hover:bg-gray-background ease-in delay-75 cursor-pointer'
+                ? 'cursor-pointer delay-75 ease-in hover:bg-gray-background'
                 : ''
             )}
             onClick={() => {
@@ -95,7 +95,7 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
           >
             <span
               className={clsx(
-                'absolute top-0 right-0 px-2 py-1 m-2 flex items-center justify-center rounded-md text-white text-xs z-10',
+                'absolute top-0 right-0 z-10 m-2 flex items-center justify-center rounded-md px-2 py-1 text-xs text-white',
                 stat.percentageChange >= 0 ? ' bg-purple-light' : 'bg-black'
               )}
             >
@@ -106,34 +106,34 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
               ) : (
                 ''
               )}{' '}
-              <span className="pt-0.5">
+              <span className='pt-0.5'>
                 {typeof stat?.percentageChange === 'number'
                   ? stat?.percentageChange.toFixed(0) + '%'
                   : stat?.percentageChange}
               </span>
             </span>
-            <span className="text-4xl font-bold pb-1">{stat.value ?? 0}</span>
-            <div className="flex items-center justify-center">
+            <span className='pb-1 text-4xl font-bold'>{stat.value ?? 0}</span>
+            <div className='flex items-center justify-center'>
               <div
                 className={clsx(
-                  'rounded-full w-3.5 h-3.5 mr-2',
+                  'mr-2 h-3.5 w-3.5 rounded-full',
                   stat.colorBadge
                 )}
               />
-              <span className="text-base flex items-center">
+              <span className='flex items-center text-base'>
                 {stat.label}
                 {stat.hasTooltip && (
                   <ClickAwayListener onClickAway={handleTooltipClose}>
                     <Tooltip
                       title={stat.tooltipText}
                       arrow
-                      placement="bottom"
+                      placement='bottom'
                       enterTouchDelay={0}
                     >
                       <span onClick={handleTooltipOpen}>
                         <AiOutlineExclamationCircle
                           size={'18px'}
-                          className="mx-auto ml-1"
+                          className='mx-auto ml-1'
                         />
                       </span>
                     </Tooltip>
@@ -142,7 +142,7 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
               </span>
             </div>
             {stat.description && (
-              <span className="text-sm text-center text-gray-custom px-5 pt-2">
+              <span className='px-5 pt-2 text-center text-sm text-gray-custom'>
                 {stat.description}
               </span>
             )}
@@ -152,14 +152,14 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
       {hideInformationText ? (
         ''
       ) : (
-        <div className="flex flex-row space-x-3 items-center mt-3 mb-12">
-          <div className=" flex flex-row justify-center  items-center bg-purple-light text-white rounded w-12">
+        <div className='mt-3 mb-12 flex flex-row items-center space-x-3'>
+          <div className=' flex w-12 flex-row  items-center justify-center rounded bg-purple-light text-white'>
             <RxArrowTopRight size={'18px'} /> %
           </div>
-          <div className=" flex flex-row justify-center  items-center bg-gray-custom text-white rounded w-12">
+          <div className=' flex w-12 flex-row  items-center justify-center rounded bg-gray-custom text-white'>
             <RxArrowBottomRight size={'18px'} /> %
           </div>
-          <p className="text-sm">% compared to the last week</p>
+          <p className='text-sm'>% compared to the last week</p>
         </div>
       )}
     </>
diff --git a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
index 5fd7ef62..97f76154 100644
--- a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
@@ -25,35 +25,35 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
 
   return (
     <Dialog open={open} onClose={onClose} {...props}>
-      <div className="pb-8 pt-6 px-5 space-y-6">
+      <div className='space-y-6 px-5 pb-8 pt-6'>
         <IoClose
-          data-testid="close-modal-icon"
+          data-testid='close-modal-icon'
           size={40}
           onClick={handleClose}
-          className="cursor-pointer float-right"
+          className='float-right cursor-pointer'
         />
-        <div className="py-2 px-8 space-y-6">
-          <div className="flex flex-row items-center">
+        <div className='space-y-6 py-2 px-8'>
+          <div className='flex flex-row items-center'>
             <Avatar
               src={`${conf.DISCORD_CDN}avatars/${rowDetail?.discordId}/${rowDetail?.avatar}.png`}
-              alt="User Avatar"
+              alt='User Avatar'
             />
-            <span className="ml-2 font-semibold text-base">
+            <span className='ml-2 text-base font-semibold'>
               {rowDetail?.username}
             </span>
           </div>
           <div>
-            <p className="text-base pb-2 font-semibold">Roles:</p>
-            <div className="flex flex-row flex-wrap">
+            <p className='pb-2 text-base font-semibold'>Roles:</p>
+            <div className='flex flex-row flex-wrap'>
               {rowDetail?.roles.map((role: any) => (
                 <div
                   key={role.roleId}
-                  className="flex flex-row flex-wrap items-center first:ml-0 ml-1"
+                  className='ml-1 flex flex-row flex-wrap items-center first:ml-0'
                   style={{ whiteSpace: 'nowrap' }}
-                  data-testid="role"
+                  data-testid='role'
                 >
                   <span
-                    className="bg-white p-1 px-2 mb-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
+                    className='mb-2 flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                     style={{
                       display: 'flex',
                       alignItems: 'center',
@@ -64,7 +64,7 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                     }}
                   >
                     <span
-                      className="w-2 h-2 rounded-full mr-2"
+                      className='mr-2 h-2 w-2 rounded-full'
                       style={{
                         backgroundColor:
                           role.color !== 0
@@ -80,10 +80,10 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
             </div>
           </div>
           <div>
-            <p className="text-base pb-2 font-semibold">
+            <p className='pb-2 text-base font-semibold'>
               Activity composition:
             </p>
-            <div className="flex flex-row flex-wrap">
+            <div className='flex flex-row flex-wrap'>
               {rowDetail && rowDetail?.activityComposition.length > 0 ? (
                 rowDetail?.activityComposition.map((composition: any) => {
                   const matchedOption = options.find(
@@ -96,11 +96,11 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                   return (
                     <div
                       key={composition}
-                      className="flex flex-row flex-wrap items-center first:ml-0 ml-1"
-                      data-testid="activity-composition"
+                      className='ml-1 flex flex-row flex-wrap items-center first:ml-0'
+                      data-testid='activity-composition'
                     >
                       <span
-                        className="bg-white p-1 px-2 mb-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
+                        className='mb-2 flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                         style={{
                           backgroundColor: backgroundColor,
                           display: 'flex',
@@ -108,7 +108,7 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                         }}
                       >
                         <span
-                          className="w-2 h-2 rounded-full mr-2"
+                          className='mr-2 h-2 w-2 rounded-full'
                           style={{
                             backgroundColor: backgroundColor,
                             flexShrink: 0,
@@ -120,9 +120,9 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                   );
                 })
               ) : (
-                <div className="flex flex-row flex-wrap items-center">
+                <div className='flex flex-row flex-wrap items-center'>
                   <span
-                    className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
+                    className='flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                     style={{
                       backgroundColor: '#96A5A6',
                       display: 'flex',
@@ -130,7 +130,7 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                     }}
                   >
                     <span
-                      className="w-2 h-2 rounded-full mr-2"
+                      className='mr-2 h-2 w-2 rounded-full'
                       style={{
                         backgroundColor: '#96A5A6',
                         flexShrink: 0,
diff --git a/src/components/pages/statistics/memberBreakdowns/CustomPagination.tsx b/src/components/pages/statistics/memberBreakdowns/CustomPagination.tsx
index 64a72856..6ac29836 100644
--- a/src/components/pages/statistics/memberBreakdowns/CustomPagination.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/CustomPagination.tsx
@@ -24,11 +24,11 @@ const CustomPagination: React.FC<PaginationProps> = ({
 
   return (
     <Pagination
-      shape="rounded"
+      shape='rounded'
       count={totalPages}
       page={currentPage}
       onChange={(event, page) => handleChangePage(page)}
-      renderItem={(item) => <PaginationItem component="button" {...item} />}
+      renderItem={(item) => <PaginationItem component='button' {...item} />}
     />
   );
 };
diff --git a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
index 22992403..57ec0a7a 100644
--- a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
@@ -242,7 +242,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 
   return (
     <>
-      <Table className="border-separate border-spacing-y-2">
+      <Table className='border-separate border-spacing-y-2'>
         <TableHead>
           <TableRow>
             {columns.map((column, columnIndex) => (
@@ -266,8 +266,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
                   <>
                     <Button
                       onClick={handleOpenActivityPopup}
-                      size="small"
-                      variant="text"
+                      size='small'
+                      variant='text'
                       sx={{ color: 'black', minWidth: '64px' }}
                       endIcon={
                         isActivityPopupOpen ? (
@@ -292,17 +292,17 @@ const CustomTable: React.FC<CustomTableProps> = ({
                         horizontal: 'left',
                       }}
                     >
-                      <div className="px-1 py-3">
+                      <div className='px-1 py-3'>
                         <FormControlLabel
-                          className="px-4 py-1"
+                          className='px-4 py-1'
                           control={
                             <Checkbox
-                              color="secondary"
+                              color='secondary'
                               checked={selectAllActivityOptions}
                               onChange={handleSelectAllActivityOptions}
                             />
                           }
-                          label={<div className="text-base">All</div>}
+                          label={<div className='text-base'>All</div>}
                         />
                         {activityCompositionOptions.map(
                           (option: IActivityCompositionOptions) => (
@@ -310,7 +310,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                               <FormControlLabel
                                 control={
                                   <Checkbox
-                                    color="secondary"
+                                    color='secondary'
                                     checked={selectedActivityOptions.includes(
                                       option.value
                                     )}
@@ -319,15 +319,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                   />
                                 }
                                 label={
-                                  <div className="flex items-center">
+                                  <div className='flex items-center'>
                                     <span
-                                      className="w-4 h-4 rounded-full mr-1"
+                                      className='mr-1 h-4 w-4 rounded-full'
                                       style={{
                                         backgroundColor: option.color,
                                         flexShrink: 0,
                                       }}
                                     />
-                                    <div className="text-base">
+                                    <div className='text-base'>
                                       {option.name}
                                     </div>
                                   </div>
@@ -343,8 +343,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
                   <>
                     <Button
                       onClick={handleOpenJoinedAtPopup}
-                      size="small"
-                      variant="text"
+                      size='small'
+                      variant='text'
                       sx={{ color: 'black', minWidth: '64px' }}
                       endIcon={
                         isJoinedAtPopupOpen ? (
@@ -376,7 +376,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           onClick={() => handleSortOptionClick('desc')}
                           selected={selectedSortOption === 'desc'}
                         >
-                          <ListItemText primary="Newest members" />
+                          <ListItemText primary='Newest members' />
                         </ListItem>
                         <ListItem
                           button
@@ -384,20 +384,20 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           onClick={() => handleSortOptionClick('asc')}
                           selected={selectedSortOption === 'asc'}
                         >
-                          <ListItemText primary="Oldest members" />
+                          <ListItemText primary='Oldest members' />
                         </ListItem>
                       </List>
                     </Popover>
                   </>
                 ) : column.id === 'username' ? (
-                  <div className="flex flex-row items-center">
+                  <div className='flex flex-row items-center'>
                     <span>Name</span>
                     <TextField
-                      variant="standard"
+                      variant='standard'
                       placeholder={'Search member'}
                       InputProps={{
                         disableUnderline: true,
-                        startAdornment: <MdSearch color="disabled" size={25} />,
+                        startAdornment: <MdSearch color='disabled' size={25} />,
                         sx: {
                           backgroundColor: '#F5F5F5',
                           padding: '0 0.4rem',
@@ -422,10 +422,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
               <TableCell
                 key={columns.length}
                 colSpan={columns.length}
-                align="center"
+                align='center'
                 sx={{ border: 'none' }}
               >
-                <div className="flex items-center justify-center h-40">
+                <div className='flex h-40 items-center justify-center'>
                   <Loading />
                 </div>
               </TableCell>
@@ -453,24 +453,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           border:
                             index % 2 === 0 ? 'none' : '1px solid #F5F5F5',
                         }}
-                        className={`px-1 first:px-3 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0 ${
+                        className={`px-1 py-4 first:rounded-l-md first:border-r-0 first:px-3 last:rounded-r-md last:border-l-0 ${
                           columnIndex === 1 || columnIndex === 2
                             ? 'border-l-0 border-r-0'
                             : ''
                         }`}
                       >
                         {column.id === 'username' ? (
-                          <div className="flex items-center space-x-4">
+                          <div className='flex items-center space-x-4'>
                             <Avatar
                               src={
                                 row.discordId && row?.avatar
                                   ? `${conf.DISCORD_CDN}avatars/${row.discordId}/${row?.avatar}.png`
                                   : ''
                               }
-                              alt="User Avatar"
+                              alt='User Avatar'
                             />
-                            <p className="flex flex-row space-x-1.5 whitespace-nowrap">
-                              <span className="font-semibold text-base">
+                            <p className='flex flex-row space-x-1.5 whitespace-nowrap'>
+                              <span className='text-base font-semibold'>
                                 {row.ngu}
                               </span>
                               {row[column.id].length > 10 ? (
@@ -479,10 +479,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                 >
                                   <Tooltip
                                     title={row[column.id]}
-                                    placement="top"
+                                    placement='top'
                                     enterTouchDelay={0}
                                   >
-                                    <span className="text-gray-subtitle text-base cursor-pointer">
+                                    <span className='cursor-pointer text-base text-gray-subtitle'>
                                       {`${row[column.id].slice(0, 3)}...${row[
                                         column.id
                                       ].slice(-4)}`}
@@ -490,24 +490,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                   </Tooltip>
                                 </ClickAwayListener>
                               ) : (
-                                <span className="text-gray-subtitle text-base">
+                                <span className='text-base text-gray-subtitle'>
                                   {row[column.id]}
                                 </span>
                               )}
                             </p>
                           </div>
                         ) : column.id === 'roles' ? (
-                          <div className="flex flex-col space-y-1 md:space-y-0 md:flex-row flex-wrap">
+                          <div className='flex flex-col flex-wrap space-y-1 md:flex-row md:space-y-0'>
                             {row.roles.length > 0 ? (
                               <>
                                 {row.roles.slice(0, 1).map((role: IRoles) => (
                                   <div
                                     key={role.roleId}
-                                    className="flex flex-row flex-wrap"
+                                    className='flex flex-row flex-wrap'
                                     style={{ whiteSpace: 'nowrap' }}
                                   >
                                     <span
-                                      className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs mb-1 mr-1"
+                                      className='mb-1 mr-1 rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                                       style={{
                                         display: 'flex',
                                         alignItems: 'center',
@@ -520,7 +520,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                       }}
                                     >
                                       <span
-                                        className="w-2 h-2 rounded-full mr-1"
+                                        className='mr-1 h-2 w-2 rounded-full'
                                         style={{
                                           backgroundColor:
                                             role.color !== 0
@@ -537,11 +537,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                 ))}
                                 {row.roles.length > 1 && (
                                   <div
-                                    className="flex flex-row flex-wrap"
+                                    className='flex flex-row flex-wrap'
                                     onClick={() => handleShowDetails(row)}
                                   >
                                     <span
-                                      className="bg-white p-1 rounded-[4px] border border-[#D1D1D1] text-xs cursor-pointer mb-1 mr-1"
+                                      className='mb-1 mr-1 cursor-pointer rounded-[4px] border border-[#D1D1D1] bg-white p-1 text-xs'
                                       style={{
                                         display: 'flex',
                                         alignItems: 'center',
@@ -554,23 +554,23 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                 )}
                               </>
                             ) : (
-                              <div className="flex flex-row flex-wrap">
+                              <div className='flex flex-row flex-wrap'>
                                 <span
-                                  className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs"
+                                  className='rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                                   style={{
                                     display: 'flex',
                                     alignItems: 'center',
                                     backgroundColor: '#AAAAAA',
                                   }}
                                 >
-                                  <span className="w-2 h-2 rounded-full mr-1" />
+                                  <span className='mr-1 h-2 w-2 rounded-full' />
                                   None
                                 </span>
                               </div>
                             )}
                           </div>
                         ) : column.id === 'activityComposition' ? (
-                          <div className="flex flex-row flex-wrap">
+                          <div className='flex flex-row flex-wrap'>
                             {row.activityComposition &&
                             row.activityComposition.length > 0 ? (
                               <>
@@ -588,10 +588,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                     return (
                                       <div
                                         key={composition}
-                                        className="flex flex-row flex-wrap items-center mr-1 mb:2 md:mb-0 whitespace-nowrap"
+                                        className='mb:2 mr-1 flex flex-row flex-wrap items-center whitespace-nowrap md:mb-0'
                                       >
                                         <span
-                                          className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs mb-1 md:mb-0 flex items-center"
+                                          className='mb-1 flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs md:mb-0'
                                           style={{
                                             backgroundColor: backgroundColor,
                                             display: 'flex',
@@ -599,7 +599,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                           }}
                                         >
                                           <span
-                                            className="w-2 h-2 rounded-full mr-2"
+                                            className='mr-2 h-2 w-2 rounded-full'
                                             style={{
                                               backgroundColor: backgroundColor,
                                               flexShrink: 0,
@@ -612,11 +612,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                   })}
                                 {row.activityComposition.length > 1 && (
                                   <div
-                                    className="flex flex-row flex-wrap"
+                                    className='flex flex-row flex-wrap'
                                     onClick={() => handleShowDetails(row)}
                                   >
                                     <span
-                                      className="bg-white px-1 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center cursor-pointer"
+                                      className='flex cursor-pointer items-center rounded-[4px] border border-[#D1D1D1] bg-white px-1 text-xs'
                                       style={{
                                         backgroundColor: '#96A5A6',
                                         display: 'flex',
@@ -629,9 +629,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                 )}
                               </>
                             ) : (
-                              <div className="flex flex-row flex-wrap items-center">
+                              <div className='flex flex-row flex-wrap items-center'>
                                 <span
-                                  className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
+                                  className='flex items-center rounded-[4px] border border-[#D1D1D1] bg-white p-1 px-2 text-xs'
                                   style={{
                                     backgroundColor: '#96A5A6',
                                     display: 'flex',
@@ -639,7 +639,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                   }}
                                 >
                                   <span
-                                    className="w-2 h-2 rounded-full mr-2"
+                                    className='mr-2 h-2 w-2 rounded-full'
                                     style={{
                                       backgroundColor: '#96A5A6',
                                       flexShrink: 0,
@@ -664,11 +664,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
                   <TableCell
                     key={columns.length}
                     colSpan={columns.length}
-                    align="center"
+                    align='center'
                     style={{
                       border: 'none',
                     }}
-                    className="bg-gray-100 py-8 rounded-md font-semibold"
+                    className='rounded-md bg-gray-100 py-8 font-semibold'
                   >
                     No data available
                   </TableCell>
diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
index 342c8a11..10571cf7 100644
--- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -179,20 +179,20 @@ export default function ActiveMemberBreakdown() {
 
   return (
     <>
-      <div className="relative overflow-x-scroll md:overflow-hidden mb-1 md:mb-1">
-        <div className="flex justify-between items-start">
+      <div className='relative mb-1 overflow-x-scroll md:mb-1 md:overflow-hidden'>
+        <div className='flex items-start justify-between'>
           <h3
-            className="text-xl font-medium text-lite-black md:mb-4"
+            className='text-xl font-medium text-lite-black md:mb-4'
             ref={tableTopRef}
           >
             Members breakdown
           </h3>
           <Button
             startIcon={<BsFiletypeCsv />}
-            size="small"
-            variant="outlined"
+            size='small'
+            variant='outlined'
             sx={{ minWidth: '64px', padding: '0.4rem 1rem' }}
-            className="border-black text-black"
+            className='border-black text-black'
             disableElevation
             onClick={handleDownloadCSV}
           >
@@ -206,7 +206,7 @@ export default function ActiveMemberBreakdown() {
           )}
         >
           {!isExpanded && (
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50 pointer-events-none"></div>
+            <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50'></div>
           )}
 
           <CustomTable
@@ -220,11 +220,11 @@ export default function ActiveMemberBreakdown() {
             handleUsernameChange={handleUsernameChange}
             isLoading={loading}
             activityCompositionOptions={options}
-            breakdownName="activeMemberComposition"
+            breakdownName='activeMemberComposition'
           />
         </div>
       </div>
-      <div className={clsx(!isExpanded ? 'hidden' : 'flex justify-end mb-8')}>
+      <div className={clsx(!isExpanded ? 'hidden' : 'mb-8 flex justify-end')}>
         {fetchedData?.totalResults > 10 && (
           <CustomPagination
             totalItems={fetchedData.totalResults}
@@ -237,13 +237,13 @@ export default function ActiveMemberBreakdown() {
         )}
       </div>
       {fetchedData && fetchedData?.totalResults > 3 ? (
-        <div className="flex justify-center mt-2 mb-12">
+        <div className='mt-2 mb-12 flex justify-center'>
           <TcButton
             text={isExpanded ? 'Show less' : 'Show member breakdown'}
-            variant="outlined"
+            variant='outlined'
             disabled={fetchedData?.totalResults === 0}
             onClick={handleButtonClick}
-            className="py-2 min-w-[14rem]"
+            className='min-w-[14rem] py-2'
           />
         </div>
       ) : (
diff --git a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
index 168a67de..f0fdb56d 100644
--- a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx
@@ -189,20 +189,20 @@ export default function DisengagedMembersCompositionBreakdown() {
 
   return (
     <>
-      <div className="relative overflow-x-scroll md:overflow-hidden mb-1 md:mb-1">
-        <div className="flex justify-between items-start">
+      <div className='relative mb-1 overflow-x-scroll md:mb-1 md:overflow-hidden'>
+        <div className='flex items-start justify-between'>
           <h3
-            className="text-xl font-medium text-lite-black md:mb-4"
+            className='text-xl font-medium text-lite-black md:mb-4'
             ref={tableTopRef}
           >
             Members breakdown
           </h3>
           <Button
             startIcon={<BsFiletypeCsv />}
-            size="small"
-            variant="outlined"
+            size='small'
+            variant='outlined'
             sx={{ minWidth: '64px', padding: '0.4rem 1rem' }}
-            className="border-black text-black"
+            className='border-black text-black'
             disableElevation
             onClick={handleDownloadCSV}
           >
@@ -216,7 +216,7 @@ export default function DisengagedMembersCompositionBreakdown() {
           )}
         >
           {!isExpanded && (
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50 pointer-events-none"></div>
+            <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50'></div>
           )}
 
           <CustomTable
@@ -230,11 +230,11 @@ export default function DisengagedMembersCompositionBreakdown() {
             handleUsernameChange={handleUsernameChange}
             isLoading={loading}
             activityCompositionOptions={options}
-            breakdownName="disengagedMemberComposition"
+            breakdownName='disengagedMemberComposition'
           />
         </div>
       </div>
-      <div className={clsx(!isExpanded ? 'hidden' : 'flex justify-end mb-8')}>
+      <div className={clsx(!isExpanded ? 'hidden' : 'mb-8 flex justify-end')}>
         {fetchedData?.totalResults > 10 && (
           <CustomPagination
             totalItems={fetchedData.totalResults}
@@ -247,13 +247,13 @@ export default function DisengagedMembersCompositionBreakdown() {
         )}
       </div>
       {fetchedData && fetchedData?.totalResults > 3 ? (
-        <div className="flex justify-center mt-2 mb-12">
+        <div className='mt-2 mb-12 flex justify-center'>
           <TcButton
             text={isExpanded ? 'Show less' : 'Show member breakdown'}
-            variant="outlined"
+            variant='outlined'
             disabled={fetchedData?.totalResults === 0}
             onClick={handleButtonClick}
-            className="py-2 min-w-[14rem]"
+            className='min-w-[14rem] py-2'
           />
         </div>
       ) : (
diff --git a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
index d310108a..b1551fdd 100644
--- a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx
@@ -177,20 +177,20 @@ export default function OnboardingMembersBreakdown() {
 
   return (
     <>
-      <div className="relative overflow-x-scroll md:overflow-hidden mb-1 md:mb-1">
-        <div className="flex justify-between items-start">
+      <div className='relative mb-1 overflow-x-scroll md:mb-1 md:overflow-hidden'>
+        <div className='flex items-start justify-between'>
           <h3
-            className="text-xl font-medium text-lite-black md:mb-4"
+            className='text-xl font-medium text-lite-black md:mb-4'
             ref={tableTopRef}
           >
             Members breakdown
           </h3>
           <Button
             startIcon={<BsFiletypeCsv />}
-            size="small"
-            variant="outlined"
+            size='small'
+            variant='outlined'
             sx={{ minWidth: '64px', padding: '0.4rem 1rem' }}
-            className="border-black text-black"
+            className='border-black text-black'
             disableElevation
             onClick={handleDownloadCSV}
           >
@@ -204,7 +204,7 @@ export default function OnboardingMembersBreakdown() {
           )}
         >
           {!isExpanded && (
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50 pointer-events-none"></div>
+            <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-gray-50 opacity-50'></div>
           )}
 
           <CustomTable
@@ -218,11 +218,11 @@ export default function OnboardingMembersBreakdown() {
             handleUsernameChange={handleUsernameChange}
             isLoading={loading}
             activityCompositionOptions={options}
-            breakdownName="onboardingMemberComposition"
+            breakdownName='onboardingMemberComposition'
           />
         </div>
       </div>
-      <div className={clsx(!isExpanded ? 'hidden' : 'flex justify-end mb-8')}>
+      <div className={clsx(!isExpanded ? 'hidden' : 'mb-8 flex justify-end')}>
         {fetchedData?.totalResults > 10 && (
           <CustomPagination
             totalItems={fetchedData.totalResults}
@@ -235,13 +235,13 @@ export default function OnboardingMembersBreakdown() {
         )}
       </div>
       {fetchedData && fetchedData?.totalResults > 3 ? (
-        <div className="flex justify-center mt-2 mb-12">
+        <div className='mt-2 mb-12 flex justify-center'>
           <TcButton
             text={isExpanded ? 'Show less' : 'Show member breakdown'}
-            variant="outlined"
+            variant='outlined'
             disabled={fetchedData?.totalResults === 0}
             onClick={handleButtonClick}
-            className="py-2 min-w-[14rem]"
+            className='min-w-[14rem] py-2'
           />
         </div>
       ) : (
diff --git a/src/components/shared/TcAlert.spec.tsx b/src/components/shared/TcAlert.spec.tsx
index 4e83d18d..d4fcdb22 100644
--- a/src/components/shared/TcAlert.spec.tsx
+++ b/src/components/shared/TcAlert.spec.tsx
@@ -6,7 +6,7 @@ describe('TcAlert Component', () => {
   it('renders the alert with custom message', () => {
     const message = 'This is a test alert';
 
-    const { getByText } = render(<TcAlert severity="info">{message}</TcAlert>);
+    const { getByText } = render(<TcAlert severity='info'>{message}</TcAlert>);
 
     // Use the @testing-library/jest-dom assertions to check if the element is present
     expect(getByText(message)).toBeInTheDocument();
diff --git a/src/components/shared/TcBox/TcBoxContainer.spec.tsx b/src/components/shared/TcBox/TcBoxContainer.spec.tsx
index 8fff8df9..560a950d 100644
--- a/src/components/shared/TcBox/TcBoxContainer.spec.tsx
+++ b/src/components/shared/TcBox/TcBoxContainer.spec.tsx
@@ -4,10 +4,10 @@ import TcBoxContainer from './TcBoxContainer';
 
 // Mock the child components
 jest.mock('./TcBoxTitleContainer', () => (props: any) => (
-  <div data-testid="mock-title-container">{props.children}</div>
+  <div data-testid='mock-title-container'>{props.children}</div>
 ));
 jest.mock('./TcBoxContentContainer', () => (props: any) => (
-  <div data-testid="mock-content-container">{props.children}</div>
+  <div data-testid='mock-content-container'>{props.children}</div>
 ));
 
 describe('<TcBoxContainer />', () => {
diff --git a/src/components/shared/TcBox/TcBoxContainer.tsx b/src/components/shared/TcBox/TcBoxContainer.tsx
index 23840f2c..6a57c872 100644
--- a/src/components/shared/TcBox/TcBoxContainer.tsx
+++ b/src/components/shared/TcBox/TcBoxContainer.tsx
@@ -31,7 +31,7 @@ function TcBoxContainer({
   ...props
 }: ITcBoxContainer) {
   return (
-    <Box className="shadow-lg rounded-xl overflow-hidden" {...props}>
+    <Box className='overflow-hidden rounded-xl shadow-lg' {...props}>
       {titleContainerChildren && (
         <TcBoxTitleContainer children={titleContainerChildren} />
       )}
diff --git a/src/components/shared/TcBox/TcBoxTitleContainer.spec.tsx b/src/components/shared/TcBox/TcBoxTitleContainer.spec.tsx
index de089913..b93303cd 100644
--- a/src/components/shared/TcBox/TcBoxTitleContainer.spec.tsx
+++ b/src/components/shared/TcBox/TcBoxTitleContainer.spec.tsx
@@ -17,7 +17,7 @@ describe('<TcBoxTitleContainer />', () => {
     const { container } = render(
       <TcBoxTitleContainer
         children={<>Test Content</>}
-        customClasses="test-class1 test-class2"
+        customClasses='test-class1 test-class2'
       />
     );
 
diff --git a/src/components/shared/TcBreadcrumbs.tsx b/src/components/shared/TcBreadcrumbs.tsx
index 4abdae16..05f4fb2c 100644
--- a/src/components/shared/TcBreadcrumbs.tsx
+++ b/src/components/shared/TcBreadcrumbs.tsx
@@ -27,8 +27,8 @@ function TcBreadcrumbs({ items }: TcBreadcrumbsProps) {
 
   return (
     <Breadcrumbs
-      aria-label="breadcrumb"
-      separator={<MdChevronRight fontSize="medium" />}
+      aria-label='breadcrumb'
+      separator={<MdChevronRight fontSize='medium' />}
     >
       {items.map((item, index) => (
         <TcLink
@@ -43,7 +43,7 @@ function TcBreadcrumbs({ items }: TcBreadcrumbsProps) {
           }`}
           to={item.path || '#'}
         >
-          <TcText text={item.label} variant="body2" />
+          <TcText text={item.label} variant='body2' />
         </TcLink>
       ))}
     </Breadcrumbs>
diff --git a/src/components/shared/TcButton.spec.tsx b/src/components/shared/TcButton.spec.tsx
index 39c7a62f..09600c66 100644
--- a/src/components/shared/TcButton.spec.tsx
+++ b/src/components/shared/TcButton.spec.tsx
@@ -5,19 +5,19 @@ import TcButton from './TcButton';
 
 describe('<TcButton />', () => {
   test('renders contained button with TcText wrapping', () => {
-    render(<TcButton text="Sample Text" variant="contained" />);
+    render(<TcButton text='Sample Text' variant='contained' />);
     const buttonElement = screen.getByText('Sample Text');
     expect(buttonElement).toBeInTheDocument();
   });
 
   test('renders outlined button with TcText wrapping', () => {
-    render(<TcButton text="Sample Text" variant="outlined" />);
+    render(<TcButton text='Sample Text' variant='outlined' />);
     const buttonElement = screen.getByText('Sample Text');
     expect(buttonElement).toBeInTheDocument();
   });
 
   test('renders button without variant with direct text', () => {
-    render(<TcButton text="Sample Text" />);
+    render(<TcButton text='Sample Text' />);
     const buttonElement = screen.getByText('Sample Text');
     expect(buttonElement).toBeInTheDocument();
   });
diff --git a/src/components/shared/TcButton.tsx b/src/components/shared/TcButton.tsx
index 77cacca4..9f346d5c 100644
--- a/src/components/shared/TcButton.tsx
+++ b/src/components/shared/TcButton.tsx
@@ -21,14 +21,14 @@ function TcButton({ text, ...props }: ITcButtonProps) {
   if (props.variant === 'contained') {
     return (
       <Button {...props} disableElevation={true}>
-        <TcText text={text} variant={'subtitle1'} fontWeight="bold" />
+        <TcText text={text} variant={'subtitle1'} fontWeight='bold' />
       </Button>
     );
   }
   if (props.variant === 'outlined') {
     return (
       <Button {...props} disableElevation={true}>
-        <TcText text={text} variant={'subtitle1'} fontWeight="bold" />
+        <TcText text={text} variant={'subtitle1'} fontWeight='bold' />
       </Button>
     );
   }
diff --git a/src/components/shared/TcDatePickerPopover.tsx b/src/components/shared/TcDatePickerPopover.tsx
index 6e00729a..fb165387 100644
--- a/src/components/shared/TcDatePickerPopover.tsx
+++ b/src/components/shared/TcDatePickerPopover.tsx
@@ -34,18 +34,18 @@ function TcDatePickerPopover({
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <StaticDatePicker
-          displayStaticWrapperAs="desktop"
-          openTo="day"
+          displayStaticWrapperAs='desktop'
+          openTo='day'
           value={selectedDate}
           onChange={onDateChange}
         />
       </LocalizationProvider>
-      <div className="px-5 py-3">
+      <div className='px-5 py-3'>
         <TcButton
-          text="Reset"
+          text='Reset'
           onClick={onResetDate}
-          className="w-full"
-          variant="outlined"
+          className='w-full'
+          variant='outlined'
         />
       </div>
     </Popover>
diff --git a/src/components/shared/TcIconWithTooltip.spec.tsx b/src/components/shared/TcIconWithTooltip.spec.tsx
index cf0f9705..d352df12 100644
--- a/src/components/shared/TcIconWithTooltip.spec.tsx
+++ b/src/components/shared/TcIconWithTooltip.spec.tsx
@@ -5,23 +5,23 @@ import TcIconWithTooltip from './TcIconWithTooltip';
 describe('<TcIconWithTooltip />', () => {
   // Test 1: Check if the component renders correctly
   it('renders without crashing', () => {
-    render(<TcIconWithTooltip tooltipText="Sample tooltip" />);
+    render(<TcIconWithTooltip tooltipText='Sample tooltip' />);
   });
 
   // Test 2: Check if the default icon (SVG) is rendered if none is provided
   it('renders the default SVG icon if none is provided', () => {
-    render(<TcIconWithTooltip tooltipText="Sample tooltip" />);
+    render(<TcIconWithTooltip tooltipText='Sample tooltip' />);
     const svgIcon = screen.getByTestId('icon-svg'); // Make sure you add this test-id to your SVG in the component
     expect(svgIcon).toBeInTheDocument();
   });
 
   // Test 3: Check if a custom icon is rendered when provided
   it('renders a custom icon (SVG) when provided', () => {
-    const customIcon = <svg data-testid="custom-icon"></svg>;
+    const customIcon = <svg data-testid='custom-icon'></svg>;
     render(
       <TcIconWithTooltip
         iconComponent={customIcon}
-        tooltipText="Sample tooltip"
+        tooltipText='Sample tooltip'
       />
     );
     const renderedIcon = screen.getByTestId('custom-icon');
diff --git a/src/components/shared/TcIconWithTooltip.tsx b/src/components/shared/TcIconWithTooltip.tsx
index be6d2e27..0436a7b1 100644
--- a/src/components/shared/TcIconWithTooltip.tsx
+++ b/src/components/shared/TcIconWithTooltip.tsx
@@ -26,7 +26,7 @@ interface ITcIconWithTooltip {
 
 function TcIconWithTooltip({ iconComponent, tooltipText }: ITcIconWithTooltip) {
   return (
-    <Tooltip title={tooltipText} placement="bottom">
+    <Tooltip title={tooltipText} placement='bottom'>
       <div>{iconComponent}</div>
     </Tooltip>
   );
@@ -34,7 +34,7 @@ function TcIconWithTooltip({ iconComponent, tooltipText }: ITcIconWithTooltip) {
 
 TcIconWithTooltip.defaultProps = {
   iconComponent: (
-    <MdOutlineInfo data-testid="icon-svg" size="20px" color="#767676" />
+    <MdOutlineInfo data-testid='icon-svg' size='20px' color='#767676' />
   ),
 };
 
diff --git a/src/components/shared/TcLink.tsx b/src/components/shared/TcLink.tsx
index c7b2d7a3..4ce98ec7 100644
--- a/src/components/shared/TcLink.tsx
+++ b/src/components/shared/TcLink.tsx
@@ -27,7 +27,7 @@ interface CustomLinkProps extends MuiLinkProps {
 
 function TcLink({ children, to, ...props }: CustomLinkProps) {
   return (
-    <Link component="a" href={to} underline="none" {...props}>
+    <Link component='a' href={to} underline='none' {...props}>
       {children}
     </Link>
   );
diff --git a/src/components/shared/TcPagination/TcPagination.tsx b/src/components/shared/TcPagination/TcPagination.tsx
index 8a95a1d2..a10c1b09 100644
--- a/src/components/shared/TcPagination/TcPagination.tsx
+++ b/src/components/shared/TcPagination/TcPagination.tsx
@@ -47,12 +47,12 @@ function TcPagination({
 
   return (
     <Pagination
-      shape="rounded"
+      shape='rounded'
       count={totalPages}
       page={currentPage}
       onChange={(event, page) => handleChangePage(page)}
       {...props}
-      renderItem={(item) => <PaginationItem component="button" {...item} />}
+      renderItem={(item) => <PaginationItem component='button' {...item} />}
     />
   );
 }
diff --git a/src/components/shared/TcSelect/TcSelect.tsx b/src/components/shared/TcSelect/TcSelect.tsx
index 124904ca..6227725b 100644
--- a/src/components/shared/TcSelect/TcSelect.tsx
+++ b/src/components/shared/TcSelect/TcSelect.tsx
@@ -45,7 +45,7 @@ function TcSelect({
               value={option.value}
               disabled={option.disabled}
             >
-              <div className="flex justify-start items-center space-x-2">
+              <div className='flex items-center justify-start space-x-2'>
                 {option.icon && React.cloneElement(option.icon)}
                 <TcText text={option.label} />
               </div>
diff --git a/src/components/shared/TcTableContainer/TcTableBody.tsx b/src/components/shared/TcTableContainer/TcTableBody.tsx
index 67b08449..69802e5b 100644
--- a/src/components/shared/TcTableContainer/TcTableBody.tsx
+++ b/src/components/shared/TcTableContainer/TcTableBody.tsx
@@ -25,7 +25,7 @@ function TcTableBody({ rowItems, ...props }: ITcTableBodyProps) {
         <TcTableRow
           key={index}
           rowItem={row}
-          className={`my-5 no-border h-16 ${
+          className={`no-border my-5 h-16 ${
             index % 2 === 0 ? 'bg-gray-100' : ''
           }`}
         />
diff --git a/src/components/shared/TcTableContainer/TcTableContainer.tsx b/src/components/shared/TcTableContainer/TcTableContainer.tsx
index 9e580c73..87591e14 100644
--- a/src/components/shared/TcTableContainer/TcTableContainer.tsx
+++ b/src/components/shared/TcTableContainer/TcTableContainer.tsx
@@ -28,7 +28,7 @@ function TcTableContainer({
   ...props
 }: ITcTableContainerProps) {
   return (
-    <Table {...props} className="border-separate border-spacing-y-2">
+    <Table {...props} className='border-separate border-spacing-y-2'>
       {headers && headers.length > 0 && <TcTableHead headers={headers} />}
       {bodyRowItems && bodyRowItems.length > 0 && (
         <TcTableBody rowItems={bodyRowItems} />
diff --git a/src/components/shared/TcTableContainer/TcTableHead.tsx b/src/components/shared/TcTableContainer/TcTableHead.tsx
index f301c81e..7e4fbc57 100644
--- a/src/components/shared/TcTableContainer/TcTableHead.tsx
+++ b/src/components/shared/TcTableContainer/TcTableHead.tsx
@@ -17,7 +17,7 @@ function TcTableHead({ headers, ...props }: ITcTableHeadProps) {
     <TableHead {...props}>
       <TcTableRow
         rowItem={headers}
-        customTableCellClasses="rounded-none p-0 border-none uppercase text-xs font-light first:pl-3 last:pr-3"
+        customTableCellClasses='rounded-none p-0 border-none uppercase text-xs font-light first:pl-3 last:pr-3'
       />
     </TableHead>
   );
diff --git a/src/components/shared/TcTableContainer/TcTableRow.tsx b/src/components/shared/TcTableContainer/TcTableRow.tsx
index bcadf15e..d4afe057 100644
--- a/src/components/shared/TcTableContainer/TcTableRow.tsx
+++ b/src/components/shared/TcTableContainer/TcTableRow.tsx
@@ -32,7 +32,7 @@ function TcTableRow({
               className={clsx(
                 customTableCellClasses
                   ? `${customTableCellClasses}`
-                  : `px-1 first:px-3 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0`
+                  : `px-1 py-4 first:rounded-l-md first:border-r-0 first:px-3 last:rounded-r-md last:border-l-0`
               )}
             >
               {CustomRenderer ? CustomRenderer(value) : value}
diff --git a/src/components/twitter/growth/accountActivity/TcAccountActivity.spec.tsx b/src/components/twitter/growth/accountActivity/TcAccountActivity.spec.tsx
index afabbc4c..033b6145 100644
--- a/src/components/twitter/growth/accountActivity/TcAccountActivity.spec.tsx
+++ b/src/components/twitter/growth/accountActivity/TcAccountActivity.spec.tsx
@@ -9,14 +9,14 @@ import { unmountComponentAtNode } from 'react-dom';
 jest.mock('./TcAccountActivityHeader', () => {
   return {
     __esModule: true,
-    default: jest.fn(() => <div data-testid="header-mock" />),
+    default: jest.fn(() => <div data-testid='header-mock' />),
   };
 });
 
 jest.mock('./TcAccountActivityContent', () => {
   return {
     __esModule: true,
-    default: jest.fn(() => <div data-testid="content-mock" />),
+    default: jest.fn(() => <div data-testid='content-mock' />),
   };
 });
 
diff --git a/src/components/twitter/growth/accountActivity/TcAccountActivityContent.tsx b/src/components/twitter/growth/accountActivity/TcAccountActivityContent.tsx
index bd9501ac..97ada8a1 100644
--- a/src/components/twitter/growth/accountActivity/TcAccountActivityContent.tsx
+++ b/src/components/twitter/growth/accountActivity/TcAccountActivityContent.tsx
@@ -15,24 +15,24 @@ function TcAccountActivityContent({
   activityList,
 }: ITcAccountActivityContentProps) {
   return (
-    <div className="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-4">
+    <div className='flex flex-col space-y-3 md:flex-row md:space-y-0 md:space-x-4'>
       {activityList &&
         activityList.map((el, index) => (
           <TcCard
             key={index}
             elevation={0}
-            className="py-4 px-6 bg-gray-hover min-w-[250px] min-h-[6rem] md:min-h-auto"
+            className='md:min-h-auto min-h-[6rem] min-w-[250px] bg-gray-hover py-4 px-6'
             children={
-              <div className="text-center flex flex-col space-y-1">
-                <TcText text={el.value} variant={'h4'} fontWeight="bold" />
+              <div className='flex flex-col space-y-1 text-center'>
+                <TcText text={el.value} variant={'h4'} fontWeight='bold' />
                 <TcText
                   text={el.description}
                   variant={'body2'}
-                  className="text-gray-subtitle"
+                  className='text-gray-subtitle'
                 />
-                <div className="flex justify-center cursor-pointer">
+                <div className='flex cursor-pointer justify-center'>
                   {el.hasTooltipInfo ? (
-                    <TcIconWithTooltip tooltipText="Followers and non-followers" />
+                    <TcIconWithTooltip tooltipText='Followers and non-followers' />
                   ) : (
                     ''
                   )}
diff --git a/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.tsx b/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.tsx
index 8fa14290..0a78d58b 100644
--- a/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.tsx
+++ b/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.tsx
@@ -8,28 +8,28 @@ import { IUser } from '../../../../utils/types';
 export default function TcAccountActivityHeader() {
   const user = StorageService.readLocalStorage<IUser>('user');
   return (
-    <div className="flex flex-col-reverse md:flex-row md:justify-between md:items-center">
+    <div className='flex flex-col-reverse md:flex-row md:items-center md:justify-between'>
       <div>
-        <TcText text="Account activity" variant="h6" fontWeight="bold" />
-        <div className="flex items-center space-x-1">
-          <BiTimeFive size="18px" data-testid="bi-time-five-icon" />
+        <TcText text='Account activity' variant='h6' fontWeight='bold' />
+        <div className='flex items-center space-x-1'>
+          <BiTimeFive size='18px' data-testid='bi-time-five-icon' />
           <TcText
-            text="Data over the last 7 days"
-            variant="caption"
-            fontWeight="medium"
+            text='Data over the last 7 days'
+            variant='caption'
+            fontWeight='medium'
           />
         </div>
       </div>
-      <div className="flex items-center pb-4 md:pb-0">
-        <TcText text="Analyzed account:" variant="subtitle1" color="#767676" />
+      <div className='flex items-center pb-4 md:pb-0'>
+        <TcText text='Analyzed account:' variant='subtitle1' color='#767676' />
         {user?.twitter?.twitterUsername ? (
           <>
-            <TcLink to={'/settings'} color="secondary" fontWeight="bold">
+            <TcLink to={'/settings'} color='secondary' fontWeight='bold'>
               @{user?.twitter?.twitterUsername}
             </TcLink>
           </>
         ) : (
-          <TcText text="None" variant="subtitle1" color="#767676" />
+          <TcText text='None' variant='subtitle1' color='#767676' />
         )}
       </div>
     </div>
diff --git a/src/components/twitter/growth/audienceResponse/TcAudienceResponse.tsx b/src/components/twitter/growth/audienceResponse/TcAudienceResponse.tsx
index e8b62a31..17533d6b 100644
--- a/src/components/twitter/growth/audienceResponse/TcAudienceResponse.tsx
+++ b/src/components/twitter/growth/audienceResponse/TcAudienceResponse.tsx
@@ -33,7 +33,7 @@ function TcAudienceResponse({ audience }: ITcAudienceResponseProps) {
   }, [audience]);
 
   return (
-    <div className="space-y-3">
+    <div className='space-y-3'>
       <TcAudienceResponseHeader />
       <TcAudienceResponseContent data={audienceResponseList} />
     </div>
diff --git a/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.tsx b/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.tsx
index 99874e14..754c569f 100644
--- a/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.tsx
+++ b/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.tsx
@@ -15,26 +15,26 @@ interface ITcAudienceResponseContentProps {
 
 function TcAudienceResponseContent({ data }: ITcAudienceResponseContentProps) {
   return (
-    <div className="overflow-x-scroll scrollbar-hide md:overflow-x-hidden">
-      <div className="flex flex-row space-x-4 space-y-0 md:space-y-0">
+    <div className='scrollbar-hide overflow-x-scroll md:overflow-x-hidden'>
+      <div className='flex flex-row space-x-4 space-y-0 md:space-y-0'>
         {data &&
           data.map((el, index) => (
             <TcCard
               key={index}
               elevation={0}
-              variant="outlined"
-              className="py-4 px-6 bg-transparent flex-1 md:w-auto min-w-full md:min-w-0"
+              variant='outlined'
+              className='min-w-full flex-1 bg-transparent py-4 px-6 md:w-auto md:min-w-0'
               children={
-                <div className="text-center flex flex-col space-y-1">
-                  <TcText text={el.value} variant={'h4'} fontWeight="bold" />
+                <div className='flex flex-col space-y-1 text-center'>
+                  <TcText text={el.value} variant={'h4'} fontWeight='bold' />
                   <TcText
                     text={el.description}
                     variant={'body2'}
-                    className="text-gray-subtitle"
+                    className='text-gray-subtitle'
                   />
-                  <div className="flex justify-center">
+                  <div className='flex justify-center'>
                     {el.hasTooltipInfo ? (
-                      <TcIconWithTooltip tooltipText="Followers and non-followers" />
+                      <TcIconWithTooltip tooltipText='Followers and non-followers' />
                     ) : (
                       ''
                     )}
diff --git a/src/components/twitter/growth/audienceResponse/TcAudienceResponseHeader.tsx b/src/components/twitter/growth/audienceResponse/TcAudienceResponseHeader.tsx
index ca777dc4..6358ef89 100644
--- a/src/components/twitter/growth/audienceResponse/TcAudienceResponseHeader.tsx
+++ b/src/components/twitter/growth/audienceResponse/TcAudienceResponseHeader.tsx
@@ -3,12 +3,12 @@ import TcText from '../../../shared/TcText';
 
 function TcAudienceResponseHeader() {
   return (
-    <div className="space-y-3">
-      <TcText text="Audience response" variant="h6" fontWeight="bold" />
+    <div className='space-y-3'>
+      <TcText text='Audience response' variant='h6' fontWeight='bold' />
       <TcText
-        text="How much others react to your activities"
-        variant="caption"
-        fontWeight="medium"
+        text='How much others react to your activities'
+        variant='caption'
+        fontWeight='medium'
       />
     </div>
   );
diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountContentItems.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountContentItems.tsx
index 12de32e6..ead423ae 100644
--- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountContentItems.tsx
+++ b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountContentItems.tsx
@@ -19,31 +19,31 @@ function TcEngagementAccountContentItems({
 }: ITcEngagementAccountContentItemsProps) {
   return (
     <div
-      className={clsx(bgColor, 'px-2 py-4 text-center rounded-xl space-y-2')}
+      className={clsx(bgColor, 'space-y-2 rounded-xl px-2 py-4 text-center')}
     >
       <TcText
         text={value}
         color={bgColor === 'bg-[#3A9E2B]' ? 'white' : 'black'}
         variant={'h4'}
-        fontWeight="bold"
-        display="block"
+        fontWeight='bold'
+        display='block'
       />
       <TcText
         text={description}
         color={bgColor === 'bg-[#3A9E2B]' ? 'white' : '#222222'}
         variant={'caption'}
-        display="block"
+        display='block'
         paddingX={1}
       />
-      <div className="flex justify-center">
+      <div className='flex justify-center'>
         {tooltipText && (
           <TcIconWithTooltip
             tooltipText={tooltipText}
             iconComponent={
               <MdOutlineInfo
-                className="cursor-pointer"
-                data-testid="icon-svg"
-                size="23px"
+                className='cursor-pointer'
+                data-testid='icon-svg'
+                size='23px'
                 color={bgColor === 'bg-[#3A9E2B]' ? 'white' : '#6A6A6A'}
               />
             }
diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.tsx
index 3685055a..9b4926a9 100644
--- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.tsx
+++ b/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.tsx
@@ -56,7 +56,7 @@ function TcEngagementAccounts({ engagement }: ITcEngagementAccountsProps) {
   }, [engagement]);
 
   return (
-    <div className="space-y-3">
+    <div className='space-y-3'>
       <TcEngagementAccountsHeader />
       <TcEngagementAccountsContent contentItems={contentItems} />
     </div>
diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.tsx
index ace180f2..0033c8e6 100644
--- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.tsx
+++ b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.tsx
@@ -18,7 +18,7 @@ function TcEngagementAccountsContent({
   contentItems,
 }: ITcEngagementAccountsContentProps) {
   const renderContentItems = (item: IContentItem, index: number) => (
-    <div key={index} className="w-1/2 text-center">
+    <div key={index} className='w-1/2 text-center'>
       <TcEngagementAccountContentItems
         bgColor={item.bgColor}
         value={item.value}
@@ -32,29 +32,29 @@ function TcEngagementAccountsContent({
   );
 
   return (
-    <div className="border-l border-b h-[26rem] w-[30rem] mx-auto">
-      <div className="relative -rotate-90 -left-[16rem] top-[3rem]">
+    <div className='mx-auto h-[26rem] w-[30rem] border-l border-b'>
+      <div className='relative -left-[16rem] top-[3rem] -rotate-90'>
         <TcText
-          text="Quality of engagement"
-          fontWeight="bold"
+          text='Quality of engagement'
+          fontWeight='bold'
           variant={'subtitle1'}
         />
       </div>
-      <div className="relative -bottom-[24.7rem] left-[10rem]">
+      <div className='relative -bottom-[24.7rem] left-[10rem]'>
         <TcText
-          text="Amount of engagement"
-          fontWeight="bold"
+          text='Amount of engagement'
+          fontWeight='bold'
           variant={'subtitle1'}
         />
       </div>
-      <div className="w-full md:w-11/12 mx-auto pl-2 md:pl-8">
+      <div className='mx-auto w-full pl-2 md:w-11/12 md:pl-8'>
         {['High', 'Low'].map((label, index) => (
           <div
             key={label}
-            className="flex min-h-[8rem] flex-row items-center space-x-3 flex-1  overflow-scroll md:overflow-auto"
+            className='flex min-h-[8rem] flex-1 flex-row items-center space-x-3  overflow-scroll md:overflow-auto'
           >
             <TcText text={label} variant={'subtitle1'} color={'#767676'} />
-            <div className="flex flex-row w-full space-x-6">
+            <div className='flex w-full flex-row space-x-6'>
               {renderContentItems(contentItems[index * 2], index * 2)}
               {renderContentItems(contentItems[index * 2 + 1], index * 2 + 1)}
             </div>
diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsHeader.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsHeader.tsx
index db6f4477..0db8fcf6 100644
--- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsHeader.tsx
+++ b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsHeader.tsx
@@ -4,7 +4,7 @@ import TcText from '../../../shared/TcText';
 function TcEngagementAccountsHeader() {
   return (
     <>
-      <TcText text="Engagement by accounts" variant="h6" fontWeight="bold" />
+      <TcText text='Engagement by accounts' variant='h6' fontWeight='bold' />
     </>
   );
 }
diff --git a/src/components/twitter/growth/voteFeature/TcvoteFeature.tsx b/src/components/twitter/growth/voteFeature/TcvoteFeature.tsx
index 2187feae..7eb40bae 100644
--- a/src/components/twitter/growth/voteFeature/TcvoteFeature.tsx
+++ b/src/components/twitter/growth/voteFeature/TcvoteFeature.tsx
@@ -16,14 +16,14 @@ function TcvoteFeature() {
   };
 
   return (
-    <div className="space-y-8">
+    <div className='space-y-8'>
       <TcvoteFeatureHeader />
       <TcvoteFeatureVotes handleSelectedFeatures={handleSelectedFeatures} />
-      <div className="flex justify-center">
+      <div className='flex justify-center'>
         <TcButton
-          text="Vote now"
-          variant="contained"
-          color="secondary"
+          text='Vote now'
+          variant='contained'
+          color='secondary'
           disabled={!nextFeature.includes(true)}
         />
       </div>
diff --git a/src/components/twitter/growth/voteFeature/TcvoteFeatureHeader.tsx b/src/components/twitter/growth/voteFeature/TcvoteFeatureHeader.tsx
index 7709dbfe..5769e044 100644
--- a/src/components/twitter/growth/voteFeature/TcvoteFeatureHeader.tsx
+++ b/src/components/twitter/growth/voteFeature/TcvoteFeatureHeader.tsx
@@ -3,11 +3,11 @@ import TcText from '../../../shared/TcText';
 
 function TcAudienceResponseHeader() {
   return (
-    <div className="pt-12">
+    <div className='pt-12'>
       <TcText
-        text="Vote on our next feature"
-        variant="h4"
-        fontWeight="extraBold"
+        text='Vote on our next feature'
+        variant='h4'
+        fontWeight='extraBold'
       />
     </div>
   );
diff --git a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotes.tsx b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotes.tsx
index cc065682..c6afc9aa 100644
--- a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotes.tsx
+++ b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotes.tsx
@@ -47,14 +47,14 @@ function TcvoteFeatureVotes({
     );
   };
   return (
-    <div className="flex flex-col space-y-3">
+    <div className='flex flex-col space-y-3'>
       {TcvoteFeatureVotesMockList.map((item, index) => (
         <TcvoteFeatureVotesItems
           isChecked={nextFeatures[index]}
           key={index}
           label={item.label}
           handleToggleCheckbox={(event) => handleToggleCheckbox(event, index)}
-          color="secondary"
+          color='secondary'
         />
       ))}
     </div>
diff --git a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.spec.tsx b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.spec.tsx
index 372e1069..c27fa69b 100644
--- a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.spec.tsx
+++ b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.spec.tsx
@@ -6,8 +6,8 @@ describe('<TcvoteFeatureVotesItems />', () => {
   test('renders correctly', () => {
     render(
       <TcvoteFeatureVotesItems
-        label="Test"
-        color="primary"
+        label='Test'
+        color='primary'
         isChecked={false}
         handleToggleCheckbox={jest.fn()}
       />
@@ -18,8 +18,8 @@ describe('<TcvoteFeatureVotesItems />', () => {
   test('renders checked checkbox based on isChecked prop', () => {
     const { rerender } = render(
       <TcvoteFeatureVotesItems
-        label="Test"
-        color="primary"
+        label='Test'
+        color='primary'
         isChecked={false}
         handleToggleCheckbox={jest.fn()}
       />
@@ -28,8 +28,8 @@ describe('<TcvoteFeatureVotesItems />', () => {
 
     rerender(
       <TcvoteFeatureVotesItems
-        label="Test"
-        color="primary"
+        label='Test'
+        color='primary'
         isChecked={true}
         handleToggleCheckbox={jest.fn()}
       />
@@ -41,8 +41,8 @@ describe('<TcvoteFeatureVotesItems />', () => {
     const mockFn = jest.fn();
     render(
       <TcvoteFeatureVotesItems
-        label="Test"
-        color="primary"
+        label='Test'
+        color='primary'
         isChecked={false}
         handleToggleCheckbox={mockFn}
       />
diff --git a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.tsx b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.tsx
index faeb10d5..ac31eafa 100644
--- a/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.tsx
+++ b/src/components/twitter/growth/voteFeature/TcvoteFeatureVotes/TcvoteFeatureVotesItems.tsx
@@ -18,10 +18,10 @@ function TcvoteFeatureVotesItems({
   ...props
 }: ITcvoteFeatureVotesItemsProps) {
   return (
-    <div className="mx-auto md:w-2/3 border border-gray-border-box rounded-lg p-4">
+    <div className='mx-auto rounded-lg border border-gray-border-box p-4 md:w-2/3'>
       <FormControlLabel
         {...props}
-        label={<TcText text={label} variant={'subtitle1'} fontWeight="bold" />}
+        label={<TcText text={label} variant={'subtitle1'} fontWeight='bold' />}
         control={
           <TcCheckbox
             color={color}
diff --git a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.tsx b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.tsx
index de2c7607..42e75ac6 100644
--- a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.tsx
+++ b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.tsx
@@ -39,7 +39,7 @@ function TcYourAccountActivity({ activity }: ITcYourAccountActivityProps) {
   }, [activity]);
 
   return (
-    <div className="space-y-3">
+    <div className='space-y-3'>
       <TcYourAccountActivityHeader />
       <TcYourAccountActivityContent data={yourAccountActivityList} />
     </div>
diff --git a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.tsx b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.tsx
index 5e57ded6..a9f6c4d1 100644
--- a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.tsx
+++ b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.tsx
@@ -15,26 +15,26 @@ function TcYourAccountActivityContent({
   data,
 }: IYourAccountActivityContentProps) {
   return (
-    <div className="overflow-x-scroll scrollbar-hide md:overflow-x-hidden">
-      <div className="flex flex-row space-x-4 space-y-0 md:space-y-0">
+    <div className='scrollbar-hide overflow-x-scroll md:overflow-x-hidden'>
+      <div className='flex flex-row space-x-4 space-y-0 md:space-y-0'>
         {data &&
           data.map((el, index) => (
             <TcCard
               key={index}
               elevation={0}
-              variant="outlined"
-              className="py-4 px-6 bg-transparent flex-1 md:w-auto min-w-full md:min-w-0"
+              variant='outlined'
+              className='min-w-full flex-1 bg-transparent py-4 px-6 md:w-auto md:min-w-0'
               children={
-                <div className="text-center flex flex-col space-y-1">
-                  <TcText text={el.value} variant={'h4'} fontWeight="bold" />
+                <div className='flex flex-col space-y-1 text-center'>
+                  <TcText text={el.value} variant={'h4'} fontWeight='bold' />
                   <TcText
                     text={el.description}
                     variant={'body2'}
-                    className="text-gray-subtitle"
+                    className='text-gray-subtitle'
                   />
-                  <div className="flex justify-center">
+                  <div className='flex justify-center'>
                     {el.hasTooltipInfo ? (
-                      <TcIconWithTooltip tooltipText="Followers and non-followers" />
+                      <TcIconWithTooltip tooltipText='Followers and non-followers' />
                     ) : null}
                   </div>
                 </div>
diff --git a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityHeader.tsx b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityHeader.tsx
index 0f4b2f26..23317b0a 100644
--- a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityHeader.tsx
+++ b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityHeader.tsx
@@ -6,13 +6,13 @@ import TcLink from '../../../shared/TcLink';
 
 function TcYourAccountActivityHeader() {
   return (
-    <div className="flex flex-col-reverse md:flex-row md:justify-between md:items-center">
-      <div className="space-y-3">
-        <TcText text="Your account activity" variant="h6" fontWeight="bold" />
+    <div className='flex flex-col-reverse md:flex-row md:items-center md:justify-between'>
+      <div className='space-y-3'>
+        <TcText text='Your account activity' variant='h6' fontWeight='bold' />
         <TcText
-          text="How much you engage with others"
-          variant="caption"
-          fontWeight="medium"
+          text='How much you engage with others'
+          variant='caption'
+          fontWeight='medium'
         />
       </div>
     </div>
diff --git a/src/context/ChannelContext.tsx b/src/context/ChannelContext.tsx
index deb54d0f..b6894497 100644
--- a/src/context/ChannelContext.tsx
+++ b/src/context/ChannelContext.tsx
@@ -149,14 +149,17 @@ export const ChannelProvider = ({ children }: ChannelProviderProps) => {
         selectedSubChannels[channelId]?.[subChannel.channelId]
     );
 
-    const newSubChannelsState = subChannels.reduce((acc, subChannel) => {
-      if (subChannel.canReadMessageHistoryAndViewChannel) {
-        acc[subChannel.channelId] = !allSelected;
-      } else {
-        acc[subChannel.channelId] = false;
-      }
-      return acc;
-    }, {} as { [subChannelId: string]: boolean });
+    const newSubChannelsState = subChannels.reduce(
+      (acc, subChannel) => {
+        if (subChannel.canReadMessageHistoryAndViewChannel) {
+          acc[subChannel.channelId] = !allSelected;
+        } else {
+          acc[subChannel.channelId] = false;
+        }
+        return acc;
+      },
+      {} as { [subChannelId: string]: boolean }
+    );
 
     setSelectedSubChannels((prev) => ({
       ...prev,
diff --git a/src/layouts/centricLayout.tsx b/src/layouts/centricLayout.tsx
index fe0ee30c..6783b99e 100644
--- a/src/layouts/centricLayout.tsx
+++ b/src/layouts/centricLayout.tsx
@@ -9,12 +9,12 @@ interface ICentricLayout {
 
 function centricLayout({ children }: ICentricLayout) {
   return (
-    <Box className="w-screen min-h-screen" bgcolor="grey.100">
+    <Box className='min-h-screen w-screen' bgcolor='grey.100'>
       <Container
         sx={{ textAlign: 'center', paddingY: '2rem' }}
-        className="space-y-6"
+        className='space-y-6'
       >
-        <Image src={tcLogo} alt={''} className="mx-auto" />
+        <Image src={tcLogo} alt={''} className='mx-auto' />
         {children}
       </Container>
     </Box>
diff --git a/src/layouts/defaultLayout.tsx b/src/layouts/defaultLayout.tsx
index 2ed3c239..a4932257 100644
--- a/src/layouts/defaultLayout.tsx
+++ b/src/layouts/defaultLayout.tsx
@@ -11,10 +11,10 @@ export const defaultLayout = ({ children }: IDefaultLayoutProps) => {
   return (
     <>
       <TcPrompt />
-      <div className="flex flex-col md:flex-row justify-between w-full">
+      <div className='flex w-full flex-col justify-between md:flex-row'>
         <Sidebar />
         <SidebarXs />
-        <main className="md:ml-[100px] xl:ml-[150px] flex-1">{children}</main>
+        <main className='flex-1 md:ml-[100px] xl:ml-[150px]'>{children}</main>
       </div>
     </>
   );
diff --git a/src/layouts/emptyLayout.tsx b/src/layouts/emptyLayout.tsx
index 262f5526..4bad4304 100644
--- a/src/layouts/emptyLayout.tsx
+++ b/src/layouts/emptyLayout.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 type Props = {
   children: React.ReactNode;
@@ -7,7 +7,7 @@ type Props = {
 export const emptyLayout = ({ children }: Props) => {
   return (
     <>
-      <div className="w-screen">
+      <div className='w-screen'>
         <main>{children}</main>
       </div>
     </>
diff --git a/src/lib/attributes/Menu.ts b/src/lib/attributes/Menu.ts
index ab3d7841..5f85b8c9 100644
--- a/src/lib/attributes/Menu.ts
+++ b/src/lib/attributes/Menu.ts
@@ -1,8 +1,8 @@
-const menu =[
-    {
-        name:'test',
-        path:'/',
-    }
-]
+const menu = [
+  {
+    name: 'test',
+    path: '/',
+  },
+];
 
-export default menu;
\ No newline at end of file
+export default menu;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ea9dc52d..00f7011c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -44,7 +44,7 @@ export default function App({ Component, pageProps }: ComponentWithPageLayout) {
     <>
       <AmplitudeAnalytics />
       <SafaryClubScript />
-      <Script id="tawk" strategy="lazyOnload">
+      <Script id='tawk' strategy='lazyOnload'>
         {`
           var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
           (function(){
diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
index a8853d81..fe5bc2df 100644
--- a/src/pages/_error.tsx
+++ b/src/pages/_error.tsx
@@ -17,55 +17,55 @@ const ErrorPage: NextComponentType<
   const router = useRouter();
 
   return (
-    <div className="container">
-      <div className="flex px-3 md:px-0 py-4 md:w-8/12 md:py-4 mx-auto">
-        <Image alt="Image Alt" src={tcLogo} />
+    <div className='container'>
+      <div className='mx-auto flex px-3 py-4 md:w-8/12 md:px-0 md:py-4'>
+        <Image alt='Image Alt' src={tcLogo} />
       </div>{' '}
-      <div className="flex flex-col md:flex-row justify-center p-3 md:p-0 md:space-x-8 items-center md:mt-8">
-        <div className="hidden md:relative md:block md:w-[248px] md:h-[214px]">
+      <div className='flex flex-col items-center justify-center p-3 md:mt-8 md:flex-row md:space-x-8 md:p-0'>
+        <div className='hidden md:relative md:block md:h-[214px] md:w-[248px]'>
           <Image
-            alt="Image Alt"
+            alt='Image Alt'
             src={notFounded}
-            layout="fill"
-            objectFit="contain"
+            layout='fill'
+            objectFit='contain'
           />
         </div>
-        <div className="space-y-8">
-          <h1 className="text-3xl font-bold">
+        <div className='space-y-8'>
+          <h1 className='text-3xl font-bold'>
             Oops! We’re sorry, we couldn’t find <br /> the page you’re looking
             for.{' '}
           </h1>
-          <div className="space-y-3">
-            <p className="font-bold text-md">What could have caused this?</p>
-            <div className="space-y-2">
-              <p className="text-base">
+          <div className='space-y-3'>
+            <p className='text-md font-bold'>What could have caused this?</p>
+            <div className='space-y-2'>
+              <p className='text-base'>
                 The link you clicked might be old and does not work anymore.
               </p>
-              <p className="text-sm">
+              <p className='text-sm'>
                 Or you might have accidentally typed the wrong URL in the
                 address bar.
               </p>
             </div>
           </div>
-          <div className="space-y-3">
-            <p className="font-bold text-md">What you can do</p>
-            <p className="text-sm">
+          <div className='space-y-3'>
+            <p className='text-md font-bold'>What you can do</p>
+            <p className='text-sm'>
               You might retype the URL or try some helpful links instead:
             </p>
           </div>
-          <div className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between md:space-x-2">
+          <div className='flex flex-col justify-between space-y-2 md:flex-row md:space-y-0 md:space-x-2'>
             <TcButton
               text={'Community Insights'}
-              variant="outlined"
+              variant='outlined'
               onClick={() => router.push('/')}
-              className="md:w-1/2 py-2"
+              className='py-2 md:w-1/2'
             />
             <TcButton
               onClick={() => router.push('/centric')}
               classes={'text-black'}
-              variant="outlined"
+              variant='outlined'
               text={'Connect your community'}
-              className="md:w-1/2 py-2"
+              className='py-2 md:w-1/2'
             />
           </div>
         </div>
diff --git a/src/pages/announcements/create-new-announcements.tsx b/src/pages/announcements/create-new-announcements.tsx
index 03448945..4155f306 100644
--- a/src/pages/announcements/create-new-announcements.tsx
+++ b/src/pages/announcements/create-new-announcements.tsx
@@ -128,8 +128,8 @@ function CreateNewAnnouncements() {
 
   return (
     <>
-      <SEO titleTemplate="Create Announcement" />
-      <div className="flex flex-col container px-4 md:px-12 py-4 space-y-3">
+      <SEO titleTemplate='Create Announcement' />
+      <div className='container flex flex-col space-y-3 px-4 py-4 md:px-12'>
         <TcBreadcrumbs
           items={[
             { label: 'Announcement Scheduling', path: '/announcements' },
@@ -138,8 +138,8 @@ function CreateNewAnnouncements() {
         />
         <TcBoxContainer
           contentContainerChildren={
-            <div className="flex flex-col justify-between p-4 md:px-10 min-h-[92dvh]">
-              <div className="space-y-4">
+            <div className='flex min-h-[92dvh] flex-col justify-between p-4 md:px-10'>
+              <div className='space-y-4'>
                 <TcSelectPlatform isEdit={false} />
                 <TcScheduleAnnouncement
                   handleSchaduledDate={({ selectedTime }) => {
@@ -166,16 +166,16 @@ function CreateNewAnnouncements() {
                     });
                   }}
                 />
-                <div className="flex flex-row items-center space-x-3">
+                <div className='flex flex-row items-center space-x-3'>
                   <TcIconContainer>
                     <MdOutlineAnnouncement size={20} />
                   </TcIconContainer>
                   <TcText
-                    text="Smart Announcements"
-                    variant="body1"
-                    fontWeight="700"
+                    text='Smart Announcements'
+                    variant='body1'
+                    fontWeight='700'
                   />
-                  <TcText text="Coming Soon..." variant="subtitle1" />
+                  <TcText text='Coming Soon...' variant='subtitle1' />
                 </div>
                 {/* <TcPrivateMessageContainer
                   handlePrivateAnnouncements={({
@@ -226,11 +226,11 @@ function CreateNewAnnouncements() {
                   }}
                 /> */}
               </div>
-              <div className="flex flex-col md:flex-row justify-between items-center space-y-3 pt-6 md:pt-8">
+              <div className='flex flex-col items-center justify-between space-y-3 pt-6 md:flex-row md:pt-8'>
                 <TcButton
-                  text="Cancel"
+                  text='Cancel'
                   onClick={() => router.push('/announcements')}
-                  variant="outlined"
+                  variant='outlined'
                   sx={{
                     maxWidth: {
                       xs: '100%',
@@ -238,10 +238,10 @@ function CreateNewAnnouncements() {
                     },
                   }}
                 />
-                <div className="flex flex-col md:flex-row items-center md:space-x-3 w-full space-y-3 md:space-y-0 md:w-auto">
+                <div className='flex w-full flex-col items-center space-y-3 md:w-auto md:flex-row md:space-x-3 md:space-y-0'>
                   <TcButton
-                    text="Save as Draft"
-                    variant="outlined"
+                    text='Save as Draft'
+                    variant='outlined'
                     disabled={
                       !scheduledAt ||
                       !isDateValid ||
diff --git a/src/pages/announcements/edit-announcements/index.tsx b/src/pages/announcements/edit-announcements/index.tsx
index 678688fd..c353471b 100644
--- a/src/pages/announcements/edit-announcements/index.tsx
+++ b/src/pages/announcements/edit-announcements/index.tsx
@@ -180,8 +180,8 @@ function Index() {
 
   return (
     <>
-      <SEO titleTemplate="Edit Announcement" />
-      <div className="flex flex-col container px-4 md:px-12 py-4 space-y-3">
+      <SEO titleTemplate='Edit Announcement' />
+      <div className='container flex flex-col space-y-3 px-4 py-4 md:px-12'>
         <TcBreadcrumbs
           items={[
             { label: 'Announcement Scheduling', path: '/announcements' },
@@ -190,8 +190,8 @@ function Index() {
         />
         <TcBoxContainer
           contentContainerChildren={
-            <div className="flex flex-col justify-between p-4 md:p-10 min-h-[92dvh]">
-              <div className="space-y-4">
+            <div className='flex min-h-[92dvh] flex-col justify-between p-4 md:p-10'>
+              <div className='space-y-4'>
                 <TcSelectPlatform isEdit={true} />
                 <TcScheduleAnnouncement
                   isEdit={true}
@@ -222,16 +222,16 @@ function Index() {
                     });
                   }}
                 />
-                <div className="flex flex-row items-center space-x-3">
+                <div className='flex flex-row items-center space-x-3'>
                   <TcIconContainer>
                     <MdOutlineAnnouncement size={20} />
                   </TcIconContainer>
                   <TcText
-                    text="Smart Announcements"
-                    variant="body1"
-                    fontWeight="700"
+                    text='Smart Announcements'
+                    variant='body1'
+                    fontWeight='700'
                   />
-                  <TcText text="Coming Soon..." variant="subtitle1" />
+                  <TcText text='Coming Soon...' variant='subtitle1' />
                 </div>
                 {/* <TcPrivateMessageContainer
                   isEdit={true}
@@ -284,7 +284,7 @@ function Index() {
                   }}
                 /> */}
               </div>
-              <div className="flex flex-col md:flex-row justify-end items-center space-y-3 pt-6 md:pt-12">
+              <div className='flex flex-col items-center justify-end space-y-3 pt-6 md:flex-row md:pt-12'>
                 <TcConfirmSchaduledAnnouncementsDialog
                   buttonLabel={'Save'}
                   selectedChannels={channels}
diff --git a/src/pages/announcements/index.tsx b/src/pages/announcements/index.tsx
index 2e8c06c6..9aeaa9c7 100644
--- a/src/pages/announcements/index.tsx
+++ b/src/pages/announcements/index.tsx
@@ -162,27 +162,27 @@ function Index() {
 
   return (
     <>
-      <SEO titleTemplate="Announcements" />
+      <SEO titleTemplate='Announcements' />
       {!announcementsPermissions && <TcAnnouncementsAlert />}
-      <div className="flex flex-col container px-4 md:px-12 py-4">
+      <div className='container flex flex-col px-4 py-4 md:px-12'>
         <TcBoxContainer
           contentContainerChildren={
-            <div className="flex flex-col justify-between p-4 md:p-10 space-y-4 min-h-[97dvh] max-h-[97dvh]">
-              <div className="flex-grow overflow-auto min-h-[calc(100vh-100px)]">
-                <div className="flex flex-col md:flex-row md:justify-between space-y-3 md:space-y-0 md:items-center">
-                  <TcText text="Announcement Scheduling" variant="h5" />
+            <div className='flex max-h-[97dvh] min-h-[97dvh] flex-col justify-between space-y-4 p-4 md:p-10'>
+              <div className='min-h-[calc(100vh-100px)] flex-grow overflow-auto'>
+                <div className='flex flex-col space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0'>
+                  <TcText text='Announcement Scheduling' variant='h5' />
                   <TcButton
-                    text="Create Announcement"
+                    text='Create Announcement'
                     startIcon={<BsPlus />}
-                    variant="outlined"
+                    variant='outlined'
                     onClick={() =>
                       router.push('/announcements/create-new-announcements')
                     }
                   />
                 </div>
-                <div className="flex flex-col md:flex-row justify-between space-y-3 md:space-y-0 items-center mt-8 mb-4">
+                <div className='mt-8 mb-4 flex flex-col items-center justify-between space-y-3 md:flex-row md:space-y-0'>
                   <TcButton
-                    variant="outlined"
+                    variant='outlined'
                     startIcon={<MdCalendarMonth />}
                     onClick={handleClick}
                     text={dateTimeDisplay}
@@ -199,7 +199,7 @@ function Index() {
                   <TcTimeZone handleZone={setSelectedZone} />
                 </div>
                 {fetchedAnnouncements.results.length > 0 ? (
-                  <div className="overflow-x-scroll md:overflow-hidden">
+                  <div className='overflow-x-scroll md:overflow-hidden'>
                     <TcAnnouncementsTable
                       announcements={
                         fetchedAnnouncements.results
@@ -212,23 +212,23 @@ function Index() {
                     />
                   </div>
                 ) : (
-                  <div className="text-center mx-auto flex flex-col justify-center h-[65dvh] w-9/12 md:w-4/12">
+                  <div className='mx-auto flex h-[65dvh] w-9/12 flex-col justify-center text-center md:w-4/12'>
                     <TcText
-                      text="No announcements yet"
-                      variant="h6"
-                      fontWeight="bold"
+                      text='No announcements yet'
+                      variant='h6'
+                      fontWeight='bold'
                     />
                     <TcText
-                      text="Your announcements will show up for the month and timezone selected once you create them"
-                      variant="body2"
-                      className="text-gray-400"
+                      text='Your announcements will show up for the month and timezone selected once you create them'
+                      variant='body2'
+                      className='text-gray-400'
                     />
                   </div>
                 )}
               </div>
-              <div className="sticky bottom-0 bg-white px-4 py-2 min-h-[70px]">
+              <div className='sticky bottom-0 min-h-[70px] bg-white px-4 py-2'>
                 {fetchedAnnouncements.totalResults > 8 && (
-                  <div className="flex justify-end">
+                  <div className='flex justify-end'>
                     <TcPagination
                       totalItems={fetchedAnnouncements.totalResults}
                       itemsPerPage={Math.ceil(
diff --git a/src/pages/callback.tsx b/src/pages/callback.tsx
index 7ce0c5f1..ef220fc8 100644
--- a/src/pages/callback.tsx
+++ b/src/pages/callback.tsx
@@ -176,7 +176,7 @@ function Callback() {
     }
   }, [router.isReady]);
 
-  return <SimpleBackdrop data-testid="loading-backdrop" />;
+  return <SimpleBackdrop data-testid='loading-backdrop' />;
 }
 
 export default Callback;
diff --git a/src/pages/centric/create-new-community.tsx b/src/pages/centric/create-new-community.tsx
index cf13cdaa..cfbcf692 100644
--- a/src/pages/centric/create-new-community.tsx
+++ b/src/pages/centric/create-new-community.tsx
@@ -41,44 +41,44 @@ function CreateNewCommunity() {
   }
   return (
     <TcBoxContainer
-      bgcolor="white"
-      className="rounded p-4 md:p-16 min-h-[37.5rem]"
+      bgcolor='white'
+      className='min-h-[37.5rem] rounded p-4 md:p-16'
       contentContainerChildren={
-        <div className="space-y-8 pt-10">
-          <TcText text="Create a new community account" variant={'h4'} />
-          <div className="space-y-2">
+        <div className='space-y-8 pt-10'>
+          <TcText text='Create a new community account' variant={'h4'} />
+          <div className='space-y-2'>
             <TcText
-              className="text-left md:text-center"
-              text="What is the name of the community or organization?"
-              fontWeight="bold"
+              className='text-left md:text-center'
+              text='What is the name of the community or organization?'
+              fontWeight='bold'
               sx={{ typography: { xs: 'body2', md: 'body1' } }}
             />
             <TcInput
-              label="Community name"
-              variant="filled"
-              placeholder="Write community name Placeholder"
+              label='Community name'
+              variant='filled'
+              placeholder='Write community name Placeholder'
               onChange={(e) => setCommunityName(e.target.value)}
             />
           </div>
           <FormControlLabel
             label={
               <TcText
-                className="text-left md:text-center"
+                className='text-left md:text-center'
                 text={
                   <>
                     {'I understand and agree to the '}
                     <TcLink
                       to={'https://www.togethercrew.com/privacy-and-terms'}
-                      color="primary"
-                      fontWeight="bold"
+                      color='primary'
+                      fontWeight='bold'
                     >
                       Privacy Policy
                     </TcLink>
                     {' and '}
                     <TcLink
                       to={'https://www.togethercrew.com/privacy-and-terms'}
-                      color="primary"
-                      fontWeight="bold"
+                      color='primary'
+                      fontWeight='bold'
                     >
                       Terms of Service.
                     </TcLink>
@@ -89,17 +89,17 @@ function CreateNewCommunity() {
             }
             control={
               <TcCheckbox
-                color="secondary"
+                color='secondary'
                 onChange={(e) => setReadTermsAndCondition(e.target.checked)}
               />
             }
           />
           <div>
             <TcButton
-              text="Create community"
-              variant="contained"
+              text='Create community'
+              variant='contained'
               sx={{ width: '15rem', padding: '0.5rem' }}
-              color="secondary"
+              color='secondary'
               disabled={!readTermsAndCondition}
               onClick={() => handleCreateNewCommunitie()}
             />
diff --git a/src/pages/centric/index.tsx b/src/pages/centric/index.tsx
index c6ea8714..012c5c39 100644
--- a/src/pages/centric/index.tsx
+++ b/src/pages/centric/index.tsx
@@ -10,28 +10,28 @@ function Index() {
   return (
     <div>
       <TcBoxContainer
-        bgcolor="white"
-        className="rounded py-12 px-4 md:p-12 md:min-h-[37.5rem]"
+        bgcolor='white'
+        className='rounded py-12 px-4 md:min-h-[37.5rem] md:p-12'
         contentContainerChildren={
-          <div className="space-y-8 py-12">
+          <div className='space-y-8 py-12'>
             <TcText
               sx={{ typography: { xs: 'h5', md: 'h4' } }}
-              color="initial"
-              fontWeight="bold"
-              text="Log in"
+              color='initial'
+              fontWeight='bold'
+              text='Log in'
             />
-            <div className="block">
+            <div className='block'>
               <TcButton
                 text={'Log in with Discord'}
                 sx={{ width: '15rem', padding: '0.5rem' }}
-                variant="contained"
+                variant='contained'
                 onClick={() => discordAuthorization()}
               />
             </div>
             <TcText
-              variant="body1"
-              color="initial"
-              text="More log-in options comming soon."
+              variant='body1'
+              color='initial'
+              text='More log-in options comming soon.'
             />
           </div>
         }
diff --git a/src/pages/centric/select-community.tsx b/src/pages/centric/select-community.tsx
index 2cfd6858..15140bd4 100644
--- a/src/pages/centric/select-community.tsx
+++ b/src/pages/centric/select-community.tsx
@@ -7,9 +7,9 @@ function SelectCommunity() {
   return (
     <>
       <TcBoxContainer
-        data-testid="tcbox-container"
-        bgcolor="white"
-        className="rounded p-4 py-6 md:p-12 md:min-h-[43.75rem]"
+        data-testid='tcbox-container'
+        bgcolor='white'
+        className='rounded p-4 py-6 md:min-h-[43.75rem] md:p-12'
         contentContainerChildren={<TcSelectCommunity />}
       />
     </>
diff --git a/src/pages/centric/tac.tsx b/src/pages/centric/tac.tsx
index cfdff9dd..2b393fbe 100644
--- a/src/pages/centric/tac.tsx
+++ b/src/pages/centric/tac.tsx
@@ -46,19 +46,19 @@ function Tac() {
   return (
     <div>
       <TcBoxContainer
-        bgcolor="white"
-        className="rounded py-12 px-4 md:p-12 md:min-h-[37.5rem]"
+        bgcolor='white'
+        className='rounded py-12 px-4 md:min-h-[37.5rem] md:p-12'
         contentContainerChildren={
-          <div className="space-y-6 py-12">
+          <div className='space-y-6 py-12'>
             <TcText
               sx={{ typography: { xs: 'h5', md: 'h4' }, fontWeight: 'bold' }}
-              color="initial"
-              text="One more thing..."
+              color='initial'
+              text='One more thing...'
             />
             <TcText
-              variant="body1"
-              className="text-left md:text-center"
-              color="initial"
+              variant='body1'
+              className='text-left md:text-center'
+              color='initial'
               text={
                 <>
                   Please take a moment to familiarize yourself with <br /> our
@@ -69,14 +69,14 @@ function Tac() {
             <FormControlLabel
               label={
                 <TcText
-                  className="text-left md:text-center"
+                  className='text-left md:text-center'
                   text={
                     <>
                       {'I understand and agree to the '}
                       <TcLink
                         to={'https://www.togethercrew.com/privacy-and-terms'}
-                        color="primary"
-                        fontWeight="bold"
+                        color='primary'
+                        fontWeight='bold'
                       >
                         Privacy Policy and Terms of Service.
                       </TcLink>
@@ -87,15 +87,15 @@ function Tac() {
               }
               control={
                 <TcCheckbox
-                  color="secondary"
+                  color='secondary'
                   onChange={(e) => setAcceptPrivacyAndPolicy(e.target.checked)}
                 />
               }
             />
-            <div className="block py-5">
+            <div className='block py-5'>
               <TcButton
                 text={'Continue'}
-                variant="contained"
+                variant='contained'
                 sx={{ width: '15rem', padding: '0.5rem' }}
                 disabled={!acceptPrivacyAndPolicy}
                 onClick={() => handleAcceptTerms()}
diff --git a/src/pages/community-health.tsx b/src/pages/community-health.tsx
index c4451da3..2bd10a24 100644
--- a/src/pages/community-health.tsx
+++ b/src/pages/community-health.tsx
@@ -42,10 +42,10 @@ function CommunityHealth() {
 
   return (
     <>
-      <SEO titleTemplate="Community Health" />
-      <div className="flex flex-col container justify-between px-4 md:px-12 py-3 space-y-4">
+      <SEO titleTemplate='Community Health' />
+      <div className='container flex flex-col justify-between space-y-4 px-4 py-3 md:px-12'>
         <HeaderSection />
-        <h3 className="pb-6 pt-4 text-lg font-medium text-lite-black">
+        <h3 className='pb-6 pt-4 text-lg font-medium text-lite-black'>
           Community Health
         </h3>
         <Fragmentation scoreData={fragmentationScoreData} />
diff --git a/src/pages/community-settings/index.tsx b/src/pages/community-settings/index.tsx
index a7835f67..2b28d601 100644
--- a/src/pages/community-settings/index.tsx
+++ b/src/pages/community-settings/index.tsx
@@ -47,13 +47,13 @@ function index() {
 
   return (
     <>
-      <SEO titleTemplate="Community Settings" />
-      <div className="flex flex-col container px-4 md:px-12 py-4">
+      <SEO titleTemplate='Community Settings' />
+      <div className='container flex flex-col px-4 py-4 md:px-12'>
         <TcBoxContainer
           contentContainerChildren={
-            <div className="px-4 md:px-10 pt-4 pb-[4rem] space-y-4">
-              <TcText text="Community Settings" variant={'h5'} />
-              <div className="space-y-2">
+            <div className='space-y-4 px-4 pt-4 pb-[4rem] md:px-10'>
+              <TcText text='Community Settings' variant={'h5'} />
+              <div className='space-y-2'>
                 <TcSwitchCommunity />
                 <TcCommunityIntegrations />
               </div>
diff --git a/src/pages/community-settings/platform/index.tsx b/src/pages/community-settings/platform/index.tsx
index f1f6e5a3..e5a451cb 100644
--- a/src/pages/community-settings/platform/index.tsx
+++ b/src/pages/community-settings/platform/index.tsx
@@ -7,8 +7,8 @@ import { defaultLayout } from '../../../layouts/defaultLayout';
 function Index() {
   return (
     <>
-      <SEO titleTemplate="Community Platform" />
-      <div className="flex flex-col container px-4 md:px-12 py-4">
+      <SEO titleTemplate='Community Platform' />
+      <div className='container flex flex-col px-4 py-4 md:px-12'>
         <TcBreadcrumbs
           items={[
             { label: 'Community Settings', path: '/community-settings' },
diff --git a/src/pages/growth.tsx b/src/pages/growth.tsx
index 8cd3cee8..569bb1b8 100644
--- a/src/pages/growth.tsx
+++ b/src/pages/growth.tsx
@@ -126,20 +126,20 @@ function growth() {
 
   return (
     <>
-      <SEO titleTemplate="Twitter Growth" />
-      <div className="flex flex-col container px-4 md:px-12 py-4">
+      <SEO titleTemplate='Twitter Growth' />
+      <div className='container flex flex-col px-4 py-4 md:px-12'>
         <TcBoxContainer
           titleContainerChildren={
-            <div className="bg-info text-white px-10 py-3">
+            <div className='bg-info px-10 py-3 text-white'>
               <TcText
                 text={'Twitter analysis'}
                 variant={'h4'}
-                fontWeight="bold"
+                fontWeight='bold'
               />
             </div>
           }
           contentContainerChildren={
-            <div className="px-4 md:px-10 pt-4 pb-[4rem] space-y-8">
+            <div className='space-y-8 px-4 pt-4 pb-[4rem] md:px-10'>
               <TcAccountActivity account={data.account} />
               <TcYourAccountActivity activity={data.activity} />
               <TcAudienceResponse audience={data.audience} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a5613a93..54c01a95 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,7 +16,7 @@ function Dashboard(): JSX.Element {
     return (
       <>
         <SEO />
-        <EmptyState image={<Image alt="Image Alt" src={emptyState} />} />
+        <EmptyState image={<Image alt='Image Alt' src={emptyState} />} />
       </>
     );
   }
@@ -24,12 +24,12 @@ function Dashboard(): JSX.Element {
   return (
     <>
       <SEO />
-      <div className="flex flex-col container space-y-8 justify-between px-4 md:px-12 py-4">
-        <div className="block">
-          <h3 className="pb-6 text-lg font-medium text-lite-black">
+      <div className='container flex flex-col justify-between space-y-8 px-4 py-4 md:px-12'>
+        <div className='block'>
+          <h3 className='pb-6 text-lg font-medium text-lite-black'>
             Community Insights
           </h3>
-          <div className="space-y-4">
+          <div className='space-y-4'>
             <ActiveMemberComposition />
             <HeatmapChart />
             <MemberInteractionGraph />
diff --git a/src/pages/membersInteraction.tsx b/src/pages/membersInteraction.tsx
index f296ba19..eded5620 100644
--- a/src/pages/membersInteraction.tsx
+++ b/src/pages/membersInteraction.tsx
@@ -41,8 +41,8 @@ const transformApiResponseToMockData = (apiResponse: any[]) => {
         from.stats === 'SENDER'
           ? '#3AAE2B'
           : from.stats === 'RECEIVER'
-          ? '#FFCB33'
-          : '#804EE1',
+            ? '#FFCB33'
+            : '#804EE1',
       size: getNodeSize(from.radius),
       stats: from.stats,
       ngu: from.ngu,
@@ -58,8 +58,8 @@ const transformApiResponseToMockData = (apiResponse: any[]) => {
         to.stats === 'SENDER'
           ? '#3AAE2B'
           : to.stats === 'RECEIVER'
-          ? '#FFCB33'
-          : '#804EE1',
+            ? '#FFCB33'
+            : '#804EE1',
       size: getNodeSize(to.radius),
       stats: to.stats,
       ngu: to.ngu,
@@ -134,21 +134,21 @@ export default function membersInteraction() {
 
   return (
     <>
-      <SEO titleTemplate="Member interactions" />
-      <div className="flex flex-col container justify-between px-4 md:px-12 py-3">
-        <Link to="/" className="mb-3">
-          <div className="flex items-center text-gray-subtitle text-base hover:text-black">
+      <SEO titleTemplate='Member interactions' />
+      <div className='container flex flex-col justify-between px-4 py-3 md:px-12'>
+        <Link to='/' className='mb-3'>
+          <div className='flex items-center text-base text-gray-subtitle hover:text-black'>
             <AiOutlineLeft />
-            <span className="pl-1">Community Insights</span>
+            <span className='pl-1'>Community Insights</span>
           </div>
         </Link>
-        <Paper className="px-4 md:px-8 py-6 rounded-xl shadow-box space-y-4 overflow-hidden">
-          <h3 className="text-xl font-medium text-lite-black">
+        <Paper className='space-y-4 overflow-hidden rounded-xl px-4 py-6 shadow-box md:px-8'>
+          <h3 className='text-xl font-medium text-lite-black'>
             Member interactions graph
           </h3>
           <p>Data from the last 7 days</p>
-          <div className="flex flex-col md:flex-row md:items-start">
-            <div className="lg:w-11/12 overflow-hidden justify-center items-center">
+          <div className='flex flex-col md:flex-row md:items-start'>
+            <div className='items-center justify-center overflow-hidden lg:w-11/12'>
               <ForceGraphComponent
                 nodes={nodes}
                 links={links}
@@ -156,11 +156,11 @@ export default function membersInteraction() {
                 numberOfnodes={nodes.length}
               />
             </div>
-            <div className="hidden md:flex md:w-1/2 lg:flex-1  justify-end">
+            <div className='hidden justify-end md:flex md:w-1/2  lg:flex-1'>
               <HintBox />
             </div>
           </div>
-          <div className="md:hidden float-left">
+          <div className='float-left md:hidden'>
             <button onClick={handlePopoverOpen}>
               <AiOutlineExclamationCircle size={30} />
             </button>
@@ -181,7 +181,7 @@ export default function membersInteraction() {
                 style: { background: 'none', boxShadow: 'none' },
               }}
             >
-              <div className="p-4">
+              <div className='p-4'>
                 <HintBox />
               </div>
             </Popover>
diff --git a/src/pages/statistics.tsx b/src/pages/statistics.tsx
index f5c60d2a..f495a4ea 100644
--- a/src/pages/statistics.tsx
+++ b/src/pages/statistics.tsx
@@ -267,7 +267,7 @@ const Statistics = () => {
     return (
       <>
         <SEO />
-        <EmptyState image={<Image alt="Image Alt" src={emptyState} />} />
+        <EmptyState image={<Image alt='Image Alt' src={emptyState} />} />
       </>
     );
   }
@@ -283,11 +283,11 @@ const Statistics = () => {
           activeTab === '1' ? 'Active Members' : 'Disengaged Members'
         }
       />
-      <div className="flex flex-col container justify-between px-4 md:px-12 py-3">
-        <Link to="/" className="mb-3">
-          <div className="flex items-center text-gray-subtitle text-base hover:text-black">
+      <div className='container flex flex-col justify-between px-4 py-3 md:px-12'>
+        <Link to='/' className='mb-3'>
+          <div className='flex items-center text-base text-gray-subtitle hover:text-black'>
             <AiOutlineLeft />
-            <span className="pl-1">Community Insights</span>
+            <span className='pl-1'>Community Insights</span>
           </div>
         </Link>{' '}
         <CustomTab
@@ -295,13 +295,13 @@ const Statistics = () => {
           onTabChange={handleTabChange}
           labels={['Active members', 'Disengaged members']}
           content={[
-            <div className="flex flex-col space-y-4">
+            <div className='flex flex-col space-y-4'>
               <Box
                 sx={{
                   typography: 'body5',
                   borderRadius: '0px 14px 14px 14px;',
                 }}
-                className="shadow-lg rounded-md p-6"
+                className='rounded-md p-6 shadow-lg'
               >
                 <ActiveMembersComposition
                   activePeriod={activeMemberDate}
@@ -313,7 +313,7 @@ const Statistics = () => {
                   typography: 'body5',
                   borderRadius: '0px 14px 14px 14px;',
                 }}
-                className="shadow-lg rounded-md p-6"
+                className='rounded-md p-6 shadow-lg'
               >
                 <Onboarding
                   activePeriod={onBoardingMemberDate}
@@ -325,7 +325,7 @@ const Statistics = () => {
                   typography: 'body5',
                   borderRadius: '0px 14px 14px 14px;',
                 }}
-                className="shadow-lg rounded-md p-6"
+                className='rounded-md p-6 shadow-lg'
               >
                 <InteractionsSection
                   activePeriod={activeInteractionDate}
@@ -333,13 +333,13 @@ const Statistics = () => {
                 />
               </Box>
             </div>,
-            <div className="flex flex-col space-y-4">
+            <div className='flex flex-col space-y-4'>
               <Box
                 sx={{
                   typography: 'body5',
                   borderRadius: '0px 14px 14px 14px;',
                 }}
-                className="shadow-lg rounded-md p-6"
+                className='rounded-md p-6 shadow-lg'
               >
                 <DisengagedMembersComposition
                   activePeriod={disengagedMemberDate}
@@ -351,7 +351,7 @@ const Statistics = () => {
                   typography: 'body5',
                   borderRadius: '0px 14px 14px 14px;',
                 }}
-                className="shadow-lg p-6 mb-4"
+                className='mb-4 p-6 shadow-lg'
               >
                 <InactiveMembers
                   activePeriod={inactiveMembersDate}
diff --git a/svg.d.ts b/svg.d.ts
index 586e2939..091d25e2 100644
--- a/svg.d.ts
+++ b/svg.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
-    const content: any
-    export default content
-  }
\ No newline at end of file
+  const content: any;
+  export default content;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 26f64902..4ff97c9f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,7 @@ const colors = {
   secondary: {
     DEFAULT: '#804EE1',
     50: '#F6FDFF',
-    75:'#CCB8F3',
+    75: '#CCB8F3',
     100: '#E3F8FF',
     200: '#BCEEFF',
     300: '#8CD3EA',
@@ -31,7 +31,7 @@ const colors = {
     300: '#F06885',
     400: '#D3546F',
     500: '#FB3E56',
-    600:'#EB3E56'
+    600: '#EB3E56',
   },
   warning: {
     DEFAULT: '#BB6842',
@@ -52,8 +52,8 @@ const colors = {
   },
   green: {
     DEFAULT: '#3AAE2B',
-    100:'#DBF6D7',
-    600:'#3A9E2B'
+    100: '#DBF6D7',
+    600: '#3A9E2B',
   },
   lite: '#F8F8F8',
   'lite-black': '#3E3E3E',
@@ -73,9 +73,9 @@ const colors = {
   'purple-light': '#9971E7',
   'purple-dark': '#673FB5',
   'purple-darker': '#35205E',
-  'gray-subtitle':'#767676',
-  orange:'#FF8022',
-  'gray-border-box':'#AAAAAA',
+  'gray-subtitle': '#767676',
+  orange: '#FF8022',
+  'gray-border-box': '#AAAAAA',
 };
 
 const backgroundImage = {