diff --git a/apps/app/components/integration/delete-import-modal.tsx b/apps/app/components/integration/delete-import-modal.tsx
index b1ae01cc8..8c5ab3803 100644
--- a/apps/app/components/integration/delete-import-modal.tsx
+++ b/apps/app/components/integration/delete-import-modal.tsx
@@ -73,7 +73,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -87,12 +87,12 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
                       <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
+                        className="h-6 w-6 text-red-500"
                         aria-hidden="true"
                       />
                     </span>
@@ -101,16 +101,19 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-gray-500">
-                      Are you sure you want to delete project{" "}
-                      <span className="break-all font-semibold">{data?.service}</span>? All of the
-                      data related to the project will be permanently removed. This action cannot be
-                      undone
+                    <p className="text-sm leading-7 text-brand-secondary">
+                      Are you sure you want to delete import from{" "}
+                      <span className="break-all font-semibold capitalize text-brand-base">
+                        {data?.service}
+                      </span>
+                      ? All of the data related to the import will be permanently removed. This
+                      action cannot be undone.
                     </p>
                   </span>
-                  <div className="text-gray-600">
-                    <p className="text-sm">
-                      To confirm, type <span className="font-medium">delete import</span> below:
+                  <div>
+                    <p className="text-sm text-brand-secondary">
+                      To confirm, type{" "}
+                      <span className="font-medium text-brand-base">delete import</span> below:
                     </p>
                     <Input
                       type="text"
diff --git a/apps/app/components/integration/github/import-configure.tsx b/apps/app/components/integration/github/import-configure.tsx
index 55abe058c..4f5784ffd 100644
--- a/apps/app/components/integration/github/import-configure.tsx
+++ b/apps/app/components/integration/github/import-configure.tsx
@@ -36,7 +36,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
       <div className="flex items-center gap-2 py-5">
         <div className="w-full">
           <div className="font-medium">Configure</div>
-          <div className="text-sm text-gray-600">Set up your GitHub import.</div>
+          <div className="text-sm text-brand-secondary">Set up your GitHub import.</div>
         </div>
         <div className="flex-shrink-0">
           <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
diff --git a/apps/app/components/integration/github/import-confirm.tsx b/apps/app/components/integration/github/import-confirm.tsx
index 3e5ed5808..7b8c507fe 100644
--- a/apps/app/components/integration/github/import-confirm.tsx
+++ b/apps/app/components/integration/github/import-confirm.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
-    <h4 className="font-medium">
+    <h4 className="font-medium text-brand-secondary">
       You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
       Import{'" '}
       to complete the process.
diff --git a/apps/app/components/integration/github/import-data.tsx b/apps/app/components/integration/github/import-data.tsx
index 2b93017c1..18520f0f0 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/apps/app/components/integration/github/import-data.tsx
@@ -36,7 +36,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Repository</h4>
-            <p className="text-gray-500 text-xs">
+            <p className="text-xs text-brand-secondary">
               Select the repository that you want the issues to be imported from.
             </p>
           </div>
@@ -49,7 +49,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                   <SelectRepository
                     integration={integration}
                     value={value ? value.id : null}
-                    label={value ? `${value.full_name}` : "Select Repository"}
+                    label={
+                      value ? (
+                        `${value.full_name}`
+                      ) : (
+                        <span className="text-brand-secondary">Select Repository</span>
+                      )
+                    }
                     onChange={onChange}
                     characterLimit={50}
                   />
@@ -61,7 +67,9 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-gray-500 text-xs">Select the project to import the issues to.</p>
+            <p className="text-xs text-brand-secondary">
+              Select the project to import the issues to.
+            </p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {projects && (
@@ -71,7 +79,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                 render={({ field: { value, onChange } }) => (
                   <CustomSearchSelect
                     value={value}
-                    label={value ? projects.find((p) => p.id === value)?.name : "Select Project"}
+                    label={
+                      value ? (
+                        projects.find((p) => p.id === value)?.name
+                      ) : (
+                        <span className="text-brand-secondary">Select Project</span>
+                      )
+                    }
                     onChange={onChange}
                     options={options}
                     optionsClassName="w-full"
@@ -84,7 +98,9 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-gray-500 text-xs">Set whether you want to sync the issues or not.</p>
+            <p className="text-xs text-brand-secondary">
+              Set whether you want to sync the issues or not.
+            </p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
diff --git a/apps/app/components/integration/github/import-users.tsx b/apps/app/components/integration/github/import-users.tsx
index c1c790396..e609e88d4 100644
--- a/apps/app/components/integration/github/import-users.tsx
+++ b/apps/app/components/integration/github/import-users.tsx
@@ -25,9 +25,9 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
   return (
     <div className="mt-6">
       <div>
-        <div className="grid grid-cols-3 gap-2 text-sm mb-2 font-medium">
-          <div>Name</div>
-          <div>Import as...</div>
+        <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
+          <div className="text-brand-secondary">Name</div>
+          <div className="text-brand-secondary">Import as...</div>
           <div className="text-right">
             {users.filter((u) => u.import !== false).length} users selected
           </div>
diff --git a/apps/app/components/integration/github/repo-details.tsx b/apps/app/components/integration/github/repo-details.tsx
index 61ca8dbb2..2a1d74e4f 100644
--- a/apps/app/components/integration/github/repo-details.tsx
+++ b/apps/app/components/integration/github/repo-details.tsx
@@ -64,20 +64,20 @@ export const GithubRepoDetails: FC<Props> = ({
           <div className="flex items-center justify-between gap-4">
             <div>
               <div className="font-medium">Repository Details</div>
-              <div className="text-sm text-gray-600">Import completed. We have found:</div>
+              <div className="text-sm text-brand-secondary">Import completed. We have found:</div>
             </div>
-            <div className="flex gap-16 mt-4">
-              <div className="text-center flex-shrink-0">
+            <div className="mt-4 flex gap-16">
+              <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
-                <h6 className="text-sm text-gray-500">Issues</h6>
+                <h6 className="text-sm text-brand-secondary">Issues</h6>
               </div>
-              <div className="text-center flex-shrink-0">
+              <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-gray-500">Labels</h6>
+                <h6 className="text-sm text-brand-secondary">Labels</h6>
               </div>
-              <div className="text-center flex-shrink-0">
+              <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
-                <h6 className="text-sm text-gray-500">Users</h6>
+                <h6 className="text-sm text-brand-secondary">Users</h6>
               </div>
             </div>
           </div>
diff --git a/apps/app/components/integration/github/root.tsx b/apps/app/components/integration/github/root.tsx
index 2c9e430db..b8bfb346b 100644
--- a/apps/app/components/integration/github/root.tsx
+++ b/apps/app/components/integration/github/root.tsx
@@ -175,15 +175,13 @@ export const GithubImporterRoot = () => {
     <form onSubmit={handleSubmit(createGithubImporterService)}>
       <div className="space-y-2">
         <Link href={`/${workspaceSlug}/settings/import-export`}>
-          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900">
-            <div>
-              <ArrowLeftIcon className="h-3 w-3" />
-            </div>
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
+            <ArrowLeftIcon className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-gray-200 bg-white p-4">
+        <div className="space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -194,12 +192,12 @@ export const GithubImporterRoot = () => {
                   <div
                     className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
                       index <= activeIntegrationState()
-                        ? `border-[#3F76FF] bg-[#3F76FF] text-white ${
+                        ? `border-brand-accent bg-brand-accent ${
                             index === activeIntegrationState()
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-gray-300"
+                        : "border-brand-base"
                     }`}
                   >
                     <integration.icon
@@ -213,8 +211,8 @@ export const GithubImporterRoot = () => {
                       key={index}
                       className={`border-b px-7 ${
                         index <= activeIntegrationState() - 1
-                          ? `border-[#3F76FF]`
-                          : `border-gray-300`
+                          ? `border-brand-accent`
+                          : `border-brand-base`
                       }`}
                     >
                       {" "}
diff --git a/apps/app/components/integration/github/select-repository.tsx b/apps/app/components/integration/github/select-repository.tsx
index 306b1e90e..a925eced4 100644
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/apps/app/components/integration/github/select-repository.tsx
@@ -16,7 +16,7 @@ import { IWorkspaceIntegration } from "types";
 type Props = {
   integration: IWorkspaceIntegration;
   value: any;
-  label: string;
+  label: string | JSX.Element;
   onChange: (repo: any) => void;
   characterLimit?: number;
 };
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/apps/app/components/integration/github/single-user-select.tsx
index ffb67d728..14f913bff 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/apps/app/components/integration/github/single-user-select.tsx
@@ -64,9 +64,9 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     })) ?? [];
 
   return (
-    <div className="bg-gray-50 px-2 py-3 rounded-md grid grid-cols-3 items-center gap-2">
+    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
       <div className="flex items-center gap-2">
-        <div className="relative h-8 w-8 rounded flex-shrink-0">
+        <div className="relative h-8 w-8 flex-shrink-0 rounded">
           <Image
             src={collaborator.avatar_url}
             layout="fill"
@@ -112,7 +112,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
             setUsers(newUsers);
           }}
           placeholder="Enter email of the user"
-          className="py-1 border-gray-200 text-xs"
+          className="py-1 text-xs"
         />
       )}
       {users[index].import === "map" && members && (
diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx
index ad9ffe559..e61d3ded5 100644
--- a/apps/app/components/integration/guide.tsx
+++ b/apps/app/components/integration/guide.tsx
@@ -52,10 +52,10 @@ const IntegrationGuide = () => {
         handleClose={() => setDeleteImportModal(false)}
         data={importToDelete}
       />
-      <div className="space-y-2 h-full">
+      <div className="h-full space-y-2">
         {!provider && (
           <>
-            <div className="flex items-center gap-2 mb-5">
+            <div className="mb-5 flex items-center gap-2">
               <div className="h-full w-full space-y-1">
                 <div className="text-lg font-medium">Relocation Guide</div>
                 <div className="text-sm">
@@ -72,7 +72,10 @@ const IntegrationGuide = () => {
             </div>
             <div className="space-y-2">
               {IMPORTERS_EXPORTERS_LIST.map((service) => (
-                <div key={service.provider} className="rounded-[10px] border bg-white p-4">
+                <div
+                  key={service.provider}
+                  className="rounded-[10px] border border-brand-base bg-brand-base p-4"
+                >
                   <div className="flex items-center gap-4 whitespace-nowrap">
                     <div className="relative h-10 w-10 flex-shrink-0">
                       <Image
@@ -84,7 +87,7 @@ const IntegrationGuide = () => {
                     </div>
                     <div className="w-full">
                       <h3>{service.title}</h3>
-                      <p className="text-sm text-gray-500">{service.description}</p>
+                      <p className="text-sm text-brand-secondary">{service.description}</p>
                     </div>
                     <div className="flex-shrink-0">
                       <Link
@@ -101,12 +104,12 @@ const IntegrationGuide = () => {
                 </div>
               ))}
             </div>
-            <div className="rounded-[10px] border bg-white p-4">
-              <h3 className="mb-2 font-medium text-lg flex gap-2">
+            <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+              <h3 className="mb-2 flex gap-2 text-lg font-medium">
                 Previous Imports
                 <button
                   type="button"
-                  className="flex-shrink-0 flex items-center gap-1 outline-none text-xs py-1 px-1.5 bg-gray-100 rounded"
+                  className="flex flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs outline-none"
                   onClick={() => {
                     setRefreshing(true);
                     mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
@@ -133,10 +136,12 @@ const IntegrationGuide = () => {
                     </div>
                   </div>
                 ) : (
-                  <div className="py-2 text-sm text-gray-800">No previous imports available.</div>
+                  <p className="py-2 text-sm text-brand-secondary">
+                    No previous imports available.
+                  </p>
                 )
               ) : (
-                <Loader className="grid grid-cols-1 gap-3 mt-6">
+                <Loader className="mt-6 grid grid-cols-1 gap-3">
                   <Loader.Item height="40px" width="100%" />
                   <Loader.Item height="40px" width="100%" />
                   <Loader.Item height="40px" width="100%" />
diff --git a/apps/app/components/integration/jira/confirm-import.tsx b/apps/app/components/integration/jira/confirm-import.tsx
index 79c56bf4b..1945bb501 100644
--- a/apps/app/components/integration/jira/confirm-import.tsx
+++ b/apps/app/components/integration/jira/confirm-import.tsx
@@ -17,30 +17,30 @@ export const JiraConfirmImport: React.FC = () => {
         </div>
 
         <div className="col-span-1">
-          <p className="text-sm text-gray-500">Migrating</p>
+          <p className="text-sm text-brand-secondary">Migrating</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_issues")}</h4>
-            <p className="text-sm text-gray-500">Issues</p>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
+            <p className="text-sm text-brand-secondary">Issues</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_states")}</h4>
-            <p className="text-sm text-gray-500">States</p>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
+            <p className="text-sm text-brand-secondary">States</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_modules")}</h4>
-            <p className="text-sm text-gray-500">Modules</p>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
+            <p className="text-sm text-brand-secondary">Modules</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_labels")}</h4>
-            <p className="text-sm text-gray-500">Labels</p>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
+            <p className="text-sm text-brand-secondary">Labels</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">
+            <h4 className="mb-2 text-lg font-semibold">
               {watch("data.users").filter((user) => user.import).length}
             </h4>
-            <p className="text-sm text-gray-500">User</p>
+            <p className="text-sm text-brand-secondary">User</p>
           </div>
         </div>
       </div>
diff --git a/apps/app/components/integration/jira/give-details.tsx b/apps/app/components/integration/jira/give-details.tsx
index fb4032b68..a47fc67fc 100644
--- a/apps/app/components/integration/jira/give-details.tsx
+++ b/apps/app/components/integration/jira/give-details.tsx
@@ -30,15 +30,11 @@ export const JiraGetImportDetail: React.FC = () => {
     <div className="h-full w-full space-y-8 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Jira Personal Access Token</h3>
-          <p className="text-sm text-gray-500">
+          <h3 className="font-semibold">Jira Personal Access Token</h3>
+          <p className="text-sm text-brand-secondary">
             Get to know your access token by navigating to{" "}
             <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
-              <a
-                className="font-medium text-gray-600 hover:text-gray-900"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <a className="text-brand-accent underline" target="_blank" rel="noreferrer">
                 Atlassian Settings
               </a>
             </Link>
@@ -61,8 +57,8 @@ export const JiraGetImportDetail: React.FC = () => {
 
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Jira Project Key</h3>
-          <p className="text-sm text-gray-500">If XXX-123 is your issue, then enter XXX</p>
+          <h3 className="font-semibold">Jira Project Key</h3>
+          <p className="text-sm text-brand-secondary">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -80,8 +76,8 @@ export const JiraGetImportDetail: React.FC = () => {
 
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-gray-500">
+          <h3 className="font-semibold">Jira Email Address</h3>
+          <p className="text-sm text-brand-secondary">
             Enter the Gmail account that you use in Jira account
           </p>
         </div>
@@ -102,8 +98,8 @@ export const JiraGetImportDetail: React.FC = () => {
 
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Jira Installation or Cloud Host Name</h3>
-          <p className="text-sm text-gray-500">Enter your companies cloud host name</p>
+          <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
+          <p className="text-sm text-brand-secondary">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -122,8 +118,10 @@ export const JiraGetImportDetail: React.FC = () => {
 
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Import to project</h3>
-          <p className="text-sm text-gray-500">Select which project you want to import to.</p>
+          <h3 className="font-semibold">Import to project</h3>
+          <p className="text-sm text-brand-secondary">
+            Select which project you want to import to.
+          </p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -138,9 +136,11 @@ export const JiraGetImportDetail: React.FC = () => {
                 onChange={onChange}
                 label={
                   <span>
-                    {value && value !== ""
-                      ? projects.find((p) => p.id === value)?.name
-                      : "Select Project"}
+                    {value && value !== "" ? (
+                      projects.find((p) => p.id === value)?.name
+                    ) : (
+                      <span className="text-brand-secondary">Select a project</span>
+                    )}
                   </span>
                 }
               >
@@ -151,7 +151,7 @@ export const JiraGetImportDetail: React.FC = () => {
                     </CustomSelect.Option>
                   ))
                 ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500">
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary">
                     <p>You don{"'"}t have any project. Please create a project first.</p>
                   </div>
                 )}
@@ -162,7 +162,7 @@ export const JiraGetImportDetail: React.FC = () => {
                       const event = new KeyboardEvent("keydown", { key: "p" });
                       document.dispatchEvent(event);
                     }}
-                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500"
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary"
                   >
                     <PlusIcon className="h-4 w-4 text-gray-500" />
                     <span>Create new project</span>
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index fa48bc772..da14f7d15 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -52,11 +52,13 @@ export const JiraImportUsers: FC = () => {
     })) ?? [];
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Users</h3>
-          <p className="text-sm text-gray-500">Update, invite or choose not to invite assignee</p>
+          <h3 className="font-semibold">Users</h3>
+          <p className="text-sm text-brand-secondary">
+            Update, invite or choose not to invite assignee
+          </p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -72,8 +74,8 @@ export const JiraImportUsers: FC = () => {
       {watch("data.invite_users") && (
         <div className="pt-6">
           <div className="grid grid-cols-3 gap-3">
-            <div className="col-span-1 text-gray-500">Name</div>
-            <div className="col-span-1 text-gray-500">Import as</div>
+            <div className="col-span-1 text-sm text-brand-secondary">Name</div>
+            <div className="col-span-1 text-sm text-brand-secondary">Import as</div>
           </div>
 
           <div className="mt-5 space-y-3">
diff --git a/apps/app/components/integration/jira/jira-project-detail.tsx b/apps/app/components/integration/jira/jira-project-detail.tsx
index 48220a8c1..2e4061638 100644
--- a/apps/app/components/integration/jira/jira-project-detail.tsx
+++ b/apps/app/components/integration/jira/jira-project-detail.tsx
@@ -102,12 +102,12 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
   if (error) {
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <p className="text-sm text-gray-500">
+        <p className="text-sm text-brand-secondary">
           Something went wrong. Please{" "}
           <button
             onClick={() => setCurrentStep({ state: "import-configure" })}
             type="button"
-            className="inline text-blue-500 underline"
+            className="inline text-brand-accent underline"
           >
             go back
           </button>{" "}
@@ -121,37 +121,37 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
     <div className="h-full w-full space-y-10 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Import Data</h3>
-          <p className="text-sm text-gray-500">Import Completed. We have found:</p>
+          <h3 className="font-semibold">Import Data</h3>
+          <p className="text-sm text-brand-secondary">Import Completed. We have found:</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.issues}</h4>
-            <p className="text-sm text-gray-500">Issues</p>
+            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
+            <p className="text-sm text-brand-secondary">Issues</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.states}</h4>
-            <p className="text-sm text-gray-500">States</p>
+            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
+            <p className="text-sm text-brand-secondary">States</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.modules}</h4>
-            <p className="text-sm text-gray-500">Modules</p>
+            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
+            <p className="text-sm text-brand-secondary">Modules</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.labels}</h4>
-            <p className="text-sm text-gray-500">Labels</p>
+            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
+            <p className="text-sm text-brand-secondary">Labels</p>
           </div>
           <div>
-            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.users?.length}</h4>
-            <p className="text-sm text-gray-500">Users</p>
+            <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
+            <p className="text-sm text-brand-secondary">Users</p>
           </div>
         </div>
       </div>
 
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
-          <h3 className="text-lg font-semibold">Import Epics</h3>
-          <p className="text-sm text-gray-500">Import epics as modules</p>
+          <h3 className="font-semibold">Import Epics</h3>
+          <p className="text-sm text-brand-secondary">Import epics as modules</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
index b9bd732c0..9179c576b 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -106,7 +106,7 @@ export const JiraImporterRoot = () => {
   return (
     <div className="flex h-full flex-col space-y-2">
       <Link href={`/${workspaceSlug}/settings/import-export`}>
-        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900">
+        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
           <div>
             <ArrowLeftIcon className="h-3 w-3" />
           </div>
@@ -114,7 +114,7 @@ export const JiraImporterRoot = () => {
         </div>
       </Link>
 
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-gray-200 bg-white p-4">
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
             <Image src={JiraLogo} alt="jira logo" />
@@ -131,14 +131,14 @@ export const JiraImporterRoot = () => {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-brand-base ${
                     index <= activeIntegrationState()
-                      ? `border-[#3F76FF] bg-[#3F76FF] text-white ${
+                      ? `border-brand-accent bg-brand-accent ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-gray-300"
+                      : "border-brand-base"
                   }`}
                 >
                   <integration.icon
@@ -151,7 +151,9 @@ export const JiraImporterRoot = () => {
                   <div
                     key={index}
                     className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1 ? `border-[#3F76FF]` : `border-gray-300`
+                      index <= activeIntegrationState() - 1
+                        ? `border-brand-accent`
+                        : `border-brand-base`
                     }`}
                   >
                     {" "}
@@ -177,7 +179,7 @@ export const JiraImporterRoot = () => {
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
               </div>
 
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t p-4 pb-0">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-brand-base p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <SecondaryButton
                     onClick={() => {
diff --git a/apps/app/components/integration/single-import.tsx b/apps/app/components/integration/single-import.tsx
index bef5b7301..f513c391f 100644
--- a/apps/app/components/integration/single-import.tsx
+++ b/apps/app/components/integration/single-import.tsx
@@ -18,28 +18,28 @@ const importersList: { [key: string]: string } = {
 };
 
 export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
-  <div className="py-3 flex justify-between items-center gap-2">
+  <div className="flex items-center justify-between gap-2 py-3">
     <div>
-      <h4 className="text-sm flex items-center gap-2">
+      <h4 className="flex items-center gap-2 text-sm">
         <span>
           Import from <span className="font-medium">{importersList[service.service]}</span> to{" "}
           <span className="font-medium">{service.project_detail.name}</span>
         </span>
         <span
-          className={`capitalize px-2 py-0.5 text-xs rounded ${
+          className={`rounded px-2 py-0.5 text-xs capitalize ${
             service.status === "completed"
-              ? "bg-green-100 text-green-500"
+              ? "bg-green-500/20 text-green-500"
               : service.status === "processing"
-              ? "bg-yellow-100 text-yellow-500"
+              ? "bg-yellow-500/20 text-yellow-500"
               : service.status === "failed"
-              ? "bg-red-100 text-red-500"
+              ? "bg-red-500/20 text-red-500"
               : ""
           }`}
         >
           {refreshing ? "Refreshing..." : service.status}
         </span>
       </h4>
-      <div className="text-gray-500 text-xs mt-2 flex items-center gap-2">
+      <div className="mt-2 flex items-center gap-2 text-xs text-brand-secondary">
         <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
         <span>
           Imported by{" "}